ICM – Week 03 Play with Rollover

For this assignment, This time I decided to play with rollover function. Before I did this, I came up with some example from ‘The world- pixel by pixel’ class in ITP last semester. First, I borrowed one of example from the class as below. It’s a 3d rotating rectangles and I changed into my p5.js sketch again.

int cellSize= 20;                  // the size of each element

void setup() {
  size(1000, 800, P3D);              // must use P3D for any 3D stuff

void draw() {
  lights();                         // we want the 3D to be shaded
  background (0);
  for (int x = 0; x < width; x+=cellSize) {
    for (int y = 0; y < height; y+=cellSize) {
      float distanceToMouse= dist(x, y, mouseX, mouseY);     // calculate the distance of the element to the mouse
      pushMatrix();                                          // if we dont push and pop the matrix our transformations will accumolate
      translate(x, y);
      rotateX(distanceToMouse/100);                      // rotateX rotates around the X axis
      rect(0, 0, cellSize, cellSize);
      //translate(0, 0, distanceToMouse); 
      //rect(x, y, cellSize*2, cellSize*2);


Here is my code link

Unlike processing, p5 has a different location for the translate, so it should be set to x-width/2, y-height/2, to look properly positioned.

And then, I also tried to change another version for that. First I wanted to make one of these rectangles rotate about 360 degrees each time mouseX pass by. However, it did not work well that I want but I got the result as belows and I am still working on that.
I used the ‘(map(mouseX, 0, height, 0, PI*2))’ in this code, I am figuring out as to how the map function will be draw in my sketch in specific in my head. Still, it is not easy to do.

Here is my code link.

Also, I applied to dist() function to it as below. it is also modified version of PxP examples. In this code, I am working on the correlation with ‘dist(mouseX, mouseY, x, y)’ and ‘translate(- width/2, – height/2, distanceToMouse)’ about how to draw in sketch.

Here is my code link.

code A:
  translate(x - width/2, y - height/2); 

code B:
  translate(- width/2, - height/2, distanceToMouse);
  rect(x, y, cellSize * 2, cellSize * 2);

Both code’ effects seems alike in drawing when running but, It is different where x and y(translate or rect) are applied.

Finally, I applied this code to my lovely minion. First, if I apply ‘WEBGL’ for 3d component, the previous drawing I worked is disappeared. So, I had to apply and move push() and pop() functions to my minion. and then, I attached the B code to it.
In here, I anticipated my minion has to be appeared but it did not. So, I controlled the value of alpha(color)lightly, then my minion appeared again. I am thinking about why this happens.

I also put mouseX into the value of alpha so that my minion looks disappeared when mouseX is closer to width. Anyway, This became to look like a Minion trapped in a net.

Here is my code link.

Things to figuring out >>

  • How to draw with map(), dist(), translate() in the sketch.
  • why the new embedded code cannot apply as a background when I attach it to the previous minion code.
  • How to make one of these rectangles rotate about 360 degrees each time mouseX pass by