change color of each line in a vertex

Question

I'm drawing each point of a vector as a vertex in P5.js. I would like to change the color of each vertex in a loop separately like a rainbow. The thing is that it changes the color of all the vertex and I don't know why.

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

Shapes drawn from corner points can only be colored uniformly. You need to draw separate line segments.

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)

Color channels are in range [0, 255]. Set colorChange = 0 before the loop and inclrement it by 1 in the loop:

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>