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

by Fuad Soudah

Balance and Harmony

I didn't choose it. It chose me. It popped up out of nowhere and I accustomed myself to it. What is it, you may ask? Music.

That's the music spectrum. Frequencies in which music is being played. All of this forms into what we hear in our headphones. But it's possible to dissolve that into frequencies which play at specified loudness - decibels. I decided to pursue the idea. I wasn't sure about if this should be about either Balance and Harmony or Energy and Movement, however considering music rather tends to introduce harmony and balance to each other's lives, I picked that one up.

The Story Of Nothing

So to begin with I didn't really have an idea what to design, come up with or create. As I usually rely on inspiration, at time I kind of had none. Nevertheless there are times when something just pops up out of the blue. And that's what happened to this project. I started to go through tutorials, so I could understand processing language more and perhaps see if I could find anything worth using in my project, besides the required lines of code. And I kind of found it.

  • Show Code
/** @peep sketch */
size(200, 200); 
for (int y = 20; y < height; y += 20) { 
  for (int x = 20; x < width; x += 20) { 
    rect(x-5, y-5, 10, 10); 
  } 
}

So the idea was to use, instead of cubes located all around the sketch, just lines. So I started to experiment:

  • Show Code
/** @peep sketch */
size(400,400);
background(255);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400; q += 10){
  strokeWeight(random(1,10));
  line(q, 399, q, random(q,q+10));
  line(q, 1, q, random(q,q+150));
}

Of course that was not enough. A simple barcode, even if randomised would just not do the trick. So I added spacings by using a few tricks.

  • Show Code
/** @peep sketch */
size(400,400);
background(255);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400; q += 10){
  strokeWeight(random(1,10));
  line(q, 399, q, random(q,q+50));
  line(q, 1, q, random(q,q+50));
}

And then I added colors and slimmed out the lines a notch

  • Show Code
/** @peep sketch */
size(400,400);
background(255);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400; q += 10){
  strokeWeight(random(1,5));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(q,q+50));
  line(q, 1, q, random(q,q+50));
}

I didn't really know what I was doing so I kept on going and decided to include a progressive spacing. Unfortunately, I was unsuccessful in carrying it out well so I moved on to new adventures

  • Show Code
/** @peep sketch */
size(400,400);
background(255);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400 & q >= 0; q += 10){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(q,50));
  line(q, 1, q, random(q,50));
}

And there it was. A new concept.

  • Show Code
/** @peep sketch */
size(400,400);
background(255);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400 & q >= 0; q += 10){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(390,50));
  line(q, 1, q, random(1,50));
}

And now, I knew that this was good, it looked good anyway, but the code was way to simple. So I moved on. I tried animations, actually transforming the sketch to being animated, but when I look back in time it seems to have been the worst idea ever

  • Show Sketch
/** @peep sketchcode */
 
void setup(){
  size(400, 400);
  noFill();
  frameRate(150000);
 
}
 
void draw(){
 
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400 & q >= 0; q += 10){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(0,250));
  line(q, 1, q, random(250,400));
}
}

Nevertheless I pursued it and after introducing some tweaks I created something out of nothing:

  • Show Sketch
/** @peep sketchcode */
 
void setup(){
  size(400, 400);
  background(255);
  noFill();
  frameRate(10);
 
}
 
void draw(){
 fill(255,100);
 rect(0,0,width,height);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400 & q >= 0; q += 10){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(200,400));
  line(q, 1, q, random(0,200));
 
}
}

And then, 60 frames per second, with a few more tweaks

  • Show Sketch
/** @peep sketchcode */
 
void setup(){
  size(400, 400);
  background(255);
  noFill();
  frameRate(60);
 
}
 
void draw(){
 fill(255);
 rect(0,0,width,height);
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400 & q >= 0; q += 10){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(200,400));
  line(q, 1, q, random(0,200));
 
}
}

This is a static assignment, though. I wanted to introduce some more advanced techniques co I went with "rotate"

  • Show Code
/** @peep sketch */
 
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400 & q >= 0; q += 10){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(200,400));
  line(q, 1, q, random(0,200));
 
  rotate(1);
 
}

It turned out awfully. So I got back to my original idea and tried to spice it up a bit with lines going out from different sides of the screen:

  • Show Code
/** @peep sketch */
 
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400; q += random(7,50)){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(200,400));
  line(q, 1, q, random(0,200));
  line(1, q, random(0,200), q);
  line(q, 1, q, random(0,200));
}

At some point I realised a major problem which the sketch I had. Even though everything was quite randomised, it was quite a tuff ride to make all the colors really random. I fixed that problem later on, in the meantime I tried to struggle with the code itself.

  • Show Code
/** @peep sketch */
 
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
int w = 25;
int e = 50;
 
for (q; q <= 400; q += random(7,25)){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(200,400));
  line(q, 1, q, random(0,200));
  line(1, q, random(0,200), q);
  line(399, q, random(200,400), q);
}

At some point I introduced opasity to the project, the effect was quite pleasing.

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
 
for (q; q <= 400; q += random(10,10)){
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255),random(0,255));
  line(q, 399, q, random(200,400));
}

And I tried something weird again:

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
 
for (q; q <= 400; q += random(10,25)){
  strokeWeight(random(q,7));
  stroke(random(0,255),random(0,255),random(0,255), random(0,255));
  line(q, 399, q, random(200,400));
  line(q, 1, q, random(0,200));
  line(1, q, random(0,200), q);
  line(399, q, random(200,400), q);
}

I tried going with different background colors but it seems nothing was good except for white. By the way I fixed the randomness problem, now it seems to have gone totally random except for the number of lines. I introduced voids to make the code a notch shorter.

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(0);
  noFill();
 
int q = 1;
void w (int e, int r, int t) {
  strokeWeight(random(e,r));
  stroke(random(e,t),random(e,t),random(e,t), random(e,t))}
 
void y (int u, int i, int o, int p) {
line(u, i, o, p)}
 
for (q; q <= 400; q += random(10,25)){
  w (0, 7, 255);
  line(q, 399, q, random(200,400));
  w (0, 7, 255);
  line(q, 1, q, random(0,200));
  w (0, 7, 255);
  line(1, q, random(0,200), q);
  w (0, 7, 255);
  line(399, q, random(200,400), q);
}

At some point I noticed I forgot to introduce the "if" code. So I began to experiment with it, a bit unsuccessfully at first:

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
void w (int e, int r, int t) {
  strokeWeight(random(e,r));
  stroke(random(e,t),random(e,t),random(e,t), random(e,t))}
 
 
for (q; q <= 400; q += random(10,25)){
  if ((q>=20) && (q<=25)) {
  if ((q>=15) && (q<20)) {
    if ((q>=10) && (q<15)) {
      w (0, 7, 255);
      triangle (random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300));
      triangle (random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300));
      triangle (random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300))}
    }else {
      w (0, 7, 255);
      triangle (random(150, 250),random(150, 250),random(150, 250),random(150, 250),random(150, 250),random(150, 250));
      triangle (random(150, 250),random(150, 250),random(150, 250),random(150, 250),random(150, 250),random(150, 250))}
  }else {
    w (0, 7, 255);
    triangle (random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225))}
  w (0, 7, 255);
  line(q, 399, q, random(200,400));
  w (0, 7, 255);
  line(q, 1, q, random(0,200));
  w (0, 7, 255);
  line(1, q, random(0,200), q);
  w (0, 7, 255);
  line(399, q, random(200,400), q);
}

And then wow, I did it!

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
int a = 10;
int q = 1;
void w (int e, int r, int t) {
  strokeWeight(random(e,r));
  stroke(random(e,t),random(e,t),random(e,t), random(e,t))}
 
 
for (q; q <= 400; q += random(10,25)){
  w (0, 7, 255);
  line(q, 399, q, random(200,400));
  w (0, 7, 255);
  line(q, 1, q, random(0,200));
  w (0, 7, 255);
  line(1, q, random(0,200), q);
  w (0, 7, 255);
  line(399, q, random(200,400), q);
 
  if ((q>20) && (q<=25)) { 
{
w (0, 7, 255);
      ellipse (random(75, 125),random(75, 125),random(275, 325),random(75, 125),random(275, 325), random(275, 325), random(75, 125), random (275, 325));
      rect (random(125, 175),random(125, 175),random(225, 275),random(125, 175),random(225, 275), random(225, 275), random(125, 175), random (225, 275));
      triangle (random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300))
}
}else if ((q>15)&&(q<=20)){
     w (0, 3, 255);
      rect (random(125, 175),random(125, 175),random(225, 275),random(125, 175),random(225, 275), random(225, 275), random(125, 175), random (225, 275));
      triangle (random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225))
}else if ((q>=10)&&(q<=15)){
    w (0, 7, 255);
    triangle (random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225))
}
}

I tried to introduce a new thing, since I've found the background color boring. I went on a great adventure to find the "something I was looking for". And I found it:

  • Show Sketch
/** @peep sketchcode */
float inc = 0.04; 
size(200, 200);
for (int y = 0; y < height; y++) { 
  for (int x = 0; x < width; x++) { 
    float gray = noise(x*inc, y*inc) * 255;
    stroke(gray); 
    point(x, y); 
  } 
}

Then after a bit of messing with the code...

  • Show Sketch
/** @peep sketchcode */
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
void w () {
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255), random(0,255))}
 
  float inc = random(0.01, 0.89); 
for (int y = 0; y < height; y++) { 
  for (int x = 0; x < width; x++) { 
    float white = noise(x*inc, y*inc) *600;
    stroke(white); 
    point(x, y); 
  } 
}
 
 
for (q; q <= 400; q += random(10,25)){
  w ();
  line(q, 399, q, random(200,400));
  w ();
  line(q, 1, q, random(0,200));
  w ();
  line(1, q, random(0,200), q);
  w ();
  line(399, q, random(200,400), q);
 
  if ((q>20) && (q<=25)) { 
{
w ();
      ellipse (random(75, 125),random(75, 125),random(275, 325),random(75, 125),random(275, 325), random(275, 325), random(75, 125), random (275, 325));
      rect (random(125, 175),random(125, 175),random(225, 275),random(125, 175),random(225, 275), random(225, 275), random(125, 175), random (225, 275));
      triangle (random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300),random(100, 300))
}
}else if ((q>15)&&(q<=20)){
     w ();
      rect (random(125, 175),random(125, 175),random(225, 275),random(125, 175),random(225, 275), random(225, 275), random(125, 175), random (225, 275));
      triangle (random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225))
}else if ((q>=10)&&(q<=15)){
    w ();
    triangle (random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225),random(175, 225))
}
}

I dropped the idea, though. It made the code blunt and it did not introduce anything really interesting. At some point I decided I want to go with the Balance and Harmony thing. So I took a few steps back and created "the imperfect this".

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
 
void w () {
  strokeWeight(random(1,7));
  stroke(random(0,255),random(0,255),random(0,255), random(0,255))}
 
  for (q; q <= 400; q += random(20,24)){
 
if ((q>22) && (q<=24)) { 
{
  for (q; q <= 400; q += random(10,25)){
  w ();
  line(q, 399, q, random(200,400));
  w ();
  line(q, 1, q, random(0,200));
  }
}
}else if ((q>=20)&&(q<=22)){
  for (q; q <= 400; q += random(10,25)){
  w ();
  line(1, q, random(0,200), q);
  w ();
  line(399, q, random(200,400), q);
  }
}
}

I spiced it up a bit, still imperfect but it was a turning point from which I could experiment and condense the code as much as possible.

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
int q = 1;
 
void w () {
  strokeWeight(random(1,7))
  stroke(random(0,255),random(0,255),random(0,255), random(0,255))}
 
 
  for (q; q <= 400; q += random(10,100)){
 
if ((q>10) && (q<=24)) { 
{
  for (q; q <= 400; q += random(10,25)){
  w ();
  line(q, 399, q, random(200,400));
  w ();
  line(q, 1, q, random(0,200));
  }
}
}else if ((q>=25)&&(q<=50)){
  for (q; q <= 400; q += random(10,25)){
  w ();
  line(1, q, random(0,200), q);
  w ();
  line(399, q, random(200,400), q);
  }
}
else if ((q>=50)&&(q<=100)){
  for (q; q <= 400; q += random(50,100)){
  w ();
  line(q, 400, q, random(200,400));
  w ();
  line(q, 0, q, random(0,200));
  w ();
  line(0, q, random(0,200), q);
  w ();
  line(400, q, random(200,400), q);
}
}
}

Semi-Final Design

  • Show Code
/** @peep sketch */
 
  size(400, 400);
  background(255);
  noFill();
 
  int q=1;
 
 
 
int z = random(1,7);
 
void w (){
  strokeWeight( random(1,6));
    if (z<=1){
  stroke(random(0,0),random(0,255),random(0,255),random(150,255))}
  else if (z<=2){
  stroke(random(0,255),random(0,0),random(0,255),random(150,255))}
  else if (z<=3){
  stroke(random(0,255),random(0,255),random(0,0),random(150,255))}
  else if (z<=4){
  stroke(random(0,255),random(0,255),random(0,255),random(255,255))}
  else if (z<=5){
  stroke(random(0,0),random(0,0),random(0,255),random(150,255))}
  else if (z<=6){
  stroke(random(0,255),random(0,0),random(0,0),random(150,255))}
  else if (z<=7){
  stroke(random(0,0),random(0,255),random(0,0),random(150,255))}
}
 
 
  for (q; (q>=0)&&(q <= 400); q += random(10,70)){
 
if ((q>=10) && (q<=20)) { 
{
  for (q; q <= 400; q += random(10,20)){
  w (); line(q, 400, q, random(200,400)); strokeWeight(1,6);
  w (); line(q, 0, q, random(0,200)); strokeWeight(1,6);
  }
}
}else if ((q>20)&&(q<=30)){
  {
for (q; q <= 400; q += random(10,20)){
  w (); line(q, 400, q, random(50,400)); strokeWeight(1,6);
  w (); line(q, 0, q, random(0,50)); strokeWeight(1,6);
}
}
 
}else if ((q>30)&&(q<=40)){
  {
for (q; (q>=1)&&(q <= 380); q += random(10,20)){
  w (); line(q, 400, q, random(350,400)); strokeWeight(1,6);
  w (); line(q, 0, q, random(50,350)); strokeWeight(1,6);
}
}
 
}else if ((q>40)&&(q<=50)){
  for (q; (q>=1)&&(q <= 380); q += random(10,20)){
  w (); line(0, q, random(0,200), q); strokeWeight(1,6);
  w (); line(400, q, random(200,400), q); strokeWeight(1,6);
  }
 
}else if ((q>50)&&(q<=60)){
  for (q; (q>=1)&&(q <= 360); q += random(10,20)){
  w (); line(0, q, random(0,50), q); strokeWeight(1,6);
  w (); line(400, q, random(50,400), q); strokeWeight(1,6);
  }
 
}else if ((q>60)&&(q<=70)){
  for (q; (q>=1)&&(q <= 360); q += random(10,20)){
  w (); line(400, q, random(350,400), q); strokeWeight(1,6);
  w (); line(0, q, random(0,350), q); strokeWeight(1,6);
  }
}
}

Final Design

Woaaaaa, so we're at this point, eh? Alrighty, then. The sketch is split pretty much in two parts, combined with a key part which is loops and conditionals. The first part is Mr. W, meaning, void W. This guy applies the outstanding colors and groundbreaking... maybe not groundbreaking, but thickness of the lines. It might seem not like a crucial part, but everything relies on this, since this void needed to be constantly used in the main (second part). So the second part is made of 6 elements plus the structure itself. We've got loops of loops, providing the validation goes smoothly. It took me a while to understand what I was actually willing to create and even a way longer while to understand how to create it. The code seems invalid and logically impossible, but it works and it works really well. Basically we've got a major loop in which new data gets generated for the variable "q". Upon which the harsh conditionals step in and assign... something to another loop. The variable changes again, but this time we'll have a nice sketch drawn based on it. So hooray! It works.

  • 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 */

The Potential

So the number one question is, where could we use the following designs? And the answer is quite simple. Apparel. White t-shirts and White shoes. For that matter it will combine well with white anything, since in any other background it would look, well, from the designer part, questionable. It would do as contemporary art or a series of ministalistic posters.


Reflections

I created something compact, which looks nice and is neither overly complicated nor overly simplified. It varies greatly upon each refresh, however we can notice a certain pattern, after taking a series of peeks at the sketch. I feel quite confident the sketch could be successful, I still think there's room for improvement, however at this stage, it's as good as it gets.