The Design Lab - Red­e­s­i­g­n

by Nathan Dagher
  • Show Sketch
/**@peep sketchcode */
float s = 400; //The vairbles which will be utlised throughout the code
float x = width; //Variable allows re-scaling
float y = height;
float r, q;
 
PFont d; //Loading the font for Design, following the orginal layout, d is the bolder font for 'Design'
PFont l; //Is the thinner font, for 'Labs'
 
void setup() {
  background(0); // Fill the window with black
  size(800, 400);
  d= loadFont ("Controller-Four-70.vlw"); //load the "Design" font at size 70
  l= loadFont ("Controller-One-70.vlw"); //Load the "Labs" font, at size 70
  frameRate(50); //Ease of access across platforms, 50 was chosen for smooth playing
  smooth();
}
 
 
void draw() {
  {
    fill(0, 4); //The opacaity allows the screen to be re-generated overtime
    noStroke();
    rect(0, 0, width, height); //Refreshes the screen to allow loops
  }
  /*The first coding below, will create a rectangle that follows
   the cos, sin plane, creating movement as the variable is muliplied
   by the height to be rescalable, and being divided by 2.9 to allow
   the reach not to go beyond the circle rings
   */
  {
    noFill();//all shapes will only have their outline displayed, allowing grids to be formed
    stroke(255, 255, 0, 20); //Opacity at 20
    strokeWeight(10); //
    translate(CENTER, CENTER);//Maintains the starting point within the center
    r = tan(s)*height;//by mulitplying by the height, this allows the design to be scalable
    q = cos(s)*height;
    rect(s+=.01, r, q, r);//Adding .01 to the s, allows the growth/shrinkage of the shapes
 
 
    /*The codings below, will create a outlines that pulses in and
     out of the sin & cos plane, revealing the words "Design Labs" from the black background.
     Like above, the variables are multipled by height, to be rescable. 
     */
    stroke(240, 200);//Opacity at 200
    r = sin(s)*height; //by multipling by the height, this allows the design to be scalable to window size
    q = cos(s)*height;
    ellipseMode(RADIUS);
    ellipse(q, r, r*3, s); //The variable r is multiplied by 3, to generate a different varation to the others
 
    stroke(255, 255, 12, 100);//Opacity at 100
    r = sin(s)*height/3; //The multiplication of 3, creates a unique flow across the window
    q = cos(s)*height;
    rect(s, q, s, x);  
 
    stroke(255, 255, 159, 100);//Opactiy at 100
    r = sin(s)*height;
    q = cos(s)*width; //By mutlypliying this line by the width, we create a different variation
    line(-q, r, s, q); //The negative varaible changes the original starting point uniquley
 
    stroke(255, 100);//Opactiy at 100
    r = sin(s)*height;
    q = cos(s)*width; //By mutlypliying this line by the width, we create a different variation
    line(q, r, s, r);
  }
  {
 
    /*Load the font design
     'd' is a bolder font for 'Design'
     whilst 'l' is the thinner font for 'labs'
     This has been done to replicate the exisiting font layout
     that is in place.
     */
    textFont (d,x/3);
    fill (0, 100); //Opacity at 100, to fade slightly
    text("Design", width/7.7, height/2); //dividing the width and height by these numbers, allow rescaling
 
    textFont (l,x/3);
    fill (0, 100); //Opacity at 100, to fade slightly
    text ("Labs", width/2, height/2); //Division allows the text to stay in place
  }
}
 
/* This code was inspired by user: Becky Johnson, @http://www.openprocessing.org/sketch/335657
 The user's code helped establish a foreground to generating this design, by moddiyfing the
 formula to be used into creating new shape animations.
 */

Rescaled banner

  • Show Sketch
/**@peep sketchcode */
float s = 400;
float x = width;
float y = height;
float r, q;
 
PFont d; //Loading the font for Design, following the orginal layout, d is the bolder font for 'Design'
PFont l; //Is the thinner font, for 'Labs'
 
void setup() {
  background(0); // Fill the window with black
  size(400, 200);
  d= loadFont ("Controller-Four-70.vlw"); //load the "Design" font at size 70
  l= loadFont ("Controller-One-70.vlw"); //Load the "Labs" font, at size 70
  frameRate(50); //Ease of access across platforms, 50 was chosen for smooth playing
  smooth();
}
 
 
void draw() {
  {
    fill(0, 4); //The opacaity allows the screen to be re-generated overtime
    noStroke();
    rect(0, 0, width, height); //Refreshes the screen to allow loops
  }
  /*The first coding below, will create a rectangle that follows
   the cos, sin plane, creating movement as the variable is muliplied
   by the height to be rescalable, and being divided by 2.9 to allow
   the reach not to go beyond the circle rings
   */
  {
    noFill();//all shapes will only have their outline displayed, allowing grids to be formed
    stroke(255, 255, 0, 20); //Opacity at 20
    strokeWeight(10); //
    translate(CENTER, CENTER);//Maintains the starting point within the center
    r = tan(s)*height;//by mulitplying by the height, this allows the design to be scalable
    q = cos(s)*height;
    rect(s+=.01, r, q, r);//Adding .01 to the s, allows the growth/shrinkage of the shapes
 
 
    /*The codings below, will create a outlines that pulses in and
     out of the sin & cos plane, revealing the words "Design Labs" from the black background.
     Like above, the variables are multipled by height, to be rescable. 
     */
    stroke(240, 200);//Opacity at 200
    r = sin(s)*height; //by multipling by the height, this allows the design to be scalable to window size
    q = cos(s)*height;
    ellipseMode(RADIUS);
    ellipse(q, r, r*3, s); //The variable r is multiplied by 3, to generate a different varation to the others
 
    stroke(255, 255, 12, 100);//Opacity at 100
    r = sin(s)*height/3; //The multiplication of 3, creates a unique flow across the window
    q = cos(s)*height;
    rect(s, q, s, x);  
 
    stroke(255, 255, 159, 100);//Opactiy at 100
    r = sin(s)*height;
    q = cos(s)*width; //By mutlypliying this line by the width, we create a different variation
    line(-q, r, s, q); //The negative varaible changes the original starting point uniquley
 
    stroke(255, 100);//Opactiy at 100
    r = sin(s)*height;
    q = cos(s)*width; //By mutlypliying this line by the width, we create a different variation
    line(q, r, s, r);
  }
  {
 
    /*Load the font design
     'd' is a bolder font for 'Design'
     whilst 'l' is the thinner font for 'labs'
     This has been done to replicate the exisiting font layout
     that is in place.
     */
    textFont (d,40); //Scalable text
    fill (0, 100); //Opacity at 100, to fade slightly
    text("Design", width/7.7, height/2); //dividing the width and height by these numbers, allow rescaling
 
    textFont (l,40); //scalabe text, for some reason, peepproject doesn't scale it down as opposed to processing, so I had to modify this variable here ONLY, the final submission works
    fill (0, 100); //Opacity at 100, to fade slightly
    text ("Labs", width/2, height/2); //Division allows the text to stay in place
  }
}
 
/* This code was inspired by user: Becky Johnson, @http://www.openprocessing.org/sketch/335657
 The user's code helped establish a foreground to generating this design, by moddiyfing the
 formula to be used into creating new shape animations.
 */

The Design Brief

The re-design in which I have produced, took numerous influencing aspects into its creation. The aim was to create a generated representation of the fields within the Design Labs. Initially, the idea of creating interconnecting facets and compositions was the main focus, reflecting the numerous types of design work that occurs within these labs. CADs and hand drawn sketches on graphs sheets was highlighted as something that could essentially be the core of designing this banner.

Influencing Projects

Influencing the project, the work ‘Tete a Tete’ by Brandon Morse created a basis of producing this looping artwork which features numerous lines crossing over and connecting to a centre to reveal an object. This work is evident throughout the re-design, as the lines connect in the centre to reveal the text. Preceding this work, comes Fathom’s project entitled ‘Turbine Power’. The work is somewhat alike to ‘Tete a Tete’, where geometric lines bend and distribute from a centre. Composing a moving image of lines and points, creating a sense of flowing data. Finally, a generated processing code, ‘Changing Loop’ by Becky Johnson at openprocessing.com, helped form the basis of creating unique changeable outlines. Where the formula allows this flow of shapes and lines to be produced.

The Re-Design

Therefore, the piece which has been composed, utilises these influences in producing a composition that reflects the works being conducted at the labs, and the various types of design creation flowing through the work space. The colours reflect the design brief given, White, Yellow, and Black, while paying homage to the original font of Controller. The way the outlines interact with each other and reveal the text, is somewhat analogous to the design processes within the labs, incorporating sketched designs, grids, data generation, and geometric productions. The way the outlines, which resemble a form of design process, reveal the text, reflect how planning and sketching comes to reveal the final design of a process. So in a way, the flow of the lines revealing the text after a set amount of time, can be resembled to a production process. In terms of further development, I would like to have seen this design been taking to a new height with greater density and more complex animations of geometric deisgns occuring. Though the limitaions of my skill level may have strained that possibiltity, it is one aspect that I would like to see incorprated, although with this generation, I am happy with what I have created.

Referrences

Comments

Nobody has said anything yet.