Scribble_16

// by SamuelYAN

// more works //

// https://twitter.com/SamuelAnn0924

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

​

//refer:

//https://p5js.org/examples/interaction-wavemaker.html

//https://beesandbombs.tumblr.com/post/45513650541/orbiters

​

var mySize, margin;

var seed = Math.random() * 21927;

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

let colors2;

let colors_tone1 = "2450A6-639CBF-F2EFBD-F28705-F2380F".split("-").map((a) => "#" + a);

let colors_tone2 = "381A40-90BF2A-F2CB05-BF751B-F24F13".split("-").map((a) => "#" + a);

let colors_tone3 = "D7D7D9-038C33-ACF216-698C1C-97BF04".split("-").map((a) => "#" + a);

let colors_tone4 = "192E40-326A8C-3B758C-7AACBF-C4EAF2".split("-").map((a) => "#" + a);

let colors_tone5 = "6595BF-55B3D9-027373-5A7302-F2AB6D".split("-").map((a) => "#" + a);

let colors_tone6 = "024059-A0A603-D98E04-A67F5D-D9C9BA".split("-").map((a) => "#" + a);

let colors_tone7 = "51608C-6A8AA6-BFCDD9-BF8756-8C512E".split("-").map((a) => "#" + a);

let colors_tone8 = "635C73-272B40-F2DAAC-D99E6A-D97E6A".split("-").map((a) => "#" + a);

​

let colors_root = "362300-805300-402900-734E39".split("-").map((a) => "#" + a);

​

let colorset = [];

let colorbg = "2c2f3b-28292b-2d2d30-151d29".split("-").map((a) => "#" + a); // dark

let filter1;

let t, par_num, par_num2, count;

let originalGraphics;

let bgGraphics;

​

function color_set() {

  colors2 = random([colors_tone1, colors_tone2, colors_tone3, colors_tone4, colors_tone5, colors_tone6, colors_tone7, colors_tone8]);

  // colors2 = colors_tone8;

  colorset[0] = random(colors2);

  colorset[1] = random(colors2);

  colorset[2] = random(colors1);

  colorset[3] = random(colors2);

  colorset[4] = random(colors2);

  colorset[5] = random(colors2);

}

​

function setup() {

  frameRate(25);

  randomSeed(seed);

  // mySize = min(windowWidth, windowHeight);

  mySize = 1600;

  margin = mySize / 150;

  createCanvas(mySize / 16 * 11, mySize);

  originalGraphics = createGraphics(width, height);

  bgGraphics = createGraphics(width, height);

  // pixelDensity(3);

  color_set();

  background(random(colors1));

  filter1 = new makeFilter();

  t = 0;

  count = 0;

}

​

function draw() {

  randomSeed(seed);

​

  //bg

  let par_num = random(400, 800);

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

    bgGraphics.fill(str(random(colorset)) + "1a");

    bgGraphics.noStroke();

    if (frameCount % 2 == 0) {

      bgGraphics.stroke(str(random(colorset)) + "0d");

      bgGraphics.strokeWeight(random(0.25, 0.1));

      bgGraphics.noFill();

    }

    bgGraphics.drawingContext.shadowColor = str(random(colorbg)) + "1a";

    bgGraphics.drawingContext.shadowOffsetX = 1 + frameCount * 0.05;

    bgGraphics.drawingContext.shadowOffsetY = 1 + frameCount * 0.05;

    bgGraphics.drawingContext.shadowBlur = 0;

​

    const xAngle = map(0, 0, width, -random(0.5, 1) * PI, random(0.5, 1) * PI, true);

    const yAngle = map(height, 0, height, -random(0.5, 1) * PI, random(0.5, 1) * PI, true);

    const angle = xAngle * width + yAngle * height;

​

    const myX = width / 2 + mySize / 2 * sin(random(0.5, 1.5) * TAU * t + angle);

    const myY = height / 2 + mySize / 2 * cos(random(0.5, 1.5) * TAU * t + angle);

​

    bgGraphics.push();

    bgGraphics.translate(myX + sin(random(0.5, 1.5) * TAU * t + angle), myY + cos(random(0.5, 1.5) * TAU * t + angle));

    bgGraphics.rotate(random(t) * PI / 10);

    bgGraphics.ellipse(0, 0, random(0.75, 1.25) * (1 - sqrt(random(random(1)))));

    bgGraphics.pop();

  }

  image(bgGraphics, 0, 0);

​

​

  //1

  if (frameCount == 1) {

    strokeWeight(random(0.10, 0.2) / random(0.5, 1));

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

    noFill();

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

    drawOverPattern();

  }

  par_num = int(random(20, 50));

  par_num2 = int(random(30, 10));

  for (let x = -width * 0.05; x <= width * 1.05; x += random(width / par_num)) {

    // randomSeed(seed * x);

    for (let y = height * 0.05; y <= height * 0.95; y += random(height / par_num2)) {

      // randomSeed(seed * y);

      originalGraphics.stroke(str(colorset[int(map(x / (width * 0.85), 0, 1, 0, 6))]) + "80");

      originalGraphics.strokeWeight(random(0.05,0.25));

      originalGraphics.noFill();

      originalGraphics.drawingContext.shadowColor = str(random(colorset)) + "80";

      originalGraphics.drawingContext.shadowOffsetX = 1;

      originalGraphics.drawingContext.shadowOffsetY = 1;

      originalGraphics.drawingContext.shadowBlur = 0;

​

      const xAngle = map(0, 0, width, -random(0.5, 1) * PI, random(0.5, 1) * PI, true);

      const yAngle = map(height, 0, height, -random(0.5, 1) * PI, random(0.5, 1) * PI, true);

      const angle = xAngle * (x / width) + yAngle * (y / height);

      let myX = x + random(2, 1) * cos(random(0.1, 0.5) * random(TAU) * t + angle);

      let myY = y + random(1, height / 12) * sin(random(0.15, 0.05) * random(TAU) * t + angle);

​

      originalGraphics.push();

      originalGraphics.translate(myX, myY + random(-par_num, par_num) * random(random(0.5, 1.5) * TAU * t + angle));

      // originalGraphics.rotate(sin(t) * PI / 10);

      originalGraphics.drawingContext.setLineDash([2, 1, 3, 1, 4, 1, 1]);

      originalGraphics.rect(0, 0, random(width*0.025, width*0.10) * sqrt(t + t) + t / random(1, 10), random(1, 2) * tan(t + t) + t / random(1, 10)); // draw particle

      originalGraphics.pop();

    }

  }

​

  image(originalGraphics, 0, 0);

  image(overAllTexture, 0, 0);

  t += random(0.005, 0.001);

  if (int(sin(t) * 100) == 0) {

    count++;

  }

​

  if (count == 6) {

    noLoop();

    blendMode(BLEND);

    image(overAllTexture, 0, 0);

    blendMode(ADD);

    strokeWeight(random(0.10, 0.5) / 1);

    stroke(str(random(colorset)) + "05");

    noFill();

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

    drawOverPattern();

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

    blendMode(BLEND);

​

    noFill();

    strokeWeight(margin);

​

    rectMode(CORNER);

    stroke("#202020");

​

    rect(0, 0, width, height);

  }

}