Sign

let pallet = [

  "#B74340",

  "#EBC1BE",

  "#E2B2AD",

  "#CF6153",

  "#E97F56",

  "#E17037",

  "#ECB825",

  "#F2CE0E",

  "#D8D56B",

  "#A9B938",

  "#266C4C",

  "#1B3C43",

  "#0E1F28",

  "#266BB3",

  "#677789",

  "#23549B",

  "#294067",

  "#1B3F8B",

  "#152A6D",

  "#4E3A7C",

  "#9480AC",

  "#89485E",

  "#A02E2F",

  "#040608",

  "#DEE2DE",

]

​

let spacePallet = [

  "#0C141F",

  "#048ABF",

  "#03A6A6",

  "#D9A404",

  "#8C4216",

  "#593027",

  "#394D73",

  "#181D26",

  "#038C8C",

  "#034C8C"

]

​

let grad, grad2

let gradList

let signGradList

let graphics

let cells, cellSize

let pipePg

​

let pgList

let signMask

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let cellNum = 1//int(random(2, 3))

  cells = { columnSize: cellNum, rowSize: cellNum}

  let cellLength = cells.columnSize * cells.rowSize

  cellSize = { width: int(width/cells.columnSize), height: int(height/cells.rowSize)}

  pgList = [...Array(cellLength)].map(　() => 

      createGraphics(cellSize.width, cellSize.height)

    )

  let bgPallet = shuffle(spacePallet.concat())

  gradList = [...Array(cellLength)].map(　() => 

      createGrad(

        cellSize.width, cellSize.height,

        color(bgPallet.pop()), 

        color(bgPallet.pop()), 

        random(360)

      )

    )

  signGradList = [...Array(cellLength)].map(　() => 

      createGrad(

        cellSize.width, cellSize.height,

        color(random(pallet)), 

        color(random(pallet)), 

        random(360)

      )

    )

  grad2 = createGrad(

        cellSize.width, cellSize.height,

        color(random(pallet)), 

        color(random(pallet)), 

        random(360)

      )

  pipePg = createPipe()

  frameRate(10)

  signMask = createGraphics(cellSize.width, cellSize.height)

}

​

function draw() {

  // grad.updatePixels();

  // background(220);

  image(gradList[0],0,0, width, height)

  for(let x=0; x<cells.columnSize; x++) {

    for(let y=0; y<cells.rowSize; y++) {

      let currIndex = x* cells.columnSize + y

      let bg = gradList[currIndex]

      let sign = signGradList[currIndex]

      // sign.updatePixels()

​

      // graphics = createBgMask(width, height)

      // currentBg.mask(graphics);

​

      let pd = pgList[currIndex]

      // pd.image(bg, 0, 0)

      // translate(randomGaussian()*10, randomGaussian()*10)

      // scale(randomGaussian(0.8, 0.3))

      switch(random(["no"])) {

        case("no"):

          pd.scale(0.8)

          pd.push()

          pd.translate(pd.width/2+10, pd.height/2)

          pd.scale(cellSize.width/width)

          pd.image(pipePg, 0, 0, pipePg.width, height)

          pd.pop()

          pd.push()

          pd.translate(pd.width/2, pd.height/2)

          pd.translate(0, -40)

          pd.ellipseMode(CENTER)

          pd.noStroke()

          pd.circle(0, 0, pd.width*0.8)

          pd.pop()

          createSignMask(signMask, pd.width, pd.height)

          sign.mask(signMask)

          pd.translate(0, -40)

          pd.image(sign, 0, 0)

          pd.rectMode(CENTER)

          pd.fill("white")

          pd.noStroke()

          pd.translate(pd.width/2, pd.height/2)

          pd.translate(0, pd.height/2 + 80)

          pd.rect(0, 0, pd.width*0.75, 160, 16)

          let textLength = random(7, 13)

          drawText(pd, textLength, 0, -20)

          pd.stroke("black")

          pd.strokeWeight(3)

          pd.line(-pd.width*0.3, 0, pd.width*0.3, 0)

          drawText(pd, textLength, 0, 50)

​

          break

      }

      push()

      shearX(randomGaussian()*PI*0.001)

      shearY(randomGaussian()*PI*0.001)

      translate(randomGaussian(0, 10)*10, randomGaussian(0, 10)*10)

      // scale(0.8)

      image(pd, x * cellSize.width, y * cellSize.height)  

      pop()

    }

  }

  // let sign = createGraphics(pd.width, pd.height)

  // createSignMask(sign, width, height)

  // image(sign, 0, 0, width/2, height/2)

​

  // image(sign, 0, 0)

//   point(20, 20);

//   point(mouseX, mouseY);

//   point(50, 50);

​

//   // noFill();

//  // fill(random(pallet))

//   strokeWeight(1);

//   beginShape();

//   vertex(20, height/2);

//   quadraticVertex(mouseX, mouseY, width-20, height/2);

//   endShape();

  noLoop()

}

​

function createGrad(width, height, colorFrom, colorTo, angle) {

  let grad = createImage(width, height);

  grad.loadPixels();

  for (let x = 0; x < grad.width; x++) {

    for (let y = 0; y < grad.height; y++) {

      let inter = calculateInterpolation(x, y, grad.width, grad.height, radians(angle));

      let c = lerpColor(colorFrom, colorTo, inter);

      grad.set(x, y, c);

    }

  }

  grad.updatePixels();

  return grad

}

​

function createBgMask(width, height) {

  let bg = createGraphics(width, height);

  bg.fill(255);

  bg.noStroke();

  bg.ellipse(width/2, height/2, 500);

  return bg

}

​

function createSignMask(sign, width, height) {

  let a = random(PI)

    let w = random(40, 80)

    let h = random(8, 24)

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

    sign.push()

    sign.noFill()

    sign.stroke(255)

    sign.strokeWeight(1)

    sign.translate(sign.width/2, sign.height/2)

    push()

    sign.translate(randomGaussian()*8, randomGaussian()*8)

    sign.ellipse(0, 0, sign.width*0.6)

    pop()

    // sign.rotate(a)

    // sign.strokeWeight(28/250*sign.width)

    // sign.line(-sign.width*0.3, 0, sign.width*0.3, 0)

    sign.strokeWeight(2)

    // print("hoge")

    sign.translate(randomGaussian()*w, randomGaussian()*h)

    sign.line(-2, 0, 2, 0)

    sign.pop()

  }

  // return sign

}

​

function createPipe() {

  let pipeRadius = 44

  let pg = createGraphics(pipeRadius, height)

  pg.rectMode(CENTER)

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

    let inter = map(i, 0, pipeRadius, 0, 1);

    let c = lerpColor(color("darkgray"), color("white"), inter);

    pg.stroke(c)

    pg.line(i, 0, i, pg.height)

  }

  return pg

}

​

function calculateInterpolation(x, y, w, h, angle) {

  let dx = cos(angle);

  let dy = sin(angle);

  let axis = x * dx + y * dy;

  let maxAxis = w * abs(dx) + h * abs(dy);

  return map(axis, 0, maxAxis, 0, 1);

}

​

function generateRandomString(length) {

  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

  let result = '';

  const charactersLength = characters.length;

​

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

    result += characters.charAt(Math.floor(Math.random() * charactersLength));

  }

​

  return result;

}

​

function drawText(pd, textLength, x, y) {

    push()

    let weight = random(100, 900); 

    let wdth = random(100, 125);

    let t = generateRandomString(textLength)

    pd.textAlign(CENTER)

    pd.fill("black")

    pd.drawingContext.font = `normal ${weight} 28px Archivo`;

    pd.style("font-variation-settings", `'wdth' ${wdth}, wght' ${weight}`);

    pd.text(t, x, y)

    pop()

}