Ass­i­g­n­m­e­n­t 2

by Blanko Blank

Assignment 2

The antialiasing mechanism here is a little sketchy (sorry). It appears that Processing seems to only antialias against a fully opaque background...which is not an option when drawing differently coloured objects behind it for an effect. (I would take suggestions if there is a better way of doing this)

I was disappointed I couldn't obtain this effect in any other way - initially I thought it was a problem with SVG rendering (as I wanted to spare the effort of loading two fonts/spacing the two word objects correctly) though it turns out to have been unrelated.

The rest is trial and error - the initial design featured straight lines, though they were uninteresting. Seismograph style lines were a bit too cheesy - I finally settled on an angle in the breaks which reminded me of the lighting fixtures in the Wilkinson Building, hence achieving integration with the Lab's existing aesthetic.

Overall, I feel satisfied with the final result.

  • Show Code
/* @pjs font=/uploads/16078/controllerone.otf,/uploads/16078/controllertwo.otf; */
/** @peep sketch */
 
/**peep sketchcode */
 
 
//set up fonts
PFont controllerone;
PFont controllertwo;
 
void setup() {
  size (1000, 250);
  background(255, 255, 255);
  controllerone = createFont("/uploads/16078/controllerone.otf", 600, true);
  controllertwo = createFont("/uploads/16078/controllertwo.otf", 180, true);
  frameRate(120);
}
 
//draw lines
void draw() {
  int color = 200 + random (55);
  stroke (color, color, 0, 100);
  segment (10, 0, random (250), 1000, random (250));
 
//draw underlayer of text for "invisible" colour changing background matte - no other way to antialias
  color = 255 - min(255, frameCount);
  textFont(controllertwo, 60);
  fill(255, 255, color);
  text("design", 310, 135);
  fill(0);
  text("design", 310, 135);
  textFont(controllerone, 60);
  fill(255, 255, color);
  text("lab", 560, 135);
  fill(0);
  text("lab", 560, 135);
}
 
//line segments 
void segment (int depth, float x1, float y1, float x2, float y2) {
  if (depth==4) {
    line (x1, y1, x2, y2);
    return;
  }
 
//line origin 
  float length=x2-x1;
  float xmid=(x1+x2)/2;
  float ymid=(y1+y2)/2;
 
//line segment properties 
  ymid = random (ymid-0.4*length, ymid+0.4*length);
  segment(depth-2, x1, y1, xmid, ymid);
  segment(depth-2, xmid, ymid, x2, y2);
}
  • Show Code
/* @pjs font=/uploads/16078/controllerone.otf,/uploads/16078/controllertwo.otf; */
/** @peep sketch */
 
/**peep sketchcode */
 
 
//set up fonts
PFont controllerone;
PFont controllertwo;
 
void setup() {
  size (250, 250);
  background(255, 255, 255);
  controllerone = createFont("/uploads/16078/controllerone.otf", 600, true);
  controllertwo = createFont("/uploads/16078/controllertwo.otf", 180, true);
  frameRate(120);
}
 
//draw lines
void draw() {
  int color = 200 + random (55);
  stroke (color, color, 0, 100);
  segment (10, 0, random (250), 250, random (250));
 
//draw underlayer of text for "invisible" colour changing background matte - no other way to antialias
  color = 255 - min(255, frameCount);
  textFont(controllertwo, 30);
  fill(255, 255, color);
  text("design", 35, 135);
  fill(0);
  text("design", 35, 135);
  textFont(controllerone, 30);
  fill(255, 255, color);
  text("lab", 160, 135);
  fill(0);
  text("lab", 160, 135);
}
 
//line segments 
void segment (int depth, float x1, float y1, float x2, float y2) {
  if (depth==4) {
    line (x1, y1, x2, y2);
    return;
  }
 
//line origin 
  float length=x2-x1;
  float xmid=(x1+x2)/2;
  float ymid=(y1+y2)/2;
 
//line segment properties 
  ymid = random (ymid-0.4*length, ymid+0.4*length);
  segment(depth-2, x1, y1, xmid, ymid);
  segment(depth-2, xmid, ymid, x2, y2);
}

Comments

Nobody has said anything yet.