【p5js/プログラミング】二年前。

Art

こんにちは、たやち（tayati369）です。

p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」！！に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。（デイリーとはｗ）

２２日目のテーマは「二年前」。

iPhoneの写真の機能で、２年前の写真を表示させると、ちょうど↓のお寿司の写真が出てきたので、この🍣をテーマに作品作ろうと思いました。

お寿司が出てきたときの自分の幸せな気持ちを表現しています。😂

では、ごらんあれ〜。

const sushi = [127843,127861];
const num = 100;
var x=1;
var y=0;
var bubbles = [];
var col;

function setup(){
  createCanvas(500,500);
  colorMode(HSB,360,100,100,100)
  for (var i = 0; i < num; i++) {
    bubbles[i] = new Bubble;
  }
}

function draw(){
  background(255);
  for (var j = 0; j < height; j++) {
    col = map(j,0,height,0,100);
    stroke(60,100,100,col);
    line(0,j,width,j);
  }
  noStroke();
  for (var i = 0; i < bubbles.length; i++) {
    if (i == num-20) {
      push();
      e = String.fromCodePoint(sushi[0].toString());
      translate(width/2,height/2);
      textSize(70);
      text(e,-70,20);
      e = String.fromCodePoint(sushi[1].toString());
      text(e,0,25);
      pop();
    }
    push();
    translate(width/2,height/1.8);
    fill(210,100,100,40);
    bubbles[i].show();
    pop();
    bubbles[i].update();
  }
}

class Bubble {
  constructor() {
  this.x = random(-10,10);
  this.y = random(-150,200);
  this.r = random(3,20);
  }
  show(){
    circle(this.x, this.y, this.r);
  }
  update(){
    this.x += 2*sin(this.y/3);
    this.y -= random(0.01,0.1);
  }
}

ではでは、さようなら〜〜〜。

なにかあればTwitterまで。

コメント