GMU:Processing im Park/Part1: Difference between revisions

GMU:Processing im Park/Part1 (view source)

Revision as of 10:54, 5 November 2015

4,311 bytes added , 5 November 2015

no edit summary

Ms

emailconfirmed

1,824

edits

@@ Line 172: / Line 172: @@
 == Cut-Ups, Pixels, Stripes, Collages ==
+This part was about how to create cut-ups, interactive photo puzzles and collages.
+=== Cut-Ups ===
+In this part we will learn how to:
+* use arrays to work with lots of images
+* use loops to let the computer do repetetive tasks
+* create image collages
+** cut up images into stripes and squares
+** rearrange stripes and squares
+Here's the source code for s simple 3x3 puzzle.
+We are cutting the original images into 9 parts, and rearrange them:
 ----
@@ Line 211: / Line 226: @@
 </source>
 ----
+Here's the final version, that uses variables, arrays and loops to allow for arbitrary number of tiles:
+----
+<source lang="java">
+PImage img;
+// tiling parameters
+int columns = 5;
+int rows = 5;
+int tiles = columns * rows;
+// change this to show/hide the labels ontop of the tiles
+boolean debugview = true;
+// size of the labels
+int labelWidth = 20;
+int labelHeight = 20;
+// array for the tiles
+PImage[] parts = new PImage[tiles];
+// dimensions of a single tile
+int dx;
+int dy;
+void setup() {
+  size(300, 300);
+  // calculate dimensions of a single tile
+  dx = width / columns;
+  dy = height / rows;
+  // load image and draw it on the canvas
+  img = loadImage("photo.jpg");
+  image(img, 0, 0, width, height);
+  // extract the tiles from the canvas
+  for(int i=0; i < tiles; i++) {
+    // get tile coordinates
+    int x = (i % columns) * dx;
+    int y = (i / columns) * dy;
+    // crop tile from the canvas
+    parts[i] = get(x, y, dx, dy);
+  }
+  noLoop();
+}
+void draw() {
+  for(int i=0; i < tiles; i++) {
+    // get tile coordinates
+    int x = (i % columns) * dx;
+    int y = (i / columns) * dy;
+    // cange the order of tiles by picking a different index (play with this!)
+    //// invert indices
+    // int index = tiles - i - 1;
+    // pick a random index
+    int index = int(random(tiles));
+    // make sure the index does not get out of range ...
+    index = index % tiles;
+    // show the tile
+    image(parts[index], x, y);
+    // show grid ontop of the tiles
+    noFill();
+    rect(x, y, dx, dy);
+    // just a quick hack to put a label ontop of each tile
+    if(debugview) {
+      // draw white labels behind the numbers so we can read them better
+      textAlign(CENTER);
+      fill(255, 150);
+      noStroke();
+      rect(x +dx/2 -labelWidth/2, y +dy/2 -labelHeight/2, labelWidth, labelHeight);
+      // draw numbers on tiles
+      fill(0);
+      text(index, x + dx/2, y+dy/2 + 5);
+    }
+  }
+}
+</source>
+----
+=== Homework 2 ===
+* Pick an image from the link section below
+* Write a step by step instruction detailing the algorithm
+* Create a processing sketch that applies the algorithm to one of your photos.
+Things to keep in mind:
+* Don't tweak my sketch, start from scratch
+* Use comments, to explain your intention
+=== Links ===
+==== Collages ====
+* [http://a-gerace.com/ Portfolio of Anthony Gerace] with lots of sliced and diced photos
+** [http://a-gerace.com/index.php/collage/there-must-be-more-to-life-than-this/ Diced Collages]
+** Sliced collages can be found [http://a-gerace.com/files/gimgs/17_006%20%28368%29_v2.jpg here] and [http://a-gerace.com/files/gimgs/17_006%20%28368%29_v2.jpg here]
+** Sliced and Diced: [http://a-gerace.com/files/gimgs/17_img002_v2.jpg here], [http://a-gerace.com/files/gimgs/17_img002_v2.jpg here] and [http://a-gerace.com/files/gimgs/17_img001_v2.jpg here]
+* [http://cargocollective.com/inserirefloppino/G-series Sliced Collages] by Marco Migani
+* Grid Collages (inspired by Chuck Close)
+** [http://www.incredibleart.org/lessons/middle/larry-valuegrid.htm Value Grid]
+** [http://artprojectsforkids.org/chuck-close-self-portrait/ Art Project for Kids]
+* Cut-Out Collages
+** [https://www.behance.net/gallery/11405205/Natural-Act Natural Act] by Merve Ozaslan
+** [http://www.boredpanda.com/paper-cutout-art-fashion-design-architecture-shamekh-bluwi Paper Cut-Outs] by Shamekh Bluwi
+** [http://www.boredpanda.com/animals-cutouts-natural-landscapes-nikolai-tolsty/ Animal-Cutouts] by Nikolai Tolsty
+* Joiner Collages
+** [http://www.shootingfilm.net/2013/01/joiners-polaroid-collages-by-david.html Polaroid Collages] by David Hockney
+** [http://www.tkellner.com/ Film  Mosaics] by Thomas Kellner
+** [http://www.mauriziogalimberti.it/?tag=venezia Polaroid Mosaic Portraits] by Maurizio Galimberti