Introduction to Processing

From Knowledge Kitchen
Jump to navigation Jump to search


Processing

Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

  • Presented as a stand-along language with its own IDE
  • In-fact simply a Java library that can be imported into your project in Eclipse
  • Simplifies programming of graphical and visual animations and interactions.
  • Adaptations made in other languages, such as Javascript for web browsers - see p5js

Included

  • Tracks mouse movements and clicks
  • Can easily read/write data from/to the USB/serial port
  • Each program is set up as a series of frames, like a movie for intuitive animation
  • Includes classes for common shapes, such as ellipses, rectangles, lines, curves, images, etc.
  • 2D drawing and 3D drawing
  • Includes libraries for things like networking, serial communication, manipulating audio, and video.
  • Can integrate easily with other 3rd-party contributor libraries to provide even more functionality.

Popular uses

  • computer-generated art
  • game creation
  • application development
  • 3D graphics
  • web cam video capture
  • video processing
  • audio processing
  • computer vision
  • integration with hardware such as Arduino and Raspberry Pi
  • Network communication between clients or servers
  • and many more

Using within the Processing IDE

Processing includes its own IDE, where you can develop code independently of Eclipse or other Java IDEs.

  • Most example code you are likely to see online assumes you are developing this way.
  • This IDE hides a lot of the "confusing" parts of Java programming, so you can focus on the goal, and less on the code syntax.
  • This IDE is mostly for programming novices.

Using from within Eclipse

Processing can be integrated into the popular Eclipse IDE relatively simply. Follow the official instructions for importing Processing into Eclipse.

  • If you follow the instructions, you will nee to located the file named core.jar, which is installed with Processing. A zip file containing a copy of core.jar is available here for your convenience - simply drag and drop this copy of core.jar into your Eclipse project's src directory rather than locate your own copy.


Ports of Processing to other languages

Due to its popularity, there are now ports of the Processing concept to several other languages, including Javascript, Python, and Processing for Android apps.

Core concepts

Methods automatically called:

  • settings() - called once at start of program, used for application-wide settings
  • setup() - called after the settings are applied, used to set the stage for the first 'frame'
  • draw() - called continuously while program is running, used to do the animation in a frame-by-frame style

Methods inherited from the PApplet class by any class that extends it:

Documentation

Examples for use in Eclipse

Note that the following examples only work when used within a complete Java IDE, such as Eclipse, with Processing's core.jar file added to the build path.

Oscillating circle

The following program displays a circle that oscillates back and forth horizontally.

package edu.nyu.cs.fb1258.processing_examples;

import processing.core.*;

/**
 * A simple class that inherits from Processing's PApplet class and displays an oscillating circle that bounces back and forth
 * @author Foo Barstein
 * @version 2
 */
public class CircleOscillator extends PApplet {

	//instance properties
	
	//constants that hold the width and height of the window
	final private int w = 600;
	final private int h = 400;
	
	//properties to hold the current position of the circle
	private int x = 0; //hard-coded starting value for the x position
	final private int y = 300; //hard-coded value for the y position that never changes
	
	//speed with which the circle is moving
	int speed = 1; //this will be set to -1 to make the circle move the opposite direction when the circle reaches the edge
	
	/**
	 * This method is automatically called by Java when the program first starts.
	 * @param args any command line arguments (not used)
	 */
	public static void main(String[] args) {
		//must call PApplet's static main method, and supply the full package and class name of this class as an argument
		PApplet.main("edu.nyu.cs.fb1258.processing_examples.CircleOscillator");
	}
	
	/**
	 * Method to draft general settings of the app
	 */
	public void settings() {
		//set the site of the window in pixels to the values of the instance properties w and h
		this.size(this.w, this.h); 

	}
	
	/**
	 * Method to compose the first 'frame' of the app
	 */
	public void setup() {
		//fill the background with this color (specified in 8-bit R, G, B values)
		this.background(255, 255, 255); //white

		//set the fill color (the color which solid shapes will be filled with)
		this.fill(120,50,240); 

	}
	
	/**
	 * This method is called repeatedly many times per second (usually 30 times per second by default) for the lifetime of the app.
	 */
	public void draw() {
		
		//fill the background with this color (specified in 8-bit R, G, B values)
		this.background(255, 255, 255); //white

		//generate pseudo-random R,G,B values 
		float r = 255 * (second() * 1.0f/60); //int between 0 - 255 based on current number of seconds
		float g = 100f; //hard-coded amount of green
		float b = 92f; //hard-coded amount of blue
		
		//set the fill color to these random values
		this.fill(r, g, b);
		
		//draw an ellipse of width and height 100, and position its center at the current value of the x and y instance properties
		this.ellipse(this.x, this.y, 100, 100);
		
		//update the x position for next time we draw it
		this.moveX();
	}
	
	/**
	 * This method updates the x position value, and changes the direction of movement, if the circle has gone out of bounds.
	 */
	public void moveX() {
		//if the circle has gone out of bounds in either direction
		if (this.x > this.w || this.x < 0) {
			//reverse direction of movement
			this.speed = this.speed * -1; 
		}
		
		//move the circle in the direction of movement.
		this.x = this.x + this.speed;
	}
	
}

Circle trails

The following program displays a circle that follows the user's pointer around the screen.

package edu.nyu.cs.fb1258.processing_examples;

import processing.core.*;

/**
 * A simple class that inherits from Processing's PApplet class and displays a circle that follows the user's mouse around.
 * @author Foo Barstein
 * @version 9
 *
 */
public class CircleTrails extends PApplet {

	//instance properties
	
	//constant instance variables used to hold the width and height and the window we will make
	private final int h = 600;
	private final int w = 600;
	
	//instance variables to hold the diameter of the circle we will draw
	private final int circleDiameter = 100;
	
	/**
	 * This method is automatically called by Java when the program first starts.
	 * @param args any command line arguments (ignored)
	 */
	public static void main(String[] args) {
		//must call PApplet's static main method, and supply the full package and class name of this class as an argument
		PApplet.main("edu.nyu.cs.fb1258.processing_examples.CircleTrails");
	}
	
	/**
	 * Method to draft general settings of the app
	 */
	public void settings() {
		//set the site of the window in pixels to the value of these two instance properties
		size(this.w, this.h); 
	}
	
	/**
	 * Method to compose the first 'frame' of the app
	 */
	public void setup() {
		//fill the background with this color (specified in 8-bit Red, Green, Blue values)
		background(255, 255, 255); //white

		//set the fill color (the color which solid shapes will be filled with) in 8-bit values for Red, Green, and Blue
		fill(120,50,240); 
	}
	
	/**
	 * This method is called repeatedly many times per second (usually 30 times per second by default) for the lifetime of the app.
	 */
	public void draw() {

		//generate pseudo-random R,G,B values
		float r = 255 * (second() * 1.0f/60); //between 0 - 255 based on current number of seconds
		float g = 100f; //hard-coded amount of green
		float b = 92f; //hard-coded amount of blue
		
		//set the fill color to these pseudo-random values
		this.fill(r, g, b);
		
		//draw an ellipse at the current position of the mouse (notice the use of mouseX and mouseY properties inherited from PApplet)
		ellipse(this.mouseX, this.mouseY, this.circleDiameter, this.circleDiameter);
		
	}
	
	/**
	 * This method is automatically called whenever the user clicks the mouse on the window.  It wipes out what's on the screen and fills it with a solid color.
	 */
	public void mouseClicked() {
		//fill the window with this color (specified in 8-bit R,G,B values)
		background(255, 255, 255); //white wash
	}

}

Melange

The following program displays a mélange of basic techniques in Processing.

Download this image as 'puppy.jpg' and place it in your project's src folder
Download this image as 'button.png' and place it in your project's src folder
package edu.nyu.cs.fb1258.processing_examples;

import processing.core.*;

/**
 * This program shows a mélange of the techniques when using Processing.
 * @author Foo Barstein
 * @version 2.2
 *
 */
public class Melange extends PApplet {
	
	//instance properties
	
	//constants that hold the width and height of the window
	final private int w = 600;
	final private int h = 400;

	//circle-related properties
	private int circleX = 200;
	private int circleY = 200;
	private int circleDiameter = 100;
	private int circleSpeedX = 1; //how much to change the circle's X position with every frame
	
	//rectangle-related properties
	private int rectX = 30;
	private int rectY = 20;
	private int rectWidth = 100;
	private int rectHeight = 100;
	private int rectSpeedY = 5; //how much to change the rectangle's Y position with every frame
	
	//image-related properties
	private PImage puppy;
	private PImage button;

	/**
	 * This method is automatically called when the program runs.
	 * @param args any command-line arguments (ignored)
	 */
	public static void main(String[] args) {
		//call PApplet's main method and supply your class name
		//note that any package name must be prefixed
		PApplet.main("edu.nyu.cs.fb1258.processing_examples.Melange");
	}
	
	/**
	 * This method is used for general app settings.  We set the size of the window, and load up the images into instance properties.
	 */
	public void settings() {
		//set the width and height of the app window
		this.size(this.w, this.h);
		
		//get a PImage object and store it in the instance property
		puppy = this.loadImage("src/puppy.jpg");
		button = this.loadImage("src/button.png");
	}
	
	/**
	 * This is used to compose the first frame
	 */
	public void setup() {
		//using colors from colourlovers.com: http://www.colourlovers.com/palette/4535252/unfinished_2nd
		
		//fill the window with a solid color
		this.background(240, 224, 7); //in R,G,B 8-bit values
		
		//draw the puppy at its original starting position
		this.image(this.puppy, width/2, height/2);
		
	}
	
	/**
	 * This method determines the contents of all subsequent frames.
	 * This method is automatically called many times per second (usually 30 times per second by default)
	 */
	public void draw() {
		//re-fill the window with a solid color to wipe out any existing graphics
		this.background(240, 224, 7); //in R,G,B 8-bit values
		
		//change the fill color
		this.fill(85, 178, 202); //'another chance'
		this.stroke(201, 108, 85); //'C96C55'
		
		//draw a simple ellipse: x coord, y coord, width, height
		this.ellipse(this.circleX, this.circleY, this.circleDiameter, this.circleDiameter);
		
		//draw a rectangle: x coord, y coord, width, height
		this.rect(this.rectX, this.rectY, this.rectWidth, this.rectHeight);
		
		//draw a poor puppy centered wherever the cursor is pointing
		this.image(puppy, this.mouseX - 75, this.mouseY - 75);
		
		//draw the button at the top left of the screen
		this.image(button, 0, 0);

		//check whether the circle is out of bounds
		if (this.circleX > this.width - (this.circleDiameter / 2) || this.circleX - (this.circleDiameter / 2) < 0) {
			//if so, change its direction
			this.circleSpeedX = this.circleSpeedX * -1;
		}
		//now move the rectangle horizontally
		this.circleX = this.circleX + circleSpeedX;
		
		//check whether the rectangle is out of bounds
		if (this.rectY > this.height - this.rectWidth || this.rectY < 0) {
			//if so, change its direction
			this.rectSpeedY = this.rectSpeedY * -1;
		}
		//now move the rectangle vertically
		this.rectY = this.rectY + this.rectSpeedY;
		
	}
	
	/**
	 * This method is automatically called whenever the user clicks the mouse/trackpad
	 */
	public void mouseClicked() {
		String message = "woof"; //a default message to draw to the screen
		
		//check whether the click happened "inside" the button area
		if (this.mouseX > 0 && this.mouseX < this.button.width && this.mouseY > 0 && this.mouseY < this.button.height) {
			//change the message
			message = "CLICK!";
		}

		//set the font size
		this.textSize(100);
		
		//generate a random x and y coordinate where to put the text
		int x = (int) (Math.random() * this.width);
		int y = (int) (Math.random() * this.height);
		
		//debugging...
		//System.out.println(x + ":" + y);
		
		//draw the text
		this.fill(0, 0, 0);
		this.text(message, x, y);
		
	}
	
	

}

Smiley bouncer

The following program displays a circle that bounces around the screen and collides with a smiley face that follows the user's cursor.

Download this image as 'smiley.png' and place it in your project's src folder
package edu.nyu.cs.fb1258.processing_examples;

import processing.core.*;

/**
 * This program creates a circle that bounces around the screen and collides off of a smiley face that follows the user's pointer around.
 * @author Foo Barstein
 * @version 88.1
 *
 */
public class SmileyBouncer extends PApplet {

	//instance properties	
	
	//basic window size settings
	private final int h = 600;
	private final int w = 400;
	
	//the starting settings of the circle
	private int x = 200;
	private int y = 200;
	private int circle_radius = 25;
	private int speedX = 1;
	private int speedY = 2;

	//flag indicating whether or not there has been a collision
	private boolean isCollision = false;

	//define a processing-specific image data type that will hold the smiley face image
	private PImage smiley;

	/**
	 * This method is automatically called by Java when the program first starts.
	 * @param args any command line arguments (not used)
	 */
	public static void main(String[] args) {
		//must call PApplet's static main method, and supply the full package and class name of this class as an argument
		PApplet.main("edu.nyu.cs.fb1258.processing_examples.SmileyBouncer");
	}
	
	//application-wide settings
	public void settings() {
	  this.size(this.w, this.h);
	  
	  //load up our smiley face icon
	  this.smiley = this.loadImage("src/smiley.png");
	}

	//settings for the first frame
	public void setup() {
	
	  this.background(255, 255, 255); //white background
	  
	  //set up the fill and stroke colors
	  this.fill(0, 0, 255); //rgb
	  this.stroke(255, 0, 0); //rgb
	}

	//frame-by-frame animation settings
	public void draw() {
		  this.background(255, 255, 255); //white background

	  //draw the cursor image
	  this.imageMode(PConstants.CENTER); //make the x, y coordinate of the image center
	  this.image(this.smiley, this.mouseX, this.mouseY);  //draw the smiley image at the mouse's position
	  
	  //draw the ellipse
	  this.ellipse(this.x, this.y, this.circle_radius*2,  this.circle_radius*2); //draw the ellipse

	  //adjust the position of the ellipse
	  this.x = this.x + this.speedX; //move in the x  direction
	  this.y = this.y + this.speedY; //move in the y  direction
	  
	  //check the bounds of the x position  of the ellipse
	  if (this.x >= this.width - this.circle_radius || this.x  <= 0 + this.circle_radius) {
	   this.speedX = this.speedX * -1;
	  } 

	  //check the bounds of the y position  of the ellipse
	  if (this.y >= this.height - this.circle_radius || this.y  <= 0 + this.circle_radius) {
	   this.speedY = this.speedY * -1;
	  } 
	  
	  //check for collision between circle  and smiley
	  if (this.isCollision == false && (abs( this.mouseX - this.x) < 50 && abs(this.mouseY - this.y) <  50)) {
	    //if we have a collision, reverse  the direction of the ball
	    this.speedX = this.speedX * -1;
	    this.speedY = this.speedY * -1;
	    //remember that we have a collsion  so we don't look for more collisions
	    this.isCollision = true;
	  }
	  else if (abs(this.mouseX - this.x) > 50 && abs( this.mouseY - this.y) > 50) {
	      //if we had a collsion, but we  don't have one any more, reset  the flag
	      this.isCollision = false;
	  }
	    
	}

}

Many Moving Circles

The following two classes are used together to create an animation with many circles floating randomly across the screen.

  • This example shows a variety of object oriented concepts.
  • The TestMovingCircle class is the main logic of the app that creates the circles and tells them when to move.
  • The MovingCircle class represents the template for a single circle.

TestMovingCircle.java

package edu.nyu.cs.fb1258.processing_examples;

import java.util.ArrayList;

import processing.core.*;

/**
 * This class contains the main logic for a Processing-based program with a lot  of moving circles instantiated from the MovingCircle class.
 * To use this code, you must have properly included the Processing library into  your project in Eclipse.
 * 
 * @author Foo Barstein
 * @version 1.0
 */

public class TestMovingCircle extends PApplet  {

	/**
	 * ArrayList holding all the MovingCircle objects... this will be populated  later
	 */
	private ArrayList<MovingCircle> circles = new ArrayList<MovingCircle>();

	/**
	 * The main method is automatically called when the Java program first runs
	 */
	public static void main(String[] args) {
		//must call PApplet's static main method, and supply the full package and class name of this class as an argument
		PApplet.main("edu.nyu.cs.fb1258.processing_examples.TestMovingCircle");
	}

	/**
	 * The setup method is called once at the start of the program
	 */
	public void setup() {
		this.size(400, 400);
		this.background(0, 0, 0); //r,g,b between 0 - 255
		
		//instantiate a few moving circle objects		
		//call our custom constructor, which accepts a reference to this PApplet  object

		for (int i = 0; i<50; i++) {
			//pass this object to the MovingCircle constructor... see how that constructor stores a reference to this object inside its own object
			this.circles.add(new MovingCircle(this));
		}
		
	}
	
	/**
	 * 
	 */
	public void draw() {
		
		//wipe clean the screen
		this.fill(0, 0, 0); //change the fill color
		this.background(0, 0, 0); //draw the color to the background
		
		//loop through all MovingCircle objects
		for (int i=0; i<this.circles.size(); i++) {

			//get the current object
			MovingCircle thisCircle = this.circles.get(i);

			//move this circle
			thisCircle.move();
			
			//make it show up
			thisCircle.show();			
		}
		
	}
	
}

Moving Circle.java

package edu.nyu.cs.fb1258.processing_examples;

import processing.core.*;

/**
 * This class represents a moving circle in a Processing app.  Methods are  included to update the object's position and make it appear on the screen.
 * This class is meant to be instantiated from another class that has extended  the Processing library's PApplet class.
 * 
 * @author Foo Barstein
 * @version 1.0
 *
 */
public class MovingCircle {
	
	/**
	 * The x coordinate of this object's location on the screen
	 */
	private int x = 100;
	
	/**
	 * The y coordinate of this object's location on the screen
	 */
	private int y = 200;
	
	/**
	 * The maximum speed at which we want this object to move.
	 * The speed of the object is randomly generated between zero and this  number.
	 */
	private int maxSpeed = 5;
	
	/**
	 * The default speed in the x direction.
	 * When we move this object in the horizontal direction, we simply increment  its x coordinate by this amount.
	 */
	private int speedX = 1;
	
	/**
	 * The default speed in the y direction.
	 * When we move this object in the vertical direction, we simply increment  its x coordinate by this amount.
	 */
	private int speedY = 1;
	
	TestMovingCircle parent;
	
	/**
	 * Custom constructor that accepts a reference to the parent object
	 * @param p parent object that is a child of the PApplet class
	 */
	public MovingCircle(TestMovingCircle p) {
		//generate a random location for this object in both x and y coordinates
		this.x = (int) (Math.random() * p.width);
		this.y = (int) (Math.random() * p.height);
		
		//generate random speed for this object in both the x and y directions.
		this.speedX = (int) (Math.random() * this.maxSpeed);
		this.speedY = (int) (Math.random() * this.maxSpeed);
		
		//keep a reference to the parent object.  By "parent object", I mean the  object which called this constructor by instantiating this object.
		this.parent = p;
		
		//debugging:
		//System.out.println("Making a new MovingCircle object using our own  custom constructor");
	}

	/**
	 * update this object's position
	 */
	public void move() {
		//update the x and y variables by the amount determined in the speedX  and speedY variables.
		this.x += this.speedX;
		this.y += this.speedY;
	}
	
	/**
	 * draw this object to the parent object's screen.  By "parent object", I  mean the object which is responsible for instantiating this object.
	 */
	public void show() {
		//first check that this object stays within bounds
		this.checkBounds();
		
		//now draw it to the screen
		parent.fill(255, 255, 255); //change the fill color to white
		parent.ellipse(x, y, 50, 50); //draw the ellipse representing this  object to the parent object's screen.
	}
	
	/**
	 * Check that this object does not go outside of the applet window's  boundary.
	 * If the object is out-of-bounds in any direction, relocate it to the  opposite side of the screen.
	 */
	public void checkBounds() {
		//check whether the object went out of bounds in the x direction
		if (this.x > parent.width) {
			//if the object went too far to the right, start it from the left  again.
			this.x = 0;
		}
		else if (this.x < 0) {
			//if the object went too far to the left, start it from the right  again.
			this.x = parent.width;
		}
		
		//check whether the object went out of bounds in the y direction
		if (this.y > parent.height){
			//if the object went too far down, start it from the top again.
			this.y = 0;
		}
		else if (this.y < 0) {
			//if the object went too far up, start it from the bottom again.
			this.y = parent.height;
		}
		
	}
	
}

Examples for use in Processing IDE

Note that the following examples only work when used within a Processing IDE. Many of the details of the Java programming language are hidden from view when using this IDE, and the code looks remarkably non-object-oriented, which you may perceive to be misleading.

Basic window setup

This example shows the basic usage of the setup() and draw() methods to create a window and draw to it.

//application-wide settings
void settings() {
   size(400, 400);
}

//settings for the first frame of your 'animation'
void setup() {
   stroke(0); //r,g,b
   background(192, 64, 0);  //r,g,b
   
} 

void draw() {
  //this method is repeatedly called
  //after the initial setup

          //x,  y, width,height
  ellipse(100, 100, 200, 50);
  
     //x1,  y1,  x2,    y2  
  line(0, 0, mouseX, mouseY);
  
}

Oscillating circle

This example shows how to move an object over time, and how to do basic bounds-checking.

int x = 200;
int y = 200;
int speedX = 10;

//application-wide settings
void settings() {
  size(400, 400);
}

//first-frame settings
void setup() {
  background(0, 0, 0);
  //set up the fill and stroke colors
  fill(0, 0, 255); //rgb
  stroke(255, 0, 0); //rgb
}


//this function is called repeatedly for the  lifetime of the program
void draw() {
  background(0, 0, 0); //wipe out the screen
  ellipse(x, y, 50, 50); //draw the ellipse
  x = x + speedX; //update the coordinate before  the next iteration of the draw() method
  
  //bounds-checking: check whether the circle  went off the screen
  if (x == width || x == 0) {
   speedX = speedX * -1; //reverse direction
  } 
  
}

Bouncing circle

Same as previous example, but moves in both x and y directions.

int x = 200;
int y = 200;
int speedX = 10;
int speedY = 30;

void settings() {
  size(400, 400);  
}

void setup() {
  background(0, 0, 0);
  //set up the fill and stroke colors
  fill(0, 0, 255); //rgb
  stroke(255, 0, 0); //rgb
}


void draw() {
  background(0, 0, 0); //wipe out the  screen

  //draw the ellipse
  ellipse(x, y, 50, 50); //draw the  ellipse

  //adjust the position of the ellipse
  x = x + speedX; //move in the x  direction
  y = y + speedY; //move in the y  direction
  
  //check the bounds of the x position  of the ellipse
  if (x >= 400 || x <= 0) {
   speedX = speedX * -1;
  } 

  //check the bounds of the y position  of the ellipse
  if (y >= 400 || y <= 0) {
   speedY = speedY * -1;
  } 
    
}

Bouncing smiley collider

Similar to previous example, but the circle also bounces off of the cursor, which appears as a smiley face.

Download this image as 'smiley.png; and place into the same folder as your code
int x = 200;
int y = 200;
int circle_radius = 25;
int speedX = 1;
int speedY = 2;
boolean isCollision = false;

//define a processing-specific image  data type
PImage smiley;

//application-wide settings
void settings() {
  size(400, 400);
  
  //load up our smiley face icon
  smiley =  loadImage("smiley.png");
}

//settings for the first frame
void setup() {
  background(0, 0, 0);
  //set up the fill and stroke colors
  fill(0, 0, 255); //rgb
  stroke(255, 0, 0); //rgb
}

//frame-by-frame animation settings
void draw() {
  background(0, 0, 0); //wipe out the  screen

  //draw the cursor image
  imageMode(CENTER); //make the x,y  coordinate of the image center
  image(smiley, mouseX, mouseY);  
  
  //draw the ellipse
  ellipse(x, y, circle_radius*2,  circle_radius*2); //draw the ellipse

  //adjust the position of the ellipse
  x = x + speedX; //move in the x  direction
  y = y + speedY; //move in the y  direction
  
  //check the bounds of the x position  of the ellipse
  if (x >= width - circle_radius || x  <= 0 + circle_radius) {
   speedX = speedX * -1;
  } 

  //check the bounds of the y position  of the ellipse
  if (y >= height - circle_radius || y  <= 0 + circle_radius) {
   speedY = speedY * -1;
  } 
  
  //check for collision between circle  and smiley
  if (isCollision == false && (abs( mouseX - x) < 50 && abs(mouseY - y) <  50)) {
    //if we have a collision, reverse  the direction of the ball
    speedX = speedX * -1;
    speedY = speedY * -1;
    //remember that we have a collsion  so we don't look for more collisions
    isCollision = true;
  }
  else if (abs(mouseX - x) > 50 && abs( mouseY - y) > 50) {
      //if we had a collsion, but we  don't have one any more, reset  the flag
      isCollision = false;
  }
    
}


What links here