【p5js/プログラミング】残す。

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

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

２５日目のテーマは「残す」。

動いているモノに対して、置き去りにされている感を作りたいなと思い、円が動いている中に、取り残されてしまう円をつくりました。それを複数同じ動きで動かして、別の円の中に戻るというところが社会を表している感。

だんだん、classがすらっと出てくるようになってきた気がする。もっと勉強しよう！

では、ごらんあれ〜。

const num = 10;
var nokosu = [];

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

function draw(){
  for (var i = 0; i < nokosu.length; i++) { var p = map(i,0,nokosu.length,0,width); 
  push();
  translate(0,p); 
  nokosu[i].show();
  nokosu[i].update();
  pop();
 }
} 
class Nokosu {
 constructor() { 
  this.x = 0;
  this.y = 0;
  this.y2 = 0;
  this.r = 50;
  this.cnt = 0;
  this.col1 = color(random(160,220),random(80,100),random(80,90),random(0,30));
  this.col2 = color(random(18,27),random(80,100),random(80,100),random(20,60));
  noStroke();
 }
 show(){
  fill(this.col1);
  circle(this.x,this.y,this.r);
  push();
  fill(this.col2); circle(this.x,this.y2,this.r/5);
  pop();
  }
 update(){
  this.cnt += 0.1;
  this.x += 1;
  this.y += sin(this.cnt)*2;
  if (this.x > width) {
        this.x = 0;
        this.col1 = color(random(160,220),random(80,100),random(80,100),random(0,30));
        this.col2 = color(random(18,27),random(80,100),random(80,100),random(20,60));
   }
  }
}

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

なにかあればTwitterまで。