使用p5.js，我想創建 100 個執行以下操作的同心圓：
繪制初始圓：
- 根據 0.8 x 寬度選擇尺寸
- 從顏色 1 開始（基于 HSB 顏色模式）
- 從不透明度 0.01 開始（基于 HSB 顏色模式）
- 從陰影 100 開始（基于 HSB 顏色模式））。
畫下一個圓圈：
- 大小為 0.98 x 以前的圓圈大小
- 顏色以 1 遞增
- 不透明度增加 0.01
- 陰影減少 1
我了解如何通過使用不同的輸入繪制 100 個圓圈來手動執行此操作，但我想將這一切都包含在一個 for 回圈中。我可以在 for 回圈中更改一個引數，但不幸的是我的專業知識停在那里，我是初學者。如果我嘗試將其他引數掛在同一個 for 回圈中，它會變得非常復雜，并且某些東西似乎會中斷，如果這是我需要做的，我不太明白嵌套 for 回圈是如何作業的。提前感謝您的幫助！
到目前為止，這是我僅用 10 個圓圈嘗試過的：
function setup() {
createCanvas(1000, 1000);
colorMode(HSB, 360, 100, 100, 100);
}
function draw() {
background(0, 0, 100); // white background
for (let i = width; i >= 0; i = i - width/10) {
noStroke();
let colour = (i/1000)*360;
let shade = i/10;
let opacity = ((i/10)*-1) 100;
fill(colour, 100, shade, opacity);
let diameter = i;
circle(width/2, height/2, diameter);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>uj5u.com熱心網友回復：
我更新了您的代碼以匹配您描述它應該做的事情。
function draw() {
background(0, 0, 100);
for (let i = 0; i < 100; i ) {
noStroke();
let colour = (10*i % 360);
let shade = 100 - i;
let opacity = 50 i;
fill(colour, 100, shade, opacity);
let diameter = width * Math.pow(0.98, i);
circle(width/2, height/2, diameter);
}
}
- 顏色是用 設定的
(10*i % 360)。我嘗試將它增加 1，但這并沒有做很多，所以我將它增加到 10。%操作員確保它會環繞[0, 360]. 作為一個例子370 % 360 = 10。 - 陰影似乎介于 之間
[0, 100]，因此它從填充亮度開始，并在接近圓心時逐漸減小到 0。這產生了隧道效應。 - 不透明度似乎也介于
[0, 100]. 我添加了一個 50 的起始值，所以你可以看到效果。 - 直徑根據回圈的迭代而變化。它用于
Math.pow(0.98, i)計算表明它變得多小的系數。
總而言之，這是我得到的結果：
uj5u.com熱心網友回復：
function setup()
{
createCanvas(800, 800);
stroke(255);
strokeWeight(2);
noFill();
}
function draw()
{
background(0);
translate(width/2,height/2);
let NUMCIRCLES = 100;
let startRadius = 100;
let endRadius = 400;
for(let i = 0; i < NUMCIRCLES; i )
{
let circleRadius = map(i,0,NUMCIRCLES-1, startRadius, endRadius);
let color = map(i,0,NUMCIRCLES-1, 20,255);
let opacity = map(i,0,NUMCIRCLES-1, 100,255);
stroke(color, opacity);
ellipse(0,0, circleRadius,circleRadius);
}
}
如果您改用 map 函式會有所幫助。它超級方便。另外，不要介意我使用的是橢圓而不是圓形函式。我只是喜歡用半徑來思考。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/526652.html
標籤：javascriptfor循环几何学绘画p5.js
上一篇：行加矩陣運算的向量化回圈