日常の進捗

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

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