Learning Processing – Simple Circle Animation along Moving Mouse


We have introduced into Processing programming using two simple examples, [here] and [here]. These two examples take no input from the users, just drawing images (output). The following example will show you the basic input functions at Processing. Using mouseX and mouseY to obtain the integer coordinates of the mouse in the window.

We default the mouse location to the center at the beginning. width and height returns the width and height of the application window respectively.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// https://helloacm.com
 
void setup() {
  size(500, 500);
  background(0);
  mouseX = width / 2;
  mouseY = height / 2;
}
 
void draw() {
  float r = random(200);
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, r, r);
}
// https://helloacm.com

void setup() {
  size(500, 500);
  background(0);
  mouseX = width / 2;
  mouseY = height / 2;
}

void draw() {
  float r = random(200);
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, r, r);
}

mouse-circles Learning Processing - Simple Circle Animation along Moving Mouse animation images drawing implementation javascript Processing and ProcessingJS programming languages

To see the live demo, visit [https://helloacm.com/processing/mouse-circles/] in the modern browser (enabled by ProcessingJS).

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...
252 words
Last Post: Learning Processing - Making a Simple Clock
Next Post: Unrolling Loop in C/C++/Java Style

The Permanent URL is: Learning Processing – Simple Circle Animation along Moving Mouse

Leave a Reply