初めてのp5.js

初めてp5.jsに触りました。Processingとちょこちょこ違う点があり、驚くことだらけです。
一番最後に作ってお気に入りのコードから。
よく見ると線ではなく丸っぽいのが見えて好きです。

function setup() {
  createCanvas(400, 400);//canvas size
    colorMode(HSB,360,100,100,100); //HSBmode
}

function draw() {
    stroke(random(180,250),random(80,100),random(80,100));
    ellipse(frameCount*7%width,frameCount%height,1,random(50)%100);
}

これは初めの方に作ったもの。
使った環境のせいか透明度が実際にviewできなくて当時は不透明度100％でした。
ちょっと改造してます。

function setup() {
  createCanvas(400, 400);//canvas size
    colorMode(HSB,360,100,100,100); //HSBmode
}

function draw() {
    noStroke();
     fill(random(180,250),random(80,100),random(80,100),random(25,75));
     ellipse(frameCount*10%(width+50),frameCount*3%(height+50),random(frameCount%100));
}

これは最後から2番目に作ったやつ。勝手にrandomを付け加えて楽しくしてました。

r=50;

function setup() {
  createCanvas(400, 400);//canvas size
    colorMode(HSB,360,100,100,100); //HSBmode
 fill(random(180,200),100,100,50);
    rect(0,0,width,height);
}

function draw() {
    stroke(random(180,200),random(80,100),random(80,100))
 fill(random(180,250),random(80,100),random(80,100),50);
ellipse(frameCount%width+random(-width,width),frameCount/2%height,r,r);
}

今気づいているProcessingとの違い
intが要らない
ellipse(x,y,r)にすると正円が出力される

初めてジェネリック薬品処方された人みたいな気持ち。 Processingと混同しないように、得た知識を活用してp5.jsも頑張ります。