Printing Code - Waza 2013

Programming and the Visual Arts

Transcript

1. Printing Code Programming and the Visual Arts @runemadsen
2. Rune Madsen.
6. Week 1: Form Week 2: Color Week 3: Typography Week 4: Grid Systems Week 5: Logo Week 6: Randomization Week 7: Repetition Week 8: Transformation Week 9: Motion Week 10: 3D www.runemadsen.com/printing-code
8. "Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. Similarly, the project is designed to turn engineers and computer scientists to less gainful employment as artists and designers"
9. Graphic Design vs. Code
12. # Create a new bare Git repository. # # name - The String name of the repository. # hooks[] - The String array of hooks to enable when creating the repo # # Returns a JSON string of the created repo post '/repos' do repo_name = params[:name] repo_name += ".git" unless repo_name =~ /\.git/ repo = Grit::Repo.init_bare(File.join(settings.git_path, repo_name)) enable_hooks(File.join(settings.git_path, repo_name), params[:hooks]) if params[:hooks] repo_to_hash(repo).to_json end
13. “It's important to use your hands, this is what distinguishes you from a cow or a computer operator” Paul Rand, Conversations with Students, 1995
15. Graphic Design History
17. William Addison Dwiggins
27. Graphic Design + Code
28. Form
30. void setup() { size(600, 850); translate(width/2, 125); fill(30); int[] points = {3, 4, 6, 40}; for(int i = 0; i < points.length; i++) { beginShape(); for(int j = 0; j < points[i]; j++) { float vertexX = cos(radians(j * (360/points[i]))) * 100; float vertexY = sin(radians(j * (360/points[i]))) * 100; vertex(vertexX, vertexY); } endShape(); translate(0, 200); } }
32. Paul Rand My Version
33. void setup() { size(800, 1048); background(255); smooth(); PFont helvetica = createFont("Helvetica-BoldItalic", 50); translate(100, 100); int count = 0; for(int x = 0; x < 5; x++) { for(int y = 0; y < 7; y++) { if(count == 27) drawText(x * 148, y * 141, 100, #138b29, helvetica); else if(count == 17) drawHeart(x * 148, y * 141, 100, #FF0000); else drawHeart(x * 148, y * 141, 100, #138b29); count++; } } }
35. Paul Rand My Version
36. void setup() { size(800, 1013); background(0); int[] colors = { #33238e, #2042a4, #e77a27, #2c4b21, #cc4e73}; PFont helveticabold = createFont("Helvetica-Bold", 25); PFont helvetica = createFont("Helvetica-UltraLight", 21); float s = 70; float textX = 150; float textY = 300; drawText(textX, textY, helveticabold, helvetica); for(int i = 0; i < 30; i++) { float x = random(s, width-s); float y = random(s, height-s); if( x < textX-(s*1.3) || x > textX+350 || y < textY-(s*1.3) || y > textY+130) { int c = colors[int(random(colors.length))]; fill(c); ellipse(x, y, shapeSize, shapeSize); } } }
38. 1 2
39. void setup() { drawTriangle(0, 0, startSize, 0, 0, false, #003c82); } void drawTriangle(float x,float y,float s,float r,int l,boolean split,int c) { float b = d / 2; float c = d / factor; float a = sqrt(sq(c) - sq(b)); translate(x, y); rotate(radians(r)); fill(c); triangle(0, 0, -b, a, b, a); level++; if(!split && l < maxLevel) drawTriangle(0, 0, s, 0, level, false, #003c82); else if(l < maxLevel) { drawTriangle(-(a / sqrt(3)), a, c, 150, level, false, #003c82); drawTriangle(a / sqrt(3), a, c, -150, level, false, #003c82); // ... drawTriangle(0, a - childA, childBottom, 0, level, true, #50c8fa); drawTriangle(0, a - childA, childBottom, 120, level, true, #50c8fa); drawTriangle(0, a - childA, childBottom, -120, level, true, #50c8fa); } }
42. Color
43. Complementary Analogous Triadic Tetradic
44. 10° 30° 50° 70°
45. 10° 51° 192° 231°
47. void setup() { size(600, 800); colorMode(HSB, 360, 100, 100); noStroke(); for(int i = 0; i < 3; i++) { fill(i * 20, 80, 90); rect(0, i * (height/3), width, height/3); } }
48. void setup() { size(600, 800); colorMode(HSB, 360, 100, 100); noStroke(); float hueStart = random(0, 120); float multiplier = random(10, 40); float s = random(70, 100); float b = random(40, 100); for(int i = 0; i < 3; i++) { float h = hueStart + (i * multiplier); fill(h, s, b); rect(0, i * (height/3), width, height/3); } }
49. import toxi.color.*; import toxi.color.theory.*; import toxi.util.datatypes.*; void setup() { colorMode(HSB, 1, 1, 1); TColor col = TColor.newHSV(0.038888, 0.84, 0.94); ColorTheoryStrategy s = new TetradTheoryStrategy(); ColorList colors = ColorList.createUsingStrategy(s, col); translate(width / 2, height / 2); float phi = (1+sqrt(5.0))/2.0; float increment = 2*PI*phi + (2*PI); for (int i = 1; i < 300; i++) { float distance = sqrt(i)*15; float angle = i * increment; float cx = distance*cos(angle); float cy = distance*sin(angle); TColor curColor = colors.get(int(random(colors.size()))); fill(curColor.hue(), curColor.saturation(), curColor.brightness()); ellipse(cx, cy, 20, 20); } }
50. // draw one triangle FloatRange h = new FloatRange(0.1, 0.8); FloatRange s = new FloatRange(0.3, 0.8); FloatRange b = new FloatRange(0.75, 1); ColorRange range = new ColorRange(h, s, b, "quarter one"); for(int i = 0; i < 5; i++){ TColor ranColor = range.getColor(); canvas.fill(ranColor.hue(), ranColor.saturation(), ranColor.brightness()); canvas.vertex(x1[i], y1[i]); }
52. Grid Systems
53. * www.ilovetypography.com
54. * www.ilovetypography.com
55. class Column { int x, y, w, h; Column(int _x, int _y, int _w, int _h) { //... setters } } void setup() { Column col = new Column(50, 50, width-100, height-100); for(int i = 0; i < 100; i++) { float x = random(col.x, col.x + col.w - ellipseSize); float y = random(col.y, col.y + col.h - ellipseSize); ellipse(x, y, ellipseSize, ellipseSize); } }
56. class Grid { int cols; float pageMargin; Column[] columns; Grid(int _cols, float _pageMargin) { //... create columns } } void setup() { Grid grid = new Grid(3, 50); for(int i = 0; i < grid.columns.length; i++) { for(int j = 0; j < 40; j++) { Column col = grid.columns[i]; float x = random(col.x, col.x + col.w - ellipseSize); float y = random(col.y, col.y + col.h - ellipseSize); ellipse(x, y, ellipseSize, ellipseSize); } } }
57. class ModularGrid { int cols, rows; float gutterSize, pageMargin; Module[][] modules; ModularGrid(int _cols, int _rows, float _gutterSize, float _pageMargin) { //... create modules } } void setup() { ModularGrid grid = new ModularGrid(3, 4, 10, 50); for(int i = 0; i < grid.modules.length; i++) { for(int j = 0; j < grid.modules[i].length; j++) { for(int k = 0; k < 10; k++) { Module mod = grid.modules[i][j]; float x = random(mod.x, mod.x + mod.w - ellipseSize); float y = random(mod.y, mod.y + mod.h - ellipseSize); ellipse(x, y, 40, 40); } } } }
59. Original Matt Epler Matt Epler
61. More r a p t y p g y a
66. Automated Design
67. require 'rubygems' require 'bundler' Bundler.require set :root, File.dirname(__FILE__) class Processing class << self def run(sketchname) Headless.ly do r = File.dirname(__FILE__) `#{r}/bin/processing/processing-java --sketch=#{r}/sketches/#{sketchname} --output=#{r}/sketches/#{sketchname}/build --force --run` end end end end get '/' do # this should totally go in a background job. # Just showing it here for simplicity Processing.run("test") "Generated a test image into /sketches/test. You can upload it to S3 or whateva." end
70. “We think of great design as art, not science, a mysterious gift from the gods, not something that results just from diligent and informed study. But if every designer understood more about the mathematics of attraction, the mechanics of affection, all design [...] could both look good and be good for you” Lance Hosey, The New York Times
71. Thank You. @runemadsen bit.ly/printingcode