To start off this project, I simply looked at some example pieces of code because I had never used HTML, CSS or java scripting before and I edited these within codepen in an attempt to try to better understand how the process works.
Above you can see me first edited attempt and bellow you can see and example of where I gained some of my inspiration. After looking at the amount of coding required to generate the shape and realising that if I was to have several of them, I would have a serious lag problem and they wouldn’t run smoothly I decided upon generating gifs to simulate the same experience.
This next video if of a piece I created by putting in a random gift from the web into an existing Netflix scroller like piece of code someone had generated. I increased the values and distorted the movement in order to test out what would happen and if a gif would works successfully within the format created.
Here you can see I have added in the gifs of the 3D shape I often use in my work with transparent backgrounds. However after doing this I realised I would want to put other images in behind this in order to have them show through in a way and therefore needed to make them semi transparent in some way. However gifs don’t support gradient transparency which lead me to go for a more cartoon graphic like image in the next stage.
Here you can see the more graphical version of the gif which allows the background to show through. I also made it have a rollover function as in the one above. In this one the colour is simply inverted compared to above where they hue is rotated round by 120 degrees meaning it changes from red to green when hovered over.
In this version I have put in another gif in the background to create many of the same shape repeated in different sizes. I like the overlaid nature of the graphic versions on top of the gradient background and the vibrancy which draws you to the background. This is a weird visual because usually the viewer is drawn to the foreground. However here you are drawn on to the back which I really like.
Here I have added the blend mode difference to the front shapes which was extremely difficult to implement. This was due to the unstable nature of the blending within the browser. I like the fact the filter is only in effect when the movement of the shapes isn’t occurring and it again draws the view into the background further which I really like with this visual.