Can someone Explain exactly how this program works?

Hooga

PImage img;
int direction = 1;
float signal;

void setup() {
    size(640, 360);
    noFill();
    stroke(255);
    frameRate(30);
    img = loadImage("moonwalk.jpg");
}

void draw() {
     if (signal > img.width*img.height-1 || signal < 0) { 
     direction = direction * -1; 
}

    if (mousePressed) {
        int mx = constrain(mouseX, 0, img.width-1);
        int my = constrain(mouseY, 0, img.height-1);
        signal = my*img.width + mx;
  } else {
       signal += 0.33*direction;
    }

  int sx = int(signal) % img.width;
  int sy = int(signal) / img.width;

    if (keyPressed) {
        set(0, 0, img);  // fast way to draw an image
        point(sx, sy);
        rect(sx - 5, sy - 5, 10, 10);
   } else {
        color c = img.get(sx, sy);
        background(c);
       }
}

This code is from the processing website it takes an image and gets its pixels and displays them on the screen based on where your mouse is is, but they failed at explaining exactly what every line, I am completely confused, can anyone explain in detail what every line does here?

koogs

all of setup() is obvious. see the reference if you have trouble.

18 - 21 sets the new position ('signal') if the mouse is pressed. it also makes sure that the mouse is inside the picture.

line 23 continues the tracing if the mouse isn't pressed. the .33 increment is just to slow it down so that the screen isn't flashing as much

26 and 27 work out the index into the pixel array given the x and y position of the current point

30-32 shows the signal position if the mouse is pressed

otherwise lines 34,35 fill the screen with the colour of the current pixel

lines 14-16 reverses the direction of travel of the dot if it reaches the end (or the start) of the picture.

Chrisir

format the code in a better way

it might help to press ctrl-t in the processing IDE to get the indents formatted correctly.

The brackets { } are not in order.

If they are, you can see which parts belong together.

So you can read the code more easily.

comments

you can also write comments into the code. Rules for good comments:

• Don't write comments line by line usually.

• No use to explain what background etc. does (it's in the reference).

• Better explain what the following lines do. Like koogs did.

With good comments, you can read the code more easily.

math

There is a little math involved but not much.

One underlying topic is that get() and set() use x,y whereas signal runs through all pixels down to the end (instead of going x,y through the rows and columns of the image). Therefore there is some math going on to convert between signal and x,y.

When you grasp the underlying topics and have them in mind, you'll understand the code easier. You'll say,

• "oh, this is the signal versus x,y thing again, ok. No problem".

signal runs

More underlying topics:

Also we have to keep signal going through all pixels with signal += 0.33*direction; (when the mouse is not pressed) and to turn around at the end (or the beginning) with if (signal > .... Also some math here. That is not required when you only need the mouse input by the way.

That the program behaves differently when mouse or key is pressed, is mere / only for show. You could as well write 2 or 4 programs with different behaviour without the ifs for mouse and key. (there are 2 big ifs in the code, one for mouse and one for key. Both are not strictly necessary; they just show a different screen).

You could as well write a program that

• only uses the mouse pos and not uses the running signal

• and that not fills the entire screen.