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
Gives you a random number from 0 - 0.999
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:
12 principles of animation
Transitions is when you only define the start, end and duration of the animation
The tweeting is automatically taken care for you.
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
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