IFD:All Hail The Pixels/ProcessingSketches: Difference between revisions

IFD:All Hail The Pixels/ProcessingSketches (view source)

Revision as of 20:59, 21 November 2014

4,087 bytes added , 21 November 2014

→‎21.11.2014 Processing sketches

Frederic Gmeiner

213

edits

@@ 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,
+,9,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>
 <br /><br />