FMP
TITLE OF UNIT: Final Major Project
Email – l.howell0120231@arts.ac.uk
E1 – 20/11/2025
(To come back to the top, simple click on one of the headers!)
Contents:
E1
E2
- something to come
In a sci-fi world where people tinker with their own bodies, becoming their own projects. Adding, taking away, upgrading, downloading. People have become anything they’ve ever wanted to be. While this creates great opportuniy for medical advancement and the opportunity to push past human biology, it also means that people become unique in ways both good and bad. The bad take the opportunity to be bad, and the good grasp for happiness in a fragile world. Regardless, the time is now for upgrades, people. Swap and change and become anything from an angel to a demon, a god to an ant.
Carousel to view the thumbnails one by one:
(If on mobile, the buttons may load far away. Be patient with image loading)
Visit the bloopers cut for a deep dive on how I did the carousels!
2D Interactive Website Proof of Concept
Using my knowledge of HTML, CSS and JavaScript, I set about to create a ‘Character Creator’ screen. This would be a demo for an idea that I had for a 3D version that would be animated and interactive.
To shortly explain the 3D concept, this would entail a 3D scene being loaded directly into the browser., the character standing in the centre. The user would be able to interact with various different buttons on the screen to decide what items they’d want the character to wear. Instead of being clothing, these would be literal limbs or various attachments to the character, like arms, legs or wings, for instance.
This would all be animated, and then those animations called when the user pressed the button. Having created a 3D website before (incomplete, sorry, but working!)[check it out here!], I feel comfortable to attempt this. However, it is ambitious, so I will be trying to complete the cinematic elements first.
Enough babbling, here is the proof of concept!
I first started out creating the avatar. My first method was to try and swap out images of the various different things that he could wear using a carosel, but that was labourious and pointless as well as not being very specific.
After a discussion with a friend, I realised I could use transparent pngs. I created a image file and exported the various layers as their own image. This meant with visibility toggled on and off, they would look like they are being put on and off.
Oddly enough, most of the trouble came not from coding the toggling of images, or the if statements, or any of the logical trouble that came up; no! it came from centering objects.
Somehow my worst enemy became trying to persuade things to be in the middle. Having done CSS the least out of the other languages, I was unfamiliar with how to use classes effectively, and what the syntax was to use multiple classes at the same time – if you had a giggle reading that, know I’m trying my best TT
Anyways, I finally managed to centre the images, if I’m honest, I don’t remember how, but I’m certain that I have overwritten it anyways.
To do that, I originally set out making the program switch out two images at a time, terrible idea.
After that hurdle was overcome, I finally got to making the buttons work and look good.
This involved putting them in containers and painstakingly aligning them.
Originally I had everything in the same container with the blocks set to be able to display on top of each other, using classes to shove them to the sides. This, was an extrordinarily bad idea. Not because it was so finnicky, but because while it may have looked passable on desktop, it was BAD on tablet or mobile. One column of buttons would be up top, the others on the bottom. bad.
Fixing this I got two containers and had classes on both, with a classed container nesting it. This made it so much easier to work with.
I also could make it flexible, so it would resize itself dependant on the window size. While it’s not the most responsive, it does mean the buttons stay displayed.
The iterations above were made with mixing-and-matching the thumbnails in mind.
After submitting a vote to instagram, #3 came out top. I think I agree with this as his character has the most personality and he best silhouette. I am, however, apprehensive in terms of how much work it will take to create him.
With colour iterations I tried to use different combos to illicit different feelings. The neons give party or rave culture; the pastels give eco-warrior or hero type; the bright colours give pop star and the darks give villain.
I put the colour iterations to a vote which I’ll put in later.
I think my fave is #8. It is my fave colour combination (if you remember my previous work, you should be nodding at this) and I think it gives the grungiest aesthetic.
I like the dark wings, as I fill like this gives revenging angel; however, I think more accent colours should be introduced to make it feel less flat.
A lot of people like #10, I’m a bit surprised, but it is generally my second fave colour combo. I feel like it does fit the cyberpunk aesthetic, but it reminds me of Monty Gator far too much.
Here’s the final idea! I did a back view also to show more of the mechanisms behind him.
I’ll need to do further orthogrphic views, detailed sketches of his prosthetics as well as a view of him without any of it.
I’m quite pleased with this honestly, it’s not at all what I thought I’d be doing when I started ideating, but I think it will be different than other things you see around.
However, I still do want to make my mark on it and make it more gory. I’m thinking stretched and displaced skin, and a general bloody unpolished look around the mechanisms. General creepy antics.
I’m also thinking that the knee rests would joint directly into his femur, borrowing the force of the bone; it’ll give me that painful feeling and really cement in the whole beauty is pain motif I really like.
I put my concepts to a vote in the class discord to get views and feedback, as well as a general vote. I got some nice opinions and a good idea of the general concensus. Apologies you cant see the concepts here, but scroll up and you can see them again.
Carousels:
I really thought I was so cool with these carousels, frankly I still think that.
I originally had planned to use the carousel system on the proof of concept website, but that was quickly abandoned. So I would’nt waste good code, I used it on my blog! (subtle foreshadowing…)
While I’m pretty good at web dev, one of my friends is INFINITELY better. She’s being making her own web projects for fun for years, meanwhile I’m just a rookie getting back into it. After asking for help, she ran off and deposited the code at my doorstep.
My issues right off the bat were that JavaScript does not run on MyBlog. Deeply saddening. With hope in my heart, I asked the people at MySupport to see if there was a was to get the JS running. Unfortunately not. Dear Emre, the agent who honestly went so above and beyond for me (thank you!!), tried a way to get it to run without the JS, instead using the HTML <script> tags.
“We normally do not provide codes or assist with codes for students”
“a good starting point”
Poor Emre did not know what they were getting into.
What I didn’t realise until later, but because Emre is an admin, they can run javascript without problem, but my peasant status means that I cannot.
After much aggravating tweaking – of course, not working because the JS wouldn’t run. I decided to ask Emre for help again.
His response I basically skimmed because I was sure it’d work again…
What I didn’t notice was the “If these 2 lines keep disappearing after you save your page, that might be an issue then” – yes it was indeed an issue!
After I’d save, the site would automatically strip the page with anything that I’d authored and wasn’t allowed to do – ofc because I’d edit the HTML block, this meant that it ‘authored’ it.
Once I told Emre about this devastating revelation, war was over.
— Jump to top —
Leave a Reply