• jollyyau

Week 6: Glitches

Animations and randomisations


  • Usually, our interactions with systems don’t have errors

  • Glitch Art captures the unpredictability of errors and makes it into a visual vernacular

Glitch Art - Capturing or intentionally creating mistakes, manipulating the vernacular of error. History of glitch art


Glitchometry Stripes

Scanned glitches


  • Math.random

  • Gives you a random number from 0 - 0.999

  • Math.floor

  • It removes the decimal points and rounds it down.

  • How to make randomise it?

  • var myArray = [thing1, thing2, thing3, thing4];

  • First, define the var range

  • var myRandomItem = myArray[Math.floor(Math.random() * 4)];

  • Then, the random number is x4

  • You can also swap it out with

  • Math.random() * myArray.length)];

Pens using js and the canvas element:


An image glitch editor:


CSS Animations

  • CSS transitions, CSS animations, and javascript

  • 12 principles of animation

CSS Transitions

  • Transitions is when you only define the start, end and duration of the animation

  • The tweeting is automatically taken care for you.

  • https://www.w3schools.com/css/css3_transitions.asp

  • https://robots.thoughtbot.com/transitions-and-transforms


div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 4s;


div:hover {

width: 300px;

height: 300px;


  • The transition property lists the duration of the animation in seconds.

  • The transition starts when that property changes - use pseudo classes (such as hover) to begin transitions

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