17.10.2014 Processing sketches
P01 Shapes and Relations
/*
P01 Shapes and Relations
This example illustrates how to formulate properties in relation to each other.
Also the following principles are introduced:
- Usage of the setup() and draw() functions
- Drawing of basic shapes and colors
- Definition and usage of variables > dimension, halfDimension and border
- Dynamic mouse input to influence the state of the programm during runtime
- Output values to the console with print() and println()
*/
void setup() {
// set the canvas size
size(1000, 600);
}
void draw() {
// set background color to white
background(255);
// no fill color
noFill();
// variable for the size of the rectangle and the ellipse
float dimension = mouseX;
// variable for the distance between the red lines and the center shapes
float border = mouseY * 0.2;
// set the stroke color to black
stroke(0);
// use the center as origin when drawing rectangles
rectMode(CENTER);
// draw a rectangle on the left side of the canvas with varaible dimensions
rect(250, 300, dimension, dimension);
// draw a circle on the right side of the canvas with varaible dimensions
ellipse(750, 300, dimension, dimension);
// calculate and store half of the current dimension (for better readability)
float halfDimension = dimension * 0.5;
stroke(255, 0, 0);
// draw the two lines according to the dimension of the shapes and the vertical border
line(250 - halfDimension, 300 - halfDimension - border, 750 + halfDimension, 300 - halfDimension - border);
line(250 - halfDimension, 300 + halfDimension + border, 750 + halfDimension, 300 + halfDimension + border);
// output the actual dimension and border values to the console
print("dimension:");
println(dimension);
print("border:");
println(border);
}
P02 Custom Functions
/*
P02 Custom functions and transformations
This example shows how to write custom functions and how to use the
transform() and the rotate() statements to move and rotate the canvas.
It also illustrates the possibility to store and restore a certain
transformation state with pushMatrix() and popMatrix().
*/
void setup(){
size(1000,600);
background(0);
// move to the center of the canvas
translate(width * 0.5, height * 0.5);
// draw an arrow and a cross with the size of 10 pixels
arrow();
crossShape(10);
// store the actual position (in this case the center of the stage)
pushMatrix();
// move 200 pixels to the right from the canvas center
translate(200, 0);
// rotate the canvas by 60 degrees
rotate( radians(60) );
// draw an arrow and a cross to this new rotated location
arrow();
crossShape(10);
// recall the previously stored position (the center of the
// canvas which was done using the pushMatrix() statement)
popMatrix();
// move 100 pixels down from the center of the canvas
translate(0,100);
arrow();
crossShape(10);
}
// Define a new function which draws a red arrow to the actual origin of the canvas
void arrow(){
stroke(255,0,0);
line(0,0,50,0);
line(45,-5,50,0);
line(45,5,50,0);
}
// Define a new function which draws a black cross depending on the passed parameter "dimension"
void crossShape(float dimension){
float halfDimension = dimension * 0.5;
stroke(255);
line(-halfDimension, -halfDimension, halfDimension, halfDimension );
line( halfDimension, -halfDimension, -halfDimension, halfDimension);
}
07.11.2014 Processing sketches
P03 Nested Rects
/*
P03 Nested Rectangles with a while loop
Demonstration of how to make a repetetive structure using
a while-loop. Here the variable "rectSize" is decreased in
every step and the coordinate system is rotated a little bit
as well. The while-loop is executed as long as the value
of rectSize is larger than zero (rectSize > 0).
*/
size(1000,600);
// variable with the start size of the rectangles structure
int rectSize = 500;
// variable to specify the amount the rectangles are shrinked in each step
int difference = 30;
background(255);
// since all shapes are aligned centered, the center rect mode is used
rectMode(CENTER);
noFill();
// set the origin of the coordinate system to the center of the stage
translate(width/2, height/2);
// continue the following statements within the while-loop as long as the value
// of the variable "rectSize" is larger than 0
while(rectSize > 0){
//draw a rectangle with the actual size of "rectSize"
rect(0,0,rectSize,rectSize);
// for the next loop: decrease the value of "rectSize" by the value of "difference"
rectSize = rectSize - difference;
// rotate the coordinate system by 4 degrees
rotate(radians(4));
}
P04 For Loop
/*
P04 For-Loop for repeating structures
Draw a number of rectangles in a horizontal line and dynamically
change the spacing between them according to the y-position of the
mouse.
*/
// Variable to specify the total numbers of rectangles to be drawn
int numRects = 10;
void setup(){
size(1000,600);
noFill();
}
void draw(){
// Calculate the distance between each rectangle by
// dividing the current mouse position by 10 (or multiply it with 0.1)
float distance = mouseX * 0.1;
// Reset the background to white
background(255);
// Move the coordinate system to the vertical center
translate(0, height * 0.5);
// Repeat the for-loop for the times of "numRects"
for(int i=0; i < numRects ; i++ ){
// Draw a rectangle at the current origin of the cordinate system (0,0)
rect(0,0,10,10);
// Move the coordinate system to the right by the number of pixels specified in "distance"
translate( distance ,0);
}
}
P05 2D Grid
/*
P05 2D GRID
Example to demsonstrate the usage of two nested for loops
to create a two dimensional grid pattern. The number of
rows and colums is calculated at the startup so that it
matches given space (half of the screen size) and the
specified spacing between each grid element (defined by
the variable "gridSpacing")
*/
// Define the spacing of the grid elements
float gridSpacing = 10;
// Inititalize variables to store the number of rows and colums
float numCols;
float numRows;
void setup(){
size(600,600);
// Dynamically calculate the number of colums and rows accoding to the given
// stage size and the grid size.
numCols = (width * 0.5) / gridSpacing;
numRows = (height * 0.5) / gridSpacing;
}
void draw(){
background(255);
// Leave a quater of the stage blank as spacing around the
// grid structure.
translate(width * 0.25, height * 0.25);
// Use two for loops to interate the colums and rows:
for(float i=0; i < numCols; i+= 1 ){
for(float j=0; j < numRows; j+= 1){
// Change the appearance of dots for
// even and odd rows
if( j % 2 == 0){
stroke(0);
noFill();
}else{
fill(255,0,0);
noStroke();
}
// Calculate the actual position of the individual dot:
float x = i * gridSpacing;
float y = j * gridSpacing;
// Draw the ellipse
ellipse(x, y, 5, 5);
}
}
}