NoisePlanet_moody2

 // by SamuelYAN

 // more works //

 // https://twitter.com/SamuelAnn0924

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

​

 var ranges;

 let seed = Math.random() * 847;

 var mySize, margin;

 let ele_ang = 1;

 let theShader;

 let webGLCanvas;

 let originalGraphics;

 let overGraphics;

​

 //color

 let colors = [];

 let colors1, colors2, colorsbg;

 let color1, color2;

 let colorselet = [];

​

 //color blue

 let colors_blue = [];

 let colors_blue1 = "fefefe-ffffff-202020-72cffe-deedfc".split("-").map((a) => "#" + a);

 let colors_blue2 = "012340-162D59-8FB6D9-C9DFF2-1B70A6-4590BF-034C8C".split("-").map((a) => "#" + a);

 let colors_bluebg = "012340-034C8C-021859".split("-").map((a) => "#" + a);

 let color_blue1, color_blue2;

 let colorselet_blue = [];

​

 //color red

 let colors_red = [];

 let colors_red1 = "fefefe-ffffff-202020-F2CFBB-F26F63".split("-").map((a) => "#" + a);

 let colors_red2 = "F2CFBB-F24B78-D90404-F26F63-590202-4A0400-A60F37".split("-").map((a) => "#" + a);

 let colors_redbg = "590202-4A0400-A60F37".split("-").map((a) => "#" + a);

 let color_red1, color_red2;

 let colorselet_red = [];

​

 //color grayBlue

 let colors_grayBlue = [];

 let colors_grayBlue1 = "fefefe-ffffff-202020-151B26-364559".split("-").map((a) => "#" + a);

 let colors_grayBlue2 = "707F8C-8F9BA6-364559-151B26-3A6273-3C667E-".split("-").map((a) => "#" + a);

 let colors_grayBluebg = "3A6273-364559-151B26".split("-").map((a) => "#" + a);

 let color_grayBlue1, color_grayBlue2;

 let colorselet_grayBlue = [];

​

 //color colorful

 let colors_colorful = [];

 let colors_colorful1 = "fefefe-292929-262626-222222-202020".split("-").map((a) => "#" + a);

 let colors_colorful2 = "8c75ff-c553d2-2dfd60-2788f5-23054f-f21252-8834f1-c4dd92-184fd3-f9fee2-2E294E-541388-F1E9DA-FFD400-D90368-e9baaa-ffa07a-164555-ffe1d0-acd9e7-4596c7-6d8370-e45240-21d3a4-3303f9-cd2220-173df6-244ca8-a00360-b31016".split("-").map((a) => "#" + a);

 let colors_colorfulbg = "fefefe-292929-262626-222222-202020".split("-").map((a) => "#" + a);

 let color_colorful1, color_colorful2;

 let colorselet_colorful = [];

​

 let unit;

 let count, wideCount, highCount;

 let arcs = [];

​

 function preload() {

  theShader = new p5.Shader(this.renderer, vert, frag)

 }

​

 function setup() {

  // pixelDensity(3);

  randomSeed(seed);

  mySize = min(windowWidth, windowHeight);

  // mySize = 1920;

  margin = mySize / 100;

  createCanvas(mySize, mySize / 16 * 11);

  webGLCanvas = createGraphics(width, height, WEBGL);

  originalGraphics = createGraphics(width, height);

  overGraphics = createGraphics(width, height);

​

  if (int(seed) % 4 == 0) {

    colors = colors_colorful;

    colors1 = colors_colorful1;

    colors2 = colors_colorful2;

    colorsbg = colors_colorfulbg;

    color1 = color_colorful1;

    color2 = color_colorful2;

    colorselet = colorselet_colorful;

  }

​

  if (int(seed) % 4 == 1) {

    colors = colors_red;

    colors1 = colors_red1;

    colors2 = colors_red2;

    colorsbg = colors_redbg;

    color1 = color_red1;

    color2 = color_red2;

    colorselet = colorselet_red;

  }

​

  if (int(seed) % 4 == 2) {

    colors = colors_grayBlue;

    colors1 = colors_grayBlue1;

    colors2 = colors_grayBlue2;

    colorsbg = colors_grayBluebg;

    color1 = color_grayBlue1;

    color2 = color_grayBlue2;

    colorselet = colorselet_grayBlue;

  }

​

  if (int(seed) % 4 == 3) {

    colors = colors_blue;

    colors1 = colors_blue1;

    colors2 = colors_blue2;

    colorsbg = colors_bluebg;

    color1 = color_blue1;

    color2 = color_blue2;

    colorselet = colorselet_blue;

  }

​

  colorselet[0] = random(colors1);

  colorselet[1] = random(colors2);

  colorselet[2] = random(colors2);

  colorselet[3] = random(colors2);

  colorselet[4] = random(colors1);

  unit = mySize / int(random(28, 14));

​

  let wideCount = width / unit + 1;

  let highCount = height / unit + 1;

  count = wideCount * highCount;

​

  let index = 0;

  for (let y = 0; y < highCount; y++) {

    for (let x = 0; x < wideCount; x++) {

      arcs[index++] = new Brush(

        x * unit,

        y * unit,

        random(unit),

        random(unit),

        random(5, 2),

        2 * unit / random(0.5, 2)

      );

    }

  }

  let filter1 = new makeFilter();

  background(random(colorsbg));

 }

​

 function draw() {

  randomSeed(seed);

  noiseSeed(seed);

​

  webGLCanvas.shader(theShader);

  theShader.setUniform('u_resolution', [width / width, height / height]);

  theShader.setUniform('u_time', millis() / 1000);

  theShader.setUniform('u_mouse', [mouseX / width, mouseY / height]);

  theShader.setUniform('u_tex', originalGraphics);

  webGLCanvas.clear()

​

  webGLCanvas.rect(-width / 2, -height / 2, width, height);

​

  if (int(seed) % 3 == 0) {

    for (let i = 0; i < count; i++) {

      arcs[i].update();

      arcs[i].drawArc(originalGraphics);

    }

  }

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

    for (let i = 0; i < count; i++) {

      arcs[i].update();

      arcs[i].drawCir(originalGraphics);

    }

  }

  if (int(seed) % 3 == 2) {

    for (let i = 0; i < count; i++) {

      arcs[i].update();

      arcs[i].drawRect(originalGraphics);

    }

  }

  image(webGLCanvas, 0, 0);

​

  image(overAllTexture, 0, 0);

​

 }

​

 //-------------------------------Brush----------------------------------------//

 class Brush {

  constructor(xOff, yOff, x, y, speed, unit) {

    this.xOff = xOff * 1;

    this.yOff = yOff * 1;

    this.x = x;

    this.y = y;

    this.speed = speed * 2;

    this.unit = unit;

    this.xDir = 1;

    this.yDir = 1;

  }

​

  update() {

    this.x = this.x + this.speed * this.xDir;

    if (this.x >= this.unit || this.x <= 0) {

      this.xDir *= -1;

      this.x = this.x + 1 * this.xDir;

      this.y = this.y + 1 * this.yDir;

    }

    if (this.y >= 1 * this.unit || this.y <= 0) {

      this.yDir *= -1;

      this.y = this.y + 1 * this.yDir;

    }

  }

​

  drawArc(p) {

    p.noFill();

    p.stroke(str(random(colorselet)) + "80");

    p.strokeWeight(random(random()));

    let y_size = random(mySize / count * 40, mySize / count * 70) * noise(sin(this.x), cos(this.y), frameCount * 0.01);

    let xx = this.xOff + sin(this.x - ele_ang);

    let yy = this.yOff - cos(this.y - ele_ang);

​

    p.push();

    p.translate(xx, yy);

    p.rotate(random(TAU) + ele_ang);

    p.translate(random(-ele_ang, ele_ang), random(-ele_ang, ele_ang));

    p.arc(random(-y_size, y_size), random(-y_size, y_size), random(y_size), random(y_size),

      random(-PI), random(PI));

    p.pop();

    ele_ang += TAU / random(300, 360) / 5000;

  }

​

  drawCir(p) {

    p.noFill();

    p.stroke(str(random(colorselet)) + "80");

    p.strokeWeight(random(random()));

    let y_size = random(mySize / count * 40, mySize / count * 70) * noise(sin(this.x), cos(this.y), frameCount * 0.01);

    let xx = this.xOff + sin(this.x - ele_ang);

    let yy = this.yOff - cos(this.y + ele_ang);

​

    p.push();

    p.translate(xx, yy);

    p.rotate(random(TAU) + ele_ang);

    p.translate(random(-ele_ang, ele_ang), random(-ele_ang, ele_ang));

    if (int(seed) % 2 == 1) {

      p.strokeWeight(random(random(2)));

      p.drawingContext.setLineDash([1, 1, 2, 10, 3, 10, 1, 1, 2, 10]);

      p.strokeCap(SQUARE);

    }

    p.ellipse(random(-y_size, y_size), random(-y_size, y_size), random(y_size), random(y_size));

    p.pop();

    ele_ang += TAU / random(300, 360) / 5000;

  }

​

  drawRect(p) {

    p.noFill();

    p.stroke(str(random(colorselet)) + "80");

    p.strokeWeight(random(random()));

    let y_size = random(mySize / count * 40, mySize / count * 70) * noise(sin(this.x), cos(this.y), frameCount * 0.01);

    let xx = this.xOff + sin(this.x - ele_ang);

    let yy = this.yOff - cos(this.y - ele_ang);

​

    p.push();

    p.translate(xx, yy);

    p.rotate(random(TAU) + ele_ang);

    p.translate(random(-ele_ang, ele_ang), random(-ele_ang, ele_ang));

    p.rectMode(CENTER);

    p.rect(random(-y_size, y_size), random(-y_size, y_size), random(y_size) / 2, random(y_size) / 2);

    p.pop();

    ele_ang += TAU / random(300, 360) / 10000;

  }

​

 }

​

​

 // filter

 function makeFilter() {

  randomSeed(seed);

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

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

  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, 10, 70, noise(i / 3, j / 3, (i * j) / 50) * random(10, 25))

      );

    }

  }

  overAllTexture.updatePixels();

 }

​

 function drawOverPattern() {

  push();

  translate(width / 2, height / 2);

  rotate(-PI / 2);

​

  let s = mySize / 2 * sqrt(3) - 2;

  let n = 4;

​

  for (let theta = TWO_PI / 6; theta < TWO_PI; theta += TWO_PI / 6) { // noprotect

    divideOP(0, 0, s * cos(theta), s * sin(theta), s * cos(theta + TWO_PI / 6), s * sin(theta + TWO_PI / 6), n);

  }

  pop();

 }

​

 function prop(x1, y1, x2, y2, k) {

  let x3 = (1 - k) * x1 + k * x2;

  let y3 = (1 - k) * y1 + k * y2;

  return [x3, y3];

 }

​

 function divideOP(x1, y1, x2, y2, x3, y3, n) {

  if (n > 1) {

    let [xA, yA] = prop(x1, y1, x2, y2, 1 / 3);

    let [xB, yB] = prop(x1, y1, x2, y2, 2 / 3);

    let [xC, yC] = prop(x2, y2, x3, y3, 1 / 3);

    let [xD, yD] = prop(x2, y2, x3, y3, 2 / 3);

    let [xE, yE] = prop(x3, y3, x1, y1, 1 / 3);

    let [xF, yF] = prop(x3, y3, x1, y1, 2 / 3);

    let [xG, yG] = prop(xF, yF, xC, yC, 1 / 2);

    divideOP(x1, y1, xA, yA, xF, yF, n - 1);

    divideOP(xA, yA, xB, yB, xG, yG, n - 1);

    divideOP(xB, yB, x2, y2, xC, yC, n - 1);

    divideOP(xG, yG, xF, yF, xA, yA, n - 1);

    divideOP(xC, yC, xG, yG, xB, yB, n - 1);

    divideOP(xF, yF, xG, yG, xE, yE, n - 1);

    divideOP(xG, yG, xC, yC, xD, yD, n - 1);

    divideOP(xD, yD, xE, yE, xG, yG, n - 1);

    divideOP(xE, yE, xD, yD, x3, y3, n - 1);

  } else {

    makeTriangle([x1, y1], [x2, y2], [x3, y3]);

  }

 }

​

 function makeTriangle(v1, v2, v3) {

  let points = shuffle([v1, v2, v3]);

  let [x1, y1] = points[0];

  let [x2, y2] = points[1];

  let [x3, y3] = points[2];

  let iStep = 1 / (pow(2, floor(random(4, 2))));

  for (let i = 0; i < 1; i += iStep) { // noprotect

    let [x4, y4] = prop(x1, y1, x2, y2, 1 - i);

    let [x5, y5] = prop(x1, y1, x3, y3, 1 - i);

    triangle(x1, y1, x4, y4, x5, y5);

  }

 }

​

​

 //save

 function keyTyped() {

  if (key === "s" || key === "S") {

    strokeWeight(random(0.1, 0.05));

    stroke(str(random(colors2)) + "1a");

    noFill();

    drawingContext.setLineDash([1, 1, 1, 1]);

    drawOverPattern();

    // image(overAllTexture, 0, 0);

    noFill();

    stroke("#202020");

    strokeWeight(margin);

    blendMode(BLEND);

    rectMode(CORNER);

    rect(0, 0, width, height);

    noLoop();

    saveCanvas("0901_NoisePlanet_moody2_2022", "png");

  }

 }

​

//fullscreen

function mousePressed() {

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}