使用弧度并遍历十六进制颜色值数组

Question

我有一些十六进制值存储在一个数组中。我正在使用数组索引来增加弧度角度并在圆中显示一系列椭圆显示一系列椭圆。很难解释，但我有一个 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 来索引颜色。这是您要找的结果吗？

使用弧度并遍历十六进制颜色值数组

Using radians and iterating over array of hex colour values

p5.js