p5.js:point()

点を描く、点を打つ。

キャンバスを用意する

code:sketch1.js

//リサジュー図形(cos(nt),sin(mt+d))のパラメータ

const n=13

const m=12

const d=90 //

function setup() {//最初に1回だけ実行

createCanvas(600,600)

background(255)

//点や線の太さと色

strokeWeight(2)

stroke(255,127,127)

//描画準備

const maxt=5000 //繰り返し回数＝点の数

const w2=width/2

const h2=height/2 //(w2,h2)が中心

//描画 radians()は度→ラジアン変換

for (var t=0; t<360; t+=360/maxt) {

point(w2*(1+cos(radians(n*t))), h2*(1-sin(radians(m*t+d))))

// point(w2*(sin(radians(n*t))), h2*(sin(radians(m*t+d))))

}

}

code:sketch.js

const sketch = p => {

p.setup = () => {

//キャンバスを作成

const canvas = p.createCanvas(600,425);

canvas.id = '__P5sc__';

//背景色

p.background('#eee');

p.stroke('#aaa');

}

p.draw = () => {

if (p.mouseIsPressed) {

p.fill(0,0,0,10);

} else {

p.fill('#fff');

}

p.point(p.mouseX, p.mouseY);

}

}

new p5(sketch, 'editor');

https://img.shields.io/badge/p5.js-point()-ED225D.svg?logo=p5.js&style=for-the-badge