Colorful Waves

// by SamuelYAN

// more works //

// https://twitter.com/SamuelAnn0924

// https://www.instagram.com/samuel_yan_1990/

​

// reference: https://gorillasun.de/blog/Smooth-Curves-with-Perlin-Noise-and-Recreating-the-Unknown-Pleasures-Album-Cover-in-P5

​

var seed = Math.random() * 1000;

var xOff, yOff, dir, plus, wave_h, t;

var color1, color2,color0;

let colors1 = "e3d7a3-f5989d-ea618e-fce4d6-caac71".split("-").map((a) => "#" + a + "1a"); //

let colors12 = "e3d7a3-f5989d-ea618e-fce4d6-caac71".split("-").map((a) => "#" + a + "00");

let colors2 = "6cbbd4-5863b1-5282a1-fee8f7-c1f29b".split("-").map((a) => "#" + a + "1a");

let colors22 = "6cbbd4-5863b1-5282a1-fee8f7-c1f29b".split("-").map((a) => "#" + a + "00");

let colors3 = "1b1b1b-292929-f3f3f3-222222-ff0000".split("-").map((a) => "#" + a + "1a");

let colors32 = "1b1b1b-292929-f3f3f3-222222-ff0000".split("-").map((a) => "#" + a + "00");

let colors4 = "70c1b3-aaf0d3-50514f-ffe066-247ba0".split("-").map((a) => "#" + a + "1a");

let colors42 = "70c1b3-aaf0d3-50514f-ffe066-247ba0".split("-").map((a) => "#" + a + "00");

let colors5 = "3c1642-386375-086375-b2ff9e-1dd3b0".split("-").map((a) => "#" + a + "1a");

let colors52 = "3c1642-386375-086375-b2ff9e-1dd3b0".split("-").map((a) => "#" + a + "00");

let colorbg = "ffffff".split("-").map((a) => "#" + a);

let colorbg2 = "ffffff07".split("-").map((a) => "#" + a);

var grad;

let filter;

​

function setup() {

  randomSeed(seed);

  createCanvas(4/3*windowHeight, windowHeight);

  // pixelDensity(5);

  color0 = random([colors1, colors2, colors3, colors4, colors5]);

  color1 = random([colors1, colors2, colors3, colors4, colors5]);

  color2 = random([colors12, colors22, colors32, colors42, colors52]);

  background(colorbg);

  yOff = 0;

  dir = 1;

  plus = 0.1;

  wave_h = int(random(100, 50));

  t = 0;

  filter = new makeFilter();

}

​

function draw() {

  randomSeed(seed);

  // background(colorbg);

  noFill();

  let num = int(random(20, 20));

  let mountain_h = int(height / num);

  for (let n = 0; n < height; n += mountain_h) {

    push();

    translate(0, mountain_h / 2 + n);

    if (n == int(random(num / 2, num / 3 * 2)) * mountain_h) {

      color1 = "b05aff-a260bf-704cbc-836dc5".split("-").map((a) => "#" + a + "1a");

    } 

    else {

      color1 = color0;

    }

    grad = drawingContext.createLinearGradient(0, -mountain_h, 0, mountain_h);

    grad.addColorStop(0, random(color1));

    grad.addColorStop(1, random(color1));

    drawingContext.strokeStyle = grad;

​

    strokeWeight(random(1));

    xOff = random(100, 50);

    beginShape();

    curveVertex(xOff, 0)

    for (let i = xOff * 3; i < width - 3 * xOff; i += int(random(25, 50))) {

      let p = 0;

      if (int(i) % 3 == 1) {

        p = random(-1, 1);

      }

​

      curveVertex(i, sin(i + t) * random([-1, 1]) * p * yOff)

    }

    curveVertex(width - 3 * xOff, yOff)

    endShape();

    pop();

  }

  if (dir == 1) {

    if (yOff < wave_h) {

      dir = 1;

    } else if (yOff >= wave_h) {

      dir = -1;

      plus = random(0.1);

    }

  } else if (dir == -1) {

    if (yOff > 0) {

      dir = -1;

    } else if (yOff <= 0) {

      dir = 1;

      plus = random(0.1);

    }

  }

​

  yOff += plus * dir;

  t += 1;

  // image(overAllTexture, 0, 0);

}

​

function makeFilter() {

  // noiseのフィルターをつくる

  colorMode(HSB, 360, 100, 100, 100);

  drawingContext.shadowColor = color(0, 0, 5, 95);

  overAllTexture = createGraphics(width, height);

  overAllTexture.loadPixels();

  for (var i = 0; i < width; i++) {

    for (var j = 0; j < height; j++) {

      overAllTexture.set(

        i,

        j,

        color(

          0,

          0,

          99,

          noise(i / 3, j / 3, (i * j) / 50) * random(5, 15)

        )

      );

    }

  }

  overAllTexture.updatePixels();

}

​

let lapse = 0;    // mouse timer

function mousePressed(){

// prevents mouse press from registering twice

  if (millis() - lapse > 400){

    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() +

    ".jpg");

    lapse = millis();

  }

}