//

//  Processing Community Day Tokyo 2023 Poster

//    Haukun

//    2023/06/27

//

//    CC BY-NC-SA 3.0  

//      https://creativecommons.org/licenses/by-nc-sa/3.0/

//--------------------------------------------------

​

const SEED = 20230627;  //  Random Seed

​

var CV_MAIN; // Main canvas

var CV_SHIBUYA; // Shibuya canvas

var CV_EXHIBITION; // Exhibition canvas

var CV_MASK; // Mask canvas

var CV_COMMUNITY;  //  Community canvas

​

//--------------------------------------------------

//

//  setup

//

//--------------------------------------------------

function setup() {

  createCanvas(W = 3200, H = 4267); // 3200:4267 ≒ 3:4

  CV_MAIN = createGraphics(W, H);

  CV_SHIBUYA = createGraphics(W, H);

  CV_MASK = createGraphics(W, H);

  CV_EXHIBITION = createGraphics(W, H);

  CV_COMMUNITY = createGraphics(W, H);

  buildShibuya();

  buildCommunity();

  buildExhibition();

  with(CV_MAIN){

    push();

    image(CV_SHIBUYA, 0, 0);

    image(CV_COMMUNITY, 0, 0);

    image(CV_EXHIBITION, 0, 0)

    pop()

  }

  //scale(0.18,0.18)  //  for debug.

  image(CV_MAIN,0,0)

}

​

//--------------------------------------------------

//

//  build exhibition

//

//--------------------------------------------------

function buildExhibition(){

  //--------------------------------------------------

  //  create mask

  //--------------------------------------------------

  with(CV_MASK){

    randomSeed(SEED);

    noiseSeed(SEED);

​

    push();

    rectMode(CENTER)

    //--------------------------------------------------

    //  create outgoing

    //--------------------------------------------------

    push();

    noFill();

    stroke(100);

    strokeWeight(50);

    for(d = 100; d < 700; d += 150){

      var size = W / 9 * 6 + d;

      for(i = 0; i < 10; i++){

        var angle = PI / 4 * 3 + random(TAU / 4 * 3 - (1 - d / 1000));

        arc(W / 2, H / 13 * 5 , size , size, angle, angle + (1 - d / 1000));

      }

    }

    pop();

    //--------------------------------------------------

    //  create drop

    //--------------------------------------------------

    for(i = 0; i < 150; i++){

      circle(W / 2 , H / 13 * 5 + i * 8, (W / 9 * 6) - i * 13);

    }

    circle(W / 2, H / 13 * 5 + 1350, 150);

    for(i = 0; i < 50; i++){

      circle(W / 2, H / 13 * 5 + 1600 + i, 50 + i);

    }

    //--------------------------------------------------

    //  create ripple

    //--------------------------------------------------

    var ripple = 0;

    for(d = 1400; d > 200; d -= 250 - ripple){

      noErase();

      ellipse(W / 2, H / 3 + 2400, d, d * 0.19);

      erase();

      ellipse(W / 2, H / 3 + 2400, d * .9, d * 0.19 * .9);

      ripple -= 50;

    }

    //--------------------------------------------------

    //  create crown

    //--------------------------------------------------

    noErase();

    for(i = -1; i < 2 ; i += 2){

      beginShape();

      for(x = 800; x <= 2400; x += 10){

        var tempY = H / 3 + 2400 + i * sin((x - 800) / 1600 * PI) **.5 * 200;

        vertex(x, tempY);

        if(random(1) < .05){

          circle(x - (x - 1600) / 10,

                 tempY - 200 * noise(x / 200, i) ** 2 - 100, random(50));

        }

      }

​

      for(x = 2400; x >= 800; x -= 20){

        var tempY = H / 3 + 2400 + i * sin((x - 800) / 1600 * PI) **.5 * 200;

        curveVertex(x + (x - 1600) / 10,

                    tempY - 50 - 300 * noise(x / 200, i) ** 3);

      }

      endShape();

    }

​

    //--------------------------------------------------

    //  create hole

    //--------------------------------------------------

    erase();

    circle(W / 2, H / 13 * 5, W / 9 * 5);

    //--------------------------------------------------

    //  create outgoing logic

    //--------------------------------------------------

    for(y = 0; y < H / 13 * 9.5; y += 30){

      for(x = 0; x < W; x += 30){

        push();

        translate(x, y);

        rotate(random(1) > .5 ? PI / 4 : -PI / 4);

        rect(0, 0, 50, 10, 20);

        pop();

      }

    }

    //--------------------------------------------------

    //  create drip logic

    //--------------------------------------------------

    for(y = H / 13 * 9.5; y < H / 13 * 10.2; y += 20){

      for(x = 0; x < W; x += 20){

        push();

        translate(x,y );

        rotate(random(1)> .5 ? PI / 4 : -PI / 4);

        rect(0, 0, 30, 7, 15);

        pop();

      }

    }    

    pop();

  }

  //--------------------------------------------------

  //  create exhibition

  //--------------------------------------------------

  with(CV_EXHIBITION){

    push()

    var g = drawingContext.createRadialGradient(W / 2, 2800, W / 6 ,

                                                W / 2, 1800, W);

    g.addColorStop(0, color(255, 255, 64));

    g.addColorStop(0.25, color(192, 192, 32));

    g.addColorStop(0.5, color(192, 192, 32));

    g.addColorStop(1, color(96, 96, 0));

    drawingContext.fillStyle = g;

    rect(0, 0, W, H)

​

    var g2=drawingContext.createRadialGradient(W / 2, H / 3 + 2600, W / 2,

                                               W / 2, H / 3 + 2600, 100)

    g2.addColorStop(0, color(0, 0, 255))

    g2.addColorStop(1, color(255, 255, 255))

    drawingContext.fillStyle = g2;

    rect(0, H / 13 * 10.4, W, 1000);

    pop();

  }

  //--------------------------------------------------

  //  set mask

  //--------------------------------------------------

  CV_EXHIBITION = CV_EXHIBITION.get();

  CV_EXHIBITION.mask(CV_MASK);

}

​

//--------------------------------------------------

//

//  build community

//

//--------------------------------------------------

function buildCommunity(){

  with(CV_COMMUNITY){

    randomSeed(SEED);

    noiseSeed(SEED);

    colorMode(HSB);

​

    push();

    //--------------------------------------------------

    //  create place

    //--------------------------------------------------

    push();

    fill(0, .7)

    circle(W / 2, H / 13 * 5, W / 9 * 5)

    pop();

    //--------------------------------------------------

    // create member

    //--------------------------------------------------

    MEMBERS = []

    for(i = 0; i < 3000; i++){

      var m = {x : random(W), y : random(H)};

      m.dist = dist(W / 2, H / 13 * 5, m.x, m.y) ** 2 / 50000;

      m.id = i;

      m.shape = int(random(5)) + 1;

      m.hue = random(360);

      // circle packing

      var allow = true;

      if(dist(W / 2, H / 13 * 5, m.x, m.y) > 850){

        allow = false;

      }

      MEMBERS.forEach(e => {

        if(dist(m.x, m.y, e.x, e.y) < m.dist + m.dist + 60){

          allow = false;

        }

      })

      if(allow){

        MEMBERS.push(m);

      }

    }

    //--------------------------------------------------

    //  create connection

    //--------------------------------------------------

    noFill();

    stroke(255,.3);

    strokeWeight(3);

    MEMBERS.forEach(e => {    

      var count = 0

      MEMBERS.forEach(f => {

        if(count < 2 && dist(e.x, e.y, f.x, f.y) < e.dist ** .5 * 50 + 100){

          var ed = e.dist ** .5 * 20;

          bezier(e.x, e.y,

                 e.x + random(ed * 2) - ed, e.y + random(ed * 2) - ed,

                 f.x + random(ed * 2) - ed, f.y + random(ed * 2) - ed,

                 f.x, f.y);

          count++

        }

      })

    })

    //--------------------------------------------------

    //  create individuality

    //--------------------------------------------------

    strokeWeight(2);

    MEMBERS.forEach(e => {

      for(i = 2; i > 0; i--){

        fill(e.hue, 80 * (i-1), 100);

        beginShape();

          for(r = 0; r < TAU; r += PI/32){

            var d = (i * 20 + 5) * noise(sin(r * e.shape), e.id);

            vertex(cos(r + e.id ) *d + e.x, sin(r + e.id) * d + e.y);

          }

        endShape(CLOSE);

      }

    })

    pop();

  }

}

​

//--------------------------------------------------

//

//  build shibuya

//

//--------------------------------------------------

function buildShibuya(){

  with(CV_SHIBUYA){

    randomSeed(SEED);

    push();

    colorMode(HSB);

    noStroke();

    //--------------------------------------------------

    // draw asphalt

    //--------------------------------------------------

    background(24);

    push();

    rectMode(CENTER);

    fill(0, .2);

    for(i = 0; i < 50000; i++){

      rect(random(W), H / 5 * 3 + random(H / 5 * 2), 5, 5);

    }

    pop();

    //--------------------------------------------------

    //  draw scramble crossing

    //--------------------------------------------------

    push();

    rectMode(CENTER);

    fill(100);

    for(i=0; i < 700; i += 50){

      rect(W / 2, H * 0.95 + i, 2000 + i, 20 + i / 50);

      push();

      translate(W / 2 - 900 - i, H * 0.95 - 280);

      shearX(-.4);

      rect(0, 0, 20, 500);

      pop();

      push();

      translate(W / 2 + 900 + i, H * 0.95 - 280);

      shearX(.4);

      rect(0, 0, 20, 500);

      pop();

    }

    pop();

​

    //--------------------------------------------------

    // draw sky

    //--------------------------------------------------

    for(y = 0; y < H / 2; y += 10){

      fill(240, 90 - y / 30, 40 + y / 20);

      rect(0, y, W, 10);

    }

    //--------------------------------------------------

    //  draw building

    //--------------------------------------------------  

    for(i = 0; i < 10; i++){

      var edge = 200 + i * 10;

      var offset = random(50);

      for(x = 0; x <= W; x += edge){

        beginShape(TRIANGLE_STRIP);

        var nextX = x + edge - offset;

        var baseY = H / 9 * 8;

        var tempY = random(2000 - i * 300) + 1200;

        var hue = random(360);

        for(j = 0; j < tempY; j += 50){

          fill(hue, 90 - i * 5, 20 + i * 3 + random(9));

          vertex(x, baseY - sin(x / W * PI) * 300 - j);

          vertex(nextX, baseY - sin(nextX / W * PI) * 300 - j);

          vertex(x, baseY - sin(x / W * PI) * 300 - j - 50);

          vertex(nextX, baseY - sin(nextX / W * PI) * 300 - j - 50);

        }

        endShape();

      }

    }

    pop();

  }

}

​

​

​

​