213
edits
IFD:All Hail The Pixels/ProcessingSketches (view source)
Revision as of 09:22, 2 December 2014
, 2 December 2014→28.11.2014 Processing sketches
(Created page with "== 17.10.2011 Processing sketches == === P01 Shapes and Relations === <source lang="java"> /* P01 Shapes and Relations This example illustrates how to formulate properties ...") |
|||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== 17.10. | == 17.10.2014 Processing sketches == | ||
=== P01 Shapes and Relations === | === P01 Shapes and Relations === | ||
| Line 126: | Line 126: | ||
} | } | ||
</source> | |||
<br /><br /> | |||
== 07.11.2014 Processing sketches == | |||
=== P03 Nested Rects === | |||
<source lang="java"> | |||
/* | |||
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)); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P04 For Loop === | |||
<source lang="java"> | |||
/* | |||
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); | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P05 2D Grid === | |||
<source lang="java"> | |||
/* | |||
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); | |||
} | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
== 21.11.2014 Processing sketches == | |||
=== P06 Strings and Chars === | |||
<source lang="java"> | |||
/* | |||
P06 Strings and Chars | |||
This example illustrates how to work with Strings (a collection of characters) | |||
and how to display text on the screen. Also it shows how to access single characters | |||
of a string by using the charAt() function. | |||
*/ | |||
// Initialize a new string variable and assign the phrase "HELLO" to it | |||
String word = "HELLO"; | |||
// Variable to count the current character position | |||
int index = 0; | |||
void setup() { | |||
size(1000, 600); | |||
// Set the size for any text that is drawn to 36px | |||
textSize(36); | |||
// Reduce the frame rate of the draw() loop to 2 frames per second | |||
frameRate(2); | |||
} | |||
void draw() { | |||
background(0); | |||
// Make sure that the index never exceeds the bounds of the word | |||
if (index >= word.length() ) { | |||
index = 0; | |||
} | |||
// Display the character at the current position (index) at the center of the screen | |||
text(word.charAt(index), width*0.5, height*0.5); | |||
// Increment the index by 1 | |||
index++; | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P07 Array Layout === | |||
<source lang="java"> | |||
/* | |||
P07 Array Layout | |||
This sketch shows how Arrays can be used to structure a set of numbers. | |||
Also it uses a for-loop to iterate the Array and to access each individual | |||
number of it to draw an ellipse with the respective diameter. | |||
*/ | |||
// Initialize an Array to specify the individual diameters of ellipses in the grid. | |||
// Note that the way of writing the numbers in a 3x3 grid is only for better readibility. | |||
// One could also write {9,2,2,2,9,2,2,2,9} | |||
int[] diameters = { 9,2,2, | |||
2,9,2, | |||
2,2,9 }; | |||
// Variable to define the spacing between the elements in the grid | |||
int spacing = 50; | |||
void setup(){ | |||
size(1000,600); | |||
noFill(); | |||
// Print the total numbers of elements in the diameters array to the console | |||
println(diameters.length); | |||
} | |||
void draw(){ | |||
background(255); | |||
// Align the grid structure to the center | |||
translate(width * 0.5 - (spacing * 1.5), height * 0.5 - (spacing * 1.5)); | |||
// Loop over the diameters array | |||
for(int i=0; i < diameters.length; i++){ | |||
// Calculate the modulo of the division of the counter (i) by the total | |||
// number of colums (3) to get the current column: | |||
int x = (i % 3) * spacing; | |||
// Calculate the actual row by dividing the counter by the total number | |||
// of columns (3) and rounding it down with floor() | |||
int y = floor(i / 3) * spacing; | |||
// Draws the individual ellipse with the respective diameter | |||
// specified in the diameters array. | |||
ellipse(x, y, diameters[i], diameters[i]); | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P08 Grid By Image === | |||
Make sure you have the [[Media:layout_pixels_example.png]] file in the data folder of the sketch! | |||
<source lang="java"> | |||
/* | |||
P08 Grid By Image | |||
Example of how to load an image file into processing and how to access each | |||
pixel of the image. The color information of the pixels of the loaded image | |||
are used to modify the grid layout. | |||
NOTICE: Make sure the image "layout_pixels_example.png" is placed in the "data" folder of | |||
this sketch! | |||
*/ | |||
// Initialize a variable to store an image | |||
PImage img; | |||
// Define a variable to specify the spacing of the elements | |||
int spacing = 10; | |||
void setup() { | |||
size(1000, 600); | |||
// Load the actual image file from the data folder and | |||
// assign it to the img variable | |||
img = loadImage("layout_pixels_example.png"); | |||
// How many pixels did we load? | |||
println(img.pixels.length); | |||
} | |||
void draw() { | |||
background(0); | |||
// Only show the actual image if a keyboard key is pressed | |||
if(keyPressed){ | |||
image(img, 0, 0); | |||
} | |||
// Two nested for-loops to draw ellipses all over the window | |||
// with a certain spacing | |||
for (int x=0; x < width; x+= spacing) { | |||
for (int y=0; y < height; y+= spacing) { | |||
// Extract the color of the x and y pixel position of the image | |||
color c = img.get(x, y); | |||
// Only actually draw an ellipse when the current brightness of the | |||
// extracted color is very dark (brightness == 0) | |||
if (brightness(c) == 0 ) { | |||
ellipse(x, y, 5, 5); | |||
} | |||
} | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
== 28.11.2014 Processing sketches == | |||
=== P09 Interval timer === | |||
Make sure you have the files [[Media:interval_pixels_example_A.png]], [[Media:interval_pixels_example_B.png]] and [[Media:interval_pixels_example_C.png]] in the data folder of the sketch! | |||
<source lang="java"> | |||
/* | |||
P09 Interval timer | |||
A refinement of the "Grid by image" example with multiple changing | |||
images. The millis() function is utilized to create an interval | |||
timer which changes the actual image from the image sequence stored | |||
in an array. The mouse x position changes the size of the grid dynamically. | |||
Therefor the map() function is used to scale the range of the screen | |||
width to the desired range for controlling the grid size. | |||
*/ | |||
float gridSize = 10; | |||
// Array of images (of type PImage) with the size | |||
// of 3 is initializied | |||
PImage[] images = new PImage[3]; | |||
// Counter for the current index of the image sequence | |||
int imageCounter = 0; | |||
// Variable to define the timer interval in milliseconds | |||
int timerInterval = 400; | |||
// Helper variable to store the last time the interval time has passed | |||
int lastMillis = 0; | |||
void setup() { | |||
size(1000, 600); | |||
// Assign individual images from the data folder | |||
// to the array positions | |||
images[0] = loadImage("interval_pixels_example_A.png"); | |||
images[1] = loadImage("interval_pixels_example_B.png"); | |||
images[2] = loadImage("interval_pixels_example_C.png"); | |||
} | |||
void draw() { | |||
background(0); | |||
// The millis() function returns the number of milliseconds | |||
// (thousandths of a second) since starting the program. | |||
// When lastMillis is substracted from millis(), we get the | |||
// milliseconds which have been past since the last timer execution. | |||
if( millis() - lastMillis > timerInterval ){ | |||
// Now count up the imageCounter by 1 | |||
imageCounter++; | |||
// Make sure it stays within the bounds of the images array | |||
imageCounter = imageCounter % images.length; | |||
// It is important to set lastMillis to the actual number | |||
// of milliseconds, otherwise the if condition does not | |||
// work repetitively. | |||
lastMillis = millis(); | |||
} | |||
// Helper variable to store the actual image from the array. | |||
PImage currentImg = images[imageCounter]; | |||
// Only show the background image when a keyboard key is pressed | |||
if(keyPressed){ | |||
image(currentImg, 0, 0); | |||
} | |||
// Dynamically scale the gridSize according to the mouse | |||
// x position | |||
gridSize = map(mouseX, 0, width, 5, 30); | |||
// Loop through the columns and rows of the grid | |||
// as in the previous example | |||
for (int x=0; x < width; x+= gridSize) { | |||
for (int y=0; y < height; y+= gridSize) { | |||
color c = currentImg.get(x, y); | |||
if (brightness(c) < 255 ) { | |||
ellipse(x, y, 5, 5); | |||
} | |||
} | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P10 Linear movement and direction === | |||
<source lang="java"> | |||
/* | |||
P10 Linear movement and direction | |||
The famous "bouncing ball"illustrates how steady movement | |||
is achived by adding a constant number (speed) to the actual | |||
position of an ellipse. The horizontal or vertical direction | |||
is changed when the ellipse hits an edge of the sketch window. | |||
*/ | |||
float rad = 60.0; | |||
float xpos, ypos; | |||
float xspeed = 2.8; | |||
float yspeed = 2.2; | |||
int xdirection = 1; | |||
int ydirection = 1; | |||
void setup() | |||
{ | |||
size(640, 360); | |||
noStroke(); | |||
frameRate(30); | |||
ellipseMode(RADIUS); | |||
xpos = width/2; | |||
ypos = height/2; | |||
} | |||
void draw() | |||
{ | |||
background(102); | |||
xpos = xpos + ( xspeed * xdirection ); | |||
ypos = ypos + ( yspeed * ydirection ); | |||
if (xpos > width-rad || xpos < rad) { | |||
xdirection *= -1; | |||
} | |||
if (ypos > height-rad || ypos < rad) { | |||
ydirection *= -1; | |||
} | |||
ellipse(xpos, ypos, rad, rad); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P11 Polar dots === | |||
<source lang="java"> | |||
/* | |||
P11 Polar dots | |||
Illustrates how circular shapes and movements are created by using | |||
polar coordinates (angle and radius) and how to convert these to cartesian | |||
coordinates (x and y) by using sine and cosine functions (sin() and cos()). | |||
*/ | |||
// Radius | |||
float r; | |||
// Radius offset | |||
float rOffset = 1.0; | |||
// Angle and speed | |||
float angle = 0.0; | |||
float angleSpeed = 0.02; | |||
void setup() { | |||
size(1000, 600); | |||
ellipseMode(CENTER); | |||
// Set r according to the sketch height | |||
r = height * 0.25; | |||
background(255); | |||
} | |||
void draw() { | |||
// Dynamically scale the radius with the mouse x position | |||
rOffset = map(mouseX, 0, width, 0.0, 1.5); | |||
// Draw a semi-transparent rectangle across the whole window | |||
// to let the backround smoothly fade out. | |||
fill(255,10); | |||
rect(0,0,width,height); | |||
// Move to the center | |||
translate(width/2, height/2); | |||
// Convert polar to cartesian coordinates | |||
// and scale the actual radius | |||
float x = (r * rOffset) * cos(angle); | |||
float y = (r * rOffset) * sin(angle); | |||
// Draw the moving red ellipse to the actual position | |||
noStroke(); | |||
fill(200,0,0); | |||
ellipse(x, y, 17, 17); | |||
// Draw the steady circle | |||
stroke(0,10); | |||
noFill(); | |||
ellipse(0,0,r*2,r*2); | |||
// Increase the current value of angle by the value of angleSpeed | |||
angle += angleSpeed; | |||
} | |||
</source> | </source> | ||
<br /><br /> | <br /><br /> | ||