歪んだ円を描く

歪んだ円を描く | ひまあそび-ミニゲーム hi0a.com


  view source
  JavaScript
  document.title = '歪んだ円を描く';

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);

canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);

const ctx = canvas.getContext("2d");

const cx = w/2;
const cy = h/2;


function fillWithOrganicCircles() {
  const radius = 40;
  const variation = 10;
  const spacing = radius * 2;
  const rowHeight = radius * Math.sqrt(3);

  for (let y = 0; y < canvas.height + rowHeight; y += rowHeight) {
    for (let x = 0; x < canvas.width + spacing; x += spacing) {
      const offsetX = (Math.floor(y / rowHeight) % 2) * radius; // ハニカム構造
      drawOrganicCircle(x + offsetX, y, radius, variation);
    }
  }
}

function drawOrganicCircle(cx, cy, baseRadius, variation) {
  const points = 100;
  const layers = Array.from({ length: 4 }, () => ({
    freq: Math.floor(Math.random() * 3 + 1),
    amp: Math.random() * 0.5 + 0.5,
  }));

  ctx.beginPath();
  for (let i = 0; i <= points; i++) {
    const angle = (i / points) * 2 * Math.PI;
    let offset = 0;
    for (let l of layers) {
      offset += Math.sin(angle * l.freq) * l.amp;
    }
    const radius = baseRadius + offset * variation * 0.5; // 小さめの変形にする
    const x = cx + radius * Math.cos(angle);
    const y = cy + radius * Math.sin(angle);
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.stroke();
}


fillWithOrganicCircles();
  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-canvas-circle-distorted-fill/
  
  ABOUT
  
    hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    仕様変更、API廃止等、実験途中で動かないページもあります。