How can I make a character that walks to wherever the mouse clicks?

edited February 2016 in How To...

Our assignment is: Make a character that walks to a point you click. You can draw the character with a pen and scan it, or draw it in illustrator. So, I drew a character in illustrator. There are two images, because I drew the character in two positions and used an array so when animated it looks like it's walking. I got the walking character to move across the screen continuously, but I can't figure out how to make it first stand still, then when I click, start "walking" to the place I clicked then stop. As far as I can tell, it seems that the map/mouseX thing only works when you have shapes like ellipses, not Pimages. Also, I can't get the character to just appear in the first position (standing still) until clicking, when it starts "walking". I can't get it to stop switching between the images and just appear standing still in the begging, so the way I have it now, the screen is completely blank until you click, and then the moving character appears. How can I fix this? Here is the code i have so far, but you won't be able to actually run it because you can't access the Pimages. (however, the character is a smiling ice cream cone, like in my profile picture...) I'm new to processing and I barely understand anything; help would be much appreciated!!! :)

int var1 = 200; int numFrames = 2; int frame = 0; PImage[] icecream = new PImage[numFrames]; long timer; float framespeed = 300; boolean walk; int icecreamspeed = 3;

void setup () { size(700,700); icecream[0] = loadImage("character1.jpg"); icecream[1] = loadImage("character2.jpg");

timer = millis(); imageMode(CENTER); }

void draw() {

background(255); var1 ++; if(var1 == width) { var1 = 0;


if (millis() - timer > framespeed) { timer = millis(); frame ++; } if (frame == numFrames) { frame = 0; } if(walk == true) { image(icecream[frame], var1,400);

} }

void mouseClicked() { walk = true; image(icecream[frame], mouseX, 400);


void mouseReleased() { walk = false;



  • Highlight code and hit ctrl-o to format.

    Don't call your variables var, use meaningful names.

  • edited February 2016

    well, the idea is that you display the image throughout even if it stands still

    so this is obviously wrong:

    if(walk == true) { 
        image(icecream[frame], var1,400);

    instead you want something like

    image(icecream[frame], var1,400);
    if(walk == true) { 
           move(); // an new function 

    (and to have image(icecream[frame], mouseX, 400); inside mouseClicked() is also wrong since you don't want to display it extra when you click; your icecream already gets displayed throughout)


    instead of var1,400 you want something like

    icecreamX, icecreamY

    now when the mouse is clicked, store the mouseX and mouseY as targetX and targetY (two new variables here).

    The function move() : you have to write it. What it does: Change icecreamX, icecreamY until

    • icecreamX is more or less targetX and
    • icecreamY is more or less targetY

    then set walk to false


    delete this

    void mouseReleased() { 
        walk = false;
Sign In or Register to comment.