Image sequence // mouseX

Sofia_hki

I'm trying to make an animation (image sequence) that is controlled by the position of the mouse (mouseX). My idea is to use the map() function to scale the mouse’s x-coordinate numbers between 0 and width to image numbers (image1, image2,...image360) so that the location of the mouse determines which image displays. The goal is to get the illusion of rotating an object by using an image sequence exported from an 3d animation. I just can't get my head around how to do this, any ideas? Thank you so much!

kfrajer

Hi

This is untested code. Here I just show the concept of what it would look like to select an image from an image array and display it on screen. The image is selected based on the position of the mouse along the width of the sketch. All the way to the left shows the first image, all the way to the right... it shows the last image. I hope this helps,

Kf

int index=0; // Index in array of images
int n=360;   // Number of images
PImage allFigures[];
PImage actualFig;

void setup(){
  size(720,600);  //360 to match it to your number of images
  allFigures = new PImage[n];
  //
  //  NOW load all your n images
  //
 (...)
 (...)
 (...)

}

void draw(){
  background(0);
  index=map(mouseX,0,width,0,n-1);  //Array indices goes from 0 to (n-1)

  //
  //  NOW use index to access your array
  //
  actualFig=allFigures[index];
  image(actualFig,0,0);

}

jeremydouglass

@Sofia_hki -- Interesting concept, and your idea of how to do it with map() is on exactly the right track. You should try it as @kfrajer says. Or, to be extremely concise (but slightly less readable), you can drop the index, count, and working image variables, and just use an image array -- something like this:

PImage allFigures[];
void setup(){
  // add code to load images here
}
void draw(){
  image( allFigures[ map(mouseX, 0, width, 0, allFigures.length) ] );
}

Note that if your images are large, you may not actually want to try to preload 360 images in memory simultaneously! However, loading purely on-demand may create real slowdown if you want smooth animation. There are a number of ways of tackling this to increase performance or save resources -- but they get increasingly complex, so you may want to start simple.

Keep in mind that if your only goal is to rotate an object, there are 3D object formats in Processing that are designed specifically for this and will perform much better than loading stacks of images.

Also keep in mind that there is a Processing video library -- I'm not sure how it performs on scrubbing the video frame read location (that may depend on the video file format), but controlling video play location with the mouse might be another way of manipulating an animated stack of images.

Sofia_hki

Thank you so much for your help @kfrajer and @jeremydouglass! I tried your examples but for some reason with both of them I got the error code "Type mismatch, "float" does not match with "int"", that seemed to be related to the map function. Do you happen to know what that means? My end goal is to rotate an object in the browser. I tried using Processing video library and controlling video with the mouse – it worked with Processing but my challenge is to get it work in Squarespace using Processing JS. I think I'd have the same problem with 3d objects.

GoToLoop

https://forum.Processing.org/two/discussion/18929/how-to-export-a-processing-file-as-a-webpage-html-format-file

kfrajer

https://processing.org/reference/map_.html

@Sofia_hki The map function manages float values. To fix your type mismatch, do the following:

floar index = map((float)mouseX, 0.0, (float)width, 0.0, (float)(allFigures.length-1));

I am casting the integer values into float. I hope this helps. If you have any questions about p5.js, begin with GoToLoop's link and come back to the forum with any other question.

Kf

Sofia_hki

Thanks @kfrajer but for some reason I keep getting the same error message?

jeremydouglass

@Sofia_hki --

1. Check that your images are correctly loaded.
2. allFigures[] wants an int (an array index). map() returns a float. allFigures[map()] gives an error -- it wants an int, but gets a float. So use (int)map() or int(map()) to convert the the float value that map returns to an int, then use that as a the array index. Now everything works.
3. I was wrong about length-1. Just use length.

Here is a small working example.

/** Mouse Animation
 *  2016-11-08 Jeremy Douglass - Processing 3.2.2
 *  move mouse left and right to change image
 *  https:// forum.processing.org/two/discussion/18924/image-sequence-mousex
 **/
PImage[] allFigures;

void setup(){
  size(512,512);
  allFigures = new PImage[3];
  allFigures[0] = loadImage("https:// forum.processing.org/processing-org.jpg");
  allFigures[1] = loadImage("https:// upload.wikimedia.org/wikipedia/commons/thumb/5/59/Processing_Logo_Clipped.svg/512px-Processing_Logo_Clipped.svg.png");
  allFigures[2] = loadImage("https:// processing.org/img/processing3-logo.png");
}

void draw(){
  background(255);
  image( allFigures[ (int)map(mouseX, 0, width, 0, allFigures.length) ], 0, 0 );
}

Sofia_hki

Thank you so much @jeremydouglass, now it works! Really appreciate your help!!