ICM - Week 5 - Interactive ITP Show Poster

final_sketch_gif.gif

final version

I was interested this week in making something vaguely in the tradition of brutalist website design (this website is basically the definitive collection). Since I have been thinking about my assignment to design a poster for the ITP Winter Show, I decided to use that as the ‘content’ in this interactive piece.

The first step for me was to create the moving box that would be controlled by mouse movement. I used some code from an in-class exercise to create this effect of the object ‘chasing’ the mouse.

moving_rect.gif

I then added an array to hold all of the words that would float around the screen, and this was when I started to have issues. Despite the fact that it seemed like it should be just a slightly more complicated Bouncing Ball, I just couldn’t get the words to stay on the page.

 come baaaaaack

come baaaaaack

Then when I finally did manage to get them to stay on the page, I seriously struggled with getting the words to ‘reflect’ off of the moving box. It took about 3 hours of me banging my head against the keyboard, a conversation with Dan O, and then two more hours of banging my head( with slightly more purpose) before I got it to work. Ultimately what I did was first test if an individual word was intersecting with the box at all. Then a series of nested if statements tested if the word was intersecting the left, right, top or bottom of the box, and set the direction of movement of the word accordingly.

Once I had this working, I decided to add a few images and a some primary colors to really cement the aesthetic.

ICMStefan SkripakComment