As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Friday, October 5, 2018

Processing Example - My Own Words (Cassie, Angela, and Mike)



For this Processing experiment I started with the Words example as my baseline and gradually tweaked it until I ended up with something very different looking. Here's how the original example looks followed by my completed sketch:

Here's a summary of the changes that I made: 
  1. First I tried to figure out how to get my text to appear in the middle of the screen. I figured it out by modifying each of the text() functions that already existed in the example code until I had three lines of text evenly spaced vertically and center-aligned. 
  2. Next I removed the vertical lines that came in the example code and replaced them with two concentric circles surrounding my text.  
  3. For the last step, I looked up the official RGB colors of the University of Washington and added those colors to the background, ellipses, and text.
If you'd like to copy the code to make your own changes, help yourself below. Have fun! 

/**
 * Processing_test based off of the Words example. 
 * 
 * I built off the Words example to add my own text, switch the colors 
 * to the offical UW colors, and add a couple circles for style. 
 */
  
PFont f;
  
void setup() {
  size(640, 360);
  
  // Create the font
  printArray(PFont.list());
  f = createFont("SourceCodePro-Regular.ttf", 24);
  textFont(f);
}

void draw() {
  background(51,0,111);
  fill(145,123,76);
  ellipse(320,180,500,500);
  fill(232,211,162);
  ellipse(320,180,300,300);
  textAlign(CENTER);
  drawType(width * 0.5);
}

void drawType(float x) {
  fill(51,0,111);
  text("UW", x, 100);
  fill(51,0,111);
  text("Physical Computing", x, 180);
  fill(51,0,111);
  text("Autumn 2018", x, 260);
}

No comments:

Post a Comment