p5.js:円を描く

code:ellipse.js

function setup() {

//let h1 = createElement('h1', 'これは見出しテキスト');

createCanvas(400, 400);

colorMode(HSB, 360, 100, 100, 100);

}

function draw() {

background(220);

//10回円を描く

for (let i = 0; i < 100; i++) {

//ランダムな色相から色を作り変数cに代入

let h = random(360); //色相

let s = 80; //彩度

let b = 100; //明度

//色を作る

let c = color(h,s,b);

noStroke(); // 線をナシ

fill(c);

ellipse(random(width), random(height), random(20, 40));

}

//ループを停止する

noLoop();

}

code:ellipse2.js

function setup() {

createCanvas(500, 500);

colorMode(HSB, 360, 100, 100, 100);

}

function draw() {

background(220);

//10回円を描く

for (let i = 0; i < 10; i++) {

draw_ellipse();

}

noLoop();

}

function draw_ellipse() {

//色を作る

let c = choice_color();

noStroke(); // 線をナシ

fill(c);

//ellipse(random(width), random(height), random(20, 40));

}

function choice_color() {

let h = random(360); //色相

let s = 80; //彩度

let b = 100; //明度

return color(h,s,b);

}

p5.js.icon

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