Processing – Final Project

After all these lesson it was time to close it up with a final project for MSA. I decided to take  different parts of the things we learned in this lesson and mash them up together to make into one final piece. I wrote down some of the ideas i wanted to do and i ended up with the idea of making a pulse wave that follows a song i picked. There were some errors in the code sometimes or things didnt work as i wanted them to work but in the end it was worth it and the result is what i wanted it to be!

 

So i started up by making the usual skeleton of the program. Firstly i saved it and then i made a ”data” folder to input the image i wanted to use as a background and the song that i wanted to play along with my animation. After that i started working on a pulsating sphere that would be in the middle of the window that is beating in the rhythm of the song! I typed in the code of the color and how the sphere would look like and where it will be placed. Next i wanted to add some moving lines on the back of the sphere like a graph but they would be constantly moving.  Changed their color  so you could see them and be different from the background. I made 4 WHILE statements, each one for each line and the only thing i changed is the time on each one of them so they would move differently from each other. The next i wanted to do is how the circle in the middle will beat to the song. So i started experimenting with different kind of numbers for the growth and shrinking of the circle to find a nice beating motion. Then by just changing the modulo ”%” of the code i could change on how fast or slow the beat of the sphere would be. At last i wrote down the code to add the music file in my project and voila done! Enjoy this little video with how i made my project and the end result and ill place the code underneath it!

 

 

 

 

THE CODE:

 

int csize = 50;
int grow = 0;
int n = 0;
float time = 0;
PImage img;

import processing.sound.*;
SoundFile file; //this inputs our music into processing

void setup() {
size(500, 400);
smooth();
fill(59, 198, 187);
file = new SoundFile(this, “pyramids.mp3”); //sound file for the music loaded from data
file.play();

}

void draw() {
background( img=loadImage(“pyramid.jpg”));
stroke(255);
strokeWeight(2);
float x = 0;

while (x < width) {
point(x, height * noise(x / 50, time));
x = x + 1;
}

time = time + 0.02;

float y = 0;

while (y < width) {
point(y, height * noise(y / 100, time));
y = y + 2;
}

time = time + 0.02;

float k = 0;

while (k < width) {
point(k, height * noise(k / 150, time));
k = k + 3;
}

float u = 0;

while (u < width) {
point(u, height * noise(u / 200, time));
u = u + 4;
}
time = time + 0.02;

if(n % 30 == 0) {
grow = 5;
}
if(csize > 80) {
csize = 80;
grow = -2;
}
if(csize < 50) {
csize = 50;
grow = 0;
}
ellipse(250, 200, csize, csize);

csize = csize + grow;
n = n + 1;

}

Processing -Typography

After all the different kind of interactions that we can do with the keyboard and mouse we decided to make one with just typing letters in a small window.

After making our window we made a float with how big the letters will be typed in and where they will start and end. Then after fixing the font size ect we wrote down our ”void keyPressed” code one how the letters will appear when we are writing and how much we can actually write down, the width and the height of the text and using the IF statements we are done! here it is, enjoy!

 

Processing – Mouse Interaction

We did some interactions before which we used the mouse but this time we will use the buttons of the mouse and not only just its movement.

As we learned till now we make our window, choose the size and then we start making what we want to happen, meaning our idea. It will be a black window and every time you press the mouse, ripples will appear like a water effect. After making the background window we start writing down the code with which the mouse key pressing will work and make the ripples appear. We used the code ”void mousePressed” similar to the one we used with the keyboard buttons and made floats of how the rings will look, how they will appear and how they will work together with the press of the mouse button. We also used booleans to tell when the mouse is pressed and when a ripple should start at which place of our window. Took some time to find the exact positions and coding to make this work but it was worth it! Here is the result, enjoy!

 

Processing – Arrays

This lesson we learned how to use arrays and made a small heart beat meter that interacts with our mouse!

To make this simple coding we used  FOR statements and integers to put everything together. We put some mouse codes to make the image possible of moving with where the mouse goes. After finding how exactly we will make our window and where everything will be placed we wrote down the code and this is the amazing result!Enjoy!

 

Processing – 3D Sketch and Faze Sketch

After all the interactive games and animations we decided to work with static images and how we can change their opacity shape and maybe form.

First of all to put an image in our processing code we need to save the code and then make a new folder in it with the name ”data” there we will put everything that we want to put in our code that being images or even songs.

We started by trying the faze effect on an image. By loading our image we coded the program to slowly make the image appear in the shape of pointillism. The points which will appear and make our image we made them appear randomly every time and we picked the RGB colors depending on the pixel colors of our image. After that we shaped our points as ellipses and chose how big they are going to be. And here you can the video on how we did it.

 

After that we decided to take our previous image and break it, into a million 3d pieces. We followed the same pattern as above with some changes. We loaded the same image, decided on background and then instead of using floats we used Integers to decide how big the size of the pieces/cells that the image will break into will be. We connected it with mouse interaction that way depending on where we move our mouse to the pieces will move accordingly. By finally finding the coordinates, sizes and spaces were we will place the pieces of the image we had an amazing result and youll see the result yourself here! Enjoy!

Processing – Small Game

This lesson we upped our game a bit and we decided to make a small interactive game with a score board!

There were so many things we had to fix and think of to make a game that works and loops without stopping for whatever reason. It will be a game of a moving sphere that you need to line up with a space on the bottom part of the screen and press ”space” to make it fall down. if the ball falls in the space then you get 10 points if you touch the bottom space that is blocked out you miss and you will lose 5 points! Easy as that.

We started by indicating where our sphere will start, which way it will go and where to start again when it resets. Also we thought of the speed of the ball, how it will interact with the space button and when it has to fall. Lastly we had to make the score board on how you will get points or lose them. All those were placed in the program with floats.

After that we chose the size of our window and made 3 different groups for each thing that we will have and placed them under ”void draw();”

First things first we started with an IF statement with how fast the ball will go and how fast the ball will drop.

After that we indicated where the goals space will be at the bottom of our small game and how to count the score when you put it in the goal or when you miss it. Also we placed a print to say if we got a goal with how many points and if we got a miss with how many points we lost.

After that come the shapes of the sphere and the gap on the bottom and of course the colors and background of it all. So we placed all of those in a draw everything section of ”void draw”

Last thing and most important is to make the ball drop when we hit space, so we added the ”void keyPressed” command to put it all together! Here is the video of how to make this small game, the code and how it works! Enjoy!

 

Processing – Pyramid Keyboard Animation

This lesson we experimented on making an animation with keyboard commands! Same as the way we did the other animations but this time instead of the animation working by itself we make it work by pressing certain keys on the keyboard.

We start by thinking out how this animation will be and what is it going to be based on. We chose that it will have a pyramid that its steps grow and shrink using the upper case and lower case ”n”. Inputing our usual skeleton we measure how tall we want our base to be and how wide. After that all the steps of the pyramid will be based on the base of our pyramid so we make a float that indicates the default height and width of the first step including how smaller the steps after it will be.

When we are done with the measurements we add the key commands!

By typing down ”void keyPressed” we tell Processing which keys we will input to do what things in our animation.

the two last lines are explained like this:

if we press the lower case ”n” the Steps of the pyramid will become less

if we press the upper case ”N” the Steps of the pyramid will become more.

And here is a video with the code and how the interactive animation works.

 

Processing -Extending Boxes Animation

This lesson we looked at frame count and how we can use animation in our program once more.

We took a simple pattern of 5 boxes extending in 5 stages with the top one being the smallest and slowest of them all.

To be exact the first box which is a 50 x 50 is the base of all the other boxes and we make the size of the other boxes by using the first one as a template. We start by setting the default size of the first cube and then using the WHILE loop we tell the program to fix 4 more cubes with each one adding 100 to the height and 50 to their width based on the cube previous to them. Using the frame count too we add animation of the  extending and voila! We have this small animation underneath.

Processing – Ball Score Animation

In this session we looked at how you can make a small animation of a ball passing by the middle of the screen and automatically keeping a score depending on how close the ball is to the middle of the screen.

 

So the way we did it i this:

 

Firstly you start by making a window and choosing the size you want. After that you just place all the shapes you want to use, in this example i made a ball which will be moving, a rectangle around the middle of my window and a ball to indicate the middle.

The i added some frame counts to my ball to make it move towards the center and then away from it.

Then it was time to set the score and how it will be counted. I indicated the middle of the screen by height and width of the window and then i input the command that every time the ball is on the left side it will get a negative score and as its getting closer to the center it will slowly turn to 0. Then as it is slowly drifting away the ball will start getting a positive score till it exits the screen. Here is a video with the code and the example! Enjoy!

 

Processing – Animation

In todays session we learned how to make a small animation and how to save frames directly from Processing. Pretty simple and easy, after you are done with typing in the code for your animation in processing you write this code underneath everything else:

saveFrame(“output-####.png”);

and then you press “play” on processing. It will automatically start saving frames as long as the animation is playing. Once you press “stop” and the animation closes down, it will stop saving the frames and they can all be found in the folder where you saved your processing sketch.

After you are done with saving the frames, you can click “Sketch” on processing and the “Movie Maker”, choose all the frames you want to use and voila! You now have your animation ready.

And thats pretty much it for today.