• fullscreen
  • About_Me.pde
  • Area.pde
  • int imageCount = 112;
    float x = 35.7;
    float y = 41.6;
    int counter, prevCounter;
    
    PImage[] picture = new PImage[imageCount];
    Area[] area = new Area[imageCount];
    
    void setup() {
      size(500, 333);
      rectMode(CENTER);
    
      for (int i=0; i<imageCount; i++) {
        float a = (i % floor(width/x)) * x + x/2;
        float b = (i / floor(width/x)) * y + y/2;
        area[i] = new Area(i, a, b);
      }
      
      counter = 63;
    }
    
    void draw() {
    
      for (int i = 0; i < area.length; i++) {
        area[i].update();
      }
    
      if (counter != prevCounter) {
        if (picture[counter] != null) {
          image(picture[counter], 0, 0);
        }
        else {
          picture[counter] = loadImage("ME" + counter + ".JPG");
          image(picture[counter], 0, 0);
        }
      }
      prevCounter = counter;
    }
    
    
    class Area {
      float widthX = 35.7;
      float heightY = 41.6;
      float xPosition, yPosition;
      int id;
      boolean active;
    
      Area(int i, float xpos, float ypos) {
        id = i;
        xPosition = xpos;
        yPosition = ypos;
      }
    
      void update() {
        if(dist(xPosition, yPosition, mouseX, mouseY) < 20) {
          //fill(0);
          counter = id;
          active = true;
        }
        else {
          //fill(255);
          active = false;
        }
        //rect(xPosition, yPosition, widthX, heightY);
      }
    
    }
    
    

    code

    tweaks (0)

    about this sketch

    This sketch is running as Java applet, exported from Processing.

    license

    advertisement

    Ben Mandeberg

    Look Here

    Add to Faves Me Likey@! 109
    You must login/register to add this sketch to your favorites.

    My first attempt at an interactive photo animation.

    I follow the mouse around with my face. I promise I'll put my shirt on for the next one.

    I finally made it so that loadImage() is only called once on each image.

    It's perhaps a bit better as a web app :)
    http://www.benmandeberg.com/interactive_animation/

    Matthew Conroy
    5 May 2010
    Well done! That must have been some tedious photo-taking.
    Wow! That is some impressive stuff! And yeah, tedious I think is an understatement!
    Ben Mandeberg
    5 May 2010
    Thanks! The photo taking actually wasn't too excruciating, there are only 112 of them. 14 by 8 grid.
    zach
    8 May 2010
    very cool!
    REAS
    12 May 2010
    Ben, nice idea. But, get that loadImage() out of draw().
    This reminds me of this sketch done a long time ago
    http://www.nogome.com/alunos0405/sx/processing/estados/
    bejoscha
    9 Jul 2010
    Nice Idea!
    Peter Stašš
    6 Sep 2010
    Hi Ben Mandeberg, i have some questions about this your great work... but i cant find your email.. can you write it here? or you can end me on my email qwazo@centrum.cz

    really thank you for answer, peter
    Ben Mandeberg
    6 Sep 2010
    hey peter, my email is bmandeberg@ucla.edu
    yelele_brother
    13 Sep 2010
    Simple but great idea but like REAS said : "(...) get that loadImage() out of draw()"

    You can store image into an array on setup and draw an item of this array in draw()
    Ben Mandeberg
    14 Sep 2010
    Whenever I tried loading the image into an array on setup and calling an item of the array in draw I got an OutOfMemoryError after it loaded about half of the images.

    I was loading all of the images in the array in setup() and then calling the picture that referred to my mouse position on the screen - image(picture[counter], 0, 0);

    Is there a better way I can do this? I also tried only calling loadImage() in a void mouseMoved(), but that runs very slowly...
    Gerard Geer
    27 Oct 2010
    Hmm, you could take some list, and only load the images for nearby mouse positions, and then when the mouse moves between picture regions, you can replace the pictures in the list the mouse moved away from with pictures the mouse had moved closer to. That way you have only a portion of the images loaded at any given time. Even then, you could use requestImage(), which loads the image in another thread, hence not interrupting the rest of the program.

    Wei-Chih Lin
    29 Jul 2011
    nice work!
    Nice job!
    Awesome! it has a 3D effect if you squint a little
    Adam Goodison
    6 Feb 2013
    This is really great - I think what you're doing is really innovative. I'm looking to branch out to work on projects with programmers. I'm a fashion photographer based in London - if you'd be interested in working on something together then send me a mail adam.goodison@yahoo.co.uk

    Thanks
    Brianna Miller
    10 Mar 2013
    Wow, totes luvin this.
    rajeshm101
    7 Sep 2013
    excellent!
    Jitesh A Panchal
    12 Jan 2014
    That is really something! It feels very smooth and interesting!
    You need to login/register to comment.