日常の進捗

主に自分のための,行為とその習慣化の記録

#Codevember day12: Bread

お題が「Bread」だったので🍞をつかってp5.jsのグラフィックス機能(レイヤーみたいなやつ)を使ってみた.

ProcessingでいうところのPGraphicsとの挙動が違う点が現時点ではあったのでちょっとハマった.

  • beginDraw,endDrawは使わない.
  • グラフィクスに描画してもその値を参照するためには(pg.get(x,y)みたいに),一度画面に描画する必要がある.画面外でもOKみたいだ.
  • カラーモードは原則RGBでやるのが良いようだ(HSB,RGBの切り替えはまた確認する).
let pg;
let tSize;
function setup() {
  createCanvas(windowWidth, windowHeight);
  tSize = width *  2/5; 
  pg = createGraphics(width, height);
  pg.textSize(tSize);
  pg.textAlign(CENTER, CENTER);
  pg.text("🍞", pg.width / 2, pg.height / 2 + 20);
}

function draw() {
  background(220);
  image(pg, width, 0);
  let grid = map(mouseX, 0, width, 50, 5);   
  for (let y = 0; y < height; y = y + grid) {
    for (let x = 0; x < width; x = x + grid) {
      let c = pg.get(x, y);
      fill(c);
      stroke(255, 10);
      rect(x, y, grid, grid);
    }
  }
}