なんかいい感じになったのでメモです。
準備
星を描くfunctionを用意しておく。
大きさと透明度を引数にしておく。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function setup(){ createCanvas(720, 720); background(0); noStroke(); colorMode(HSB); blendMode(ADD); // 加算合成 drawStar(3, 1); } function drawStar(starwidth, alpha){ } |
線を描く
noiseを使い、円を線状に書く。
後で同じ関数を呼ぶのでseedを固定しておく。
noise()に画面幅をかけてそのまま使うと、結果が画面の中央付近の座標に固まってしまうため、画面幅の2倍をかけて、そこから幅の半分を引いておくことで、画面全体の座標が出るようにする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function drawStar(starWidth, alpha){ randomSeed(2); // seedを固定 noiseSeed(2); for(var i = 0; i < 500; i++){ fill(random(60) + 210, 50, 100, alpha); var x = noise(i / 1000) * width * 2 - width / 2; var y = noise(i / 1000, 9) * width * 2 - width / 2; circle(x, y, random(starWidth) ** 1.2); } } |
ずらす
円の座標に適当にrandom()を加える
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function drawStar(starWidth, alpha){ randomSeed(2); noiseSeed(2); for(var i = 0; i < 500; i++){ fill(random(60) + 210, 50, 100, alpha); var x = noise(i / 1000) * width * 2 - width / 2; var y = noise(i / 1000, 9) * width * 2 - width / 2; circle(x + random(100), // random()を追加 y + random(100), random(starWidth) ** 1.2); } } |
増やす
同じものをたくさん作る。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function drawStar(starWidth, alpha){ randomSeed(2); noiseSeed(2); for(var j = 0; j < 10; j++){ // 繰り返しを使ってたくさん描く for(var i = 0; i < 500; i++){ fill(random(60) + 210, 50, 100, alpha); // noise()の引数にjを使っておく var x = noise(i / 1000, j) * width * 2 - width / 2; var y = noise(i / 1000, j + 9) * width * 2 - width / 2; circle(x + random(100), y + random(100), random(starWidth) ** 1.2); } } } |
ランダムも追加
ランダムな位置にも円をたくさん描いておく。
|
1 2 3 4 5 6 7 8 9 10 11 |
function drawStar(starWidth, alpha){ /* 略 */ for(var i = 0; i < 2000; i++){ fill(random(60) + 210, 50, 100, alpha); circle(random(width), random(width), random(starWidth) ** 1.2); } } |
ぼかして重ねる
大きな円を描いた後にfilter(BLUR)しする。その後に小さな薄い円を描く。
|
1 2 3 4 5 6 7 8 9 10 11 |
function setup(){ createCanvas(720, 720); background(0); noStroke(); colorMode(HSB); blendMode(ADD); drawStar(3, 1); // 大きな円を描く filter(BLUR); // ぼかす drawStar(2, 0.5); // 小さな薄い円を描く } |
コメント