When using buildGeometry (in p5.js's webgl mode), the fill color can change inside the function while the stroke color cannot. Without this all shapes inside the function must have the same stroke color.
I am not sure whether this is intentional or if it is documented anywhere. I'm also curious to know if there is a work-around, or if something is wrong in my code.
Code and result is below:
let shape;
function setup() {
createCanvas(100, 100, WEBGL);
shape = buildGeometry(createShape);
}
function draw() {
background(200);
orbitControl();
model(shape);
}
function createShape() {
strokeWeight(10)
stroke("red")
fill("green")
cone();
strokeWeight("5")
fill("yellow")
stroke("blue")
box();
}
html,
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
Stroke color doesn’t update inside createShape()
fuction because the shape’s stroke gets fixed when the geometry is built, unlike fill color which is stored per vertex. When you set stroke color in draw()
function, it’s applied each time the shape is drawn. This make stroke color is updating every frame. If you want change color of stroke you have to set it inside draw()
function.
let shape;
function setup() {
createCanvas(600, 300, WEBGL);
shape = buildGeometry(createShape);
}
function draw() {
background(200);
orbitControl();
model(shape);
stroke(0, 255, 0);
strokeWeight(1);
}
function createShape() {
fill("blue")
cone();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>