Scribd
Upload
4 views

Processing_Shapes_Animations_Interactions (2)

The document provides an overview of various functions and methods used in Processing, a programming language for visual arts. It covers topics such as creating shapes, handling animations, and managing user interactions through mouse and keyboard events. The content is structured to guide users in implementing graphics and animations using code snippets and examples.

Uploaded by

anderillar1996
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Processing_Shapes_Animations_Interactions (2)

The document provides an overview of various functions and methods used in Processing, a programming language for visual arts. It covers topics such as creating shapes, handling animations, and managing user interactions through mouse and keyboard events. The content is structured to guide users in implementing graphics and animations using code snippets and examples.

Uploaded by

anderillar1996
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

Processing: Antoine Hacheme

Processing.Create Shapes();

Antoine Hacheme
Default Functions

Run only once Run continuously

void setup() { void draw() {

} }
Page Size

width width enable 3D render

size(500, 500); size(500, 500, P3D);

height height
Background Color

Red value Blue value Background color

background(222, 12, 112); background(20);


Green value Greyscale value
Random Functions

randomise value
from 0 to 500 From 20

random(500); random(20, 300);

To 300
Create Points

position x position x position z

point(30, 20); point(30, 20, -50);


position y position y
Stroke Color

Red value Bleue value Greyscale value

stroke(222, 12, 112); stroke(112);

Green value
Position Functions

position x Run continuously

translate(width/2, height/2); rotate(45);

position y
Create Basics

position x scale position x scale

square(30, 20, 50); circle(30, 20, 50);


position y position y
Object Color

Red value Bleue value Greyscale value

fill(222, 12, 112); fill(112);

Green value
Create Ellipse

position x width

ellipse(30, 20, 20, 85);

position y height
Create Rectangle

point 1 point 2
position x width position x width round corners

rect(30, 20, 55, 55); rect(30, 20, 55, 55, 7);


position y height position y height
point 4 point 3

point 1 point 3
position x width round round

rect(30, 74, 50, 13, 16, 12, 18, 13);

position y height point 2 point 4


round round
Create Triangle

point 1 point 1 point 2 point 3


position x position x position x

triangle(30, 74, 50, 30, 86, 75);


point 1 point 2 point 3
point 3 point 2 position y position y position y
Create Line

point 1 point 1 point 1 point 2


position x position z position y

line(100, 20, 0, 50, 90, 0);

point 1 point 2 point 1


position y position x position z
point 2
Create Quad

point 1 point 2 point 1 point 2 point 3 point 4


position x position x position x position x

quad(10, 10, 50, 10, 50, 60, 10, 50);


point 1 point 2 point 3 point 4
point 4 position y position y position y position y
point 3
Create Shape

Create a PShape variable Start adding vertex Stop adding vertex Display shape

PShape s; s.beginShape(); s.endShape(); shape(s);

position x

s.vertex(50, 0);

position y
Add Image

Create a Pimage variable

PImage img;

Load an image from your files

img = loadImage(“myImage.png”);

Display the image

image(img, -40, -65, 421, 297.5);


Float Int

Whole number Also equal 0

int i = 0; int i;

Decimal number Equal 0

float f = 0.5; float f;


Processing.Animations();

Antoine Hacheme
Update Variable

Whole number Add 1 to the x value

int x = 100; x = x + 1;
Update Variable

Name Add 1 to the x value

int timex = 1; x += 1;
Update Variable

Variable Add the variable value timex to x

int timex = 1; x += timex;


If Else

If a condition is true, If the previous condition is false,


the statement start the else statement start

if (condition) { else {
//statement //statement
} }
If Condition

If the variable value x plus 25 is greater than


the height of your page

if (x > height ) {
If Or

If the variable value x is greater than the height


of your page or If the variable value x is smaller than 0

if (x > height || x - 25 < 0) {

Or
Parametric Equations

Parametric Equations: assign the variable t


to the variable x.

float x(float t){


}
Map Functions

Use the values from mouseX and apply


them to the color variable.

color = map(mouseX, 0, 500, 0, 255);


Processing. Interactions();

Antoine Hacheme
Key Pressed

If any key on the keyboard If any special key is pressed,


is pressed, run the statement. run the statement.

if (keyPressed){ if (keyCode == UP){


} }
Special character. (SPACE, ENTER,
SHIFT, UP, DOWN, LEFT RIGHT)
Specific Key

If lower case letter a or uper


case A, run the statement.

if (key == ‘a’ || key == ‘A’){


}
MouseX mouseY

Variable storing the X Variable storing the Y


position of the cursor position of the cursor

mouseX mouseY
Mouse Press

if statement storing function run only if the


mousePressed as a condition mouse is pressed

if (mousePressed) { void mousePressed() {


} }
If Boolean

boolean have two states, they can


only be true or false(on/off). if stop is true, run the statement

boolean stop = true; if (stop) {


stop = false;
name of the boolean. Set to stop to true }
on start. Set the boolean stop
to false.
Multiple Click
If the variable click is equal
to 0, run the statement.

if (click == 0) {
click = 1;
Create an interger.(whole number) }
Assign a new value(1)
By making it not equal to anything,
to the integer click.
it will be equal to 0.

If the variable click is equal


int click; to 1, run the statement.

Name given to the integer.


else if (click == 1) {
click = 0;
}
Assign a new value(0) to the
integer click so we create a loop
which mean a two states button.
Map Functions

object you object value variable value


Whole number want to map. to to

float r = map(mouseX, 0, 500, 0, 255);

take the value from the float r object value variable value
and map assign it to another. from from
Hover Objects

int x = 100;
int y = 100;
int si = 50; ellipse(x, y, si, si);

If the distance between x, y and mouseX, mouseY is smaller than the


variable si divided by two,(if your mouse is in the ellipse) run statement.

Calculate the distance integer y mouseY value


between points. value (equal to your page size).

if (dist(x, y, mouseX, mouseY) < si / 2) {


}
integer x mouseX value
value (equal to your page size).
Processing: Antoine Hacheme

You might also like