Chapter 83

点描

miku
miku
2021.11.19に更新
このチャプターの目次

実行結果

解説

画像内にあるランダムなピクセルを取得し、そのピクセルの座標にピクセルの色で円を描画する。

コード例

let img, ratio;

function preload() {
  img = loadImage("https://raw.githubusercontent.com/BaroqueEngine/cc/main/83/0.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  ratio = width / img.width;
  img.loadPixels();
}

function draw() {
  for (let i = 0; i < 20; i++) {
    const x = floor(random(img.width));
    const y = floor(random(img.height));
    const color = getPixel(x, y);
    fill(color);
    circle(x * ratio, y * ratio, 10);
  }
}

function getPixel(x, y) {
  const i = (y * img.width + x) * 4;
  return [img.pixels[i], img.pixels[i + 1], img.pixels[i + 2], img.pixels[i + 3]];
}