Computational Media

Intro to Computational Media.
Instructor: Daniel O’Sullivan

ICM Final Project – Sound & Vision

For my final project I decided to combine visual effects and sound. At first I wanted to make an audio visualizer, focusing on objects in 3D space. I started working in p5, but quickly realized that the 3D possibilities of the program aren’t fully developed yet.

That fact led me to try my luck in Processing. Despite my lack of previous programming experience, switching from javaScript to Java wasn’t very hard, so I continued working on my project in that software.

Screen Shot 2015-12-01 at 10.55.49 PM Screen Shot 2015-12-01 at 10.55.01 PM

During this time, I came across an incredibly satisfying video(click), which depicted a connection between a piece of music and its visualization. This inspired me to slightly change my general idea.

Screen Shot 2015-12-02 at 12.39.45 AM

Because of my industrial design background I was drawn to play with sketches in 3 dimensions.

My goal was to mimic the collisions in the video, replicating the way the audio responded to these collisions in my own way.

Screen Shot 2015-12-01 at 10.56.32 PM Screen Shot 2015-12-01 at 10.58.19 PM

Although I was attracted to the flat design of this video I preferred to continue developing my 3D skills.

While the project was progressing I kept stumbling across more inspiration. Each piece seemed to feature shaders and different addons, which steered me to switch to OpenFrameworks.

After struggling with installing Xcode, I converted my Java sketch to C ++.

I have to admit that was a pretty challenging task for me, both in creative, and programming way.

I spend a lot of time struggling with shaders and addons, that didn’t want to run on the newest version of Xcode, so I decided to downgrade my program to 8.4 version.

That made my life easier in terms of addons, but made it harder in terms of functions, which sometimes weren’t compatible with the ones on of reference website.

Firstly, I created a spiraling wave made out of turquoise spheres. Then, decided to draw another set of sphere (white ones) floating around the wave. My goal was to give them random speeds and positions, so that they could touch turquoise line at its different parts and moments. The moment when two sets touch each other triggers random note, so that the can create some sort of music.

Screen Shot 2015-12-01 at 5.20.58 AM

Later on, I focused on details, such as color change, particle system ‘exploding’ from the sphere that touches the line, and finally my favorite – blur and glow effect.

Here’s the final effect:

less blurry version:

I’ve learned a lot from this project . I’m amused that in such period of time I could learn so much. I feel very satisfied with the effect of my work, although I have many ideas of how I could improve my code if I have more time. Hopefully, I’ll be able to play with it really soon.

Sound Visualization – Final Project Idea

For my final project, I’d like to make Sound Visualization. The software I’d like to use is Processing. I’m considering creating 3D pattern, based on one single sine wave.

I’d like to keep ‘outer-space style’, I feel really inspired by TRON the Legacy:

I found plenty cool stuff on the internet and made a general mood board of the style I’d like to implement to my project.

moodboard

To display music I wanna use single element, like a sine wave, and multiply it once music changes:

audio_wave-4 18myedxaumwzdjpg still_2729 4043554107

Also, I really enjoyed watching this:

Video Capture

Screen Shot 2015-10-28 at 12.09.10 AM

This week I’ve been playing with video capture and sound.

Finally, I started with creating the grid. Initially, I planned to fill my screen with squares, but finally I ended up with ellipses. The idea was to calculate the average of R, G and B values from the pixels inside each circle and fill that circle with the new ‘average’ color.

Once I finally figured out how to make it, I came up with the idea of expanding the grid according to the mouse position. The circles grow when mouse goes to the left part of the screen.

Video Capture from Marcela Nowak on Vimeo.

Screen Shot 2015-10-28 at 12.09.18 AM Screen Shot 2015-10-28 at 12.09.35 AM

The hardest part was to map the video size to the bigger Canvas.

I had to map not only the video, but also ellipsis sizes and their positions.

You can check it out HERE

 

Planets

 

SPACE

This week’s assignment, was to create a sketch using data. At first, I wanted to use xml file, but it seemed to be still a little bit buggy. I didn’t manage to get rid of error even after posting the problem to our ICM group, and emailing Dan Shiffman.

So, I tried with json. After struggling with that case it finally worked out.

Screen Shot 2015-10-21 at 2.42.29 AM

My idea was to create a simplified solar system visualization. Sadly, the sun turns out to be too big in comparison to the planets, so eventually I just marked it as a small spot in the center of our solar system… To create my animation, I used real planets’ data, such as: their distance from the sun, velocity, diameter and speed. I couldn’t find any good database, so I ended up creating it myself.

Screen Shot 2015-10-21 at 7.44.21 AM

By dividing it and adjusting to my canvas I was able to fit most of the planets on the screen. At the end I also used scale(); function.

Once you click on the planets’ buttons, placed in the top left corner, you’ll get information about planets.

Screen Shot 2015-10-21 at 7.32.40 AM

Link to sketch: PLANETS

Fireworks

Untitled-3

I wanted to experiment with shapes a little bit ,so I decided to form my fireworks out of tiny triangles. That was the first time I’ve used  ‘sqrt’ and ‘rotate’.

The trick was to explode fireworks at certain points of the screen. To make it happen I combined ‘gravity’ and ySpeed.

I created different types of fireworks, which comes up randomly, after we click.

I’d really like to be able to explode them at different heights, but when I set up my gravity as ‘random’ the fireworks loose their shape.  I’m still working on that so I might update the file.

You can play with fireworks HERE

Synthesis

This Friday, our whole 1st year had an event called Synthesis. The focus for that workshop was a design challenge. We were supposed to create an experience in the browser using p5 that responds to a single interaction — the press of a button.

My partner Xiqiao Zhou and I reworked my ICM game, replacing arrows with a button.

Here’s the video of the result:

 

It was so much fun combining Arduino and p5. I saw many great ideas that were very inspiring.

Constellations

Screen Shot 2015-09-30 at 5.30.56 AM

This week I continued practicing organizing my code. I had many ideas, of what I could create, but then finally decided to listen to my heart.

There’s one thing I really miss in NYC – I have never see the sky fill with stars at nigh here. I used to see it back in Poland, but unfortunately, the light pollution of the city prevents the stars from being visible. Dreaming about my lovely night, I started creating my own, p5 night sky.

Practicing arrays, loops and functions, I ended up with a nice night sky, full of my beloved stars. To add some magic, I decided to add some movement to the stars, which move in circle.

That was a good opportunity to practice ‘sin’ and ‘cos’.

Moreover, I wanted my project to be more educative, so I singled out stars, which creates constellations. Here, I added a small drawing simulating animation, which one by one, shows constellations on a sky.

I also added 2 hidden features:

mouseDragged – adds more falling stars

keyIsPressed – displays constellations’ names

Link to sketch HERE

Have fun learning!

Dots – my first game

dot

I came up with this funny idea of a game. The goal is to get to the other side of the road without touching any other dot. Each touch increase our size, making it even more difficult to pass.

Here’s how it looks like when you succeed:

Moreover, if we’re feeling strong enough we can make the game harder by adding more ellipses to the game. To be able to do it we must click and drag the mouse through the canvas.

but… this is a total hardcore. Free drinks to anyone, who’s gonna pass it!

This game is my introduction to Object Oriented Programming . I really wanted to learn it. And although I’m still very confused with this topic , with a great guidance of Moon, I was able to program this game in more professional way . I still need to practice this. It’s still very fresh for me. I didn’t let myself to add more options, even though I had 12345 crazy ideas of how to improve it!

I will do it next time, as a reward for myself that I can use arrays and feel comfortable with Object Oriented Programming.

I can’t wait for that moment. I’m so excited!

If you wanna play the game, here’s the….

LINK

Good luck!

Dots

dots

I came up with this weird idea, and decided to practice my p5 skills a little more. Firstly, I wanted to create some ellipses,  which would follow the cursor with a different delays.

 

Then, inspired by clock and solar system, I made some randomly shaped circular paths, for another set of ellipses.

The ellipses in the background use nested loop function. To make it more fancy, I made this ‘flashing’ effect by setting ellipses’ opacity to random.

I also added two additional ‘hidden’ features, which plays more with the background.

 

Surprisingly, one of the most important thing I’ve learned thanks to this sketch, is that I definitely should write my code in an organized way! I created so many variables, so many elements that I almost got lost! I need to work on that a lot…

CODE