Teachers open the door but You must enter by yourself.
【事前学習】モデリングの単元の復習をしてきてください。
p5.js Web Editor で実行してみましょう。
const m=Array(10);
function setup() {
const canvas=createCanvas(300, 500,WEBGL);
frameRate(30);
for(let i=0; i<10; i++){
m[i]=Array(20);
for(let j=0; j<20; j++){
const t=j/20.0;
//fig2
m[i][j]=new p5.Vector(random(-0.5, 0.5)*t,random(-1.0, 1.0)*t);
}
}
}
let delta=0;
function draw() {
ortho(-2.5, 12.5, 2.5, -22.5);
background(234);
stroke(0);
rectMode(CENTER);
for(let i=0; i<10; i++){
for(let j=0; j<20; j++){
push();
translate(i+delta*m[i][j].x, j+delta*m[i][j].y);
rect(0,0, 1,1);
pop();
}
}
delta=delta>1?0:delta+0.03;
}
//m[i][j]と同様にs[i][j]を生成します。
//setup()内
s[i][j]=random(0,1)*t;
//draw()内
push();
translate(i, j);
scale(1+delta*s[i][j]);
rect(0,0, 1,1);
pop();
//m[i][j]と同様にr[i][j]を生成します。
//setup()内
r[i][j]=random(-45,45)*t;
//draw()内
push();
translate(i, j);
angleMode(DEGREES);
rotate(delta*r[i][j]);
rect(0,0, 1,1);
pop();
【事後学習】本日学んだ内容を再確認しておきましょう。
This site is powered by