Shapes & Drawing -p5.js Tutorial [JavaScript for Beginner]

수업 동영상



1.3: Shapes & Drawing - p5.js Tutorial

수업에서 사용하는 웹 서비스
p5*js 웹 에디터
p5*js Reference

메모


// Syntax
instruction (__,__,__);

// Sample 1
createCanvas (400,300,200);
rect(100,50,25,75);

// functionName
”rect” | rectangle(長方形)

코드1



p5.js

// lineが最前面に表示
function setup(){
  createCanvas(400,400);
}

function draw() {
  backGround(220,0,200);
  rect(100,50,25,75);   //長方形 (x,y,w,h);
  line(0,50,400,300);
}


Preview1





Code2



p5.js

function setup(){
  createCanvas(400,400);
}
// rectが最前面に表示
function draw() {
  background(220, 0, 200);
  line(0,50,400,300)
  rect(30,20,55,55);
}

Preview2



좋은 웹페이지 즐겨찾기