Week 3 : Object Oriented Programming

Originally, I wanted to make the game ‘Space Invaders,’ but with my own kind of twist. I planned to get all the objects working before i look through my digital art designs to see any recurring themes i could implement into the game.

Starting with the set of ‘aliens,’ I initially created a for loop inside a foor loop to create a grid of ‘aliens’ that randomly moved in a uniform manner. The plan was that the bottom row of the ‘aliens’ would be shooting at the players’ character. The player had to miss all the bullets, and also shoot back at the ‘aliens’ to kill them.

After doing the grid, finally getting them to randomly move in a uniform manner, and also getting the player to move their character left to right, I was at a dead end. I had so many bugs, obstacles, and things that I wasn’t sure about. I believe if I had more time, I could have solved it, but I still wanted a working game, so I decided to change it.

After letting my original plan go, I decided to do the basic pong- game. Where balls are falling in random order, and the goal is to catch it with your slider. It took some time for me to transition from the original code to the new one, but I finally reached a conclusion where my game was working. Ideally I could add a time limit and a score, but I guess it would just have to wait till later.

I still faced some difficulties, especially figuring out how to get the ball to bounce back from only the slider, but managed to do it. My only obstacle now is actually playing the game – It appears I’m really bad at it, so forgive me in the video. !

// Calling the player class
Player player;
 
// calling the shooter class as an array
Shooters [] shooters ;


  void setup(){
    size (1000,1000);
    ellipseMode (CENTER);
    shooters = new Shooters [20];
    player = new Player ();
    
    // creating a for loop to create an array of shooters
    for (int i = 0; i<10; i ++){
      shooters [i] = new   Shooters (); 
  }
  }
  
  void draw (){
    background (0, 0, 0);
    player.drawPlayer ();
    player.checkEdge();
    // creating a for loop for the shooters 
    for (int i = 0; i<10; i ++){
      shooters[i].drawShooters();
      shooters[i].update ();
      shooters[i].checkEdge();
    keyPressed();
  }
  }
  
  // to be able to move the rectangle
  void keyPressed (){
    if (keyPressed && keyCode == LEFT) {
      player.playerSpeed = -3;
      player.update();
    }
    
     if (keyPressed && keyCode == RIGHT) {
      player.playerSpeed =3;
      player.update();
 
    }
 
  }
  //////////////////////////////
// Tab Player
class Player {
  float playerX, playerY, w, h; 
  float playerSpeed;
  
  Player(){
    playerX = width/2;
    playerY = height - (height/6);
    w = 100;
    h = 25;
    
  }
  
  void drawPlayer (){
    noStroke();
    fill (255, 255, 255);
    rect (playerX, playerY, w, h);
  }
  
  void update (){
    playerX += playerSpeed;
  }
  
  
  // Honestly, this didnt work. I tried to make the rectangle stop when it reached the edge. 
    void checkEdge (){
    if (playerX > width - 100){
      print("stop");
      playerSpeed = 0 ;
      update();
    }
    }
  

  }
////////////
//Tab Shooters
class Shooters {
  float shootersRadius;
  float locX, locY;
  float y, x, xspeed, yspeed;
  
  // creating the shooters and having them move at a different speed each time
  Shooters(){
    x = 0;
    y = 0; 
    xspeed = random (3,5); 
    yspeed = random (1,3);

  
  }
  
    void update (){
      x = x + xspeed; 
      y = y + yspeed; 
      }
  
  void checkEdge (){
 
    // setting the dimensions
   if (x > width || x <0 ) {
     xspeed = xspeed* -1;
   }
   if ( y < 0 ) {
     yspeed = yspeed*-1;
  }
// creating the boundaries for the rectangle (if it hits the rectangle it bounces)
  if ( y > player.playerY && y < width){
    if (x > player.playerX && x < player.playerX + player.w) {
      xspeed = xspeed* -1;
    yspeed = yspeed*-1;
    }
  }
  }
  
  void drawShooters(){
    noStroke();
    fill ( 255, 215, 0);
    circle ( x, y, 32 );
  }
    }

 

Back To Childhood: Tic-Tac-Toe

For this weeks assignment I decided to recreate a game that I played alot with my siblings when power was out during hurricanes seasons in a digital. I decided to make the game tic-tac-toe however instead of uses X’s and  O’s I decided that each piece will be a square box that it will be filled in each of the spots. The reason for this was utilize the entire canvas that processing provide.

I utilized a snapping motion to determine where the player was currently

was and the piece would be put should the player click the mouse button.

For the object oriented portion of the game all of the game logic is encapsulated in a game class. The game class uses a 2D-array to store the “pieces” either as a 0 for red, 1 for green or a -1 for empty. This array is used during the entire time that the game is in session to render the pieces as well do various logic work. For instance, if the value is not -1 then the piece should not be played. The game class also used this array to check the winning condition of the game.\\

void setup() {
  size(1000, 1000);
}
//global variables
float boxWidth = 1000/3;
Game myGame = new Game();
int turn = 0; //0 is red, 1 is green
boolean gameRunning = true;
String gameWonBy = "";
int piecesIn = 0;


void draw() {
  background(255, 255, 255);
  if (gameRunning == true)
  {
    cursorHover();
  }

  board();
  myGame.colorPieces();
  myGame.checkWin();
  pushStyle();
  textSize(32);
  textAlign(CENTER);
  //fill(255, 255, 255);
  fill(0, 0, 0);
  if (gameWonBy == "Red") {
    text("This game was won by red", width/2, height/2);
    //println("should display text");
  } else if (gameWonBy == "Green") {
    text("This game was won by green", width/2, height/2);
    //println("should display text");
  } else if (gameWonBy == "Tie") {
    text("This game ended in a tie", width/2, height/2);
    //println("should display text");
  }
  popStyle();
}

//functions
void board() {
  pushStyle();
  strokeWeight(3);
  //first vertical line
  line(width/3, 0, width/3, height);
  //second vertical line
  line(2* width/3, 0, 2*width/3, height);

  //first horizontal line
  line(0, height/3, width, height/3);
  //second horizontal line
  line(0, 2*height/3, width, 2*height/3);
  popStyle();
}

void cursorHover() {
  //make the light green/red box over the position
  if (turn%2==0)
  {
    fill(255, 0, 0, 180);
  } else if (turn%2==1) {
    fill(0, 255, 0, 180);
  }
  //origin of the hover box
  int[] origin = getIndices();
  //draw the position
  rect(origin[1]*boxWidth, origin[0]*boxWidth, boxWidth, boxWidth);
}

void mouseClicked() {
  myGame.updatePosition(getIndices());
  //myGame.printPositions();
}

int[] getIndices() {
  int[] indices = new int[2];
  //x is index 0, y is index 1
  indices[0] = floor(mouseY/boxWidth);
  indices[1] = floor(mouseX/boxWidth);
  return indices;
}




//classes
class Game {
  int[][] positions = new int[3][3];
  Game() {
    for (int i=0; i<positions.length; i++) {
      for (int j=0; j<positions[i].length; j++) {
        positions[i][j]=-1;
      }
    }
  }
  void updatePosition(int[] indices) {
    if (gameRunning)
    {
      if (positions[indices[0]][indices[1]] == -1) {
        positions[indices[0]][indices[1]] = turn%2;
        turn=turn+1;
        piecesIn+=1;
      }
    }
  }

  void printPositions() {
    for (int i=0; i<positions.length; i++) {
      for (int j=0; j<positions[i].length; j++) {
        //print(positions[i][j]+" ");
      }
      //println();
    }
    //println();
  }

  void colorPieces() {
    for (int i=0; i<positions.length; i++) {
      for (int j=0; j<positions[i].length; j++) {
        //if position is 0 then color the position red
        if (positions[j][i]==0) {
          pushStyle();
          fill(255, 0, 0);
          rect(i*boxWidth, j*boxWidth, boxWidth, boxWidth);
          popStyle();
        } 
        //if position is 1 then color the position green
        else if (positions[j][i]==1) {
          pushStyle();
          fill(0, 255, 0);
          rect(i*boxWidth, j*boxWidth, boxWidth, boxWidth);
          popStyle();
        }
      }
    }
  }

  void checkWin() {
    //tie check
    if (piecesIn == 9 && gameRunning==true) {
      gameRunning = false;
      gameWonBy = "Tie";
      //println("Tie");
    }
    //row check
    for (int i=0; i<3; i++) {
      if (positions[i][0]==0 && positions[i][1]==0 && positions[i][2]==0) {
        gameRunning = false;
        gameWonBy = "Red";
        //println("gameWonBy Red");
      } else if (positions[i][0]==1 && positions[i][1]==1 && positions[i][2]==1) {
        gameRunning = false;
        gameWonBy = "Green";
        //println("gameWonBy Green");
      }
    }
    // column check
    for (int i=0; i<3; i++) {
      if (positions[0][i]==0 && positions[1][i]==0 && positions[2][i]==0) {
        gameRunning = false;
        gameWonBy = "Red";
        //println("gameWonBy Red");
      } else if (positions[0][i]==1 && positions[1][i]==1 && positions[2][i]==1) {
        gameRunning = false;
        gameWonBy = "Green";
        //println("gameWonBy Green");
      }
    }

    // diagonal check y=-x
    if (positions[0][0]==0 && positions[1][1]==0 && positions[2][2]==0) {
      gameRunning = false;
      gameWonBy = "Red";
      //println("gameWonBy Red");
    } else if (positions[0][0]==1 && positions[1][1]==1 && positions[2][2]==1) {
      gameRunning = false;
      gameWonBy = "Green";
      //println("gameWonBy Green");
    }

    // diagonal check y=x
    if (positions[0][2]==0 && positions[1][1]==0 && positions[2][0]==0) {
      gameRunning = false;
      gameWonBy = "Red";
      //println("gameWonBy Red");
    } else if (positions[0][2]==1 && positions[1][1]==1 && positions[2][0]==1) {
      gameRunning = false;
      gameWonBy = "Green";
      //println("gameWonBy Green");
    }
  }
}

 

Week 3: Object-oriented Programming

This weeks exercise took a lot of time, or should I rather say, I spend a lot of time playing around and getting to know Processing better? I rewatched and followed along the different video tutorials by The Coding Train which helped a lot but also led to endless possibilities.

I took inspiration from a Ginkgo leaf and the kaleidoscopes I used to like as a child. I wanted to create several layers of ginkgo leaves that rotate in different directions but are layered on top of one another in the center of the screen. However, when I started writing the code, other ideas and possibilities came to my mind so the first challenge was to make decisions. In-between I tried something else and my final version is also not quite what I initially had in mind but I was able to learn along the way.

The second challenge was whether to start with highest part of the code hierarchy that should just look simple and ‘pretty’ at the end or with creating my own objects and functions. As I am still pretty new to processing, I had no ‘best practice’ but after this exercise I think it’s easier to start with the “pretty” part and then build the “background code” depending on how I want the hierarchy to look like.

My code for this exercise is not fully polished and simplified yet because I ran into some difficulties where I will need to check ‘pass by reference’ and ‘pass by copy’ again but enjoy this little Ginkgo leaf inspired kaleidoscope which reacts to the position of the mouse.

This was the first attempt of creating the basic shape.
This is a screenshot from the final effect.

This is the main code, followed by the code on the additional tab for the Leaf class.

float x, y, r;
float a, b;
float angle;

Leaf l1;
Leaf l2;
Leaf l3;

void setup() {
  size(640, 640); //Instagram format
  background(0);
  l1 = new Leaf();
  l2 = new Leaf();
  l3 = new Leaf();
}

void draw() {
  background(0);

  translate(width/2, height/2); //this centers the shape on the screen

  push(); //I am using push() and pop() because otherwise the scale would apply to the previous value. need to solve this.
  
  l1.display(mouseY/250); //this will change the size according to the mouse position
  pop();

  push();
  rotate(angle);
  angle = angle + 0.5;
  l2.display(1.5);
  pop();

  push();
  rotate(-angle);
  angle = angle + 0.3;
  l3.display(mouseX/100); //this will change the size according to the mouse position
  pop();
}
class Leaf {
  float a;
  float r;
  float angle;
  float s;

  Leaf() { //this sets up the parameters that we can later determine when calling the function
  }

  void display(float tempS) { //this is the basic shape of the leaf
    //translate(width/2, height/2);
    

    s = tempS;
    scale(s);


    stroke(255);
    strokeWeight(0.5); //thin stroke weight to make leaf structure finer
    fill(255);
   
    //this is the basic shape of the leaf (somewhat hardcoded still)
    
    //these are the basic two intersecting lines with a stronger strokeWeight than the other lines
    line(-50, -50, +50, +50);
    line(+50, -50, -50, +50);
    
    strokeWeight(0.01); //this makes the extra lines thinner
    line(-50+r, -50, +50-r, +50);
    line(-50, -50+r, +50, +50-r);
    
    line(+50-r, -50, -50+r, +50);
    line(+50, -50+r, -50, +50-r);

    ellipse(-50, -50, r*2, r*2);
    ellipse(+50, +50, r*2, r*2);
    ellipse(+50, -50, r*2, r*2);
    ellipse(-50, +50, r*2, r*2);
    
    //this adds a smaller ellipse into the bigger ellipse
    fill(255);
    
    ellipse(-50, -50, r*1.5, r*1.5);
    ellipse(+50, +50, r*1.5, r*1.5);
    ellipse(+50, -50, r*1.5, r*1.5);
    ellipse(-50, +50, r*1.5, r*1.5);
    
    r=15;
  }
  
  void move() {
    rotate(angle);
    angle = angle + 1;
  }
  
}

 

Links from class today

Flash Warning- Meera

I couldn’t get very creative with my idea. It was hard trying to think of a fun pattern, I went over my class notes and played around with colors hoping I would get inspired but it was still very hard. the more I played around with the code I was able to see some sort of idea come out of it. My idea is is a colorful street. the dots in the center is supposed to represent a moving road, and the colorful squares are the top of the passing by buildings. the outcome really reminded me of a game but it can give headaches if one was to stare for to long. To be more specific it reminded me of pac man, so I decided to recreate it, or atleast attempt to recreate it.and here are my results.

int w= 30;
int x = 20;
int h = 600;
int center= h;
int paracenter = 100;
void setup(){
size( 600, 600);
background(255,20,147);
rectMode( CENTER);
//noLoop();
}



void draw(){
  
   //circle(300,300, 400);
  
   for (int i = 0; i<width; i+=w){
  fill(random(255),random(255),random(205));
    rect(random(i+ w/2), random(center-50,center+50), x, 100);
     rect(random(i+ w/2), random(paracenter-50,paracenter+50), x, 100);
    
   
    
    fill(239,255,0);
   arc(25, 355, 90, 90, 0, TWO_PI - QUARTER_PI , PIE);
    
     fill(random(0));
    fill(random(255));
    circle(i+w/2,350,20);
} 
  }

Week 2 Animation Assignment

For this week’s assignment, we were asked to incorporate both types of loops, specifically for() and while(), to showcase some various animations, loops, and conditionals.

During the process of making this, I had to go back and rewatch all of the previous class videos from the past two weeks, various Youtube videos online (Dan Shiffman’s are really helpful, will definitely watch more of his videos), and also some other coding tutorial websites and practices online in order to get a better understanding.

Originally, I wanted to make it  similar  to  this  sketch  of  mine,  but  I mainly  struggled  with  creating  the  floating  rectangles.  My   original  plan  was  to  use  the  loops  to  create  multiple  rectangles to float in  randomly  generated  directions  as  well  as  its  colors,  but I was  unable  to  do  it.  However,  I  will  make  sure  to  learn  it  in  my  spare  time.

For this particular assignment, my main personal objective was to utilize both for and while loops in my code and to be able to generate random movements and animations as well as colors. Thought it may be extremely bright to look at due to the different colors changing randomly, I hope you guys like it. Another problem I encountered was when I wanted to use a void mousePressed() function where by clicking the mouse, all the colors would change back to grey or black colors as the compiler stated “unexpected token: void”. This can be found at the bottom of my code where a huge section was disabled with the //. I was unable to figure out why it had appeared this error.

float angle = 100;
int linespace=72;
float y=0;
float x;
float xspeed=3;
float yspeed= 3;
float spacing=50;




void setup() {
  size(1280, 1280);
  rectMode(CENTER);
}

void draw() {
  background(170);

  stroke(150);
  strokeWeight(2);

  //Moving background lines
  spacing=spacing+random(-1, 1);
  //Vertical background lines
  for (int x=0; x<width; x=x+20) {
    line(x, 10, x, height);
    x+=spacing;
  }
  //x=0;
  //while(x<width){
  //  line(x,10,x,height);
  //  x+=spacing;
  //}
  y=0;
  while (y<height) {
    line(20, y, width, y);
    y+=spacing;
  }
  //Failed attempt 
  for (int i=0; i<width; i += linespace) {
    stroke(random(255), random(255), random(255));
    line(i, i, i+5, i+height);
    line(i, i+5, i+width, i+5);
    //The retracting rectangle 
    x=0;
    while (x<width) {
      if (mouseX<1) {
        x+=1;
      } else {
        x+=mouseX;
      }
      fill(random(255), random(255), random(255));
      stroke(240);
      rect(x, mouseY, 100, 100);
      //line(i,i,i,i+height);
    }
    //Spining orange rectangles

    pushMatrix();
    //translate(width/2,height/2);
    translate(mouseX, mouseY);
    fill(random(255), random(255), random(255));
    rotate(angle);
    rect(mouseX, mouseY, 100, 100);
    popMatrix();

    fill(random(255), random(255), random(255));
    rect(mouseX, mouseY, 100, 300);
    angle+=.005;
  }


  //If mouse is pressed, make everthing stop changing colors
//  void mousePressed()){ 
//    for (int i=0; i<width; i += linespace) {
//      stroke(150);
//      line(i, i, i+5, i+height);
//      line(i, i+5, i+width, i+5);

//      x=0;
//      while (x<width) {
//        if (mouseX<1) {
//          x+=1;
//        } else {
//          x+=mouseX;
//        }
//        fill(150);
//        stroke(240);
//        rect(x, mouseY, 100, 100);

//        pushMatrix();
//        //translate(width/2,height/2);
//        translate(mouseX, mouseY);
//        fill(150);
//        rotate(angle);
//        rect(mouseX, mouseY, 100, 100);
//        popMatrix();

//        fill(150);
//        rect(mouseX, mouseY, 100, 300);
//        angle+=.005;
      
//      }
//    }
//  }
}

 

Breathe – For() loop

What I found particularly difficult with this assignment is coming up with an idea. Having a lot of freedom resulted in me not knowing where to start. As I was looking for inspiration, I came across a bunch of gifs for breathing and meditation exercises. Here are some examples.

I see these a lot online and have always found them relaxing. So, I decided to recreate the concept using loops.
After some brainstorming, I settled on using the arc function and a for() loop. Here is the process of how I got to my end result.

First, with the map function, I was able to draw an arc progressively from left to right. I then added the for() loop to get multiple arcs filling the space underneath the first one.
Within the for() loop, there are variables changing the size of the arc the further we are in the for() loop. The same thing happens to the speed of the moving arc so that the arcs don’t all get drawn at the same time.

Then, using the translate() and scale() functions, I recreated the same shape going from right to left instead. I made sure to put this block of code between the pushMatrix() and popMatrix() functions to not affect the rest of my code.

I then put the two together and changed them to different colors for visibility. I also shifted each piece 1 pixel to its side to slightly separate the two.

 

To achieve my final piece, I added slight finishing touches.
I changed the speed of the moving arcs to get a more fluid shape, and I added some colors.
I tried to mimic the colors of a sunset/sunrise with the left shape for a more relaxing feel, and I made the right shape grey to give the illusion of something filling up and then emptying out, thus mimicking the rhythm of breathing.

 

Here is my code!

void setup() {
  size(500, 500);
}
 
void draw() {
  background(0);
  //declaring variables for the colors of the arc
  float r1=51;
  float g1=102;
  float b1=154;
  color c1 = color(r1,g1,b1);
  // the speed
  float speed = frameCount*1.2;
  //the size of the ellipse of the arc
  float x= width;
  float y=height;
  
  for(int i=1 ; i<30; i++){  
    float arc1 = map(sin(radians(speed)), -1, 1, 0, 180);
    float arc2 = map(sin(radians(speed)+PI), -1, 1, 0, 180);
    //left shape
    strokeWeight(5);
    noFill();
    stroke(c1);
    arc(width/2-1, height, x, y, PI, PI+radians(arc1), OPEN);
    //right shape
    pushMatrix();
    translate(width/2,height/2);
    scale(-1,1);
    strokeWeight(5);
    noFill();
    stroke(50);
    arc(-1, height/2, x, y, PI, PI+radians(arc2), OPEN);
    popMatrix();
    //changing the size of the arcs and their speed the further we go in the for loop
    speed -=5;
    x -= 20;
    y -= 20;
    r1 += 10;
    g1 += 1;
    b1 -= 3;
    c1 = color(r1,g1,b1);

  }
}

 

 

 

 

 

 

 

He’s back

For this week’s assignment, we were asked to do an art piece with the use of loops. Personally I feel like my previous week’s assignment, the self-portrait, was a fabulous piece of art. However, I needed to implement the use of loops in my piece, so I used for-loops and nested for-loops to create an introduction for Sir. Got Milk Nathan.

One thing that I hope my code can have in the future is implementing more complicated uses of loops and other functions. This week, some of the harder codings were just figuring out nested loops and implementing a timer mechanic based on frameCount. I also like how people implemented external photos and code snippets into an art piece, I think that produces better effects and I’ll try to do that too.

int timer = 0;
int rectDim = 50;


void setup(){
  size(800,800);
  rectMode(CENTER);
}

void draw(){
  background(0);
  if (frameCount % 30 == 0){
    timer++;
    flash();
    if (timer == 21){
      background(255);
      hair();
      face();
      eyes();
      body();
      Nathan();
      Gotmilk();
      stop();
    }
  }
}
  
void flash(){
    pushMatrix();
      translate(width/2, height/2);
      stroke(255);
      rect(0,0, rectDim , rectDim);
    popMatrix();
    println(timer);
  
  if (timer > 4){
      for (int x = 0; x < width; x += rectDim){
        if (frameCount % 30 == 0){
          stroke(255);
          rect(x + rectDim/2, height/2, rectDim, rectDim);
        }
      }
  }
  if (timer > 8){
      for (int x = 0; x < height; x += rectDim){
        if (frameCount % 30 == 0){
          stroke(255);
          rect(width/2, x + rectDim/2, rectDim, rectDim);
        }
      }
  }
   if (timer > 12){
      for (int x = 0; x < height; x += rectDim){
        if (frameCount % 30 == 0){
          stroke(255);
          rect(x + rectDim/2, x + rectDim/2, rectDim, rectDim);
          rect(x + rectDim/2, height - (x + rectDim/2), rectDim, rectDim);
        }
      }
  }
  if (timer > 16){
      for (int x = 0; x < width; x += rectDim){
        for (int y = 0; y < height; y += rectDim){
          if (frameCount % 30 == 0){
          fill(255);
          stroke(255);
          rect(x + rectDim/2, y + rectDim/2, rectDim, rectDim);
          }
        }
      }
      }
      
      
  }
  
void Nathan() {
  textSize(32);
  fill(255, 102, 178);
  text("Heyyyyy", 10, 30); 

}

void Gotmilk() {
  textSize(30);
  fill(255, 255, 255);
  text(" Got \nMilk?\n  :)", 310, 370);
}

void face() {
  //skin
  fill(255, 255, 51);
  ellipse(350, 200, 100, 140);
  noStroke();
  
  //mouth
  fill(0, 0, 0);
  noStroke();
  arc(350, 230, 50, 40, 0, PI, PIE);
  
}

void hair() {
  fill(255, 0, 0);
  noStroke();
  arc(350, 140, 130, 180, 0, PI, PIE);
}

void eyes() {
//sclera
  fill(255, 255, 255);  
  stroke(0, 0, 0);
  strokeWeight(0.5);
  ellipse(350, 180, 40, 50);
  
//pupil
  fill(255, 0, 0);  
  noStroke();
  ellipse(350, 190, 20, 20);
  
}

void body() {
  
  //arms
  stroke(255, 255, 51);
  strokeWeight(30);
  line(280, 320, 220, 400);
  stroke(255, 255, 51);
  strokeWeight(30);
  line(220, 400, 200, 530);
  
  stroke(255, 255, 51);
  strokeWeight(30);
  line(420, 330, 470, 400);
  stroke(255, 255, 51);
  strokeWeight(30);
  line(470, 400, 490, 530);
  
  //neck
  stroke(255, 255, 51);
  strokeWeight(9);
  line(350, 270, 350, 290);
  
  //T-shirt
  fill(0,0,0);
  noStroke();
  rect(350, 410, 150, 250, 15);
  
  //pants
  
  fill(0,76,153);
  quad(275, 515, 270, 820, 340, 820, 350, 515);
  fill(0,76,153);
  quad(350, 515, 355, 820, 425, 820, 425, 515);
  
  fill(102,51,0);
  rect(350, 515, 160, 20);
  
  stroke(255, 255, 51);
  strokeWeight(30);
  line(290, 835, 320, 835);
  line(375, 835, 405, 835);


  

  //sleeves
  noStroke();
  fill(0,0,0);
  triangle(285, 290, 240, 330, 275, 360);
  fill(0,0,0);
  triangle(415, 290, 410, 370, 460, 330);
}

YOUTUBE VID NEEDS TO BE WATCHED IN 1080 RESOLUTION OR IT WONT WORK

http://vimeo.com/user123608994/review/460111802/0c51e48127

Creating artwork

For this assignment, I created an artwork where you can see a group of wheel-looking objects rotating in different sizes. Personally, this resembles the solar system because the wheels seem to have their own orbits and rotations in place. The wheels are comprised of equally sized rectangles and they create an effect that looks like pulses. Enjoy!

float c1 = random(255);
float c2 = random(255);
float c3 = random(255);
float c4 = random(255);
float c5 = random(255);

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

void draw() {
  background(c1, c2, c3);
  
  pushMatrix();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 20.0);
  ring(c1, c2, c3, 1, 20, 20, 1, 50, 20, 0.01, 0.01);
  popMatrix();
  
  pushMatrix();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 200.0);
  ring(c2, c4, c1, 5, 70, 20, 1, 100, 100, 0.1, 0.1);
  popMatrix();
  
  pushMatrix();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  ring(c3, c5, c2, 10, 50, 50, 5, 50, 100, 0.1, 0.01);
  popMatrix();
  
  pushMatrix();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 100.0);
  ring(c4, c1, c3, 20, -200, 200, 10, 200, 100, 0.01, 0.01);
  popMatrix();
  
  pushMatrix();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 100.0);
  ring(c5, c1, c2, 16, -120, 120, 10, 200, 200, 0.01, 0.1);
  popMatrix();
  
}

void ring(float col, float col2, float col3, int h, float x, float y, float radius, int npoints, float amplitude, float speed, float granular) {
  randomSeed(0);
  stroke(0);
  fill(col, col2, col3);
  float angle = TWO_PI / npoints;
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    float freq = frameCount*speed + (x * granular);
    float adjustedHeight = noise(freq);
    adjustedHeight -= .5;
    adjustedHeight *= amplitude;
    pushMatrix();
    translate(sx, sy);
    rotate(a);
    rect(a+sx, sy, 8, h + adjustedHeight);
    popMatrix();
  }
}

void mousePressed () {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    c1 = random(255);
    c2 = random(255);
    c3 = random(255);
    c4 = random(255);
    c5 = random(255);
  }
}