Learning Processing

These informations will be added into categories in a close future

Useful links:
→ 1.  Tim Rodenbroeker tutorials → 2.  The coding Train tutorials

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 simple while loop

float x = 0;

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

void draw() {
  background(51);
  
  x = 0;
  //reset x to 0
  while (x < width) {
    
  if (mouseX < 1) {
  x = x + 1;
  // repeat this code until x is no longer in the width

  } else {
    x = x + mouseX;
  }
    fill(102);
    stroke(255);
    ellipse(x, 150, 32, 32);
  }
}

Make a simple grid by adding an initialization condition, a bolorean expression, and a incrementation operation

size(540, 540);

background(#EAE8E8);
strokeWeight(2);
stroke(255);

int x = 0;
//initialization condition
while (x < width) {
//bolorean expression
line(x, 0, x, height);
x = x + 20;
//incrementation operation
}

int y = 0;
//initialization condition
while (y < height) {
//bolorean expression
line (0, y, width, y);
y = y + 20;
//incrementation operation
}

A shorter way to write this same thing

size(540, 540);
background(#EAE8E8);
strokeWeight(2);
stroke(255);

int x = 0;
while (x < width) {
    line(x, 0, x, height);
    x = x + 20;
}
for (int y = 0; y < height; y = y + 20) {
line (0, y, width, y);
}

Make a loop inside a loop (but not a nested loop) to make this grid interativly appear with the mouse movement

float endX = 0;

void setup() {
  
  
size(540, 540);
}

void draw() {
// this is a loop
  background(#EAE8E8);
  strokeWeight(2);
  stroke(255);
  
  int x = 0;
  while (x < mouseX) {
  // and this is also so a loop
      line(x, 0, x, height);
      x = x + 20;
  }
}

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;
}
}