• 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);
      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++) {
      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) {
          counter = id;
          active = true;
        else {
          active = false;
        //rect(xPosition, yPosition, widthX, heightY);


    tweaks (0)

    about this sketch

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



    Report Sketch

    Report for inappropriate content

    Please provide details if possible:

    Your have successfully reported the sketch. Thank you very much for helping to keep OpenProcessing clean and tidy :)

    Make a Copyright Infringement claim

    Ben Mandeberg

    Look Here

    Add to Faves Me Likey@! 113
    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 :)

    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
    6 May 2010
    Thanks! The photo taking actually wasn't too excruciating, there are only 112 of them. 14 by 8 grid.
    8 May 2010
    very cool!
    13 May 2010
    Ben, nice idea. But, get that loadImage() out of draw().
    This reminds me of this sketch done a long time ago
    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
    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
    28 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

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