class Voronoi { constructor() { // 各種プロパティを初期化します。 this.canvas = null; // 描画領域のキャンバス要素 this.sites = null; // パーティクルの位置情報 this.nbParticles = null; // パーティクルの数 this.speed = null; // パーティクルの速度情報 this.color = null; // セルの色情報 this.voronoi = null; // Voronoi レイアウト this.cellSize = 0; // セルの初期数 } init(classCanvas, nbParticle, initialCellSize) { // 初期化関数 this.canvas = document.querySelector(classCanvas); // キャンバス要素の取得 this.canvas.width = window.innerWidth; // キャンバスの幅をウィンドウの幅に設定 this.canvas.height = window.innerHeight; // キャンバスの高さをウィンドウの高さに設定 window.addEventListener("resize", this.onResize.bind(this), false); // ウィンドウのリサイズイベントを監視 this.nbParticles = nbParticle; // パーティクルの数を設定 this.speed = []; this.color = []; // セルの色情報を初期化 this.strokeColor = []; for(let i = 0; i < this.nbParticles; i++) { this.speed[i] = []; // パーティクルの速度情報を初期化 this.color[i] = this.generateRandomColor(); // ランダムな色を割り当てる this.strokeColor[i] = this.generateRandomColor(); // ランダムな色を割り当てる } // パーティクルの位置情報をランダムに生成 this.sites = d3.range(this.nbParticles) .map(function(d) { return [Math.random() * window.innerWidth, Math.random() * window.innerHeight]; }); this.initRandomSpeed(); // パーティクルの初期速度を設定 this.redraw(); // キャンバスの描画 this.draw(); // アニメーションの開始 this.cellSize = initialCellSize; // セルの初期数を設定 this.canvas.addEventListener('click', this.increaseCellSize.bind(this)); // クリックした位置を基準にセルの数を増やす } generateRandomColor() { // ランダムな配色を生成する関数 const colors = ["#FF85A2", "#FFC700", "#FF6E51", "#66CCCC", "#B97A57", "#71E1FF", "#FFA07A", "#44D7B6", "#B774D3", "#89CFF0"]; return colors[Math.floor(Math.random() * colors.length)]; } increaseCellSize(event) { // クリックした位置を基準にしてセルの数を増やす処理 const x = event.clientX; const y = event.clientY; // 新しいセルの速度情報を追加 if (Math.random() < 0.5) { this.speed.push({ x: -Math.random() + 1, y: -Math.random() + 1 }); } else { this.speed.push({ x: Math.random() + 1, y: Math.random() + 1 }); } // 新しいセルの色を生成して追加 this.color.push(this.generateRandomColor()); this.strokeColor.push(this.generateRandomColor()); // クリックした位置を新しいセルの位置として追加 this.sites.push([x, y]); this.redraw(); // キャンバスの再描画 } initRandomSpeed() { // パーティクルのランダムな初期速度を設定 for (let i = 0; i < this.nbParticles; i++) { if(i%2) { this.speed[i] = { x: -Math.random() + 1, y: -Math.random() + 1 }; } else { this.speed[i] = { x: Math.random() + 1, y: Math.random() + 1 }; } } } // initRandomSpeed() { // // パーティクルの円運動の初期速度を設定 // for (let i = 0; i < this.nbParticles; i++) { // const angle = (i / this.nbParticles) * Math.PI * 2; // 角度を計算 // const speed = Math.random()*2; // 速度を設定 // this.speed[i] = { x: 0, y: 0 }; // } // } rebondOnScreen() { // パーティクルが画面端に到達した場合には反射させる for(let i = 0; i < this.sites.length; i++) { if (this.speed[i]) { if (this.sites[i][0] < 0 || this.sites[i][0] > window.innerWidth) { this.speed[i].x *= -1; } if (this.sites[i][1] < 0 || this.sites[i][1] > window.innerHeight) { this.speed[i].y *= -1; } // 速度に基づいて位置を更新 this.sites[i][0] += this.speed[i].x; this.sites[i][1] += this.speed[i].y; } } } redraw() { // キャンバスの描画を行う const context = this.canvas.getContext("2d"); context.clearRect(0, 0, window.innerWidth, window.innerHeight); // キャンバスをクリア context.beginPath(); /* DrawCells */ const voronoi = d3.voronoi() .extent([[-1, -1], [window.innerWidth + 1, window.innerHeight + 1]]); const diagram = voronoi(this.sites); const polygons = diagram.polygons(); for (let h = 0, n = polygons.length; h < n; ++h) { const cell = polygons[h]; this.drawCell(cell, context); // セルの描画 } // context.fillStyle = "#FFFFFF"; // 重心の色を指定 context.fill(); } drawCell(cell, context) { // セルの描画 if (!cell) return false; context.beginPath(); context.moveTo(cell[0][0], cell[0][1]); for (let j = 1, m = cell.length; j < m; ++j) { context.lineTo(cell[j][0], cell[j][1]); } context.closePath(); let pointColor; // セルの領域を塗りつぶす for (let i = 0; i < this.sites.length; i++) { if (this.sites[i][0] === cell.data[0] && this.sites[i][1] === cell.data[1]) { context.fillStyle = this.color[i]; // セルの色を割り当てる context.strokeStyle = this.strokeColor[i]; // セルの色を割り当てる //pointColor = this.strokeColor[i]; } } context.fill(); context.lineWidth = 1; // 線幅を設定 context.stroke(); const centroid = this.calculateCentroid(cell); // セルの重心を計算 context.beginPath(); context.arc(centroid[0], centroid[1], 3, 0, Math.PI * 2); // 重心に円を描画 context.fillStyle = "#FF85A2"; context.fill(); return true; } calculateCentroid(cell) { // セルの重心を計算する関数 let x = 0, y = 0; for (let i = 0; i < cell.length; i++) { x += cell[i][0]; y += cell[i][1]; } x /= cell.length; y /= cell.length; return [x, y]; } draw() { // アニメーションの描画 requestAnimationFrame(this.draw.bind(this)); this.rebondOnScreen(); // 画面端での反射処理 this.redraw(); // キャンバスの再描画 } onResize() { // ウィンドウのリサイズ時の処理 this.canvas = document.querySelector(".canvas"); this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; // パーティクルの位置情報をリサイズ後の画面サイズに合わせて再生成 this.sites = d3.range(this.nbParticles) .map(function(d) { return [Math.random() * window.innerWidth, Math.random() * window.innerHeight]; }); } } //Launcher const myVoronoi = new Voronoi(); myVoronoi.init(".canvas", 1); // 初期化関数の呼び出し

#d3.js