p5.jsを久しぶりに勉強したので復習してみた✏️

さいしょに

今回は授業でp5.jsでランダムに図形を出す方法を習ったことを復習がてら記事にまとめていこうと思います。

ランダムで色がついた四角形が出てくるようにしてみる

授業で色のついた四角形をランダムで出す方法を習いました。また、角度もランダムにして出現させることができることもわかりました。

※基本ソースコードはほとんど共通のため省きます。

let color=300;

//ページ読み込み時に1度だけ実行される関数
function setup(){
 createCanvas(640 , 480);
 colorMode(HSL);
 rectMode(CENTER);
 angleMode(DEGREES);
 noStroke();
}

//ページを表示している間にずっと繰り返し実行される変数
function draw(){
 push();//
 translate(random(width) , random(height));
 rotate(random(0 , 360));
 scale(random(0.5 , 2));
 fill(300 , random(0 , 100) , 50 , 0.5);
 rect(0 , 0 , 50 , 50);
 pop();//
}

function mouseReleased(){
 color=random(0 , 360);
}

グリッドに並べてランダムに回転してみた

四角形をランダムに回転したグリッド状に並べられた四角形を出現させる方法を学びました。上記のように色もランダムにすることができることもわかりました。

※基本ソースコードはほとんど共通のため、省きます。

const diameter=20;

//ページ読み込み時に1度だけ実行される変数
function setup(){
 createCanvas(640 , 800);
 colorMode(HSL);
 rectMode(CENTER);
 angleMode(DEGREES);
 noStroke();
 background(0);
 fill(100 , 50 , 50);

 for(let y=0; y<height; y += diameter){
  for(let x=0; x<width; x += diameter){
   push();
   translate(x , y);
   rotate(random(360));
   let h=random(360);
   let d=random(5 , 20);
   fill(100 , h , 50 , 0.8);
   rect(0 , 0 , d , d);
   pop();
  }
 }
}

//ページを表示している間にずっと繰り返し実行される変数
function draw(){}//setupだけで描画ができるため()の中は空になる

さいごに

今回は授業で習ったp5.jsで習ったことをソースコードなどに書いてまとめていきました。1年生の時に習ったので覚えていない部分もあったのですが、ランダムに図形を出現できました。p5.jsで他にもアニメーションができるので試してみたいと思います💭