I’m trying to a project where there is an interaction with a 3d object and the user, and the interaction being when the user moves/clicks his mouse the vertices of the object move randomly.
The project is still in a ealry stage but I already encountered a problem.
So we used a “for” to create a random deslocation in the values between -10 and 10 and in the axis of x,y,z.
The problem is that in the console the vertices of the object are always changing but in the preview they aren’t.
Is there a way to fix this issue?
let a, obj3D;
function preload()
{
obj3D = loadModel ("bob3.obj", true);
}
function setup()
{
createCanvas (windowWidth, windowHeight, WEBGL);
a = 0;
//console.log (obj3D.);
}
function draw()
{
for (let v=0; v<obj3D.vertices.length; v++)
{
obj3D.vertices[v].x += random (-10, 10);
obj3D.vertices[v].y += random (-10, 10);
obj3D.vertices[v].z += random (-10, 10);
}
console.log (obj3D.vertices[0].x);
background (30);
push();
translate (0, 0, 0);
scale (2);
rotateX (radians(a));
rotateY (radians(a));
rotateZ (radians(a));
stroke (255);
noFill();
model (obj3D);
pop();
if (a < 360) a += 0.9;
else a = 0;
}
while Spongman’s example shows how to “hack” to render the modified buffer (below is copied from the link above, I tried with your code and partially works but I’m not posting that because 1) I don’t want to tidy the code and 2) somehow it doesn’t seem to work with noFill - which perhaps is related to the implementation of WEBGL in p5.js)
var renderer;
var geometry;
var gid = 'custom';
function setup () {
renderer = createCanvas(500, 500, WEBGL);
geometry = new p5.Geometry(...);
}
function draw() {
// modify geometry
geometry.computeNormals();
renderer.createBuffers(gid, geometry);
renderer.drawBuffers(gid);
}
meanwhile, i think we found another hack, so, I found out that if you press play and then stop, and then play again the vertices always are shown in a random location, so I wondered if there was a way for the code to loop itself, if that makes sense.
The way the hacks works is calling the setup again, the problem is, reading the reference of the setup in p5js.org it tells us there can only be a setup () function for each program and it shouldn’t be called again after its initial execution.
This raised a question in our group project, why cant we call another setup function?
We couldnt found any answer in the web, it only told us we couldn’t call it again
Interesting. Actually it’s not setup doing the magic but indeed createCanvas - try replacing setup() with createCanvas(...) - I assume that every frame webgl context is generated (which is a bad idea) and somehow the model is updated.
Calling createCanvas every frame is, again a bad idea, but it’s not the first time I’ve seen it - I know tweet processing (fitting processing/p5.js in 280 characters) people sometimes use it in order to save characters because this way you can skip setup and actually createCavnas can effectively clear the canvas at the same time.
and 2) somehow it doesn’t seem to work with