p5.js:circle
キャンバスを用意する
circle.jsfunction setup() {
//$('<h2>').text('円を描く').appendTo($('body'))
createElement('h2', '円を描く');
createCanvas(256, 256)
noLoop()
background(220)
}雑に円を描く
circle.jsfunction draw() {
fill('yellow')
stroke('purple')
strokeWeight(10)
circle(150, 120, 80)
fill('red')
stroke('blue')
circle(150, 120, 40)
}ランダムに円を描く
random-circle.jsfunction setup(){
createElement('h2', 'ランダムに円を描く');
createCanvas(600,600);
background(255);
noStroke();
}
function draw(){
//オブジェクトの色をランダム（透明度70）
fill(random(255),random(255),random(255),70);
circle(random(width),random(height),random(100));
}実行→https://suto3.github.io/runp5/?code=https://scrapbox.io/api/code/suto3/p5.js:circle/random-circle.js
sketch.jsconst sketch = p => {
p.setup = () => {
p.createElement('h2', 'ランダムに円を描く');
p.createCanvas(600,600);
p.background(255);
p.noStroke();
}
p.draw = () =>{
//オブジェクトの色をランダム（透明度70）
p.fill(p.random(255),p.random(255),p.random(255),70);
p.circle(p.random(p.width),p.random(p.height),p.random(100));
}
}
new p5(sketch, 'editor'); 