Code work.

Bailey Newton-Browne.

We used a program called Sketch. Sketch allowed you to write HTML and display it as it’s written in front of you. I will be honest and say that I went into this exercise with absolutely no idea what I wanted to create. After an hour of playing around with different structures of HTML code, I created a rather cool looking visual that the user could interact with. Upon playing around with this, I set myself challenges like, “Can I make this go from red to blue as the mouse moves” and if I could the next task would be along the lines of, “Can I make the yellow outlines fade as you moved the mouse up.” This evolved into being a very entertaining, interactive visual for people to use and enjoy in which two parallel triangles move up and down equal to the user’s mouse movements, as it moves up from the bottom, it travels up the RGB (Red, Green, Blue. ) spectrum.

To the right there is a screen shot of my code and my product at its mid-way point before finish. It looks very different now but it’s easy to get a grasp of what’s going on and how it’s effecting the live view window of what the code has created.

This is how I positioned my triangles. "PosY" was equal to the users mouse movements and also one point of the triangle. The two other points of the triangles were fixed so only the top end of the triangle would move, replicate this on the parallel triangle and it makes for good entertainment.

ColourratioX and colourratioY were both equal to the colour spectrum of RGB. This is what allowed the triangles to alter their colour as the mouse moved around the screen.

Above is a screenshot of some more of my code. You can see the background's requirements and the triangle's properties and also the posY and X matches to mouse Y and X. Also the red stroke equal to mouse X and also how I took the fill away because it didn't work out that well where it says "//fill(value)"