Learning Processing

These informations will be added into categories in a close future

Basic learnings

void setup define parameters in the first place/beginning that will remain FOREVER

 void setup() {}

void draw define what gonna happen and be looped infinitly

void draw() {}

void mousePressed allows to add one more conditional

void mousePressed() {}

arc() / circle() / ellipse() / line() / point() / quad() / rect() / square() / triangle() are some of the possible 2D elements you can begin with

  rect(100, 1000, 100, 50);
  // x, y, width, height
  //x/y stands for the location of the top left of the rectange

size defines the size of the canvas

  size(540, 960);
  //canvas/format

mouseX or/and mouseY variable allows the shape to be redrawed endlessly

rect(mouseX, mouseY, 100, 50);

pmouseX or/and pmouseY allows to draw from previous to current point

line(pmouseX,pmouseY,mouseX,mouseY);

Make a drawing machine

Version 01

With the few elements presented just over and using line(pmouseX,pmouseY,mouseX,mouseY) it remains already quiet easy to make a very simple drawing machine.

void setup() {
  size(540, 960);
  background(#EAE8E8);

}

void draw() {
  fill(#000000);
  stroke(#000000);
  line(pmouseX,pmouseY,mouseX,mouseY);
}

Version 02

Use pmouseX,pmouseY,mouseX,mouseY to allow to clean the canvas each time you click the mouse again.

void setup() {
  size(540, 960);
  background(#EAE8E8);

}

void draw() {
  fill(#000000);
  stroke(#000000);
  line(pmouseX,pmouseY,mouseX,mouseY);
}

void mousePressed() {
  background(#EAE8E8);
}

Make a bouncing ball

Use circleX to make up our own variable.

1st step: declare a variable
type name; int _____;

int circleX;

2nd step: Initialize a variable by assigning a value to it

int circleX;

void setup() {
  size(540, 960);
  circleX = 100;
}

3rd step: use the variable

int circleX;

void setup() {
  size(540, 960);
  circleX = 100;

}

void draw() {
  background(#EAE8E8);
  fill(#000000);
  ellipse(circleX,180,24,24);
  //pmouse allows to draw to previsou to current point
}

4th step: evaluate a new value to CircleX by incrementing it. Then it gonna move!

int circleX;

void setup() {
  size(540, 960);
  circleX = 100;

}

void draw() {
  
  //Drawing
  background(#EAE8E8);
  fill(#000000);
  ellipse(circleX,180,24,24);
  
  //Else
  circleX = circleX + 1;
}

5th step: indicate that if the ball touches the edges of the canvas, it must return back (negative speed)
by using a condition: if (circleX > width || circleX <0) { xspeed = xspeed * -1};
Now it's bouncing!

float circleX;
float xspeed = 2;

void setup() {
  size(540, 540);
  background(#EAE8E8);
  circleX = 0;
}

void draw() {
  background(51);
  fill(102);
  stroke(255);
  ellipse(circleX, height/2, 32, 32);
  
  circleX = circleX + xspeed;
  
  if (circleX > width || circleX <0) {
  xspeed = xspeed * -1;
}
}