p5.js 変形

function setup() {
    createCanvas(480, 480);
    background('skyblue');
}

function draw() {
    noStroke();

    //赤い四角
    fill('red');
    rect(0, 0, 100, 100);

    //push(); pop(); 座標の保存
    //赤い四角の描写座標を保存して、下の青い四角の変形をすることができる
    push();
    //移動する
    translate(10, 10);
    fill('blue');
    rect(0, 0, 100, 100);
    pop();

    //緑の四角
    push();
    translate(20, 20);
    //回転させる
    //ラジアンで指定 PI=180度
    rotate(PI/4);
    //radians()で角度を指定できる
    // rotate(radians(30));

    //scale(x, y); 大きさの指定 xが2倍, yが半分
    scale(2, 0.5);
    fill('green');
    rect(0, 0, 100, 100);
    pop();
}

[codepen_embed height="265" theme_id="0" slug_hash="JZwqyK" default_tab="js,result" user="kyamashiro"]See the Pen <a href='https://codepen.io/kyamashiro/pen/JZwqyK/'>p5.js 3</a> by kyamashiro (<a href='https://codepen.io/kyamashiro'>@kyamashiro) on <a href='https://codepen.io'>CodePen.[/codepen_embed]