|James Fenn 5a493755ef||2 months ago|
|Punch Deck - Elegance in Simplicity.wav||2 months ago|
|Punch Deck - Snowfall.wav||2 months ago|
|Punch Deck - Under the Stars.wav||2 months ago|
|README.md||2 months ago|
|achievement.mp3||2 months ago|
|beep.mp3||2 months ago|
|corrupt.mp3||2 months ago|
|corrupted.png||2 months ago|
|fan.mp3||2 months ago|
|flush.mp3||2 months ago|
|index.html||2 months ago|
|scene-desk.jpg||2 months ago|
|sketch.js||2 months ago|
|slurp.mp3||2 months ago|
|trophy.png||2 months ago|
For my introduction piece, I have created a website: https://jfenn.me/englit0512-introduction/
Worth noting, I designed this to be viewed on a laptop/desktop, not a mobile or touchscreen device, so it will work a lot better if you have access to one. Also, it uses some 3D transform/scaling features that might vary between browsers - so if you see things that are misaligned or look a bit off, it is not intentional. I will say that I've tested this pretty thoroughly on my laptop and a couple friends have done the same, but I still cannot guarantee it will work perfectly for everyone. Web development is hard.
As this is an introduction piece, I started by thinking about my identity and the information I wanted to include. I write software, I play games, I do weird things with technology and enjoy finding little bugs and "features" in their many forms. A good way to connect all this together - and very topical, as it is what I see the most of these days - is the view of my desk.
I initially wanted to design this "game" as a point-and-click adventure that might take the player between different rooms and scenes, but I quickly realized that I did not have enough content to fill more than one. I have added some dynamic features to this scene, however - the video playing on my laptop adds some motion and makes the scene feel "alive," and the flickering light on my GPU serves a similar purpose.
Hovering over each "object" on my desk shows an animated tooltip - using a simple
sin(frameCount / PI) function to create the motion - that briefly explains the purpose of the object and prompts the user to click on it (or makes it obvious that it can be clicked on).
A few objects do "special" things - for example, the GPU, once clicked, makes a whirring noise and starts spewing out smoke! If you click it again, it spews out more smoke! Hmm, I wonder if there's a limit to the amount of smoke it can draw... (there is, this is a hint - and it isn't the only "easter egg" I've hidden, either!)
If you are interested, the vaguely-organized source code for this website can be found here: https://code.horrific.dev/james/englit0512-introduction/src/branch/main/sketch.js