220118a

function setup() {

 createCanvas(w=720, w);

 fps = 24;

 frameRate(fps);

​

 dango_img = draw_dango();

 txt_img = draw_text();

​

 imageMode(CENTER);

 t = 0;

 ww = 1.1*w;

}

​

function draw(){

 if(frameCount%4==0){

  let img = createGraphics(ww, w);

  img.background(255);

  img.imageMode(CENTER);

  img.translate(ww/2, w/2);

  img.image(txt_img, 0, 0);

  img.translate(ww/8*sin(t/fps), 0);

  img.rotate(PI/8*sin(t/fps*2));;

  img.image(dango_img, 0, 0);

​

  img = draw_noise(img);

  img = draw_color_glitch(img, 3 * (0.5+0.5*abs(sin(t/fps*4 + random()))));

  img = draw_shift_glitch(img, 4);

​

  image(img, w/2, w/2);

​

  draw_scanline();

 }

  t++;

}

​

function draw_dango(){

  let img = createGraphics(w, w);

  img.colorMode(HSB);

  img.stroke(0);

  img.strokeWeight(w/100);

​

  let color_pat = [ ["#ffffff", "#f090d0", "#408040"],

                    ["#ffffff", "#bc6030", "#606060"] ];

  color_pat = shuffle( random(color_pat) );

  let size = height/5.5;

  img.push();

  img.translate(w/2, w/2);

  img.line(0, -size*1.8, 0, size*2);

  img.push();

  img.translate(0, 0);

  dango(img, size, color_pat[0]);

  img.pop();

  img.push();

  img.translate(0, -size);

  dango(img, size, color_pat[1]);

  img.pop();

  img.push();

  img.translate(0, size);

  dango(img, size, color_pat[2]);

  img.pop();

  img.pop();

​

  return img;

}

​

​

function draw_text(){

  let img = createGraphics(w, w);

  img.colorMode(HSB);

​

  img.stroke(0);

  img.strokeWeight(w/100);

​

  img.fill(0,0);

  img.rect(w*0.05, w*0.05, w*0.9, w*0.9);

​

  //text

  img.colorMode(RGB);

  img.push();

  let tsize = height/20;

  img.textSize(tsize);

  img.textStyle(BOLD);

  img.rectMode(CENTER);

  img.strokeWeight(0);

  let title = `団子三色兄弟`;

  img.push();

  img.translate(w*0.25, w*0.05);

  img.fill(255);

  img.rect(0, 0, tsize*(title.length+0.75), tsize);

  img.fill(0);

  img.textAlign(CENTER, CENTER);

  img.text(title, 0, 0);

  img.pop();

  tsize = height/28;

  img.textSize(tsize);

  title = `Dango 3 colors brothers`;

  img.push();

  img.translate(w*0.675, w-w*0.05);

  img.fill(255);

  img.rect(0, 0, tsize*(title.length/2+2.5), tsize);

  img.fill(0);

  img.textAlign(CENTER, CENTER);

  img.text(title, 0, 0);

  img.pop();

​

  img.pop();

​

  return img;

}

​

function dango(img, size, fcolor){

  img.push();

  img.translate(0, 0)

  img.fill(fcolor);

  img.ellipse(0, 0, size);

  face(img, size);

  img.pop();

}

​

function face(img, size){

  img.push();

  img.fill("#000000");

  img.ellipse(size/8*2, -size/10, size/14);

  img.ellipse(-size/8, -size/10, size/14);

  img.fill(0,0);

  img.arc(size/8, size/20, size/10*1.25, size/10, -PI/2*1.25, PI/2*1.25);

  img.arc(size/8*0.6, size/16*3.5, size/4, size/10, 0, PI);

  img.pop();

}

​

function draw_noise(img){

  let gp = createGraphics(img.width, img.height);

  gp.background(0);

  gp.image(img, 0, 0);

​

  let noise_size = 5;

​

  gp.push();

  gp.strokeWeight(0);

  for(let i=0;i<img.width;i+=noise_size){

    for(let j=0;j<img.height;j+=noise_size){

      if(random()<0.1){

        gp.fill(random([0, 255]), 100*noise(i, j));

        gp.rect(i, j, noise_size);

      }

    }

  }

  gp.pop();

​

  return gp;

}

​

function draw_color_glitch(img, shift_size){

  let gp = createGraphics(img.width, img.height);

  gp.background(0);

​

  let left_color = color(255, 0, 0);

  let right_color = color(0, 255, 255);

​

  gp.push();

  gp.blendMode(ADD);

​

  gp.tint(left_color);

  gp.image(img, -shift_size, 0);

​

  gp.tint(right_color);

  gp.image(img, shift_size, 0);

  gp.pop();

​

  return gp;

}

​

function draw_shift_glitch(img, shift_size){

  let gp = createGraphics(img.width, img.height);

  gp.background(0); 

  gp.image(img, 0, 0);

​

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

    let sx = random(img.width*0.5);

    let sy = random(img.height*0.05);

    let x = random(img.width - sx*0.5);

    let y = random(img.height - sy*0.5);

    let ix = x + random(-1, 1)*shift_size;

    let iy = y ;

    gp.image(img, ix, iy, sx, sy, x, y, sx, sy);

  }

​

  return gp;

}

​

function draw_scanline(){

  push();

  stroke(0, 50);

  strokeWeight(1);

  for(let i=0;i<height;i+=height/200){

    line(0, i, width, i);

  }

  pop();

}

​

//save PNG

function keyPressed() {

save("img_" + month() + day() + hour() + minute() + second() + ".png");

}