ラジアンを使用し、16進数のカラー値の配列を反復する

Question

配列に格納されている16進数の数値があります。配列インデックスを使用してラジアン単位の角度を増やし、一連の楕円を丸で表示すると、一連の楕円が表示されます。説明は難しいが、私にはpenがある。問題は、forループを使用すると、インデックスを使用して楕円を色付けする方法がわかりません。

const colors = ['#b1ede8','#db9a78','#eed4ad','#a989b2'] 

function setup(){ 
    createCanvas(windowWidth,windowHeight) 
} 

function draw(){ 
background(255,100,100) 
translate(width/2,height/2) 
    noStroke(); 
    prizes(colors,200) 
} 

function windowResized(){ 
    resizeCanvas(windowWidth,windowHeight) 
} 

function prizes(data,radius){ 

for(i = 0 ; i < TWO_PI ; i+=TWO_PI/data.length) 
{ 
    let x = radius * cos(i); 
    let y = radius * sin(i); 

ここで、iはラジアン単位の浮動値になり、塗りつぶしコードは機能しません。事前に

fill(colors[i]) 
    ellipse(x,y,20) 
    } 
} 

おかげ

Answer 1

const colors = ['#b1ede8','#db9a78','#eed4ad','#a989b2'] 
 

 
function setup(){ 
 
    createCanvas(windowWidth,windowHeight) 
 
} 
 

 
function draw(){ 
 
background(255,100,100) 
 
translate(width/2,height/2) 
 
    noStroke(); 
 
    prizes(colors,200) 
 
} 
 

 
function windowResized(){ 
 
    resizeCanvas(windowWidth,windowHeight) 
 
} 
 

 
function prizes(data,radius){ 
 
    
 
var j = 0; 
 
    
 
for(i = 0 ; i < TWO_PI ; i+=TWO_PI/data.length) 
 
{ 
 
    let x = radius * cos(i); 
 
    let y = radius * sin(i); 
 
    
 
    fill(data[j]) 
 
    ellipse(x,y,20) 
 
    j++; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

私は問題を発見したと思います。色の値を取得するにはiを使用しました。しかし、あなたはiを1つ増やしていません。あなたはインヴァリデート番号を取得します。私は新しい変数jを作成して色を索引付けしました。これはあなたが探している結果ですか？