alm­a­2­6­8­5­_­A­s­s­i­g­n­m­e­n­t 2

by Albert Ma

i. FINAL SKETCH

Horizontal logo

  • Show Sketch
/** @peep sketchcode */
/* @pjs font=/uploads/16156/controllerfour.otf; */
/* @pjs font=/uploads/16156/controllertwo.otf; */
 
float angle1 = 0.0; 
float speed1 = 0.025; 
float radius1 = 60.0;
float angle2 = noise(0.40);
float speed2 = 0.075;
float radius2 = 30.0; 
float angle3 = random(TWO_PI);
float speed3 = 0.075; 
float radius3 = 15.0;
 
float shift = 50; // The shift between the phases of the circles
 
void setup() {
  size(600, 180);
  background(0);
  frameRate(60);
}
 
void draw() {
  smooth();
 
 PFont font = createFont("/uploads/16156/controllerfour.otf", 32);
  textFont(font);
  fill(255);
  text("Design",320 ,105);
 
 PFont font = createFont("/uploads/16156/controllertwo.otf", 32);
  textFont(font);
  fill(255);
  text("Lab",460 ,105);
 
  fill(0, 2);
  rect(0, 0, width, height);
  fill(255, 255, 255, random(100));
  stroke(255, 251, 14);
  angle1 += speed1; // Update the angle of inner wheel
  angle2 += speed2 * sin; // Update the angle of outer wheel
  angle3 += random(speed3); // Update the angle of outer wheel
  translate(random(119, 121), height/2); //change this to alter the ring positions together
  scale(1.8); //change this to alter the ring sizes together
  rotate(angle1);
  translate(radius1/3, 0);
  triangle(-5, 0, 4, 4, 5, 6); // inner
 
  float phase = 0;
  rotate(random(angle2) +sin);
  translate(radius2, 0);
  triangle(15,15, 35, 4, 5, 6); //middle
 
  rotate(angle3);
  translate(random(radius3), 0);
  triangle (12, 4, 16, 16, 5, 6); // outer
    phase += shift;
}

Vertical logo

  • Show Sketch
/** @peep sketchcode */
/* @pjs font=/uploads/16156/controllerfour.otf; */
/* @pjs font=/uploads/16156/controllertwo.otf; */
float angle1 = 0.0; 
float speed1 = 0.025; 
float radius1 = 60.0;
float angle2 = noise(0.40);
float speed2 = 0.075;
float radius2 = 30.0; 
float angle3 = random(TWO_PI);
float speed3 = 0.075; 
float radius3 = 15.0;
 
float shift = 50; // The shift between the phases of the circles
 
void setup() {
  size(350, 450);
  background(0);
  frameRate(60)
}
 
void draw() {
  smooth();
 
 PFont font = createFont("/uploads/16156/controllerfour.otf", 40);
  textFont(font);
  fill(255);
  text("Design",50, 120);
 
 PFont font = createFont("/uploads/16156/controllertwo.otf", 40);
  textFont(font);
  fill(255);
  text("Lab",225 ,120);
 
 
 
  fill(0, 2);
  rect(0, 0, width, height);
  fill(255, 255, 255, random(100));
  stroke(255, 251, 14);
  angle1 += speed1; // Update the angle of inner wheel
  angle2 += speed2 * sin; // Update the angle of outer wheel
  angle3 += random(speed3); // Update the angle of outer wheel
  translate(random(119, 121) + 50, height/2+50); //change this to alter the ring positions together
  scale(1);//change this to alter the ring sizes together
 
  rotate(angle1);
  translate(radius1/3,10);
  triangle(-5, 0, 4, 4, 5, 6); // inner
 
  float phase = 0;
  rotate(random(angle2) +sin);
  translate(radius2, 0);
  triangle(15,15, 35, 4, 5, 6); //middle
 
  rotate(angle3);
  translate(random(radius3), 0);
  triangle (12, 4, 16, 16, 5, 6); // outer
    phase += shift;
}

ii. CONCEPT, PROCESS AND INSPIRATION

Main Concept

The main concept was that of the gun barrell sequence in 007 movies as an alternative to the GPS triangulation system idea I originally had. The three rings each represent an idea of creativity, logic and teamwork that is necessary to do work within the design lab, and ultimately in my final logo they are there to be a symbolic pinpoint of a design project.

Process and Inspiration

I was initially inspired by the GPS triangulation systems for Assignment 2 as a reflection of the work done in the Design Lab, where you need many different aspects of thought, ranging from creativity, logic and teamwork. So with that in mind, I created a simple logo where the words Design Lab would appear at the smallest point of a triangle. However this logo wasn't particularly pleasing to look at due to the vast amount of yellow shown from the triangle animation. It also looked more like a flashlight than anything else.

  • Show Sketch
/** @peep sketchcode */
float angle = 0.0;
Triangle[] triangles;
void setup() {
  size(500,180);
  frameRate(60);
  triangles = new Triangle[50];
  for (int i = 0; i < triangles.length; i++) {
  triangles[i] = new Triangle(900, 150/2, random(width/35), color(255, 221, 14)); //fix this
  }
}
 
////////////////////TRIANGLES////////////////////
//array//
void draw() {
  background(0);
  for (int i = 0; i < triangles.length; i++) {
    triangles tri = triangles[i];
      if(tri.x<0 || tri.x>width || tri.y<0 || tri.y>height){
      tri.x=width/2;
      tri.y=height/2;
      tri.speed=random(50);
      tri.angle=random(140);
    }
    tri.draw();
  }
    smooth();
  textSize(50);
  String logo = "DesignLab"; //change text
  text(logo, 150 ,155);
  }
 
//class
class Triangle {
  float x;
  float y;
  float radius;
  color colour;
 
  Triangle(float _x, float _y, float _radius, float _triangles) {
 
    x = _x;
    y = _y;
    radius = _radius;
    colour = _triangles;
  }
 
 
  void draw() {
    noStroke();
    fill(0,0,0, 8);
    rect(0, 0, width, height);
    fill(colour);
    triangle (x, y+20, 20, random(20), 480, random(20), random(50));
 
  }
}

I then wanted to try and attempt to code three triangles circulating around each other while being linked at the same time by their points, however I did not know how to do this, especially when they were rotating. So I then searched for more inspiration, sticking with the 'tracking' theme of a GPS, I looked to the classic shot of 007 movies - the gun barrell sequence. 007 http://www.007james.com/articles/gun_barrel_sequence.php

This wasn't particularly useful for conveying anything about the Design Lab, so I combined it with the original triangulation idea, although opted to move the text from the middle.

Using this mockup, I expiremented with some basic placement of text, animation and speed.

  • Show Sketch
/** @peep sketchcode */
float angle = 0.0;
 
void setup() {
  size(500,180);
  frameRate(50);
  background(255);
}
 
void draw() {
  background(255);
  //text 
  fill(255, 25, 5); 
 
  textSize(60);
  String logo = "designlab"; //change text
  text(logo,120,90);
 
  //rectangle
  pushMatrix();
  translate(-5,-10);
  rect(50,120, 415,40); //rectangle
  popMatrix();
 
  //
 
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  translate(250, angle++);
  rotate(angle);
  rect(40, -60, 10, 110);
  angle = angle + 0.02;
}

Finally, I searched the website Open Processing and found this sketch (author: aa_debeb) that then led me to want to have at least one ring of triangles spinning around to create some variation and not have it repeat the same loops every time.

Reflection

I wasn't 100% happy with my final logo, as I said before I wasn't able to achieve certain ideas I had, for example, triangles circulating each other while being linked via lines that extend and retract based on distance.

However, the final outcome I believe still looks better as a logo. The colour of the text was originally going to be split between yellow and white depending on the word, but trying out both it didn't look streamlined enough to be a logo, especially with a large animation already providing a shift in balance. The reason why I scaled up the horizontal logo was because I thought there was too much white (in this case, black) space if it was any smaller, even if it was only limited to the borders. Unfortunately I wasn't really able to achieve more of a continual randomness to the animation with it being such a circular shape, and with more time I think I would be able to fix that.

Comments

Nobody has said anything yet.