Let's Animate!!! Bringing Mini Me's to Life

Niamh Dolfi-McCool's photo
Niamh Dolfi-McCool
·

4 min read

This workshop is designed for youth to be introduced to coding fun visuals. This is the first of a series of workshops. People of all ages/knowledge levels are welcome to participate.

What will we be doing??

We are going to learn how to code some simple animations. We will go over:

  • Refresher: what is coding? what is syntax?

  • What is a variable?

  • Random AKA chaos!

  • Animating our portraits

  • Trouble Shooting

  • Useful Links and how to use them

  • Have fun!!!

Refresher

Coding: Writing a set of instructions for the computer to follow.

P5.JS: Part of the coding language Javascript. It's designed for visuals, animations and interactive pieces.

Syntax: The "rules" of a coding language - the order and certain punctuation (e.g curly brackets {}) See the example of the syntax of a circle below.

💥
DO: Code a circle in the code template below!

Cool, we have a circle. Let's make it more fun! Let's move it. To move it we are going to have to use a variable.

What is a variable?

A variable is a label for something. Computers aren't mind readers so we have to both tell them what something is called and what it is.

Variables are super useful so we will keep coming back to them.

There are some variables that have already been named and defined by P5.JS. A handy one is called frameCount

frameCount is the amount of frames a sketch has been opened for. This means it's an increasing number.

Let's see frameCount in action!

🦋
DO: Swap the size parameter of our circle with frameCount

Wow! Pretty cool right?

frameCount can be used in any parameter. Let's experiment.

For the next five minutes try one or more of the following:

  • Use frameCount for the x parameter of a circle

  • Use frameCount for the y parameter of a circle

  • Use frameCount inside fill()

  • Use frameCount inside background()

In the future, we will learn how to create and define our own variables. For now, we are just going to have fun with pre-made ones :)

Randomness AKA Chaos!!

//////FLASH WARNING///////

frameCount is just one way we can animate our code. Another way is to use randomness.

🧠
THINK: What is randomness??
ANSWER
In true randomness, all outcomes are equally possible. For example, if I teleport to a truly random location; I have the same chance of teleporting to Paris as I do teleporting to the middle of the Pacific Ocean.

We can use random() to generate random numbers.

💡
USE: random() for the x or y parameter of a circle

Things can get CRAZY pretty fast using random. This can be fun but sometimes you might want something less overwhelming. Here are some tips for that.

  1. Reduce the frameRate: this is a very fast and easy way to soften the randomness. Lower the frameRate in function setup(). Simply write frameRate (and put a smallish number in here). Lowering the frameRate is a little controversial because it changes the speed of everything in your sketch.

  2. Use random in function setup. If you like the cool computer-generated quality of randomness but don’t want the flashing quality: use random in function setup. Why? Because function setup only runs once, instead of in the draw function which runs 60 times a second.

  3. Use randomGaussain(). RandomGaussain is like random but with more control! You have the mean (the average amount you want) and the standard deviation (the amount of variation you want, low means not much, high means lots)

Animating our Portraits!

Last time we were here we made some drawings, we are going to use them as our base to animate. Don't worry if you weren't here or don't have the code you made we will have a template that you can use and change.

Here's an example of one I made earlier.

But you don't have to make it crazy like that. You can just make the eyes move like this.

💡
If you want to customise your drawing more click here!