(Added P04 and P05 example sketches) |
|||
| Line 284: | Line 284: | ||
} | } | ||
} | } | ||
} | |||
</source> | |||
<br /><br /> | |||
== 21.11.2014 Processing sketches == | |||
=== P06 Strings and Chars === | |||
<source lan="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 lan="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 === | |||
<source lan="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.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.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> | </source> | ||
<br /><br /> | <br /><br /> | ||