Processing 2 Overview

In my last processing project I drew my inspiration from the self sustaining processing programs that were shown in class. I like the idea of a program that runs by itself and creates a work of art by itself by only putting in a few variables that are predetermined before the program even begins to start running. I first made a grid by setting one variable and adding one hundred to the variable to make a grid. After I made one grid I made another because I did not think that one was enough. I then made two balls that would bounce around the screen and I attached a line from the points on the grid to the bouncing balls. On top of the balls I put a circular vector shape to give the balls more of a life. At this point in time I did not have anything that made the program interactive. i decided to code the keys g, h,j,b,and n. two of the keys i copied the code of the first two balls code and assigned them to the keys. the only thing that i changed is the direction in which the balls were going. And instead  i also changed the color of the strings in which attached themselves to the grid. The last thing I wanted to do was to make a way to reset the art piece so i gave one of the keys a background so that the strings would not record while button was being pressed.

I did run into some problems that i never resolved. The first problem was that i wanted the actions of the keys to work once the key was clicked not held. The second problem was that I could not get two actions from two keys to work at the same time. I think that the best way to solve that problem would be to solve the first.

Overall I loved this project. I think that I will continue to learn and use this program. I only wish that there were classes that I could take to continue learning. A few weeks was not enough.

CONTROLS

g - resets draw by replacing background

h - adds ball with blue lines attached to grid

j - adds ball with red lines attached to grid

J - adds ball with random color 

b- freezes picture 

n- speeds up balls X2

CODE:

int size =60;
PShape soccer;
float xpose, ypose;
float xpose2,ypose2;

float xspeed = 12.7;
float yspeed = 10;
float xspeed2= 8;
float yspeed2= 5;

int xdirection = 1;
int ydirection = 1;
int xdirection2= -1;
int ydirection2= -1;

void setup(){
  size(750,750);
  soccer = loadShape("soccer.svg");
  background(0);
  smooth();
  noStroke();
  frameRate(60);
  xpose = width/2;
  ypose = height/2;
}
 
  void draw(){
    if (keyPressed){
      if (key == 'y'){
        stroke(random(255),random(255),random(255));
      }
    }

    if (keyPressed){
      if (key == 'g' || key == 'G'){
        background(0,255);// i wanted the program to continue doing
        // this until another button was pressed but it only
        //works when the button was held
      }
    }
    if (keyPressed){
      if (key == 'h' || key == 'H'){// i had the same problem with 'h'
      //as i did with 'g' the button must be held in order for it
      //to work :(
        stroke(0,0,255,255);
       
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose+size/2, ypose2+size/2,2,2);
 
       
        for(int a =0; a <= width; a = a+100){
  for (int b=0; b <= height; b = b+100){
    line(a,b,xpose+size/2, ypose2+size/2);
  }
        }
        shape(soccer,xpose+size/2, ypose2+size/2,125,100);
      }
    }
    if (keyPressed){
      if (key == 'j'){
            stroke(255,0,0,255);
       
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose2+size/2, ypose+size/2,2,2);
 
       
         for(int c=50; c <= width; c = c+100){
      for(int d=50; d <= height; d =d+100){
line(c,d,xpose2+size/2, ypose+size/2);
  }
        }
    shape(soccer,xpose2+size/2, ypose+size/2,125,100);
      }
    }
    if (keyPressed){
      if (key == 'J'){
            stroke(random(255),random(255),random(255),255);
       
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose2+size/2, ypose+size/2,2,2);
 
       
        for(int a =0; a <= width; a = a+100){
  for (int b=0; b <= height; b = b+100){
    line(a,b,xpose2+size/2, ypose+size/2);
  }
        }
    shape(soccer,xpose2+size/2, ypose+size/2,125,100);
      }
    }
      if (keyPressed){
          if (key == 'b' || key == 'B'){
            frameRate(0);
          }
        }
        if (keyPressed){
          if (key == 'n' || key == 'N'){
            frameRate(120);
          }
        }
        //I have no idea why this does not work
        // it was supposed to start the program again
        // in the sense that the balls would start moving again
        // but it doesn't the whole thing just stays with a frame
        // rate of (0);  so instead i just made the frameRate
        // increase if pressed before 'b' or 'B'
        noStroke();
    noFill();
   
    xpose = xpose +( xspeed * xdirection );
    ypose = ypose +( yspeed * ydirection );
   
    if (xpose > width-size || xpose < 0){
      xdirection *= -1;
    }
    if (ypose > height-size || ypose < 0){
      ydirection *= -1;
    }
   
    ellipse(xpose+size/2, ypose+size/2, 2, 2);
   
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection2 *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose2+size/2, ypose2+size/2,2,2);
 
   
    if (mousePressed == false){
      noCursor();
      stroke(100,255);
      for(int a =0; a <= width; a = a+100){
  for (int b=0; b <= height; b = b+100){
    line(a,b,xpose2+size/2, ypose2+size/2);
  }
      }
 
   
    for(int c=50; c <= width; c = c+100){
      for(int d=50; d <= height; d =d+100){
        stroke(0,255,0);
line(c,d,xpose+size/2, ypose+size/2);
  }
      }
    }
    shape(soccer,xpose+size/2, ypose+size/2,125,100);
    shape(soccer,xpose2+size/2, ypose2+size/2,125,100);
   
  }
 

Drawing 2

int rw =10;
int rh =10;
int diam =10;
float a = 200;

void setup(){

size (720,720);
frameRate(5);
smooth();
background(180);
stroke(0);
strokeWeight(10);
fill(255,1);

}

void draw(){
  a = a - 2;
  if (a < 0) {
    a = height;
  }
  line(0, a, width, a);
    if (mousePressed == false){
  if (rw<=width){
rect(a,a,rw,rh);
rw+=10;
rh+=10;
}
}
if (mousePressed == true){
  if (diam<height){
    ellipse(mouseX, mouseY, diam, diam);
diam+=10;
  }
}
}

I did not really know what I was supposed to do so I made my drawing draw itself. It is completely different every time you run the program. when you click a ellipse radiates out from where click and a rect radiates from a point 200,200 to 0.0 and a line moves from 200,200 to the top.

Processing Practice Image 1

size(500,500);
background(0);
smooth();
noStroke();
fill(0,0,255,255);
ellipse(250,250,100,100);
fill(250,255,0,150);
ellipse(200,250,100,100);
fill(255,0,0,150);
ellipse(300,250,100,100);
fill(0,255,0,150);
ellipse(250,200,100,100);
fill(255,145,0,150);
ellipse(250,300,100,100);
noFill();
stroke(0);
strokeWeight(75);
ellipse(250,250,200,200);
noStroke();
fill(0,255,0,255);
beginShape();
vertex(247, 312.5);
vertex(258, 312.5);
vertex(258, 500);
vertex(247, 500);
endShape(CLOSE);
beginShape();
vertex(247, 400);
vertex(220, 370);
vertex(220, 350);
vertex(235, 360);
endShape(CLOSE);
noStroke();
fill(255, 0, 239, 50);
beginShape();
vertex(180, 180);
vertex(320, 180);
vertex(320, 320);
vertex(180, 320);
endShape(CLOSE);
fill(255, 0, 0, 50);
beginShape();
vertex(250, 350);
vertex(150, 250);
vertex(250, 150);
vertex(350, 250);
endShape(CLOSE);


This Practice Image took me a lot longer then I had initially thought it would take. I am used to doing math in my head but this brings a whole new meaning to the phrase. To make some of the things line up I had to either use Trigonometry or the guess method to find where points would intersect. I then used guidelines that I later deleted after I was done using them in order to make sure that points added up. I am looking forward to adding motion to my processing skills in the weeks to come.

Interactive Video Project

When we first started this project I had no idea what I was going to do, let alone how to make the video interactive. I began to think of things that I use everyday that we interactive, and the one that kept coming back to me was video games. Almost every kid (male(some female)) that I know has owned at least one video game in their lifetime. I wanted to do a spin off of a game. I had no idea how to make an actual game so I decided to go with the next best thing which was a video in which a fight occurs and though you win every time you can choose how you win. One of my favorite video games as a kid was Mortal Kombat. I decided I wanted to do a simple comical version of the game that involved stick figures. I used a program called pivot to make the animated gif.s that I used to create the project. The rest of the project was pretty simple. I made a sub-site to the site that I made for the last project. I made each page link to one an other either by clicking on one of the gif.s or clicking on one of the Divs that I created at the bottom of the page. These Divs ended up linking to the finishing moves that I created in pivot. I had a great time doing this project even though it took a lot of time to create even something as simple as this project that I made. I hope everyone enjoyed my project as much as I did making it.

My site

For my first official web site, I don't think that I did too bad. However, there is a lot that I still want to do with the site. First and for most, I want to change the banner. My name is hard to read and it is not at all the look that I want it to be. I only made the banner that is there now as a placeholder while I work on an official one. second off I want to float everything i want to center everything so that depending on the size of your screen it always looks the same. i plan on making a container div around the whole site that floats in the middle of the screen. I am also going to change the way the banner on the side looks by using graphics that i design myself. however over all i have the look how i want it and that is how i am going to keep it.