p5.js
ドットインストールの説明をメモ書き
色
n グレースケール 0-255
n1,n2,n3 RGB / HSB
最後に透明度可能 最大値
CSS表記もOk
colorMode(HSB)
background(50,100,80);
background(‘red’);
background(‘rgba(255,0,0,0’);
05 長方形
rect
x,y,w,h
width height 自動で幅と高さ
width/2, height/2 という書き方で中心に配置
レクトモードで最初の設定値を変えれるのかな。
rectMode(CORNER)
rectMode(CORNERS)
rectMode(CENTER)
rectMode(RADIUS)
だ円形
ellipse(cx, cy, w, h);
ellipseMode(Center);
ellipseMode(RADIUS);
ellipseMode(CORNER);
ellipseMode(CORNERS);
line
点 point
えんこ arc
三角形 triangle
07 塗りと線
//図形
fill
//色の変数
let c = color(‘pink’)
fill(c);
//透明
nofill
stroke();
//太さ
strockWeight(5);
noStroke();
08. テキスト描画
text(s, x, y, w, h);
textAlign で左上をXY座標sに調整できる
textalign(LEFT, TOP);
textSize();
textFont(‘Impact’);
textStyle(BOLD);
色は
fill
strokeWeight(5);
stroke
09 図形の変形
座標空間を変える
今ある座標を保存 色・塗りも保存してくれる
push()
戻す
pop()
// push()とpop()で囲んだ範囲が適用される
push()
translate(10.10)
pop()
回転 ラジアンで指定
rotate(PI/4);
radians(30) //30度
スケール
scale //拡大縮小
scale(2, 0.5); w, h
10 マウス検知
mouseX, mouseY
ellipse(mouseX, mouseY, 50. 50)
mouseIsPressed // 押されてる間true
mousePressed() //押したらtrue
if (mouseIsPressed === true) {
fill(‘pink’);
} else {
fill(‘white’)
//半径大きくしたい
mousePressed(){
//デフォルト無効化
ellipse(mouseX, mouseY
return false;
}
クリックするたびに大きくなる
11 キー検知
keyIsPressed
keyTyped(); 特殊キーを無視
keyPressed();大文字小文字を区別しない
key:・・一般キー
keyCode: 特殊キー alt, option, enter, tab etc
12 乱数
random(); 0-1
random(n) 0-n
random(n, m) n-m
13 sin / cos
let angle = 0;
let r = 50;
function draw(){
push();
translate(width/2, height/2);
x = sin(radians(angle)) * r;
y = cos(radians(angle)) * r;
ellipse(x, y, 10. 10)
angle += 2;
r = += 0.1 ; // らせん
pop();
14 DOMライブラリ
cdn等でインストール必要
スケッチ状にスライダーを多く
let angle = 0;
let r = 50;
let slider;
setupの方に
slider = createSlider(0, 100, 30); //min, max, default
slider.position(10,200;
function draw(){
r = slider.value();
push();
translate(width/2, height/2);
x = sin(radians(angle)) * r;
y = cos(radians(angle)) * r;
ellipse(x, y, 10. 10)
angle += 2;
r = += 0.1 ; // らせん
pop();
最新情報をお届けします
Twitter でCoderdojokumaをフォローしよう!
Follow @Coderdojokuma