Cyber Waves

// by SamuelYAN

// more works //

// https://twitter.com/SamuelAnn0924

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

​

var seed = Math.random() * 73639;

var particles = [];

var mySize;

var parNum;

var color_vision;

​

let colors1 = "fef9fb-fafdff-fcfbf4-f9f8f6".split("-").map((a) => "#" + a);

let theShader;

let webGLCanvas;

let originalGraphics;

let plus, margin;

let filter1;

​

​

function preload() {

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

}

​

function setup() {

  frameRate(25);

  plus = 0;

  randomSeed(seed);

  mySize = min(windowWidth, windowHeight);

  margin = mySize / 100;

  createCanvas(mySize / 16 * 11, mySize);

  colorMode(RGB, 255, 255, 255, 100);

  pixelDensity(5);

  webGLCanvas = createGraphics(width, height, WEBGL);

  originalGraphics = createGraphics(width, height);

  parNum = int(random(500,2000));

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

    particles.push(new Particle(random(width), height / random(2, 4) - tan(random(1, 2) * i + random(height)) * height / 1));

  }

  color_vision = random([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);

  filter1 = new makeFilter();

}

​

function draw() {

  randomSeed(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);

​

  blendMode(BLEND);

  for (let i = particles.length - 1; i > 0; i--) {

    if (i < particles.length) {

      particles[i].color_vision = color_vision;

      particles[i].update();

      particles[i].show(originalGraphics);

​

      if (particles[i].finished()) {

        //seed = Math.random() * 2318;

        if (i % random([100, 200]) == 0) {

          color_vision = random([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);

        }

        particles.splice(i, 1);

      }

    }

​

  }

  image(webGLCanvas, 0, 0);

  blendMode(ADD);

  image(webGLCanvas, 0, 0);

  image(overAllTexture, 0, 0);

​

  if (frameCount == 125) {

    noLoop();

    blendMode(SCREEN);

    image(overAllTexture, 0, 0);

    blendMode(BLEND);

    strokeWeight(random(0.10, 0.2));

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

    noFill();

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

    drawOverPattern();

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

    noFill();

    stroke("#202020");

    strokeWeight(margin);

​

    rectMode(CORNER);

    rect(0, 0, width, height);

  }

}

​

function keyTyped() {

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

    //noLoop();

    saveCanvas("0924_Cyber_Waves_2022", "png");

  }

}

​

//filter

function makeFilter() {

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

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

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

  overAllTexture = createGraphics(windowWidth, windowHeight);

  overAllTexture.loadPixels();

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

    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) / 1

        )

      );

    }

  }

  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 = 0; 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);

  }

}