更改顶点中每条线的颜色

Question

我将矢量的每个点绘制为P5.js中的顶点。我想像彩虹一样单独改变循环中每个顶点的颜色。问题是它改变了所有顶点的颜色，我不知道为什么。

var x = 0.01
var y = 0
var z = 0
var sigma = 10
var prandtl = 28
var rayleigh = 8 / 3
var dt = 0.01
var positionPoint = []
var colorChange = 0;
function setup() {
createCanvas(800, 800, WEBGL)
colorMode(HSB)
}
function draw() {
background("grey")
formula()
noFill()
scale(5)
strokeWeight(3)
beginShape()
rotateZ(frameCount * 0.01);
rotateY(frameCount * 0.01);
for (var i = 0; i < positionPoint.length; i++) {  
stroke(colorChange, 255, 255)
vertex(positionPoint[i].x, positionPoint[i].y, positionPoint[i].z)
colorChange += 0.001
if (colorChange > 255) {
colorChange = 0
}
}
endShape()
}
const formula = () => {
var dx = (sigma * (y - x)) * dt
var dy = (x * (prandtl - z) - y) * dt
var dz = (x * y - rayleigh * z) * dt
x = x + dx
y = y + dy
z = z + dz
positionPoint.push(createVector(x, y, z))
}

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

Answer 1

从角点绘制的形状只能统一着色。您需要绘制单独的线段。

vertex(positionPoint[i].x, positionPoint[i].y, positionPoint[i].z)

line(positionPoint[i].x, positionPoint[i].y, positionPoint[i].z,
positionPoint[i+1].x, positionPoint[i+1].y, positionPoint[i+1].z)

颜色通道在[0255]范围内。在循环之前设置colorChange = 0，并在循环中加1：

colorChange = 0;
for (var i = 0; i < positionPoint.length-1; i++) { 
// [...]
colorChange += 1
if (colorChange > 255) {
colorChange = 0
} 
}

var x = 0.01
var y = 0
var z = 0
var sigma = 10
var prandtl = 28
var rayleigh = 8 / 3
var dt = 0.01
var positionPoint = []
var colorChange = 0;
function setup() {
createCanvas(800, 800, WEBGL)
colorMode(HSB)
}
function draw() {
background("grey")
formula()
noFill()
scale(5)
strokeWeight(3)
//beginShape()
rotateZ(frameCount * 0.01);
rotateY(frameCount * 0.01);
colorChange = 0;
for (var i = 0; i < positionPoint.length-1; i++) {  
stroke(colorChange, 255, 255)
//vertex(positionPoint[i].x, positionPoint[i].y, positionPoint[i].z)
line(positionPoint[i].x, positionPoint[i].y, positionPoint[i].z, positionPoint[i+1].x, positionPoint[i+1].y, positionPoint[i+1].z)
colorChange += 1
if (colorChange > 255) {
colorChange = 0
}
}
//endShape()
}
const formula = () => {
var dx = (sigma * (y - x)) * dt
var dy = (x * (prandtl - z) - y) * dt
var dz = (x * y - rayleigh * z) * dt
x = x + dx
y = y + dy
z = z + dz
positionPoint.push(createVector(x, y, z))
}

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