stroke color is applied to whole shape instead of each vertex

[rottenoats]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: latest 0.7.2
• Web browser and version: Tested in yandex (based on chrome v8 engine (V8 6.8.275.26)) and safari 12.0 (but I don't think this is an issue related to browsers)
• Operating System: macOs
• Steps to reproduce this:

I'm attempting to redo a similar color effect shown in this video by "the coding train". The video was done in processing and I'm trying to do the same effect in p5.js. The idea consists in looping through a list of vertexes (2d) and to create a shape where each vertex has a different color. Some kind of rainbow effect.

Instead of drawing a shape where each part is a different color, I get a single color that changes all at once.

Unless, stroke is supposed to work differently than in processing, I'm assuming this is a bug?

Here is an example, notice how the whole shape has one color instead of a rainbow color.

function setup(){
    createCanvas(500, 500);
    colorMode(HSB);
    background(51);
}
let x = 0;
let y = 0;
const points = [];

function draw(){
    points.push({x,y});

    x = (x + 10) % width;
    if(x === 0){
        y = (y + 10) % height;
    }

    let hu = 0;
    noFill();
    strokeWeight(2);
    beginShape();
    points.forEach(({x,y})=>{
        stroke(hu, 255, 255);
        vertex(x,y);
        hu += 0.1;
        if(hu > 255) hu = 0;
    })
    endShape();
}

note that if you replace "vertex" with "point" then the color effects works as intended but just as a series of dots...

[EsdrasXavier]

Hey, after a few minutes testing this issue I get the answer, I guess, when you put beginShape(); without any argument a variable called "shapeKind" is null, than when needs to draw the var is null and don't match with any type of the possible draws. So if you pass as paramenter "QUAD_STRIP" or "TRIANGLE_STRIP" like this:

beginShape(TRIANGLE_STRIP);  // Or QUAD_STRIP

points.forEach(({x, y}) => {
    stroke(hu, 255, 255);
    vertex(x, y);
    hu += 0.1;
    if(hu > 255) hu = 0;
});
endShape();

must work, but I do no if they did it on purpose or not, any way this should works for you now.

[lmccart]

thanks for reporting. this is tracked here. currently we don't support per vertex coloring in p5.js.