改变顶点中每条线的颜色

如何解决改变顶点中每条线的颜色

我将向量的每个点绘制为 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>

解决方法

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

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

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

颜色通道在 [0,255] 范围内。在循环之前设置 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].z)
        line(positionPoint[i].x,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>