p5.js:circle

キャンバスを用意する

code:circle.js

function setup() {

//$('<h2>').text('円を描く').appendTo($('body'))

createElement('h2', '円を描く');

createCanvas(256, 256)

noLoop()

background(220)

}

雑に円を描く

code:circle.js

function draw() {

fill('yellow')

stroke('purple')

strokeWeight(10)

circle(150, 120, 80)

fill('red')

stroke('blue')

circle(150, 120, 40)

}

code:random-circle.js

function 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));

}

code:sketch.js

const 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');

p5-sketch-button.icon

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