Assignment 2

by Fuad Soudah

Introduction

The objective was to develop a sketch, which whilst sticking to the design constraints mentioned in the assignment page, at the same time would express the mission of peep. It's not easy to create something out of nothing, especially with all the requirements introduced, however there is always a thing which keeps on inspiring me. And there's no such thing which would do it better than music.

As a result I decided to base my project on the previous assignment nr. 1. Extended, reshaped and reimagined. This time I wanted however to go a tiny bit beyond a standard music analysing graphs.

The following is a music spectrum, each bar visualises a group of frequencies, defined by loudness (in decibels).

The following on the other hand is an Oscilloscope. Way more "brutal", fast changing, frequent and either smooth or sharp, depending on the music type.

At first however I had to take a peek at what I actually created before...

Reconnaissance

Show Code

/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
  int q=0; //this guy plays a big role in the upcoming code
 
int z = random(1,7); //this guy will give us a random number based on which we'll get one of the following color schemes
 
void w (){
  strokeWeight( random(1,6)); //random thickness of the lines
    if (z<=1){
  stroke(0,random(0,255),random(0,255),random(150,255))} //mix of green and blues
  else if (z<=2){
  stroke(random(0,255),0,random(0,255),random(150,255))} //mix of reds and blues
  else if (z<=3){
  stroke(random(0,255),random(0,255),0,random(150,255))} //mix of reds and greens
  else if (z<=4){
  stroke(random(0,255),random(0,255),random(0,255),random(255,255))} //mix of everything
  else if (z<=5){
  stroke(0,0,random(0,255),random(150,255))} //mix of blues
  else if (z<=6){
  stroke(random(0,255),0,0,random(150,255))} //mix of reds
  else if (z<=7){
  stroke(0,random(0,255),0,random(150,255))} //mix of greens
}
 
/* The following mix of loops and conditionals will show off one of the following:
- Equidistant vertical lines
- Equidistant horizontal lines
All split in half or quarters
*/
 
  for (q; q <= 450; q += random(10,70)){
 
if ((q>=10) && (q<=20)) { 
{
  for (q; q <= 400; q += random(9,15)){ //verticals half half
  w (); line(q, 400, q, random(200,400));
  w (); line(q, 0, q, random(0,200));
  }
}
}else if ((q>20)&&(q<=30)){
  {
for (q; q <= 380; q += random(9,15)){ //verticals quarters
  w (); line(q, 400, q, random(100,400));
  w (); line(q, 0, q, random(0,100));
}
}
 
}else if ((q>30)&&(q<=40)){
  {
for (q; q <= 380; q += random(9,15)){ //verticals quarters
  w (); line(q, 400, q, random(300,400));
  w (); line(q, 0, q, random(0,300));
}
}
 
}else if ((q>40)&&(q<=50)){
  for (q; q <= 370; q += random(9,15)){ //horizontals half half
  w (); line(0, q, random(0,200), q);
  w (); line(400, q, random(200,400), q);
  }
 
}else if ((q>50)&&(q<=60)){
  for (q; q <= 370; q += random(9,15)){ //horizontals quarters
  w (); line(0, q, random(0,100), q);
  w (); line(400, q, random(100,400), q);
  }
 
}else if ((q>60)&&(q<=70)){
  for (q; q <= 370; q += random(9,15)){ //horizontals quarters
  w (); line(400, q, random(300,400), q);
  w (); line(0, q, random(0,300), q);
  }
}
}
 
/* Basically what happens here is that q variable gets assigned a value
Depending on the validated conditional it's assigned to another loop
Which assigns a new value to q, upon which a sketch is drawn
To be honest I don't really understand the code ultimately myself
However it works perfectly well and gets the job done */

That's the design I submitted for the assessment nr. 1. The code works well, it transforms the idea quite neatly, however, frozen in time, it transcends into something a bit neatier, which in the overall one might find appealing.

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
int z = int(random(1, 7));
 
void w () {
  strokeWeight( random(1, 7));
    stroke(0, 102, 153);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(30);
}
 
void draw() {
 
 
  for (int q= 0; q <= 3; q += random (1,3)) {
 
    if (q=1) { 
      {
        for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
          w (); line(r, height, r, random(height/2, height));
          w (); line(r, 0, r, random(0, height/2));
        }
      }
    } else if (q=2) {
      {
        for (int r  = 0; r <= width; r += random (0, 15)) { //verticals quarters
          w (); line(r, height, r, random(height/4, height));
          w (); line(r, 0, r, random(0, height/4));
        }
      }
    } else if (q=3) {
      {
          for (int r  = 0; r <= width; r += random (0, 15)) { //verticals quarters
          w (); line(r, height, r, random(height*3/4, height));
          w (); line(r, 0, r, random(0, height*3/4));
          }
      }
    }
  }
 
    fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline2, width/2, height/2);
}

Setting Things in Motion

So I started off with implementing stuff which was just required, such as the text and the animation code. I cut a bit the code, since some of which just became redundant. I decided to see what's going to happen once I set all of this in motion and the effect turned out to be quite interesting. (needs restarting after opening the sketch)

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
int z = int(random(1, 7));
 
void w () {
  strokeWeight( random(1, 7));
    stroke(0, 102, 153);
}
void z () {
  strokeWeight( random(1, 7));
    stroke(204, 102, 0);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(60);
}
 
void draw() {
 
 
  for (int q= 0; q <= 4; q += random (1,4)) {
 
    if (q=1) { 
        for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
          w (); line(r, height, r, random(height/2, height));
          w (); line(r, 0, r, random(0, height/2));
        }
    } else if (q=2) {
        for (int r  = 0; r <= width; r += random (0, 15)) { //verticals quarters
          w (); line(r, height, r, random(height/4, height));
          w (); line(r, 0, r, random(0, height/4));
        }
    } else if (q=3) {
          for (int r  = 0; r <= width; r += random (0, 15)) { //verticals quarters
          w (); line(r, height, r, random(height*3/4, height));
          w (); line(r, 0, r, random(0, height*3/4));
          }
    }else if (r=4){
    for (int r  = 0; r <= width; r += random (0, 15)){ //horizontals half half
    z (); line(0, r, random(0,width/2), r);
    z (); line(width, r, random(width/2,width), r);
       }
    }
  }
 
    fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2);
}

I wanted to stick to the outcome, however there was still a few tweaks that I thought should become introduced at some point. So I introduced animation coming from the rear sides.

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
void w () {
  strokeWeight( random(1, 7));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, 7));
    stroke(204, 102, 0);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(60);
}
 
void draw() {
 
 
        for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
          w (); line(r, height, r, random(height/2, height));
          w (); line(r, 0, r, random(0, height/2));
        }
 
    for (int r  = 0; r <= width; r += random (0, 15)){ //horizontals half half
    m (); line(0, r, random(0,width/2), r);
    m (); line(width, r, random(width/2,width), r);
       }
 
    fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2);
}

That turned out to be a tiny bit... untidy. So I played with the code furthermore. And after quite a bit of messing with all of this, I came up with this:

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
int z = int(random(1, 7));
 
void w () {
  strokeWeight( random(1, 7));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, 7));
    stroke(204, 102, 0);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(6);
}
 
void draw() {
  screenClear();
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2);
 
 
 
}
 
void screenClear(){
  fill(255,50);
  noStroke();
  rect(0,0,width,height);
}

I somehow got to a point the code started working in my favor

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
int z = int(random(1, 7));
 
void w () {
  strokeWeight( random(1, 7));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, 7));
    stroke(204, 102, 0);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(30);
}
 
void draw() {
  screenClear();
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2);
 
translate(50,height/20);
rotate(PI/2);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+cos(a)*40.0);
  a = a + inc;
}
 
translate(width/2.5, -width+100);
rotate(PI);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+cos(a)*40.0);
  a = a + inc;
}
 
}
 
void screenClear(){
  fill(255,50);
  noStroke();
  rect(0,0,width,height);
}

The very next step was to make the animation more interesting, a tiny bit more smart, a tiny bit... better. And so the sinewaves made its way towards my project, adjustable so they could become more awesome.

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
void w () {
  strokeWeight( random(1, height/50));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, height/50));
    stroke(204, 102, 0);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(30);
}
 
void draw() {
  screenClear();
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2);
 
translate(50,10);
rotate(PI/2);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+width/250*abs(sin(radians(frameCount*10)))*cos(a)*40.0);
  a = a + inc;
}
 
translate(height/1.1, -width+100);
rotate(PI);
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+width/250*abs(sin(radians(frameCount*10)))*cos(a)*40.0);
  a = a + inc;
}
 
}
 
void screenClear(){
  fill(255,50);
  noStroke();
  rect(0,0,width,height);
}

Semi-Final Design

This time I introduced a "bouncing effect". I reshaped the code so it scaled better. A few more tweaks made the sketch even better.

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
void w () {
  strokeWeight( random(1, height/70));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, height/40));
    stroke(204, 102, 0);
}
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(30);
}
 
void draw() {
  screenClear();
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //verticals half half
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2);
 
translate(50,width/40);
rotate(PI/2);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0);
  a = a + inc;
}
 
translate(height/1.12, -width+100);
rotate(PI);
for (int i = 0; i < 25; i = i + 1) {
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0);
  a = a + inc;
}
 
}
 
void screenClear(){
  fill(255,50);
  noStroke();
  rect(0,0,width,height);
}

Before I get to the end I'd like to showcase a variation of my design, which is way more dynamic in a way, resembling the oscilloscope presented at the beginning of this page. It's a bit interesting idea, however the text became a tiny bit less legible.

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
/*Some basics above, the text and colours
Two different colors for the nice lines to come underneath*/
 
void w () {
  strokeWeight( random(1, height/70));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, height/40));
    stroke(204, 102, 0);
}
 
/*Setting up the void*/
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(60);
}
 
/*The main stuff*/
 
void draw() {
  screenClear(); //each time the screen will refresh, nice ain't it?
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //vertical lines with the maximum reach of half the sketch
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
      //I made the code as much versatile as possible, so scaling goes smoothly
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2); //more text stuff
 
 /*I decided to introduce some kind of waves, like sinus or cosinus, ultimately I got to the following point,
 when I couldn't really figure out how to put this stuff as it should've been so I used rotating and translating
 code, which was a bit tricky at first but it got the job done well*/
 
translate(50,width/40);
rotate(PI/2);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0); //the wave thing
  a = a + inc;
}
 
translate(height/1.12, -width+100);
rotate(PI);
for (int i = 0; i < 25; i = i + 1) {
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0);
  a = a + inc;
}
 
}
 
 //And to nicely refresh the screen, we've got something which makes the sketch look neatly
 
void screenClear(){
  fill(255,15);
  noStroke();
  rect(0,0,width,height);
}

Final Design

It was not good enough, though. So I increased the framerate and blurred out the lines a bit more so the text became more vivid. I varied the thickness of the blue and orange lines. I introduced a few more tweaks so the code becomes even more "scalable" and as good as the main two versions.

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
/*Some basics above, the text and colours
Two different colors for the nice lines to come underneath*/
 
void w () {
  strokeWeight( random(1, height/70));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, height/40));
    stroke(204, 102, 0);
}
 
/*Setting up the void*/
 
void setup () {
  size(500, 207);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(45);
}
 
/*The main stuff*/
 
void draw() {
  screenClear(); //each time the screen will refresh, nice ain't it?
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //vertical lines with the maximum reach of half the sketch
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
      //I made the code as much versatile as possible, so scaling goes smoothly
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2); //more text stuff
 
 /*I decided to introduce some kind of waves, like sinus or cosinus, ultimately I got to the following point,
 when I couldn't really figure out how to put this stuff as it should've been so I used rotating and translating
 code, which was a bit tricky at first but it got the job done well*/
 
translate(50,width/40);
rotate(PI/2);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0); //the wave thing
  a = a + inc;
}
 
translate(height/1.12, -width+100);
rotate(PI);
for (int i = 0; i < 25; i = i + 1) {
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0);
  a = a + inc;
}
 
}
 
 //And to nicely refresh the screen, we've got something which makes the sketch look neatly
 
void screenClear(){
  fill(255,70);
  noStroke();
  rect(0,0,width,height);
}

Bigger

Show Code

/** @peep sketch */
/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
 
PFont chunkfive;
String tagline = "Learn to Program. Creatively.";
int textX = 1000/2;
int textY = 414/2;
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
/*Some basics above, the text and colours
Two different colors for the nice lines to come underneath*/
 
void w () {
  strokeWeight( random(1, height/70));
    stroke(0, 102, 153);
}
void m () {
  strokeWeight( random(1, height/40));
    stroke(204, 102, 0);
}
 
/*Setting up the void*/
 
void setup () {
  size(1000, 414);
  int taglineHeight = 3*height/40;
  chunkfive = createFont("/media/css/Chunkfive-webfont.ttf", taglineHeight);
  frameRate(45);
}
 
/*The main stuff*/
 
void draw() {
  screenClear(); //each time the screen will refresh, nice ain't it?
 
 
     for (int r = 0; r <= width; r += random (0, 15)) { //vertical lines with the maximum reach of half the sketch
    w (); line(r, height, r, random(height/2, height));
    w (); line(r, 0, r, random(0, height/2));
      }
 
      //I made the code as much versatile as possible, so scaling goes smoothly
 
          fill(lightBlue);
  textFont(chunkfive);
  textAlign(CENTER, CENTER);
  text(tagline, width/2, height/2); //more text stuff
 
 /*I decided to introduce some kind of waves, like sinus or cosinus, ultimately I got to the following point,
 when I couldn't really figure out how to put this stuff as it should've been so I used rotating and translating
 code, which was a bit tricky at first but it got the job done well*/
 
translate(50,width/40);
rotate(PI/2);
float a = 0.0;
float inc = TWO_PI/25.0;
for (int i = 0; i < 25; i = i + 1) {
  m ();
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0); //the wave thing
  a = a + inc;
}
 
translate(height/1.12, -width+100);
rotate(PI);
for (int i = 0; i < 25; i = i + 1) {
  line(i*width/65, 50, i*width/65, 0.01+width/250*sin(radians(frameCount*10))*cos(a)*40.0);
  a = a + inc;
}
 
}
 
 //And to nicely refresh the screen, we've got something which makes the sketch look neatly
 
void screenClear(){
  fill(255,70);
  noStroke();
  rect(0,0,width,height);
}

Final Thoughts

The code is quite plain, however definitely not simple. The outcome may seem to be highly complex, however the length of the code indicates something quite the contrary. I'm pleased with the outcome, considering it accustomed all the design constraints.

Upload Picture

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