p5.js 基礎
p5.jsを始める
https://gyazo.com/f8ee01c7f91599dffdf666490bb9f2d2
基礎
code:basic.js
// 起動時に動作する部分
function setup() {
createCanvas(400, 400);
}
//起動後に繰り返し動作する部分
function draw() {
background(220);
}
図形の描き方
座標系に注意
code:draw00.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//点を打つ(x, y)
point(50, 50);
//線を引く(始点x, 始点y, 終点x, 終点y)
line(50, 100, 350, 100);
//長方形を描く(始点x, 始点y, 幅, 高さ)
rect(50, 150, 300, 100);
//三角形を描く(点Ax, 点Ay, 点Bx, 点By, 点Cx, 点Cy)
triangle(50, 300, 50, 350, 350, 350);
}
code: draw01.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//面(四角形)を描く(点A,B,C,D)
quad(150, 50, 250, 50, 350, 100, 50, 100);
//円弧を描く (中心点x, 中心点y, 幅, 高さ, 開始角度, 終了角度)
arc(200, 200, 200, 100, radians(0), radians(180));
}
code: draw02.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//円(楕円)を左上の角を基準に描く(始点x,始点y, 幅, 高さ)
ellipseMode(CORNER);
ellipse(50, 50, 100, 100);
//円(楕円)の中心を基準に描く
ellipseMode(CENTER);
ellipse(50, 50, 100, 100);
}
線形を変える
code:weight.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(1);
line(50, 50, 350, 50);
strokeWeight(5);
line(50, 100, 350, 100);
strokeWeight(10);
line(50, 150, 350, 150);
strokeWeight(15);
line(50, 200, 350, 200);
strokeWeight(25);
line(50, 250, 350, 250);
strokeWeight(30);
line(50, 300, 350, 300);
strokeWeight(35);
line(50, 350, 350, 350);
}
code: cap.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeCap(SQUARE); // 直角
strokeWeight(15);
line(50, 150, 350, 150);
strokeCap(PROJECT); //角、突き出し
strokeWeight(15);
line(50, 200, 350, 200);
strokeCap(ROUND); // 丸め
strokeWeight(15);
line(50, 250, 350, 250);
}
色を変える
code: color.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200,200,200); //r,g,b
//background(200); //grayscale
fill(100, 0, 0, 50); //r, g, b, alpha
//fill(100,100); //grayscale, alpha
rect(50, 100, 300, 100);
rect(50, 140, 300, 100);
rect(50, 180, 300, 100);
noFill();
rect(50, 220, 300, 100);
}
code: color_line.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(10);
//円(楕円)を左上の角を基準に描く(始点x,始点y, 幅, 高さ)
ellipseMode(CORNER);
stroke(255,0,0);
ellipse(50, 50, 100, 100);
stroke(0,255,0);
ellipse(250, 50, 100, 100);
stroke(0,0,255);
ellipse(250, 250, 100, 100);
noStroke();
ellipse(50, 250, 100, 100);
}
参考文献
「Processingをはじめよう 第2版」