So for my interactive drawing, I chose to create a season changing animation following a leaf through each scene. I was going for a very zen/peaceful experience from the viewer. I believe I succeeded in making this effect. The animation itself was fairly easy to create. I hand drew the leaf in flash then exported it as a png sequence. This came out of the process with the wrong format and numbering sequence, so I brought it into photoshop where I rendered the video with the proper settings. I then painted over a forest scene to create one basic background of just trees to keep that a constant in the animation. I made 3 layers of it and painted each season. I imported those pictures into flash again and made them move with tween frames and did the same process I did for the leaf to create the image sequence. I struggled with the pd patch a little to get it to do what I wanted. The logic was in place some times but didn’t do what the code said which was weird. This is the end patch:
So this week in Inter-Media Electronic Arts we got to play with the MaKey MaKey. At first, I was worried that the MaKey MaKey would be similar to the Arduino, which required an understanding of circuits and some general ECE concepts (scary!), but it was actually wonderful to work with. The way the MaKey MaKey works, is that it is simply an additional “keyboard” and inputs to the Makey Makey are just interpreted as keystrokes on a keyboard. Then you use conductive materials and alligator clips to make different objects act as input devices with the Makey Makey.
Here is an example from Makey Makey’s site of what type of objects you can use with the Makey Makey.
The artist here used alligator clips to attach bananas (which are conductive) to the MaKey MaKey. The artist then either wrote, or opened a piano-playing application on the computer. By hooking up the bananas to whatever keys played the different notes on the piano in the applications, the user could “play the bananas” like she was “playing a piano.” It’s actually really simple, but really neat!
So our task this week was to use the MaKey MaKey (hooked up to our own drawing) and a set of our own animations to create some art.
That was a pretty open ended assignment, so everyone created something quite different from each other. I decided to pick up where I left off last week, by starting with my interactive animation and enhancing it.
For the project there were a few requirements. There had to be sound in our project, and we had to create a pencil drawing or “map” that would control our animations. Starting with my interactive animation from last week, I got rid of the other two animations and stuck with the Pikachu animation. Then I enhanced the Pikachu animation by adding more parts to it. In PureData I added sound for Pikachu coming out of the Pokeball and for Pikachu summoning the thunder. I also added a sound that played on default while the application was running.
I chose sounds for my project that were from the original Pokemon games. I thought these were fun, fitting, and nostalgic for many WPI students. Once I got the clips, I trimmed and edited them appropriately in Corel Video Editor until they sounded like continuous loops. The “Pikachu” sound and the thunder crash aren’t loops, because they only play as the lightning is crashing down.
For my “map” that would control my animations, my goal was to make it artistic. The drawing that was the controller for the MaKey MaKey was supposed to be as interesting and beautiful as the animations themselves. I drew my animation so that it was a sequence: a closed Pokeball, a Pikachu, and an open Pokeball. The idea is that you first open the Pokeball to let Pikachu out. That is why it starts as closed. Then you call on Pikachu to use Thunder. This is why you tap Pikachu as the second step. And last, the Pokeball is open, meaning Pikachu is still outside it. So tapping the open Pokeball returns Pikachu to it, and the animation sequence ends where it started: with a closed Pokeball.
I made a video of all this below, and I explain a bit of what I did while I demonstrate the MaKey MaKey attached to my drawing working together with my PD patch with my animations.
I chose a soccer theme when designing this project including an interactive soccer field connected to the MaKey MaKey, and 3 soccer based animations to attribute. My map has 3 points of interest, one point located on the corner of the field, one located roughly 20 “yards” away from the goal, and one off to the right in the middle of the field. The first two points activate animations based off of where the points are and what would happen in a game at those locations. The third point I simply used as a ground for easier access. I found my audio tracks from the class materials websites and edited everything using camtasia studio. Ba ba americano!
Creating the animations for this project was a tedious process in photoshop, recoloring every frame from scratch. I chose the method of uploading a video into photoshop from youtube and then creating a transparant video layer to sketch over the viedo with, creating my own simple animation. I found it to be much more time consuming than I thought, but worth it in the end. I uploaded clips from FIFA 13 and used those as models when creating my animations. Fun Fact: The person juggling is modeled after Neymar; the freekick was modeled after Ronaldo, and the corner kick was modeled after Rooney.
Hello again. So I just finished my first Project right now, had a lot of difficulty on some parts but I think I managed to get it working.
First, as I am not particularly an artist, I decided to get some assets and edit them in photoshop for this project. I got the character assets from this site:
and used Audacity to extract the parts I actually needed.
After all the Photoshop-ing I am ready to work on the actual coding.
On load of the patch, I have a loadbang that creates the window, preload/downloads the images, and loads the sounds. Here is what the loadbang for sound looks like:
You can see that I used relative paths for both of them. This is to make sure the files could be loaded even when the folder is copied to a different computer. Also, loadbang automatically starts and loops the ambient loop, but does not start the jump sound because the jump sound should only play once when the player presses the jump button.
Now, let us look at the jump portion of my code:
At the top, I have a sel object. When the player presses the jump button, a toggle will turn 1. So using the sel object, I can bang only when the player presses the button. Since I only want the jump sound play once for every jump, I have a oneshot object to ensure it only plays once. The counter at the middle starts from 0 goes up to 30 and down back to 0. This value is used to change the y position of the character up and down, as if it were jumping. Once the value goes back down to zero, I send a bang to the clear object at the top which resets the oneshot object so that it could play the jump sound once again.
I wanted the character to have its moving animation whenever the player holds down left or right. This was one of the parts that was slightly challenging because for our previous assignment we only learned how to do oneshot animations and looping animations, not animations that move on keydown and stop on keyup. Here is a small portion of my code:
This code is where I am getting toggles from keypresses of the left and right arrow keys. Whenever they get a 1, they start the metro which is used for starting the animation and for moving the character position either left or right. From some google-ing I figured that I could just stop the metro at any point using the stop object, so whenever the sel is equal to 0 I decided I would send a stop to the metro. This worked fine.
At this point I only had 1 background with the character moving back and forth through the screen. This was fine, but I wanted the background to change once in a while. Here is how I did it:
When going off screen either left or right, I kept track of the number of times the player did that. From that value, I used the mod object so that a number between 0 and 2 gets output. Finally, I used a sel object to hide/unhide the corresponding background image (here I have 3, hence I used mod 3). Going right I basically kept adding to the sum, and going left I subtracted from the sum value.
Once all of this is done, making the controller is quite easy. Four buttons and an “Earth” and done!
So for my first two assignments with animating in pd, I made an abstract cow and coffee. The first assignment was a challenge because I had to make the cow out of primitive shapes and position them in their own gemheads so I could move them independently. I had to figure out how gemheads work.
The second assignment went fairly well. I made all the assets in photoshop and laid them all out on on gemhead. I had difficulty similar to what happened in class, but I was able to figure it all out later on. I am quite proud of what I was able to create.
Both videos have audio which explain what you are seeing.
Assignment 1, the geometric abstraction, takes place in a party-like setting, where the viewer is the looking through the perspective of the wall.
The interactive animation that I made for assignment 2 takes place in a home-like setting, where the user can interact with the cup of juice sitting on the table, and both windows. These animations are triggered when gemmouse detects that the user’s curser is between the correct coordinates, and that they are clicking the left mouse button.
Hey guys, my name is Jay and I’m going to talk a bit about my interactive animation. For this project I found a picture of a volcano scene with some wonderful Alpaca’s in the foreground. This Patch consists of three animations, 2 of which are activated by mouse over and the third, a click. The animations include: a meteor falling from the sky, activated by moussing over the alpaca on the right, a series of stars forming over the volcano (paramount), activated to the left of the ice cap, and finally a volcanic eruption, started by clicking on the volcano. I created all of these animations by drawing in Photoshop and then transferring them into PD. Hope you enjoy!
My name is Alex Silk and I’d like to use my first blog post to show you my interactive media using the gemmouse and simple animation features in Pd Extended. Here I found a pastel looking picture of a desert landscape though Google and incorporated 3 animations to execute when rolling the cursor over 3 specific locations. Using Photoshop I was able to create all 3 of my animations. A solution I found for presenting the final copy correctly was numbering each animations’ gemhead accordingly so the transparent animations were layered on top of the animation with the integrated background. In my case I let the Cactus Animation have the integrated background and the remaining two layered on top with transparency.
My name is Adrienne Weishaar and I would like to share with you the work I have created with Pd extended.
My first piece is the Geometric Abstraction. I used circles, squares, and triangles with different colors, scales, rotations and translations to give them the different effects. With metros and bangs I was able to click one centralized bang that started the animation of these simple geometric shapes. Here is my final piece.
My second piece is an Underwater Animation. This was a more challenging design for me but I am very satisfied with my final piece. For this project I downloaded the underwater scenery from a Google image. Using Photoshop I created the animations of shark swimming across the screen, a jelly fish swimming upwards, and a submarine peaking up from deep in the ocean. After I rendered each animation, I downloaded them into Pd Extended and added triggers to the animations. During the video of my final animation, you will be able to locate the trigger locations. All triggers are simple rollovers. Enjoy!
