• jollyyau

Week 3 + 4: Assignment 1


Website 1:

  • Vaporwave inspired web experiment

  • Responsive website & glitchy distortions

  • Layering images and music

  • “onmousehover” with .play() and .pause() functions

Break Down of Design & Functions

Design

  • Glitch art

  • I created the glitch gif in Photoshop by distorting colours and adding noise.

Functions

  • Function 1: Cat image follows mouse

Website 2:

This concept is a visualisation of strange trend of “cat” + “food item”. Using gifs of a popular cat named bananya, I remixed and took apart several gifs using Photoshop.

Break Down of Design & Functions

Design

  • Lossy feeling

  • I recreated the lossy and decrease of resolution that naturally happens when people share and repost images around the internet.

Functions

  • Function 1: Cat image follows mouse

  • This part was very challenging, and I attempted to use and mousemove to track the mouse coordinates. However, my knowledge was limited and the code was not working in different browsers.

  • I eventually used Jquery javascript to make it functional, with an offset (e.pageX-80) so it will stay in the centre of the mouse.

  • Here is the code:

  • $(document).mousemove(function(e) {

$('#meowpic').offset({

left: e.pageX -80,

top: e.pageY -80,

});

});

  • Function 2: Cat image is replaced by hidden image

  • This sections has multiple triggers at once. When the mouse hovers onto the empty banana, the original banana AND the cat disappears, and is replaced by the new bananya.

  • The key is to use overlapping images of the same div size and space, so the interaction will work in any browser.

  • The code is a series of onmouseover lines, with all of them triggered by the same function, where it gets element by ID.

  • <script>

function yesBanana() {

document.getElementById('banana-gif').style.opacity = "0";

document.getElementById('yesubanana').style.opacity = "1";

document.getElementById('meowpic').style.opacity = "0";

}

</script>


Recent Posts

See All

Week 11 + 12: Presentations II

These two weeks, we are presenting our web experiments that include the following: Map APIs Canvas Data Input It was very challenging for me, because I didn't know very much about coding at all. I sta

jollyyau.design © 2020

  • LinkedIn - White Circle
  • Facebook - White Circle
  • Instagram - White Circle