Gradient Pattern_220121

// by SamuelYAN

// more works //

// ****** // https://twitter.com/SamuelAnn0924

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

​

// Chinese Window Pattern

​

var seed = Math.random() * 2951;

var mySize, margin;

let tile_count;

let colors1 = "be132d-e81d3c-ff0000".split("-").map((a) => "#" + a + "1a");

let colors12 = "be132d-e81d3c-ff0000".split("-").map((a) => "#" + a + "40");

let colors2 = "93df58-91c540-1cac18".split("-").map((a) => "#" + a + "1a");

let colors22 = "93df58-91c540-1cac18".split("-").map((a) => "#" + a + "b3");

let colors3 = "6e97ec-3053ab-58087b".split("-").map((a) => "#" + a + "80");

let colors32 = "6e97ec-3053ab-58087b".split("-").map((a) => "#" + a + "00");

let colors4 = "f4d69d-ecb855-ffffc7".split("-").map((a) => "#" + a + "1a");

let colors42 = "f4d69d-ecb855-ffffc7".split("-").map((a) => "#" + a + "80");

let colors5 = "f998f9-9e92ff-a3eedb".split("-").map((a) => "#" + a + "b3");

let colors52 = "f998f9-9e92ff-a3eedb".split("-").map((a) => "#" + a + "40");

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

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

var Windows;

let t = 0;

let color1, color2;

let filter, grad;

​

function setup() {

  // pixelDensity(5);

  tile_count = int(random(1, 5));

  mySize = min(windowWidth, windowHeight);

  createCanvas(mySize, mySize);

  randomSeed(seed);

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

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

  margin = 0;

  background(colorbg);

  addWin();

  filter = new makeFilter();

}

​

function draw() {

  randomSeed(seed);

  background(colorbg2);

  fill(0);

  grad = drawingContext.createLinearGradient(0, 0, 0, height);

  grad.addColorStop(0, colorbg);

  grad.addColorStop(1, colorbg2);

  drawingContext.fillStyle = grad;

  noStroke();

  rectMode(CORNER);

  rect(0, 0, width, height);

​

  push();

  translate((width - mySize) / 2, (height - mySize) / 2);

  for (let Win of Windows) {

    Win.display();

  }

  pop();

  image(overAllTexture, 0, 0);

  // noLoop();

}

​

function addWin() {

  Windows = [];

  let w = width / tile_count;

  let h = height / tile_count;

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

    for (let j = 0; j < tile_count; j++) {

      // 行列

      let noiseW = 0;

      let noiseH = 0;

​

      let x = i * w + noiseW;

      let y = j * h + noiseH;

      let colorItem = int(random(3));

      if (colorItem == 0) {

        Windows.push(new CWP(x, y, w, random(colors1), random(colors12)));

      } else if (colorItem == 1) {

        Windows.push(new CWP(x, y, w, random(colors2), random(colors22)));

      } else if (colorItem == 2) {

        Windows.push(new CWP(x, y, w, random(colors3), random(colors32)));

      }

    }

  }

}

​

// make ChineseWindowPattern by position

class CWP {

  constructor(x, y, w, color1, color2) {

    this.x = x;

    this.y = y;

    this.w = w; // 行列

    this.h = this.w;

    this.strWei = 0;

    this.color1 = color1;

    this.color2 = color2;

  }

  display() {

    push();

    translate(this.x + this.w / 2, this.y + this.w / 2);

​

    let lineNum = this.w / this.strWei;

    let space = (this.w / lineNum) * 2;

    strokeCap(PROJECT);

    noFill();

​

    //left-up-------------------------------------------------------------

    push();

    translate(-this.w / 4, -this.h / 4);

    rect(0, 0, this.w / 2, this.h / 2);

​

    rectMode(CORNER);

    noStroke();

    fill(10);

​

    //R1

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 8);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, -this.h / 4, 0, 0);

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

      grad.addColorStop(random(0.75, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 8, -this.h / 4, this.w / 8, this.h / 4);

      pop();

    }

    //R2

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_x = i * (this.w / 8);

      push();

      translate(-move_x, 0);

      grad = drawingContext.createLinearGradient(this.w / 4, 0, 0, 0);

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

      grad.addColorStop(random(0.75, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 4, this.h / 8, -this.w / 4, this.h / 8);

      pop();

    }

    //L1

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_x = i * (this.w / 8);

      push();

      translate(move_x, 0);

      grad = drawingContext.createLinearGradient(-this.w / 4, 0, 0, 0);

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

      grad.addColorStop(random(0.75, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 4, -this.h / 8, this.w / 4, -this.h / 8);

      pop();

    }

    //L2

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 16);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, this.h / 4, 0, 0);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 8, this.h / 4, -this.w / 8, -this.h / 4);

      pop();

    }

​

    //r1

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_x = i * (this.w / 32);

      push();

      translate(move_x, 0);

      grad = drawingContext.createLinearGradient(0, 0, this.w / 4, 0);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, this.w / 4, -this.h / 8);

      pop();

    }

    //r2

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 32);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, 0, 0, this.h / 4);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, this.w / 8, this.h / 4);

      pop();

    }

    //l1

    for (let i = 0; i < int(random(12, 8)); i++) {

      let move_y = i * (this.h / 32);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, 0, 0, -this.h / 4);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, -this.w / 8, -this.h / 4);

      pop();

    }

    //l2

    for (let i = 0; i < int(random(12, 8)); i++) {

      let move_x = i * (this.w / 32);

      push();

      translate(-move_x, 0);

      grad = drawingContext.createLinearGradient(0, 0, -this.w / 4, 0);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, -this.w / 4, this.h / 8);

      pop();

    }

    pop();

​

    // right-up-------------------------------------------------------------

    push();

    translate(this.w / 4, -this.h / 4);

    rect(0, 0, this.w / 2, this.h / 2);

​

    rectMode(CORNER);

    noStroke();

    fill(10);

    for (let i = 0; i < int(random(12, 16)); i++) {

      let move_y = i * (this.h / 32);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, -this.h / 4, 0, this.h / 4);

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

      grad.addColorStop(random(0.125, 0.25), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 4, -this.h / 4, this.w / 4, this.h / 2);

      pop();

    }

​

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 8);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, this.h / 8, 0, -this.h / 4);

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

      grad.addColorStop(random(0.2, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 4, -this.h / 4, this.w / 8, (this.h / 8) * 3);

      pop();

    }

​

    for (let i = 0; i < int(random(12, 6)); i++) {

      let move_y = i * (this.h / 16);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, this.h / 4, 0, -this.h / 4);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 4, this.h / 4, -this.w / 4, -this.h / 2);

      pop();

    }

​

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 8);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, -this.h / 8, 0, this.h / 4);

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

      grad.addColorStop(random(0.2, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 4, this.h / 4, -this.w / 8, (-this.h / 8) * 3);

      pop();

    }

​

    pop();

​

    // left-down-------------------------------------------------------------

    push();

    translate(-this.w / 4, this.h / 4);

    rect(0, 0, this.w / 2, this.h / 2);

​

    rectMode(CORNER);

    noStroke();

    fill(10);

    for (let i = 0; i < int(random(12, 6)); i++) {

      let move_y = i * (this.h / 16);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, -this.h / 4, 0, this.h / 4);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 4, -this.h / 4, this.w / 4, this.h / 2);

      pop();

    }

​

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 8);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, this.h / 8, 0, -this.h / 4);

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

      grad.addColorStop(random(0.2, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 4, -this.h / 4, this.w / 8, (this.h / 8) * 3);

      pop();

    }

​

    for (let i = 0; i < int(random(16, 8)); i++) {

      let move_y = i * (this.h / 32);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, this.h / 4, 0, -this.h / 4);

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

      grad.addColorStop(random(0.125, 0.25), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 4, this.h / 4, -this.w / 4, -this.h / 2);

      pop();

    }

​

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 8);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, -this.h / 8, 0, this.h / 4);

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

      grad.addColorStop(random(0.2, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 4, this.h / 4, -this.w / 8, (-this.h / 8) * 3);

      pop();

    }

​

    pop();

​

    //right-down-------------------------------------------------------------

    push();

    translate(this.w / 4, this.h / 4);

    rect(0, 0, this.w / 2, this.h / 2);

​

    rectMode(CORNER);

    noStroke();

    fill(10);

​

    //R1

    for (let i = 0; i < int(random(12, 6)); i++) {

      let move_y = i * (this.h / 16);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, -this.h / 4, 0, 0);

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

      grad.addColorStop(random(0.5, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 8, -this.h / 4, this.w / 8, this.h / 4);

      pop();

    }

    //R2

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_x = i * (this.w / 8);

      push();

      translate(-move_x, 0);

      grad = drawingContext.createLinearGradient(this.w / 4, 0, 0, 0);

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

      grad.addColorStop(random(0.75, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(this.w / 4, this.h / 8, -this.w / 4, this.h / 8);

      pop();

    }

    //L1

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_x = i * (this.w / 8);

      push();

      translate(move_x, 0);

      grad = drawingContext.createLinearGradient(-this.w / 4, 0, 0, 0);

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

      grad.addColorStop(random(0.75, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 4, -this.h / 8, this.w / 4, -this.h / 8);

      pop();

    }

    //L2

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 8);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, this.h / 4, 0, 0);

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

      grad.addColorStop(random(0.75, 1), random(color2));

      drawingContext.fillStyle = grad;

      rect(-this.w / 8, this.h / 4, -this.w / 8, -this.h / 4);

      pop();

    }

​

    //r1

    for (let i = 0; i < int(random(12, 6)); i++) {

      let move_x = i * (this.w / 32);

      push();

      translate(move_x, 0);

      grad = drawingContext.createLinearGradient(0, 0, this.w / 4, 0);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, this.w / 4, -this.h / 8);

      pop();

    }

    //r2

    for (let i = 0; i < int(random(12, 6)); i++) {

      let move_y = i * (this.h / 32);

      push();

      translate(0, move_y);

      grad = drawingContext.createLinearGradient(0, 0, 0, this.h / 4);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, this.w / 8, this.h / 4);

      pop();

    }

    //l1

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_y = i * (this.h / 32);

      push();

      translate(0, -move_y);

      grad = drawingContext.createLinearGradient(0, 0, 0, -this.h / 4);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, -this.w / 8, -this.h / 4);

      pop();

    }

    //l2

    for (let i = 0; i < int(random(2, 8)); i++) {

      let move_x = i * (this.w / 32);

      push();

      translate(-move_x, 0);

      grad = drawingContext.createLinearGradient(0, 0, -this.w / 4, 0);

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

      grad.addColorStop(random(0.25, 0.5), random(color2));

      drawingContext.fillStyle = grad;

      rect(0, 0, -this.w / 4, this.h / 8);

      pop();

    }

    pop();

​

    pop();

  }

}

​

function makeFilter() {

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

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

  // drawingContext.shadowColor = color(0, 0, 95, 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, 0, 99, noise(i / 5, j / 5, (i * j) / 300) * random(20, 5))

      );

    }

  }

  overAllTexture.updatePixels();

}

​

function keyTyped() {

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

    //noLoop();

    saveCanvas("Gradient Pattern_220121", "png");

  }

}