├── 160506_171123_10575.jpg
├── Deflector.pde
├── Functions.pde
├── Processing_TypeCon.pde
└── README.md


/160506_171123_10575.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feltron/Processing_TypeCon/60f93be2746a378a3a413a5df4a67365a721fb4e/160506_171123_10575.jpg


--------------------------------------------------------------------------------
/Deflector.pde:
--------------------------------------------------------------------------------
  1 | 
  2 | // - - - - - - - - - - - - - - - - - - - - - - - 
  3 | // DEFLECTOR CLASS
  4 | // - - - - - - - - - - - - - - - - - - - - - - - 
  5 | 
  6 | class Deflector { 
  7 |   PVector p_location, p_locationPrev, p_velocity, sumAngles;
  8 |   PVector[] pixelVector = new PVector[9];
  9 |   float[] dPath_x;
 10 |   float[] dPath_y;
 11 |   boolean flipper = false;
 12 |   int deflectionType;
 13 | 
 14 |   Deflector(PVector mousePosition, int deflectionType_) {
 15 |     deflectionType = deflectionType_;
 16 |     initializeDeflector(mousePosition, deflectionType);
 17 |   }
 18 | 
 19 |   // - - - - - - - - - - - - - - - - - - - - - - - 
 20 | 
 21 |   void display() {
 22 |     // Draw Rays
 23 |     beginShape();
 24 |     for (int i=1; i<dPath_x.length-1; i++) {
 25 |       noFill();
 26 |       strokeWeight(2);
 27 |       stroke(150);
 28 |       curveVertex(dPath_x[i-1], dPath_y[i-1]);
 29 |     }
 30 |     endShape();
 31 |   }
 32 | 
 33 |   // - - - - - - - - - - - - - - - - - - - - - - - 
 34 | 
 35 |   void initializeDeflector(PVector mousePosition, int deflectionSelection) {
 36 |     p_location = new PVector(mousePosition.x, mousePosition.y);
 37 |     p_locationPrev = new PVector(mousePosition.x, mousePosition.y);
 38 |     dPath_x = new float[1];
 39 |     dPath_y = new float[1];
 40 |     dPath_x[0] = mousePosition.x;
 41 |     dPath_y[0] = mousePosition.y;
 42 |     deflectionType = deflectionSelection;
 43 |     computeRays();
 44 |   }
 45 | 
 46 |   // - - - - - - - - - - - - - - - - - - - - - - - 
 47 | 
 48 |   void computeRays() {
 49 |     p_velocity = new PVector(1, 1);
 50 |     p_velocity.normalize();
 51 |     for (int i=0; i<drawCycles; i++) {
 52 |       p_velocity = computeDeflection(p_velocity);
 53 |       p_location.add(p_velocity);
 54 |     }
 55 |   }
 56 | 
 57 |   // - - - - - - - - - - - - - - - - - - - - - - - 
 58 | 
 59 |   PVector computeDeflection(PVector v_inbound) {
 60 |     for (int i = 0; i < pixelVector.length; i++) {
 61 |       pixelVector[i] = new PVector();
 62 |     }
 63 |     for (int i=-1; i<2; i++) {
 64 |       for (int j=-1; j<2; j++) {
 65 |         int iteration = (i+1)*3+j+1;
 66 |         pixelVector[iteration].set(i, j);
 67 |         pixelVector[iteration].normalize();
 68 |         color pixelValue = pg.get(int(p_location.x+i+v_inbound.x), int(p_location.y+j+v_inbound.y));
 69 |         int vectorFactor = hexToGrey(pixelValue);
 70 |         pixelVector[iteration].mult(vectorFactor);
 71 |       }
 72 |     }
 73 |     // Average Vectors
 74 |     sumAngles = new PVector(0, 0);
 75 |     for (int i = 0; i < pixelVector.length; i++) {
 76 |       sumAngles.add(pixelVector[i]);
 77 |     }
 78 |     // Calculate Outbound Angle
 79 |     PVector v_outbound = new PVector(0, 0);
 80 |     sumAngles.rotate(PI/2);
 81 |     v_outbound = v_inbound.get();
 82 |     if (sumAngles.x != 0.0 && sumAngles.y != 0.0) { // If both, then not an edge
 83 |       noFill();
 84 |       stroke(255, 0, 0);
 85 |       // Show tangent lines
 86 |       // line(p_location.x-sumAngles.x, p_location.y-sumAngles.y, p_location.x+sumAngles.x, p_location.y+sumAngles.y);
 87 |       float deltaAngle = v_inbound.heading() - sumAngles.heading();
 88 |       if (deflectionType == 1) {
 89 |         // bounce deflection
 90 |         v_outbound.rotate(deflectionFactor*deltaAngle);
 91 |       } else if (deflectionType == 2) {
 92 |         // squiggle deflection
 93 |         if (flipper) {
 94 |           v_outbound.rotate(1.05*PI);
 95 |         } else {
 96 |           v_outbound.rotate(-1.05*PI);
 97 |         }
 98 |         flipper = !flipper;
 99 |       }
100 |       dPath_x = append(dPath_x, p_location.x);
101 |       dPath_y = append(dPath_y, p_location.y);
102 |     }
103 |     return v_outbound;
104 |   }
105 | }
106 | 
107 | 


--------------------------------------------------------------------------------
/Functions.pde:
--------------------------------------------------------------------------------
  1 | 
  2 | // - - - - - - - - - - - - - - - - - - - - - - - 
  3 | // FUNCTIONS
  4 | // - - - - - - - - - - - - - - - - - - - - - - - 
  5 | 
  6 | void drawOffScreenText() {
  7 |   pg = createGraphics(width, height, JAVA2D);
  8 |   pg.beginDraw();
  9 |   pg.background(0);
 10 |   pg.textAlign(CENTER, CENTER);
 11 |   pg.fill(c_textFill);
 12 |   pg.textFont(myFont, typeSize);
 13 |   pg.text(typeString, pg.width/2, pg.height/2); 
 14 |   pg.endDraw();
 15 | }
 16 | 
 17 | // - - - - - - - - - - - - - - - - - - - - - - - 
 18 | 
 19 | void drawScreenText() {
 20 |   fill(c_textFill);
 21 |   noStroke();
 22 |   textFont(myFont, typeSize);
 23 |   textAlign(CENTER, CENTER);
 24 |   text(typeString, width/2, height/2);
 25 | }
 26 | 
 27 | // - - - - - - - - - - - - - - - - - - - - - - - 
 28 | 
 29 | void mouseClicked() {
 30 |   PVector mouseClick = new PVector(mouseX, mouseY);
 31 |   if (mouseY < height-100 && mouseY > 100) {
 32 |     PVector mousePosition = new PVector(mouseX, mouseY);
 33 |     myDeflector=(Deflector[])append(myDeflector, new Deflector(mousePosition, deflectionSetting));
 34 |   }
 35 | }
 36 | 
 37 | // - - - - - - - - - - - - - - - - - - - - - - - 
 38 | 
 39 | void mouseDragged() {
 40 |   PVector mouseClick = new PVector(mouseX, mouseY);
 41 |   if (mouseY < height-60) {
 42 |     myDeflector[myDeflector.length-1].initializeDeflector(mouseClick, deflectionSetting);
 43 |   }
 44 | }
 45 | 
 46 | 
 47 | // - - - - - - - - - - - - - - - - - - - - - - - 
 48 | 
 49 | String timestamp() {
 50 |   Calendar now = Calendar.getInstance();
 51 |   return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
 52 | }
 53 | 
 54 | // - - - - - - - - - - - - - - - - - - - - - - - 
 55 | 
 56 | void keyPressed() {
 57 |   if (key == 's') {
 58 |     record = true;
 59 |   }
 60 | }
 61 | 
 62 | // - - - - - - - - - - - - - - - - - - - - - - - 
 63 | 
 64 | void randomPoint() {
 65 |   PVector randomLocation = new PVector(random(200, width-200), random(height/2-200, height/2+200));
 66 |   myDeflector=(Deflector[])append(myDeflector, new Deflector(randomLocation, deflectionSetting));
 67 | }
 68 | 
 69 | // - - - - - - - - - - - - - - - - - - - - - - - 
 70 | 
 71 | void initializeSlider() {
 72 |   cp5.addSlider("s1")
 73 |     .setPosition(20, height-30)
 74 |       .setSize(400, 8)
 75 |         .setRange(200, 5000)
 76 |           .setValue(drawCycles)
 77 |             .setColorForeground(color(255, 128))
 78 |               .setColorBackground(color(60))
 79 |                 .setColorActive(color(255, 128));
 80 | }
 81 | 
 82 | 
 83 | // - - - - - - - - - - - - - - - - - - - - - - - 
 84 | 
 85 | void s1(int sliderValue) {
 86 |   if (cp5.controller("s1").isMousePressed()) {
 87 |     drawCycles = sliderValue;
 88 |     PVector startPosition = new PVector(myDeflector[myDeflector.length-1].dPath_x[0], myDeflector[myDeflector.length-1].dPath_y[0]);
 89 |     myDeflector[myDeflector.length-1].initializeDeflector(startPosition, deflectionSetting);
 90 |   }
 91 | }
 92 | // - - - - - - - - - - - - - - - - - - - - - - - 
 93 | 
 94 | void initializeSelector() {
 95 |   r = cp5.addRadioButton("r1")
 96 |     .setPosition(20, 20)
 97 |       .setSize(10, 10)
 98 |         .setColorForeground(color(255, 128))
 99 |           .setColorBackground(color(60))
100 |             .setColorActive(color(255, 200))
101 |               .setColorLabel(color(255))
102 |                 .setItemsPerRow(5)
103 |                   .setSpacingColumn(50)
104 |                     .addItem("Bounce", 1)
105 |                       .addItem("Squiggle", 2)
106 |                         .activate(0);
107 | }
108 | 
109 | // - - - - - - - - - - - - - - - - - - - - - - - 
110 | 
111 | void r1(int a) {
112 |   deflectionSetting = a;
113 |   PVector startPosition = new PVector(myDeflector[myDeflector.length-1].dPath_x[0], myDeflector[myDeflector.length-1].dPath_y[0]);
114 |   myDeflector[myDeflector.length-1].initializeDeflector(startPosition, deflectionSetting);
115 | }
116 | 
117 | // - - - - - - - - - - - - - - - - - - - - - - - 
118 | 
119 | int hexToGrey(int pVal) {
120 |   int r=(pVal&0x00FF0000)>>16;
121 |   int g=(pVal&0x0000FF00)>>8;
122 |   int b=(pVal&0x000000FF);
123 |   int grey=(r+b+g)/3;
124 |   return grey;
125 | }
126 | 
127 | 


--------------------------------------------------------------------------------
/Processing_TypeCon.pde:
--------------------------------------------------------------------------------
 1 | 
 2 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 3 | // TypeCon Type Deflector
 4 | // by Nicholas Felton
 5 | // Reflection-based drawing app developed for TypeCon 2015 Identity System
 6 | // Requires Control P5 Library: http://www.sojamo.de/libraries/controlP5/
 7 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 8 | 
 9 | // FEATURES
10 | // Click anywhere to add a new line to drawing.
11 | // Click and hold to change the start position of the last line.
12 | // Subsequent single clicks create new lines.
13 | // Line length and reflection style can be adjusted using the on-screen controls.
14 | // Edit 'typeString' to change text.
15 | // Edit 'typeFace' and 'typeSize' to change the typeface parameters.
16 | // Press 's' key to save drawing as a pdf
17 | 
18 | // - - - - - - - - - - - - - - - - - - - - - - - 
19 | // LIBRARIES
20 | // - - - - - - - - - - - - - - - - - - - - - - - 
21 | import java.util.Calendar;
22 | import processing.pdf.*;
23 | import controlP5.*;
24 | 
25 | // - - - - - - - - - - - - - - - - - - - - - - - 
26 | // GLOBAL VARIABLES
27 | // - - - - - - - - - - - - - - - - - - - - - - - 
28 | 
29 | // Type
30 | PFont myFont;
31 | String typeface = "Helvetica-Bold";
32 | String typeString = "CONDENSED";
33 | int typeSize = 260;
34 | color c_textFill = color(50);
35 | 
36 | // PGraphics
37 | PGraphics pg;
38 | 
39 | // Deflector
40 | Deflector myDeflector[];
41 | int startMarkerSize = 20;
42 | int drawCycles = 1000;
43 | boolean record;
44 | int deflectionFactor = -2;
45 | int deflectionSetting = 1;
46 | 
47 | // Control P5
48 | ControlP5 cp5;
49 | Slider s1;
50 | RadioButton r;
51 | 
52 | // - - - - - - - - - - - - - - - - - - - - - - - 
53 | // SETUP
54 | // - - - - - - - - - - - - - - - - - - - - - - - 
55 | void setup() {
56 |   size(1800, 600);
57 |   smooth();
58 |   cp5 = new ControlP5(this);
59 |   initializeSlider();
60 |   initializeSelector();
61 |   myFont = createFont(typeface, 50);
62 |   myDeflector = new Deflector[0];
63 |   drawOffScreenText(); // draw buffer once in setup to add initial point
64 |   randomPoint();
65 | }
66 | 
67 | // - - - - - - - - - - - - - - - - - - - - - - - 
68 | // DRAW
69 | // - - - - - - - - - - - - - - - - - - - - - - - 
70 | void draw() {
71 |   if (record) {
72 |     beginRecord(PDF, timestamp() + "_##.pdf");
73 |   }
74 |   background(0);
75 |   drawOffScreenText();
76 |   drawScreenText();
77 |   for (int i=0; i<myDeflector.length; i++) {
78 |     myDeflector[i].display();
79 |   }
80 |   if (record) {
81 |     endRecord();
82 |     record = false;
83 |   }
84 | }
85 | 
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | #TypeCon Type Reflector#
 3 | - By Nicholas Felton
 4 | - Reflection-based drawing app developed for TypeCon 2015 Identity System
 5 | - Requires Control P5 Library: http://www.sojamo.de/libraries/controlP5/
 6 |  
 7 | ![alt tag](https://raw.githubusercontent.com/feltron/Processing_TypeCon/master/160506_171123_10575.jpg)
 8 | 
 9 | ## Features
10 | - Click anywhere to add a new line to drawing.
11 | - Click and hold to change the start position of the last line.
12 | - Subsequent single clicks create new lines.
13 | - Line length and reflection style can be adjusted using the on-screen controls.
14 | - Edit 'typeString' to change text.
15 | - Edit 'typeFace' and 'typeSize' to change the typeface parameters.
16 | - Press 's' key to save drawing as a pdf
17 | 


--------------------------------------------------------------------------------