Project 2: Transformation Final

The life of a Bellboy

I had a lot of fun working on this project and I hope it shows in the final product. My interpretation of the idea of 'transformation' was fairly straightforward; that is, an object going from one state to another. The original concept had its merits as a somewhat light-hearted, digital Milgram experiment, but would've been far too linear with the 'instructor' character holding hands with the user and taking them through the interactions step by step. Even though I intended the interactions to all be available from the get go, it would be easy to predict that users would not attempt to experiment with the application if there was someone there telling them what they can do.

In changing from my original idea, then known as Sadism Code, to the current Bellboy, I found it difficult to justify the inclusion of that second 'instructor' character and opted to leave it out. I felt, after taking feedback from my tutors during the interim presentation, the instructor's role had become obsolete after the design decision to push the abstraction of the application and not have any textual instruction be present.

To get this abstraction thing going I decided to take on a very minimalist style and have the user's imagination do most of the work. To do this, there needed to be an overhaul in the design of my 'interactee', taking away the obviously 'human' characteristics of it while still trying to maintain a personality to it. I decided to change the shape from a white square with a distinct face and mouth to the current black circle with only white 'eyes', since circles strike me as more personable shapes than squares. That the two little white circle are eyes may not be immediately clear to users until they mouseover the Bellboy and see him transform and I intend the revelation of human characteristics in what is essentially just a geometric shape to surprise users and (hopefully) create a bond between them and the character.

Lacking a mouth, I felt it would be inappropriate to have the interactee speak and make human noises, which was my first idea and which my new direction compelled me to avoid. I trialed various different soundsets, starting with human noises made with a closed mouth, but none were satisfying and I put it off for later. After adding a 'tickle' code to my application, I noticed that holding the Bellboy caused only the 'cheeks' to move and immediately thought of the sound of jingling bells. Searching some public domain sources, I found a sound that fit the shape and the movement perfectly and built the rest of the soundset from there. The name came to me at this time as well.

Soon after this, I realised that my old brute coding wasn't going to get me very far in realising my vision and began research on utilising PVector. After converting what I could of my old code to fit in the more advanced class-based programming format, progress became a lot faster and I could divert most of my time then to exploring how to improve visual and audio feedback and the general experience of playing with the application. After becoming satisfied with the look and feel of things, I then returned to my original idea of having bad things able to happen to the Bellboy, and figured out how to use total velocity as a trigger for his transformation to a 'hurt' state. To make it clear that such a change was possible, I tried applying reverse psychology in the description on the Open Processing page and even in a short note before the code itself, though I suspect that the relative difficulty in getting a good long mouse motion in the 500x500 area will make it hard for people not actively seeking to abuse the Bellboy. Unfortunately, I was unaware that we were constained to an area limit and originally coded this for an 800x800 area where you can get a good wind up to throw the Bellboy and lowering the total velocity trigger any further makes it far too easy to hurt him.

To top the code off, I added a climactic 'death' for the Bellboy. It's amazing, because just today I showed the code to another student and let her play around with it and when the Bellboy died she actually apologised to me repeatedly as if she had broken my application or something! Though such a response may be a one off sort of thing and highly dependent on the user's personality, it was exactly this sort of emotional resonance with the character that I hoped my design decisions would help create.

All in all, this project was a blast and I'm very proud of the finished design. I like it so much, I'll probably continue to tweak and add to it after I learn more since it's fun and it always seems like more can be done with it.

Project 2 Developments

I quickly realised that grinding out this project using the simplistic code I was used to was not going to do my idea justice. Trying to code collision and bounce physics for myself became a nightmarish jumble of variables and bad animation.

This iteration of my concept may appear alright in a screenshot but it'd bring tears to your eyes if you saw it in 'motion'.

I was successful in setting up things like mouse interaction and conditional goings-on, but when it came to the fluid motion that I was looking for I knew it wouldn't be realistically possible for me to accomplish in due time with the methods I was using..

And then I found this:

Which lead to this:

'You Complete Me' indeed!

This class is exactly what I needed to work with, and my work efficiency and quality have increased dramatically after figuring out how to use it. It literally does the hard stuff for me!

My face now.

With the foundations of my project set, I'm now focusing on building on the interaction aspects of it. So far I've managed to translate the few salvage-worthy parts of my old brute coding to this new application, added audio  and visual feedback to wall collisions and mouse-overs and now have my eyes set on possibly having the velocity at time of collision as a condition of change to Bellboy's cheery disposition.

Post-presentation thoughts

It was suggested that I should go more abstract (grrr) with my project's direction. I think I may remove the mouths of my characters - at least the interactee's one - and explore how colour and shape can be used to convey messages.

Having textual instructions was put into question, so now I have to think really hard about the curent instructor character's role and how it will perform it.

Project 2 sketch

This is a simple little sketch that shows the first stage of my idea for the second project. It introduces the two NPCs in my little 'game', the instructor and the interactee.

I plan to have you interact with the interactee in a number of ways, and the interactee responding with different sounds appropriate to the way you play with him.

The instructor is there to inform you on the various interactions possible in stages, from simple 'you can move him' to 'toss him up and catch him'. Eventually, I want the insructor's suggestions to become crueler and crueler, eventually becoming downright evil.

If I really want to embellish this, I'll add little items around the play area that you can also interact with, and which impact on the interactee in various ways.

This project will be successful to me if I can make the interactee NPC to become relatable enough through the sounds and expressions he makes so that players won't want to follow the crueller suggestions of the instructor.

I'll probably have to use a billion if statements to accomplish many of the things I want to do here, like the instructor.

Looking at my first project

I learned quite a few things, like the value of loops and variables and was humbled by how little I know about the way computers do things despite using them so often.

While I enjoy what I've made, I really wish I could've done more. I have a long way to go when it comes to abstract thinking and my time management could also serve to be a lot better.

Also, I really want to learn how to construct effective functions so that I can work more efficiently rather than be forced to write out bloated scripts full really of basic code. I'll try and analyse other people's scripts and try and look at the guts and figure out what makes them produce their desired results.

Project One Overview

I decided quite early on that the thematic link between my designs would be emotions, and I'd tie them together visually by using faces as a motif.



Wallpaper 1: Anger
Designing this wallpaper proved to be quite a challenge technically, as some the elements I wanted to include were outside of my reach in regards to coding skill. However, despite some some initial difficulty, once the ball started rolling I encountered few problems.

This design was inspired by the public symbol for chaos to the right. The shot above is of one of the initial versions of the design. I used for loops to map out what would become my 'ballistic lines' and added some vertical lines at regular intervals also using for loops to aid in quickly plotting the vertices for the triangles. Note also my original plan of having eyes on all the triangles.

Despite my original concept's lack of visual complexity it proved to be incredibly tedious to code; getting the 'eyes' to be at the proper angles and lengths was incredibly time consuming whilst also not being as visually striking as I had hoped. It was at this point that I made the decision to attempt to emulate 3D by combining triangles. Also, while I wanted to keep the centrepiece shape as a triangle/pyramid I found its conversion to 3d and the way its peripheral edges interacted with the 'ballistic' lines unconvincing. A sphere was the most obvious solution, and while its round shape isn't as aggressive as I may have wanted, the stylised angry glare conveys its emotions clearly enough.

As a final touch, I created the background for the image to frame the vaguely elliptical shape the pyramids' positions formed and to act as a reference point for the eyes, helping with the illusion of depth and three dimensionality

 

Coincidentally, the ellipsis created in the background combined with the circle in the centre looks like a really angry eye glaring at you.

I'm quite happy with how this design turned out and in making it I've learned a lot more about estimating where specific vertices are even on large planes (having plotted out every vertex in every triangle individually!).

Wallpaper 2: Melancholy

I went back and forth with concepts for this design and settled with the draft above. The vertical lines with random gradients and lengths were meant to simulate rainfall, but it became apparent that I was thinking far too literally with this design. Ben suggested that I investigate using sine waves to give the lines shape and so I set about getting my head around how to do so, experimenting with many waveforms but finding few that I thought fit with the geometry of the design.

It was a good learning exercise though and while I didn't use the code to draw the a proper waveform, I was quite satisfied with the results.

I made the sine wave into a steep slope which guides the eye down the page, past the shrinking arcs to the focal point of the design, the little glum face which I also shifted from a stronger central position into a weaker, isolated one in the the bottom corner. The final product is a lot lighter than I would've liked, but nothing could be done about it since the printer at Big Image couldn't seperate the dark from the darkest, and I wasted $4 dollars on an almost black page :c

Wallpaper 3: Happy Meets Sad

This was a cute design which I made from an image of a happy face I made for fun in the early weeks.

 

In order to make this image into more of a pattern and inspired by the logo to the right, I decided I'd split the happy code's face in half (however violent that sounds), giving him a sickly sad face as the other half.

The faces are pretty much opposites of eachother in shape and emotionally and contrast eachother nicely, I think. They also look like they're facing eachother horizontally, which makes happy guy a bit of a douche to be laughing at someone else who's clearly suffering!

Wallpaper 4: Fear

I didn't conceptualize as much for this design as I may have wanted, but I like the relative simplicity and clarity of meaning it has. Besides, I needed another chaotic design to go with Anger to bring balance and parity to the project as a whole. Though, I really would've preferred to have learned some sort of code that could translate and expand pairs of objects evenly rather than copying and modifying each pair of eyes myself.