p5.js

P5.js 専用エディタ

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をフォローしよう!