#Codevember day07: Sea
乗算をすると海の深さが表現できるかなと思ってblendMode
を使ってみた.見ている時間で背景の色が変わるようにしている.レイヤーの合成の概念はもう少しきちんと理解しておきたいけど,ひとまず.
let font; let gridY; let gridX; let noiseScaleX = 250; let noiseScaleY = 30; let noiseScaleZ = 100; function preload(){ font = loadFont("Lato-Italic.ttf"); } function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 100); } function draw() { let mX = map(mouseX,0,width,30,100); let mY = map(mouseY,0,height,30,10); gridY = height / mY; gridX = width / mX; let h = hour(); let m = minute(); let s = second(); //全ての時間を角度に変更する //24時間 = 24時間 * 60分 = 24 * 60 * 60 秒 let max_seconds = 24 * 60 * 60; let current_seconds = h * 60 * 60 + m * 60 + s; let hue = map(current_seconds,0,max_seconds,0,360); blendMode(NORMAL); background(hue,50,30); blendMode(MULTIPLY); for (let y = height * 1 / 2 - 50; y < height; y = y + gridY) { beginShape(); noStroke(); fill(220,80,100,mY); for (let x = 0; x <= width+50; x = x + gridX) { let n = noise(x / noiseScaleX, y / noiseScaleY, frameCount / noiseScaleZ); n = map(n, 0, 1, -gridY, gridY); let ny = y + n; vertex(x, ny); } vertex(width+50, height); vertex(0, height); endShape(CLOSE); } blendMode(NORMAL); textFont(font); textSize(30); fill(0, 0, 100); noStroke(); text("#Codevember\nday07: Sea", 20, 40); }