Ass­i­g­n­e­n­t 2: Ani­m­a­t­i­n­g with Code

by Michael McCammon
  • Show Sketch
/** @peep sketchcode */
 
color yel = color(253, 218, 51, 200); //designLab Yellow
color blk = color( 26, 24, 25); // designLab Black
color whi = color(255); //white
 
color[] colors = {yel, blk, whi};
 
float xoff = 0.0;
float yoff = 200.0; 
 
PImage img;
void setup () {
  size (400, 400);
  img =loadImage("designLabBlk.png");
  //loads design lab logo provided
}
 
 
void draw() {
  smooth();
  background(255);
 
  xoff = xoff + .004;
  yoff = yoff + .004;
  //noise offset
 
  float n = noise(xoff) * width;
  float m = noise(yoff) * width;
  //noStroke();
  stroke(26, 24, 25);
  //strokeWeight(color[1]); 
  //played around with stroke's for the ellipse's, perfered with stroke
 
  //large yellow ellipse's with low opacity 
  fill(colors[0]); 
  ellipse(n, 0, width, height);
  ellipse(m, width, width, height);
  ellipse(0, n, width, height);
  ellipse(width, m, width, height);
 
  //smaller black ellipse's
  fill(colors[1]);
  ellipse(n, 0, width/2, height/2);
  ellipse(m, width, width/2, height/2);
  ellipse(0, n, width/2, height/2);
  ellipse(width, m, width/2, height/2);
 
  image(img, 0, 150, 400, 100);
  //image size and positioning
}

Size: 400 x 400

  • Show Sketch
/** @peep sketchcode */
 
color yel = color(253, 218, 51, 200); //designLab Yellow
color blk = color( 26, 24, 25); // designLab Black
color whi = color(255); //white
 
color[] colors = {yel, blk, whi};
 
float xoff = 0.0;
float yoff = 200.0; 
float ioff = 100.0;
 
PImage img;
void setup () {
  size (300, 900);
  img =loadImage("designLabBlk.png");
  //loads design lab logo provided
}
 
 
void draw() {
  smooth();
  background(255);
 
  xoff = xoff + .004;
  yoff = yoff + .004;
  ioff = ioff + .004;
  //noise offset
 
  float n = noise(xoff) * width;
  float m = noise(yoff) * width;
  float i = noise(ioff) * width;
  //noStroke();
  stroke(26, 24, 25);
  //strokeWeight(color[1]); 
  //played around with stroke's for the ellipse's, perfered with stroke
 
  //large yellow ellipse's with low opacity 
  fill(colors[0]); 
 
 
  //ellipse(n, 0, width, height);
  ellipse(m, width, width, height);
  ellipse(0, n, width, height);
  ellipse(width, m, width, height);
 
 
  //smaller black ellipse's
  fill(colors[1]);
 
  //adjusted previous black ellpises to rectangles. 
  // they work better with a then portrait banner and with the designLab logo
  rect(n, 0, width, height/9);
  rect(i, width, width, height/9);
  //rect(0, n, width, height/9);
  rect(m, width/2, width, height/9);
 
  /*
  ellipse(n, 0, width/2, height/2);
  ellipse(m, width, width/2, height/2);
  ellipse(0, n, width/2, height/2);
  ellipse(width, m, width/2, height/2);
  */
 
  image(img, -20, 450, 350, 100);
  //image size and positioning for the tinner banner
}

Size: 300 x 900

See Blackboard upload for Full Logo

Background Research

I first started looking at various website banners, one that really appealed to me was the one developed by Creative Applications (http://www.creativeapplications.net/ seen on the left side of the screen). I specifically liked the use of similar shapes combined with alternating colours and randomness of shapes motion. I then though about how to create something influenced by this but more aligned to the Design Lab.

I then looked at FORM+CODE (http://formandcode.com/) for further inspiration and liked the use of the dots in creating the Recursive Tree design, seeing how basic shapes can also be used to give a really effective, mesmerising and generative logo. I wanted to make a logo that emphasised that individuals are key in creating community and a team. Multiple individual parts working together to create one. With this in mind I started work.

Inspirational Materials

The processing.org referencing and tutorials were key when developing my logos. After defining the colours I needed in RGB provided by the design brief I was stumped by creating a color array. Through a little googling and tweaking I had then completed that.

I then trolled through previous PeepProject tutorials for a key function to create a random and generative but consistent effect. I settled with the noise() function used in tutorial 10. By using this with the positioning of both Ellipses and Rectangles (for the side banner) and adjusting opacity I created my current logo.

Reflection

I think my logo created looks great and really works with the Design Lab colour scheme and original logo. I used the Image function to place the darker Design Lab image over the top of my logo to clarify the logos association with the Design Lab. Shapes work well and the use of white allows for a subtle transition into the actual content on Design Lab web pages.

Comments

Nobody has said anything yet.