#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); } } }