Table of Contents:
My next goal is to create something quite similar to my last project. I was inspired by Salvador Dalí’s Little Theater during my recent trip to the MoMA. This reminded me of the 2D animation parallax process, invented by Lotte Reiniger, and later perfected by Ub Iwerks and Disney, where different elements of a scene would be placed on different levels to create a 3-Dimensional effect as the camera moved. I am curious to see if a similar effect can be created in p5 using ml5. If the elements of a scene are moved according to one’s head position, can I create a convincing 3D experience?
I originally thought this would be much easier than my last project. It turns out I was either wrong, or I am making this way more complicated than it needs to be.
I first need to create two vectors for my face movement, one for the original position, and one for where my face currently is. I will find the difference between the two vectors, and I can then map these values to the vectors of the objects.
this is sortaaaa the effect I’m going for… but I’m kind of trying to figure out why it only works when i press and hold the mouse down.
it works! I had to basically rewrite it line by line so I could figure out what was going on and get rid of stuff that I didn’t need. There is something weird going on with the multiplication level, but I will figure that out in the next attempt as it sorta works right now.
it is now working the way I want it to! There was some issues with the vector math functions. in order to multiply something, you have to say number.mult(otherNumber); this is the same as using *=, instead of just *. Also, there is something weird going on with =, where the first number is not set as equal to the second number. Instead, I just had to create a new vector with the x and y values of the other vector. As this is coming together I realize this might be a lot easier and simpler to do with webgl but oh welllll.
//this will change the value of otherNumber
let number = otherNumber.mult(otherOtherNumber);
//instead, you have to do
let number = createVector(otherNumber.x, otherNumber.y);
number.mult(otherOtherNumber);
I made it a lot simpler. I changed it so that instead of having if statements for the level, you just multiply by the level provided in the parameters. Makes it a LOT easier to put things on a lot more levels. This is why we sleep on things.