Category: Spring 2019

int size = 100;
int cols = 7;
int rows = 5;
boolean light = false;
int a;
int b;


void setup() { 
  size (700, 500);
  smooth();
  noFill();
  noLoop();
  background (255);
}

void draw() {
  
    int[][] box = new int[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      box[i][j] = i;
      int a = i*100;
      int b = j*100;
      rect(a, b, 100, 100);
      println(i, j);
      int tx1 = int (random(i*100,i*100+50));
      int ty1 = int (random(j*100,j * 100 + 50));
      rect (tx1,ty1,50,50);
      int tx2 = int (random(i*100,i*100+50));
      int ty2 = int (random(j*100,j * 100 + 50));
      rect (tx2,ty2,30,30);
      int tx3 = int (random(i*100,i*100+50));
      int ty3 = int (random(j*100,j * 100 + 50));
      rect (tx3,ty3,20,20);
      int tx4 = int (random(i*100,i*100+50));
      int ty4 = int (random(j*100,j * 100 + 50));
      rect (tx4,ty4,10,10);
      int tx5 = int (random(i*100,i*100+40));
      int ty5 = int (random(j*100,j * 100 + 40));
      rect (tx5,ty5,60,60);
      int tx6 = int (random(i*100,i*100+30));
      int ty6 = int (random(j*100,j * 100 + 30));
      rect (tx6,ty6,70,70);
      int tx7 = int (random(i*100,i*100+20));
      int ty7 = int (random(j*100,j * 100 + 20));
      rect (tx7,ty7,80,80);
      int tx8 = int (random(i*100,i*100+10));
      int ty8 = int (random(j*100,j * 100 + 10));
      rect (tx8,ty8,90,90);
      int tx9 = int (random(i*100,i*100+50));
      int ty9 = int (random(j*100,j * 100 + 50));
      rect (tx9,ty9,40,40);
      int tx10 = int (random(i*100,i*100+50));
      int ty10 = int (random(j*100,j * 100 + 50));
      rect (tx10,ty10,45,45);

      
      
    //for 
 
 //if (frameCount > 0.1) {
  noLoop();
 //     //println(mouseX + " : " + mouseY);
 //   }
    }
}
}

 

 

This week’s assignment was to recreate one of some older computer arts from the Triangulation webpage. I decided to make the Gaussian Distribution one – which seemed simple at first but turned out to be quite challenging to replicate. It’s just a bunch of dots distributed in different densities- well yeah, but… maybe not for me.

My first instinct was that all the dots are densely located around a horizontal line and gradually decrease density the further you get from the line. Yet I failed spectacularly trying to approach this logic – also rethinking that now, it would not reflect a small degree of wavy imperfection in the distribution.

Plan B was to define certain segments of the background to which I will assign a certain number of dots. Through layering them on each other and overlapping them I could imitate the distribution effect – though not perfectly. I played around with different segment sizes and numbers, as well as the number of dots in each.

The problem I encountered using this approach, was that the segments started showing in straight almost fully defined lines, which caused the gradual distributive effect to disappear. To “blend” these segments more I was thinking of defining them within a curvy segment rather than a rectangular one. Which worked in theory, but I could not make it work by myself. Yay.

Therefore I tried blending it through decreasing the dot number but increasing the number of segments.  Not perfect, but the best I could do. Fake it till you make it does not always apply.

This is the original version:

And this is my replication:

In addition, I also played a little bit with interaction. I was interested in what happens when I delete the noLooop() command, and the result made me feel actually really uncomfortable- a bunch of tiny little objects moving quickly and uncontrollably. It almost reminded me of a hive of bees.

That’s why I made the highest concentration of dots to follow the mouse cursor (similarly to what bees do) and if the space bar is pressed, the number, as well as the size of dots, start increasing until they pretty much consume the whole screen.

Sound on for an extra experience:

And last but not least, the code:

//setting up the number of dots used in different segments
int numberCirclesA = 700;
int numberCirclesB = 1000;
int numberCirclesC = 3000;
int numberCirclesD = 5000;

//setting up variables for x, y locations, and width of the dots
float x;
float y;
float w = 3;


void setup() {
  size (800, 390);
  //noLoop(); // to be activated only to see the exact replica of the original image
}


void draw () {
  background (255);
  noStroke();
  fill(0);

  //if the space key is pressed then the number of circles and their size increase
  if (keyPressed) {
    if (key == ' ') {
      w = w + .5;
      numberCirclesA = numberCirclesA + 2000 ;
      numberCirclesB =   numberCirclesB + 1000;
      numberCirclesC =   numberCirclesC + 1000;
      numberCirclesD =   numberCirclesD + 1000;
    }
    //if space bar not pressed, their return to their original values
  } else {
    w = 3;
    numberCirclesA = 700;   
    numberCirclesB = 1000;
    numberCirclesC = 3000;
    numberCirclesD = 5000;
  }



  // different segments in which the dots are being drawn

  //mouseY is added to the Y location to make the segment follow the mouse cursor 

  for (int i = 0; i < numberCirclesA; i++) {
    pushMatrix();
    x = random(0, width);
    y =random(0, height-15);
    ellipse (x, y, w, w);
    popMatrix();
  }
  for (int i = 0; i < numberCirclesB; i++) {
    pushMatrix();
    y = (random(110, 150) + mouseY);
    x = (random(0, width));
    ellipse(x, y, w, w);
    popMatrix();
  }
  //
  for (int i = 0; i < numberCirclesA; i++) {
    pushMatrix();
    x = random(0, width);
    y = (random(0, height -30)+ mouseY);
    ellipse (x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesB; i++) {
    pushMatrix();
    y = (random(40, height - 70) + mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesC; i++) {
    pushMatrix();
    y = (random(20, height - 150)+ mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesD; i++) {
    pushMatrix();
    y = (random(60, height - 200)+ mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }
  for (int i = 0; i < numberCirclesD; i++) {
    pushMatrix();
    y = (random(40, height - 175) + mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  //tracking the mouser cursor
  print(mouseX);
  print (" ");
  println(mouseY);
}

 

 

When I first started recreating “Phase Pattern” by Manfred Mohr, I considered using functions like line() and beginShape(), but then I thought that drawing graphs would add more accuracy to the patterns I was trying to create. So I drew some sine and cosine functions, added some vertical and horizontal lines here and there, and voila! Can’t say it’s my best work because it still needs some adjustments with the curve shape, but I’ll keep working on it with my not so extensive math skills.

“Phase Patterns” by Mohr:

My rendition:

And here’s my code:

float theta = 0.0;  // Start angle at 0
float frequency = 2.0;
float amplitude = 50.0;  // Height of wave
float period = 500.0;  // How many pixels before the wave repeats

float y_for_sine(float x){
  float y = sin(x * TWO_PI * frequency/width) * 100;
  y = y + height/2 + 50;
  return y;
}

float y_for_cos(float x){
  float y = cos(x * TWO_PI * frequency/width) * 100;
  y = y + height/2;
  return y;
}

void setup() {
  size(600, 700);
  background(0);
}

void draw(){
  // bottom vertical lines (cos)
  stroke(255);
  float strokeweight2 = 1.0;
  strokeWeight(strokeweight2);
  //FOR EACH CURVE:
  float interval2 = (int) strokeweight2 + 4.89;
  float x_index2 = 0;
  while(x_index2 < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y++){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y > y_for_cos(x_index2)){
        point(x_index2,y );
      }
    }
    x_index2 += interval2;
  }
  
  //top horizental lines (cos)
  float strokeweight3 = 1.0;
  strokeWeight(strokeweight2);
  //FOR EACH CURVE:
  float interval3 = (int) strokeweight2 + 6;
  float x_index3 = 0;
  while(x_index3 < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y += interval3){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y < y_for_cos(x_index3)){
        point(x_index3,y );
      }
    }
    x_index3 += 1;
  }
  
  //top vertical lines (sin)
  stroke(255);
  float strokeweight = 1.0;
  strokeWeight(strokeweight);
  //FOR EACH CURVE:
  float interval= (int) strokeweight + 5.054;
  float x_index = 0;
  while(x_index < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y++){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y < y_for_sine(x_index)){
        point(x_index,y);
      }
    }
    x_index += interval;
  }

// cos line -- make this thicker
  strokeWeight(1.05);
  for(int x = 0; x < width; x++){
    point(x, y_for_cos(x));
  }
}

 

This homework assignment was very challenging for me. I used a source from open processing to do this, but the code was not working, so I had to go through it and learn what needs to change and be added to make it function. The difference with the original is that when the mouse clicks (mousePressed () ) on it, the direction of the lines change by rotating randomly at 0, 120, and 240 degrees.

int width = 600;
int height = 700;
int _size = 20;     // hexagon radius

void setup() {
  
  size(600,700);
  noLoop();
  
  background(25, 150, 180, 20);
  noFill();
  stroke(0);
  strokeWeight(2);

}

void draw() {

  // clear background
  background(25, 150, 170, 20);
  
  // line length (hypotenuse)
  float h = sin(THIRD_PI) * _size;
  
  for (int i = 0; i <= width / (_size * 3); i++) {
    for (int j = 0; j <= (height / h) + 1; j++) {

      // reference points (centre of each hexagon)
      float x = i * _size * 3 + (_size / 2);
      float y = j * h;
      // offset each odd row
      if (j % 2 > 0) {
        x += _size * 1.5;
      }

      pushMatrix();
      
        translate(x, y);
        
        // random hexagon rotation (0, 120, 240 degrees)
        rotate(int(random(0, 3)) * THIRD_PI);
    
        // draw line
        line(0, -h, 0, h);
  
        // draw arcs
        arc(-_size, 0, _size, _size, -THIRD_PI,     THIRD_PI);
        arc( _size, 0, _size, _size,  THIRD_PI * 2, THIRD_PI * 4); 
      popMatrix();}
  }
}
      void mousePressed() {
  
  redraw();
  }

I really like squares. Here are some squares:

int square_size = 100;

void setup () 
{
  size (800, 800);
  background(255);
}

void draw () 
{
  noLoop();
  background(255);
  draw_squares();
}
void draw_squares()
{
    for (int i=0; i < width; i+=square_size) 
  {
    for (int j=0; j< height; j+= square_size)
    {
      strokeWeight(8);
      float randomizer = random(5,15);
      rect(i, j, square_size, square_size);
      for (int k = 0; k<random(3,6); k++)
      {
        strokeWeight(2);
        
        rect(i+(k*randomizer), j+(k*randomizer), square_size-(k*20), square_size-(k*20));
      }
    }
  }
}

Here is what I’ve got as a result:

Long ago, in a land far away, a group of people lived peacefully in the village of “Intro to IM”. The village was known to harbor numerous people with extraordinary processing skills and arduino skills. Unfortunately, this led to no one wanting to become a farmer, so no food was harvested each year and therefore everyone was starving. As time went by, morale of the people began to decrease rapidly, and something had to be done.

In search of hope, Prophet Aaron Sherwood led a team of villagers to find contact with other villages in search of resources. The crew went through endless encounters of hardships, losing members along the way and struggling every second. However, when it seemed as if all hope was lost, there stood on top of the cliff a giant snail.

 

 

 

 

 

 

The view was stunning. The sky blue brightness resembled the afternoon cloud, and patterns were on its body which were flickering in different colors. On its back was a metal spiral ball, a weight that the Snail God had to carry around. Prophet Aaron spoke on behalf of the village “O Snail God, what can we do to bring prosperity to the village? What is to be done to make the village happy?” The Snail God hesitated for a while, but finally decided to expose the answer. “To do so, the answer is very simple. You must provide the villagers with a good (A) end of the season assessment (grade) and everyone will become so happy that they will forget about the famine. Trust me, it will work.” And with those final words, the Snail God disappeared, floating until it reached heaven’s doors.

Prophet Aaron, once reaching the village, did what the Snail God had advised him to. Even if he didn’t want to, he gave every villager a high-end review. And like magic, the people started to become joyful again. With the new boosted morale, better outcomes were to come through processing and arduino, which meant better artworks produced. The village was finally able to sell these artworks again for trade, and eventually the famine disappeared and everyone lived happily ever after.

---

I was bored and it’s 2am in the morning so I decided to write a quick story about the work I had made. Everything above is fictional (although I hope it was true) and nothing is to be taken seriously. For the Snail God, the secret of its identity is revealed below.

int r =10;
float a = 1;

void setup(){
  size(600,800);
  rectMode(CENTER);
  background(255);
  
  for(int i = 150;i<550;i=51*i/50){ //for the background lines
    
    line(0,i,600,i);
    ;
  }
  
  //noFill();
  stroke(0); // for black linebrush for peacock
  line(0,750,50,600);
  
  fill(135,206,250);
  beginShape(); //begin shape for peacock base
  //fill(255);
  
  vertex(50,600); //start vertex, most left
  bezierVertex(-120,600,200,180,200,100); // front body curve
  
  
  vertex(198,66);
  bezierVertex(300,100,-50,450,400,570);
  
  vertex(400,570);
  bezierVertex(550,650,450,700,600,750);
  
  
  endShape();
  //fill(0);
  beginShape();
  arc(183,100,35,15,0,PI); //chin chin
  line(165,100,155,105); //beak
  line(155,105,165,95);  //beak
  line(165,95,145,105); //beak
  line(145,105,158,90); //beak
  line(158,90,160,83); //beak
  
  ellipse(175,85,10,10); //eyes
  fill(0,0,0);
  ellipse(175,85,5,5); //eyes
  
  //fill(0,0,255);
  line(160,83,120,65); //first spike
  line(120,65,163,77);
  line(163,77,140,45); //second spike
  line(140,45,165,75);
  line(165,75,169,72);
  line(169,72,167,42); // third spike
  line(167,42,173,70);
  line(173,70,179,68);
  line(179,68,188,40); //fourth spike
  line(188,40,183,67);
  line(183,67,193,66);
  line(193,66,210,47); //fifth spike
  line(210,47,198,66);
  endShape();
  fill(133,133,133);
  beginShape();
  vertex(0,800);
  vertex(0,750);
  vertex(50,600);
  vertex(600,750);
  vertex(600,800);
  endShape();
  pattern(50,500,15);
  pattern(300,650,15);
  pattern(100,450,15);
  pattern(140,550,15);
  pattern(230,580,15);
  pattern(180,500,15);
  pattern(230,580,15);
  pattern(230,580,15);
  pattern(420,660,15);
  pattern(320,580,15);
  pattern(380,640,15);
  pattern(120,340,15);
}

void draw(){
  pushMatrix();
  translate(340,370);
  for (int i = 0; i < 10000; i++) {
        float t = radians(i);
        float tt = radians(i+1);
        line(t*cos(t),t*sin(t),tt*cos(tt),tt*sin(tt));
       /*
        float x = 400 + a * t * r * cos(t);
        float y = 400 + a * t * r * sin(t);
        point(x, y);
        */
    }
    popMatrix();
  
  
}

void pattern(int x,int y,int z){ //draw the peacock pattern at x,y coordinates
  //stroke(255);
  ellipseMode(RADIUS);
  fill(random(255),random(255),random(255));
  ellipse(x,y,z,z);
  
  ellipseMode(RADIUS);
  fill(0);
  ellipse(x,y-z/3,z/2,z/2);
  
  
  
}

 

 

Gosh, interactive media is so cool, right???

I don’t really have a cool story to start this blog off with. A lot of sleepless nights went into this. I really wanted to perfect the rectangle placement and see the different widths and heights of the rectangles so I did things in a bit of a difficult way.

A lot of this process was me experimenting with everything we’ve done in class and things I’ve wanted to do for a while. For example, getting two things to be two different, changing colors on screen. It seemed so simple, yet I had no idea how to go about making it happen. Once I started playing around, though, I shortly discovered how it would work. I went about it by writing what I thought would work and then placing the lines in various places. I would then run the code and see if my wishes had been fulfilled. After a few minutes of this, I got it!

I explored making my own functions, using different tabs to keep myself organized, and the sheer frustration of everything breaking. I was sitting in D1 at about 10:00pm. Kyle was across the seating area, trying to talk to me. I couldn’t reply to his questions though. I was staring blankly at my screen. All of my code. My wonderful code had somehow fucked up the formatting and I couldn’t move my cursor from line 17 or undo, redo, or do ANYTHING. It was the most frustrating ten minutes I have ever endured. And then I remembered the magic of ctrl+t. Auto-formatting seemed to fix the issue, or fix it enough for me to be able to reformat everything and get on with putting the final touches into the project. One thing still remains, however, this little glitched wiped out the background picture on my laptop. Now, instead of my happy beach, it’s just a black screen.

Anyway, here’s the thing:

Here’s the Code, separated by the Tabs I had it in

void setup() {
  size(780, 490);
  rectMode(CENTER);
  
} 



void draw() {

  background(255);
  stroke(0);


  rectangleDraw(i, width/6, w1, h, 0, 0, 0, 4);

  rectangleDraw(i, width/6, w2, h, 0, 0, 120, 4);

  rectangleDraw(i, width/10, w3, h, 0, 0, 200, 4);

  rectangleDraw(i, width/10, w4, h, 0, 0, 300, 4);

  rectangleDraw(i, width/6, w5, h, 380, 0, 0, 4);

  rectangleDraw(i, width/6, w6, h, 480, 0,0, 4);

  rectangleDraw(i, width/6, w7, h, 582, 0, 0, 4);

  rectangleDraw(i, width/5, w8, h, 635, 0, 0, 4);

  rectangleDraw2(i2, 30, 550, h1, 0, 0, 2, 0);

  rectangleDraw2(i2, 10, 250, h1, 0, 0, 2, 21);

  rectangleDraw2(i2, 12, 250, h2, 0, 0, 2, 180);

  rectangleDraw2(i2, 17, 86, h3, 160, 0, 2, 105);

  rectangleDraw2(i2, 9, 255, h2, 250, 0, 2, 225);

  rectangleDraw2(i2, 3, 180, h4, 355, 140, 2, 225);

  rectangleDraw2(i2, 12, 105, h3, 253, 20, 2, 120);

  rectangleDraw2(i2, 7, 40, h6, 285, 0, 2, 20);

  rectangleDraw2(i2, 20, 120, h6, 325, 0, 2, 20);

  rectangleDraw2(i2, 18, 105, h6, 253, 0, 2, 45);

  rectangleDraw2(i2, 15, 40, h6, 365, -8, 2, 0);

  rectangleDraw2(i2, 12, 45, h2, 310, 0, 2, 182);

  rectangleDraw2(i2, 17, 86, h3, 390, 0, 2, 105);

  rectangleDraw2(i2, 17, 20, h3, 485, 0, 2, 105);

  rectangleDraw2(i2, 17, 20, h3, 525, 0, 2, 105);

  rectangleDraw2(i2, 9, 13, h3, 557, -25, 2, 105);

  rectangleDraw2(i2, 17, 15, h3, 590, 0, 2, 105);

  rectangleDraw2(i2, 17, 26, h3, 626, 0, 2, 105);

  rectangleDraw2(i2, 17, 26, h3, 710, 0, 2, 105);

  rectangleDraw2(i2, 17, 35, h3, 748, 0, 2, 105);

  rectangleDraw2(i2, 17, 10, h3, 778, 0, 2, 105);

  rectangleDraw2(i2, 9, 30, h2, 420, 0, 2, 225);

  rectangleDraw2(i2, 9, 70, h2, 520, 0, 2, 225);

  rectangleDraw2(i2, 3, 10, h2, 610, 0, 2, 225);

  rectangleDraw2(i2, 9, 70, h2, 662, 0, 2, 225);

  rectangleDraw2(i2, 9, 20, h2, 710, 0, 2, 225);

  rectangleDraw2(i2, 9, 30, h2, 745, 0, 2, 225);

  rectangleDraw2(i2, 9, 20, h2, 775, 0, 2, 225);

  rectangleDraw2(i2, 6, 60, h2, 435, 0, 2, 281);

  rectangleDraw2(i2, 6, 20, h2, 527, 0, 2, 281);

  rectangleDraw2(i2, 6, 35, h2, 575, 0, 2, 281);

  rectangleDraw2(i2, 6, 10, h2, 632, 0, 2, 281);

  rectangleDraw2(i2, 6, 40, h2, 702, 0, 2, 281);

  rectangleDraw2(i2, 6, 7, h2, 740, 0, 2, 281);

  rectangleDraw2(i2, 6, 7, h2, 752, 0, 2, 281);

  rectangleDraw2(i2, 6, 20, h2, 771, 0, 2, 281);

  rectangleDraw2(i2, 3, 23, h4, 480, 140, 2, 225);

  rectangleDraw2(i2, 3, 23, h4, 520, 140, 2, 225);

  rectangleDraw2(i2, 3, 46, h4, 627, 140, 2, 225);

  rectangleDraw2(i2, 3, 8, h4, 686, 140, 2, 225);

  rectangleDraw2(i2, 3, 8, h4, 700, 140, 2, 225);

  rectangleDraw2(i2, 3, 25, h4, 730, 140, 2, 225);

  rectangleDraw2(i2, 3, 5, h4, 750, 140, 2, 225);

  rectangleDraw2(i2, 3, 3, h4, 760, 140, 2, 225);

  rectangleDraw2(i2, 12, 150, h2, 450, 0, 2, 180);

  rectangleDraw2(i2, 12, 40, h2, 605, 0, 2, 180);

  rectangleDraw2(i2, 12, 6, h2, 670, 0, 2, 180);

  rectangleDraw2(i2, 12, 6, h2, 690, 0, 2, 180);

  rectangleDraw2(i2, 12, 6, h2, 703, 0, 2, 180);

  rectangleDraw2(i2, 12, 20, h2, 722, 0, 2, 180);

  rectangleDraw2(i2, 44, width*2, h5, 0, 255, 2, 225);

  rectangleDraw2(i2, 30, 40, h1, 454, 0, 2, 0);

  rectangleDraw2(i2, 30, 30, h1, 545, 0, 2, 0);

  rectangleDraw2(i2, 30, 30, h1, 600, 0, 2, 0);

  rectangleDraw2(i2, 30, 20, h1, 635, 0, 2, 0);

  rectangleDraw2(i2, 30, 30, h1, 680, 0, 2, 0);

  rectangleDraw2(i2, 4, 6, h1, 725, -18, 2, 0);

  rectangleDraw2(i2, 30, 15, h1, 743, 0, 2, 0);

  rectangleDraw2(i2, 30, 7, h1, 763, 0, 2, 0);

  rectangleDraw2(i2, 14, 15, h1, 778, 0, 2, 0);

  rectangleDraw2(i2, 6, 35, h3, 416, 20, 2, 0);

  rectangleDraw2(i2, 18, 30, h3, 362, 74, 2, 0);

  rectangleDraw2(i2, 12, 120, h2, 435, 137, 2, 0);

  rectangleDraw2(i2, 18, 20, h1, 520, 20, 2, 0);

  rectangleDraw2(i2, 16, 70, h1, 520, 45, 2, 0);

  rectangleDraw2(i2, 9, 10, h1, 580, 20, 2, 0);

  rectangleDraw2(i2, 6, 10, h1, 604, 20, 2, 0);

  rectangleDraw2(i2, 19, 10, h1, 620, 20, 2, 0);

  rectangleDraw2(i2, 19, 20, h1, 665, 20, 2, 0);

  rectangleDraw2(i2, 19, 10, h1, 690, 20, 2, 0);

  rectangleDraw2(i2, 19, 10, h1, 745, 20, 2, 0);

  rectangleDraw2(i2, 19, 10, h1, 775, 20, 2, 0);

  rectangleDraw2(i2, 19, 9, h1, 630, 47, 2, 0);

  rectangleDraw2(i2, 19, 9, h1, 670, 47, 2, 0);

  rectangleDraw2(i2, 19, 43, h1, 707, 47, 2, 0);

  rectangleDraw2(i2, 19, 27, h1, 747, 47, 2, 0);

  rectangleDraw2(i2, 19, 27, h1, 747, 47, 2, 0);

  rectangleDraw2(i2, 19, 27, h1, 767, 77, 2, 0);

  rectangleDraw2(i2, 17, 7, h1, 737, 75, 2, 0);

  rectangleDraw2(i2, 17, 43, h1, 637, 75, 2, 0);

  rectangleDraw2(i2, 12, 37, h3, 533, 136, 2, 0);

  rectangleDraw2(i2, 12, 15, h3, 575, 136, 2, 0);

  rectangleDraw2(i2, 12, 20, h3, 605, 136, 2, 0);

  rectangleDraw2(i2, 12, 10, h3, 642, 136, 2, 0);

  rectangleDraw2(i2, 12, 20, h3, 670, 136, 2, 0);

  rectangleDraw2(i2, 12, 15, h3, 716, 136, 2, 0);

  rectangleDraw2(i2, 12, 5, h3, 760, 136, 2, 0);

  rectangleDraw2(i2, 12, 5, h3, 770, 136, 2, 0);

  rectangleDraw2(i2, 17, 25, h3, 658, 105, 2, 0);

  rectangleDraw2(i2, 17, 25, h1, 700, 75, 2, 0);

  rectangleDraw2(i2, 12, 10, h2, 745, 180, 2, 0);

  rectangleDraw2(i2, 12, 10, h2, 775, 180, 2, 0);
}

int h1 = 3; 
int h2 = 7;
int h3 = 5;
int h4 = 21;
int h5 = 1; 
int h6 = 4;

int w1 = 25;
int w2 = 20;
int w3 = 15;
int w4 = 6;
int w5 = 4;
int w6 = 3;
int w7 = 2;
int w8 = 1;

int c1 = color(random(255), random(255), random(255));
int c2 = color(random(255), random(255), random(255));

int i;
int h = 780;
int translate = 0;
int iRange = 6;
int a;

void rectangleDraw(int i, int iRange, int w, int h, int x, int y, int translate, int a) {

  for (i = 0; i < iRange; i += w) {
    pushMatrix();
    stroke(c1);
    float frequency = (i*(map(mouseY, 0, 490, 0.001, 0.1)))+(frameCount*.01);
    float angle = map(noise(frequency), 0, map(mouseX, 0, 780, .1, 7), 0, PI-2.5);
    translate(i+w/2 + translate, height/a);
    rotate(angle);
    rect(x, y, w, h);
    popMatrix();
  }
}



void keyPressed() {
  if (key == ' ') {
    c1 = color (random(255), random(255), random(255));
    c2 = color (random(255), random(255), random(255));
  }
}

int i2;
int iRange2 = 17;
int wi = 25;
int hi = 5;
int x2;
int y2;
int b = 2;
int translate2 = 25;


void rectangleDraw2(int i2, int iRange2, int wi, int hi, int x2, int y2, int b, int translate2) {

  for (i2 = 0; i2 < height/iRange2; i2 += hi) { 
    pushMatrix();
    stroke(c2);
    float frequency = i*.002+frameCount*.05;
    float angle = map(noise(frequency), .0, 200, 0, TWO_PI);
    translate(0, i2+hi/b + translate2);
    rotate(angle*.1);
    rect(x2, y2, wi, hi);
    popMatrix();
  }
}

 

For this assignment, I decided to recreate computer art that I found on Dribble by an artist named Vlad Grama.

The challenging part of this assignment was creating the for loops and figuring out the coordinate system to place the elements. Because of my work on last week’s self-portrait assignment, it made things a lot easier, but this was still the most time-consuming part of the assignment.

The picture on top is what I created using Processing while the art on the bottom is from Vlad Grama’s work.

Link to Dribble image: https://dribbble.com/shots/6282364-B-R-Minimalist-poster-design/attachments

Here is the code in Processing:

void setup() {
  size(640, 680);
}  

void draw() { 
  background(219, 225, 230);
  //dotted triangle on upper half of art
  for (int i = 0; i < 240; i+= 8) {
      line(240 + i, 300 - i, 239 + i, 301 - i);
      line(238 + i, 70, 239 + i , 70);
      line(238, 70 + i, 239, 70 + i);

  }  
  //half-circle
  pushMatrix();
  translate(width / 2, height/2);
  noStroke();
  fill(color(190, 141, 137));  
  rotate(PI / 2);
  arc(-40, 0, 300, 300, -HALF_PI, HALF_PI);
  popMatrix();
  noFill();
  //white triangle
  noStroke();
  fill(255);
  triangle(200, 130, 310, 40, 420, 130);
  //outline of square (black)
  noFill();
  stroke(66, 65, 75);
  rect(100, 120, 190, 190);
  //white lines on bottom of semi circle
  for (int i = 300; i < 348; i += 6) {
    stroke(219, 225, 230);
    line(i, 430, i, 450);
  }    
  //pink lines to upper left of circle
  stroke(color(190, 141, 137));

  for (int i = 165; i < 213; i += 6) {
    line(i, 130, i, 150);
  }  
  for (int i = 165; i < 213; i += 6) {
    line(i, 160, i, 180);
  }    
  noStroke();
  fill(230, 142, 66);
  //orange rectangle
  rect(70, 255, 500, 40);
  //grid rectangle around
  strokeWeight(2);
  stroke(color(190, 141, 137));
  for (int i = 30; i < 290; i+= 20) {
    line(i, 220, i + 4, 220);
  }  
  for (int i = 30; i < 290; i+= 20) {
    line(i, 420, i + 4, 420);
  }  
  for (int i = 220; i < 440; i+= 20) {
    line(30, i, 30, i + 4);
  } 
  //red rect behind circle
  noStroke();
  fill(173, 83, 66);
  rect(160, 230, 340, 5);
  stroke(173, 83, 66);
  line(520, 230, 520, 235);

  for (int i = 140; i < 158; i += 6) {
    line(i, 230, i, 234);
  }   
  //circle in middle
  noStroke();
  fill(66, 65, 75);
  ellipse(width / 2, 240, 180, 180);
  //line below
  stroke(66, 65, 75);  
  strokeWeight(2);
  line(95, 308, 490, 308);
  line(530, 308, 534, 308);
  line(545, 308, 549, 308);
  
  //rectangle below line
  rect(110, 317, 226, 10);
  ellipse(190, 355, 6, 6);
  ellipse(234, 355, 6, 6);
  ellipse(390, 355, 6, 6);
  //red lines on circle
  stroke(173, 83, 66);
  line(60, 270, 140, 270);
  line(170, 270, 590, 270);
  line(170, 280, 590, 280);

  //black lines next to triangle
  stroke(66, 65, 75);  
  strokeWeight(2);
  line(300, 80, 380, 80);
  line(300, 86, 380, 86);
  //three triangles
  for (int i = 0; i < 45; i+= 15){
    triangle(165 + i, 206, 168 + i, 203, 168 + i, 209);
  }  
  //16 x 8 grid of squares
  for (int x = 0; x < 128; x += 8) {
    for (int i = 60; i < 124; i += 8) {
      noStroke();
      fill(230, 142, 66);      
      rect(293 + x, 60 + i, 3, 3);
    }  
   //orange line outside of 16 x 8 grid
  println(mouseY);
  stroke(230, 142, 66);
  strokeWeight(2);
  line(435, 155, 435, 177);
}  
}  

 

 

I decided to recreate the cover from August 1977 called ‘Random Squares’ by Bill Kolomyjec:

My recreation:

I made my recreation using line(), A LOT of rect(), translate() and push/popMatrix(). I feel like there most definitely must be an easier way to create this but (knowing my lack of programming skills) this was the method I chose to go through. I also decided to play around a little with what we learned in class with keyPressed(), and the different functions associated with float, and I definitely did not get what I wanted to achieve but I liked my ‘happy accident’ anyway and I was pretty proud of it.

int w = 100;
float speed = .01;
float granulation = .001;

void setup() { 
   size(420, 300);
   background(255);
} 


void draw(){
  
   // if(keyPressed == true) {
   //   fill(153, 165, 194); //199, 32, 32
   // } else {
   //   fill(190, 191, 194); // 222, 116, 36
   // }
   //for (int i=0; i<width; i+=w){
   // float frequency = (frameCount*speed) + (i*granulation);
   // float angle = map(noise(frequency), 0, 1, 0, TWO_PI);
   // pushMatrix();
    
   // translate(i+w/2, height*.5);
   // rotate(angle);
   // rect(0,0, w, 100);
   // popMatrix();
    

  line(60, 0, 60, 300);
  line(120, 0, 120, 300);
  line(180, 0, 180, 300);
  line(240, 0, 240, 300);
  line(300, 0, 300, 300);
  line(360, 0, 360, 300);
  
  line(0, 60, 420, 60);
  line(0, 120, 420, 120);
  line(0, 180, 420, 180);
  line(0, 240, 420, 240);
  line(0, 300, 420, 300);
  line(0, 360, 420, 360);
  
///////LINE 1\\\\\\\\\

// CUBE 1,1
  pushMatrix(); 
  translate(0, 0);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(15, 14, 30, 30);
   rect(19, 18, 20, 20);
   rect(25, 24, 10, 10);
 
  popMatrix();
  
// CUBE 1,2
   pushMatrix();
   translate(60, 0);
   
   rect(4, 4, 50, 50);
   rect(10, 9, 40, 40);
   rect(13, 11, 35, 35);
   rect(16, 14, 30, 30);
   rect(22, 17, 20, 20);
   rect(28, 21, 10, 10);
   
  popMatrix();

// CUBE 1,3 DONE
  pushMatrix();
   translate(120, 0);
   
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(17, 17, 25, 25);
   rect(19, 20, 20, 20);
   rect(21, 23, 15, 15);
   rect(23, 26, 10, 10);
   
  popMatrix();

// CUBE 1,4
   pushMatrix();
   translate(180, 0);
   
   rect(4, 4, 50, 50);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();

// CUBE 1,5
  pushMatrix();
   translate(240, 0);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();

// CUBE 1,6
  pushMatrix();
   translate(300, 0);
   
   rect(5, 4, 50, 50);
   rect(15, 15, 30, 30);
   rect(28, 27, 10, 10);
  popMatrix();
  
// CUBE 1,7  
  pushMatrix();
   translate(360, 0);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();
  
/////////LINE 2\\\\\\\\\\\

//CUBE 2,1 DONE
  pushMatrix();
   translate(0, 60);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();

//CUBE 2,2 DONE
   pushMatrix();
   translate(60, 60);
   
   rect(13, 15, 10, 10);
  popMatrix();

//CUBE 2,3 DONE
  pushMatrix();
   translate(120, 60);
   
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(17, 15, 25, 25);
   rect(20, 18, 20, 20);
   rect(23, 20, 15, 15);
   rect(26, 22, 10, 10);
  popMatrix();

//CUBE 2,4 DONE
   pushMatrix();
   translate(180, 60);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(14, 14, 30, 30);
   rect(18, 18, 20, 20);
   rect(24, 24, 10, 10);
  popMatrix();

//CUBE 2,5 DONE 
  pushMatrix();
   translate(240, 60);
   
   rect(15, 15, 10, 10);
  popMatrix();

//CUBE 2,6 DONE
    pushMatrix();
   translate(300, 60);
   
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(17, 17, 25, 25);
   rect(19, 20, 20, 20);
   rect(21, 23, 15, 15);
   rect(23, 26, 10, 10);
  popMatrix();

//CUBE 2,7 DONE
  pushMatrix();
   translate(360, 60);
   
   rect(1, 2, 55, 55);
   rect(3, 4, 50, 50);
   rect(5, 7, 45, 45);
   rect(7, 9, 40, 40);
   rect(10, 11, 35, 35);
   rect(12, 12, 30, 30);
   rect(14, 15, 25, 25);
   rect(15, 17, 20, 20);
   rect(18, 20, 15, 15);
   rect(20, 22, 10, 10);
  popMatrix();
  
////////////LINE 3\\\\\\\\\\

// CUBE 3,1
  pushMatrix();
   translate(0, 120);
   
   rect(3, 3, 50, 50);
   rect(8, 8, 40, 40);
   rect(11, 11, 30, 30);
   rect(15, 15, 20, 20);
   rect(18, 18, 10, 10);
  popMatrix();

// CUBE 3,2 
   pushMatrix();
   translate(60, 120);
   
   rect(7, 7, 50, 50);
   rect(12, 12, 40, 40);
   rect(18, 18, 30, 30);
   rect(23, 23, 20, 20);
   rect(29, 29, 10, 10);
  popMatrix();

 // CUBE 3,3
  pushMatrix();
   translate(120, 120);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();

// CUBE 3,4    
   pushMatrix();
   translate(180, 120);
   
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(17, 17, 25, 25);
   rect(19, 20, 20, 20);
   rect(21, 23, 15, 15);
   rect(23, 26, 10, 10);
  popMatrix();

   // CUBE 3,5
  pushMatrix();
   translate(240, 120);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();
 
 // CUBE 3,6
    pushMatrix();
   translate(300, 120);
 
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(16, 17, 25, 25);
   rect(18, 20, 20, 20);
   rect(19, 23, 15, 15);
   rect(21, 26, 10, 10);
  popMatrix();
 
// CUBE 3,7
  pushMatrix();
   translate(360, 120);
   
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(18, 18, 25, 25);
   rect(20, 21, 20, 20);
   rect(23, 25, 15, 15);
   rect(26, 28, 10, 10);
  popMatrix();
  
/////////LINE 4\\\\\\\\\\\

//CUBE 4,1 DONE
  pushMatrix();
   translate(0, 180);
   
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();

//CUBE 4,2 DONE 
   pushMatrix();
   translate(60, 180);
   
   rect(30, 15, 10, 10);
  popMatrix();

//CUBE 4,3
  pushMatrix();
   translate(120, 180);
   
   rect(4, 4, 50, 50);
   rect(7, 7, 40, 40);
   rect(11, 12, 30, 30);
   rect(15, 17, 20, 20);
   rect(20, 23, 10, 10);
  popMatrix();
   
//CUBE 4,4
   pushMatrix();
   translate(180, 180);
   
   rect(6, 4, 50, 50);
   rect(15, 13, 30, 30);
   rect(23, 22, 10, 10);
  popMatrix();

//CUBE 4,5  DONE
  pushMatrix();
   translate(240, 180);

   rect(10, 10, 37, 37);
   rect(23, 23, 10, 10);

  popMatrix();

//CUBE 4,6
    pushMatrix();
   translate(300, 180);
 
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(17, 17, 25, 25);
   rect(19, 19, 20, 20);
   rect(21, 21, 15, 15);
   rect(24, 23, 10, 10);
  popMatrix();
  
//CUBE 4,7 DONE
  pushMatrix();
   translate(360, 180);
   
   rect(6, 4, 50, 50);
   rect(15, 13, 30, 30);
   rect(28, 24, 10, 10);
  popMatrix();
  
///////LINE 5\\\\\\\\

//CUBE 5,1
  pushMatrix();
   translate(0, 240);
  
   rect(4, 4, 50, 50);
   rect(13, 13, 30, 30);
   rect(20, 20, 10, 10);
  popMatrix();

//CUBE 5,2 DONE  
   pushMatrix();
   translate(60, 240);
   
   rect(8, 8, 37, 37);
   rect(15, 18, 10, 10);
  popMatrix();

//CUBE 5,3 DONE  
  pushMatrix();
   translate(120, 240);
   
   rect(30, 27, 10, 10);
  popMatrix();

//CUBE 5,4   
   pushMatrix();
   translate(180, 240);
   
     
   rect(4, 4, 50, 50);
   rect(9, 9, 40, 40);
   rect(13, 13, 30, 30);
   rect(17, 17, 20, 20);
   rect(21, 21, 10, 10);
  popMatrix();

//CUBE 5,5
  pushMatrix();
   translate(240, 240);
   
     
   rect(2, 2, 55, 55);
   rect(4, 4, 50, 50);
   rect(7, 7, 45, 45);
   rect(9, 9, 40, 40);
   rect(12, 12, 35, 35);
   rect(15, 14, 30, 30);
   rect(17, 17, 25, 25);
   rect(19, 20, 20, 20);
   rect(21, 23, 15, 15);
   rect(23, 26, 10, 10);
  popMatrix();
  
//CUBE 5,6   
    pushMatrix();
   translate(300, 240);
    
   rect(6, 4, 50, 50);
   rect(15, 13, 30, 30);
   rect(28, 22, 10, 10);
  popMatrix();

//CUBE 5,7 
  pushMatrix();

   translate(360, 240);
   
   rect(1, 2, 55, 55);
   rect(3, 4, 50, 50);
   rect(5, 7, 45, 45);
   rect(7, 9, 40, 40);
   rect(10, 11, 35, 35);
   rect(12, 12, 30, 30);
   rect(14, 15, 25, 25);
   rect(15, 17, 20, 20);
   rect(18, 20, 15, 15);
   rect(20, 22, 10, 10);
  popMatrix();


   }
   
//}