p5.js

p5.jsはprocessingのJavaScriptです。CSSの表記をそのまま使用することもできます。

rectMode(coner),rectMode(coners),rectMode(center)などあります。

function setup(){
  createCanvas(480, 240);
    background(255, 0, 0, 10);

    rect(50, 50, 150, 100)
}

function draw(){

}

楕円 ellipse, point, arc, line

    var c = color('pink')
    fill(c);
    stroke(c);
    ellipse(width/2, height/2, 100, 100)
    text("hello world", 100, 100);

座標軸による操作

function setup(){
    createCanvas(480, 240);
    background(255, 0, 0, 10);
    noStroke();

    fill(255, 0, 0, 127);
    rect(0, 0, 100, 100);

    r = 30;
    push();
    translate(10, 10);
    rotate(radians(r));
    scale(1.2, 1.2)
    fill(0, 0, 255, 127);
    rect(0, 0, 100, 100);
    pop();
}

マウスの操作

function draw(){
   noStroke();
   background('skyblue');
   ellipse(mouseX, mouseY, 34, 34);
}

入力による動作

r = 50;

function setup(){
    createCanvas(480, 240);
    background(255, 0, 0, 10);
   

}

function draw(){
   noStroke();
   background('skyblue');

   if (keyIsPressed === true){
    fill('pink');
   } else {
    fill('white');
   }
   ellipse(mouseX,mouseY, r, r)

}

function keyTyped(){
  if (key === 'u'){
    r += 10;
  }
}