Computer Art

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);
}  
}