All posts by Stefan Alexander

For this project I put most of my effort on making the Pd patch to work so my video explains the patch in detail. I tried to explain most of the aspects clearly since I think I wasn’t able to do that in today’s presentation in class.

I put a lot more effort in this video as it is my final video for IMGD 300X (it is available in 1080P). Ask me any other questions with Pure Data if you have any. It was nice working with everyone, and the professor and SA. Thank you very much and have a nice holiday!

For the final project, I decided to make a rock paper and scissors game where you use literally a rock, paper, and scissors.

Here is the sketch I drew in MS Paint that explains what I want to do:


So I am using the rock, paper, and scissor objects as metaphors to the rock, paper, and scissors used in the actual game (or should I say it is more like a reverse-metaphor?) I will make the program part itself all within Pure Data, I think that would be easy enough since I was able to make a game-ish thing when doing the interactive drawing project. Since we only have a week or so I decided to go with a simple game like this. Basically, I will use metro objects for timing and toggle objects for checking which object is selected and binary operator objects for condition checking. I may need some research on details of pure data objects such as the text2d object and how to use the float object. To actually make use of the rock, paper, and scissor objects, I think using the Makey Makey would be a lot simple and easier than the Arduino since I am not doing anything complicated with inputs/outputs. During the weekend I will try to make most of the Pd patch and next week I will borrow the Makey Makey and try it out.


Just a simple test for Arduino to Pure Data.

I connected the Flex Sensor so that I can control the red square in the gem window to move up and down, and the potentiometer to move the square left and right.

The potentiometer was fine but the flex sensor seemed to freak out a lot making the square kind of wiggly.

Now I have to brainstorm more about the final project…

For this assignment I decided to use a Japanese meme, assuming no one else would. Here is the original TV commercial I used.

The commercial shows a high school student who is super motivated to getting into college, but REALLY does not want to study at all. The commercial is supposed to tell you that motivation by itself does not get you into college and you should get tutoring. The way he is shouting and dancing made the commercial a popular meme on the internet among Japanese people. Here is an example of a remix of this meme done by some Japanese person:

Yeah. The dubstep song I decided to use to remix with is Skrillex’s “First Of The Year” and this is the music video for it:

Another remix video that influenced me in using this song is a remix between this and videos of Japanese politicians:

Enough of all the introducing, I will talk about what I’ve done. So when thinking of making a dubstep remix, I figured I should probably cut the song into smaller pieces so that I can playback any part of the song at anytime. But when doing this I needed to focus on making each portion flow smoothly into each other. Luckily (at least for this song), the tempo among the entire song was constant and it was actually fairly easy to cut the song into 10 portions using Audacity. So I brought them into Pure Data and tried out each of the portions. What I found out was very interesting–no matter what order I play each portion, the song seemed to flow quite naturally! Thus, I came to the conclusion that I can automate the dubstep remix by picking a random number between 0 and 9 and choosing the corresponding track portion. Here is the video demonstrating that:

You may notice in the video that while the dubstep is playing, it is sending a bang signal according to the number outputted by the envelope~ object. I used this to automate the banging of the meme video to make the video sync with the  automated dubstep. The only thing I need to do when presenting is just switching the videos (which I could actually automate as well such as getting a random number for each video and a random number for how long to wait between each video switch). Here is the final thing:

Looking at the presentations of my classmates, I really thought it would have been cool using things like game controllers and webcams, but I did not own either and did not have enough time so I just used the keyboard this time. I had a lot of fun doing this remix.

While working on different assignments for our IMGD 300X course, I’ve been reminded several times about a game from Terry Cavanagh.

The game is called Super Hexagon. Here is a trailer for it:

The basic idea of this game is that your are controlling the small triangle in the middle of the screen with arrow keys (hold left to move counter-clockwise and the right arrow to move clockwise).

If  you get hit by any of the incoming ‘walls’ you die and you have to start all over again from the beginning. For new players this is incredibly difficult and they die in approximately 5 seconds (without exaggeration).

At 10 seconds you get to “Line”, 15 seconds is “Triangle”, 30 seconds is “Square”, 45 seconds is “Pentagon”, and 60 seconds is “Hexagon”. So once you get to Hexagon, you have beaten that level.

There are 6 levels in Super Hexagon, their difficulties range from “Hard” to “Hardestestest”–this is suggesting how hard this game is.

What I thought was very interesting about this work was that although the artwork in this game is all just geometric shapes, it is very addicting and many people I have talked to who plays this game really is into it. As we have done with the geometric abstraction assignment, I felt more confident that an artwork does not necessarily have to be so complicated having realistic objects (for example, 3D art in FPS games). Things could be really interesting with only simple geometric shapes, depending on how the composition is or how the objects are oriented. The hardest difficulty of this game only uses black and white objects!

Another reason why I think this artwork is successful is from the music that goes with the game. The music is done by Chipzel, otherwise known as Niamh Houston, and you can preview the 3 songs used in Super Hexagon at the site Looking at her profile you will notice that her music are made from the sounds taken by the Gameboy, which is why it sounds sort of 8 bit. The simplicity of the geometric shapes, how simple the actual game play is, and the 8 bit music brings the whole game together as if it were a single art piece. In a way, this game could be comparable to the original NES games like mario. The sprites are primitive and the music is 8 bit.

For those of you who want to see the actual combination of the three songs with the corresponding levels, I will post some links to each of the levels:




*Each level has a corresponding Hyper mode level, which is basically a faster version of it. Hence there are 6 levels (as a Hexagon has 6 sides!).

From looking at these videos you may notice that not only do the music differ, the types of patterns that appear in each level and the colors used in each level are different, giving each level a different atmosphere. I thought this was really good because to me it felt that the difficulty of the level corresponded to how intense/crazy the music was.

The patterns moving inward and the pulsing overall also gives the player almost a hypnotizing effect, as well as the repetitive music, making you feel like you are high on drugs once you play enough times. I played this game too many times on the iPhone that I beat the entire game, but I still happen to play it once in a while.

The techniques used in this work may be extended to many different interfaces of media. In a way, the recent “flat designs” used in the Windows 8 or iOS 7 is similar in that they make the icons simpler on purpose to give an interesting effect. Things do not need to be complicated or realistic to be interesting. Since I am not an artist and more of a programmer, I would like to be able to make games like this that do not necessarily need sophisticated art assets to be an interesting art work.

So, I guess you are quite interested in this game now. Here is a link to the flash version of “Hexagon”, a simpler version of Super Hexagon that could be played for free on the web browser:

Can you beat my score?


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:

this person made a sheet for Mario animation.


Yes, I am trying to make Mario. This will be fun…

Next I got the sound files from youtube:

Classic VGM 100: Super Mario Bros. – Overworld (Main Theme)

Super Mario Bros. 3 Sound Effects

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!


And here is the demo video of the actual thing:

Thanks for reading!

Hello people! I am Stefan Alexander and this will be my first post. I will be sharing to you guys what I have done so far in Pure Data.

For the Geometric Abstraction assignment I just tried out different manipulations of simple objects such as scaling, translating, and changing the opacity.

Here is what my final project looks like along with the Pd code (it is highly recommended to watch the video at 1080P full screen if you want to see what the code is actually doing):

And for the Interactive Animation assignment since I am not really an artistic person, I decided I would just create a simple face and animate each part.

In Photoshop I first made a plain head with no eyes, nose, or mouth. This is what it looks like:

Used for my interactive animation assignment.

Head image used for my interactive animation assignment.

Then, I made three video layers: one for the eyes, one for the nose, and one for the mouth. After that, in Pd I loaded each of the layers separately.

To be able to trigger them with mouse actions I used the mouse_g and over_g patches that were provided by the professor. At this point I noticed that I need to make sure that the animations will only be triggered when the mouse is overlapping the corresponding area. Hence, I basically made “dummy objects” for each part to record the dimensions and coordinates I need to set the over_g and then deleted those dummy objects.

To make things more interesting, I made the nose animation only be triggered when the mouse is overlapping and it is clicked. So here is the video:

It is an interesting class so far, I am looking forward to Project 1! 😀