# Help with 3d object transfiguration/distortion effect

**URL:** https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795
**Category:** Coding Questions
**Created:** [March 24, 2021, 1:30pm UTC](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795 "2021-03-24T13:30:25Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![senhorcodigo](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@senhorcodigo](https://discourse.processing.org/u/senhorcodigo)
#### Post date: [March 24, 2021, 1:30pm UTC](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795/1 "2021-03-24T13:30:25Z")

</div>

Hello,

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?

```auto
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;
}

```

Link for the project:  
[https://editor.p5js.org/miguelbarros999/sketches/wjRdQbrU8](https://editor.p5js.org/miguelbarros999/sketches/wjRdQbrU8)

Thanks in advance

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 24, 2021, 8:50pm UTC](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795/2 "2021-03-24T20:50:16Z")

</div>

it seems not supported

> <https://github.com/processing/p5.js/issues/2369>
>
> Nature of issue?
> Found a bug
> Existing feature enhancement
> New feature request
> Most appropriate sub-area of p5.js?
> Color
> Core
> Data
> Events
> Image
> ...

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)

```javascript
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);
}

```

---

<div class="post-metadata">

### Author: ![senhorcodigo](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@senhorcodigo](https://discourse.processing.org/u/senhorcodigo)
#### Post date: [April 2, 2021, 10:59pm UTC](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795/3 "2021-04-02T22:59:54Z")

</div>

Thanks for your reply,

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](http://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

Here’s a link for the project with the hack:  
[https://editor.p5js.org/miguelbarros999/sketches/46bSwS6pc](https://editor.p5js.org/miguelbarros999/sketches/46bSwS6pc)

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 2, 2021, 11:32pm UTC](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795/4 "2021-04-02T23:32:34Z")

</div>

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.