Introduction project for ENGLIT0512
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
James Fenn 5a493755ef more sound effects 1 miesiąc temu
Punch Deck - Elegance in Simplicity.wav first commit 1 miesiąc temu
Punch Deck - Snowfall.wav first commit 1 miesiąc temu
Punch Deck - Under the Stars.wav first commit 1 miesiąc temu
README.md more sound effects 1 miesiąc temu
achievement.mp3 more sound effects 1 miesiąc temu
beep.mp3 first commit 1 miesiąc temu
corrupt.mp3 more sound effects 1 miesiąc temu
corrupted.png add gpu smoke / corruption effect 1 miesiąc temu
fan.mp3 add more sounds and things 1 miesiąc temu
flush.mp3 add more sounds and things 1 miesiąc temu
index.html change background gradient to blend with image 1 miesiąc temu
scene-desk.jpg first commit 1 miesiąc temu
sketch.js more sound effects 1 miesiąc temu
slurp.mp3 add more sounds and things 1 miesiąc temu
trophy.png add achievements, switch to random clips playlist 1 miesiąc temu

README.md

Prelude

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.

Design

I wrote this website using p5js, a JavaScript graphics library that allows developers to easily create small interactive programs like this one. It also uses some music by Punch Deck, under the Creative Commons Attribution 3.0 Unported license - and some sound effects from freesound.org.

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.

Interactions

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!)

Source Code

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