commitment

// by SamuelYAN

// more works //

// https://twitter.com/SamuelAnn0924

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

​

​

let seed, mySize, margin;

let angle_c;

let colors = [];

let colors7 = "fefefe-72cffe-8204E5-deedfc-DAB2BE".split("-").map((a) => "#" + a);

let colors8 = "012340-162D59-36E885-C9DFF2-1B70A6-4590BF-D7AF3A".split("-").map((a) => "#" + a);

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

var color_setup1, color_setup2;

let color_bg;

let branch;

​

function setup() {

  // pixelDensity(5);

  mySize = min(windowWidth, windowHeight);

  margin = mySize / 100;

  createCanvas(mySize, mySize);

  seed = int(random(1000));

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

  color_setup1 = colors7;

  color_setup2 = colors8;

  color_bg = random(colorsbg);

  angle_c = 0;

  branch = int(random(4, 20));

  let filter1 = new makeFilter();

  background(color_bg);

}

​

function draw() {

  randomSeed(seed);

​

  if (frameCount % 100 == 0) {

    strokeWeight(random(0.1, 0.5));

    stroke(str(random(colors7)) + "0d");

    noFill();

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

    drawOverPattern();

  }

  //shadow & highlight

  drawingContext.shadowColor = "#572232";

  drawingContext.shadowOffsetX = 1;

  drawingContext.shadowOffsetY = 1;

  drawingContext.shadowBlur = 0;

  drawingContext.shadowColor = "#DAB2BE";

  drawingContext.shadowOffsetX = -1;

  drawingContext.shadowOffsetY = -1;

  drawingContext.shadowBlur = 0;

​

  push();

  translate(width / random(2.1,1.9), height /random(1.9,2.1) );

  rotate(angle_c);

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

    colors[0] = random(color_setup1);

    colors[1] = random(color_setup2);

    colors[2] = random(color_setup2);

    colors[3] = random(color_setup2);

    colors[4] = random(color_setup2);

    circleForm(0, 0, mySize * 0.8 * (i + 1) / 2);

  }

  if (frameCount % 100 == 0 && branch < 1000) {

    branch += 15;

    angle_c += TAU / 360;

  } else if (branch >= 1000) {

    branch = 4;

    frameCount = 0;

  }

  pop();

  if (frameCount == 1000){

    image(overAllTexture, 0, 0);

    noFill();

    stroke("#DAB2BE");

    strokeWeight(margin);

    blendMode(BLEND);

    rectMode(CORNER);

    rect(0, 0, width, height);

    noLoop();

  }

}

​

function circleForm(x, y, d) {

​

  let ang = TAU / branch;

  let angles = [];

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

    angles.push(ang * (i + iteration(0.1, 0.25)));

  }

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

    let ang1 = angles[i];

    let ang2 = angles[(i + int(random(6))) % angles.length];

    let dd = d * iteration(0.0, 1);

    noFill();

    drawingContext.shadowColor = random(color_setup1);

    drawingContext.shadowOffsetX = 1;

    drawingContext.shadowOffsetY = 1;

    drawingContext.shadowBlur = 0;

    stroke(colors[random([0, 1, 2, 3, 4])]);

    strokeWeight(random(1));

    arc(x, y, dd, dd, ang1, ang2);

  }

}

​

function iteration(s, e) {

  let t = random(10, 100);

  let v = random(0.001, 0.01);

  return map(cos(t + frameCount * v), -1, 1, s, e);

}

​

function keyTyped() {

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

    saveCanvas("0821_Blue Mood_4_BlueNoisePlanet_2022", "png");

  }

}

​

//fullscreen

function mousePressed() {

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

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

//　Pattern

function drawOverPattern() {

  push();

  translate(width / 2.1, height / 2.1);

  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(5, 3))));

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

  }

}

​

//filter

function makeFilter() {

  randomSeed(seed);

  // 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++) {

    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, 6))

      );

    }

  }

  overAllTexture.updatePixels();

 }