movie.color = "red";

changes the color of the background


returns the height of the video


returns the weight of the video

movie.playbackRate = 1;

modifies the speed of the video

A number less than 1 will slow down the speed. A number greater than 1 will speed it up.


returns the length of the video


returns the current time of the video in seconds

var my_hflip = flip_horizontally();

var my_vflip = flip_vertically();

flip video horizontally or vertically

var my_frame_drop = frame_drop(amount)

my_frame_drop.amount = 10;

set up and modify frame drop rate


var my_audio = audio(source);

var my_audio = audio("retro");

plays music over your video.

change the song playing by changing the filename in quotation marks.

You can change it to "dance", "electronic", "funk", "rock", or "retro"!

Make music stop playing with: audio('none');

my_audio.source = "dance";

modifies the audio that's playing.

my_audio.playbackRate = 0.5;

modifies the speed of the audio. Defaults to 1. Accepts a number between 0 and 5. A number less than 1 will slow down the speed. A number greater than 1 will speed it up.


Change the numbers and strings to change the amount and type of filter.


accepts a number between -100 and 100 which skews the bias for a given pixel to be black (-100) vs white (100).


blurs video


inverts video colors

vignette(amount, x, y);


vignette(55, 220, 50);

create a border around a project. x and y change the position of that border.


lightens video


adds a warm sepia effect

tint(color, amount);

tint("red", 35);

adds a color overlay to project


turns video gray


adds motion blur effect


adds visual noise


adds a pixelated effect

Modifying Filters

Set effects to variables and modify their different properties.

var my_bw = black_and_white(5)

my_bw.bias = -40

modifies black and white effect

var my_blur = blur(amount);

my_blur.amount = 20;

modifies blur amount

var my_color_invert = color_invert()

inverts video colors

var my_vignette = vignette(amount, x, y);

my_vignette.amount = 50;

modifies vignette amount

my_vignette.x = 120;

my_vignette.y = 400;

modifies the horizontal (x) and vertical (y) amounts of vignette

var my_exposure = exposure(amount);

my_exposure.amount = 80;

modifies exposure

var my_sepia = sepia();

adds a warm sepia effect

var my_tint = tint(color, amount);

var my_tint = tint("red", 35);

my_tint.amount = 12;

my_tint.color = "pink";

modifies the amount and color of tint

var my_grayscale = grayscale();

turns video gray

var my_motion_blur = motion_blur(amount);

my_motion_blur.amount = 10;

modifies the number of seconds to blur over

var my_noise = noise(amount);

my_noise.amount = 50

modifies noise

var my_pixelate = pixelate(amount);

my_pixelate.amount = 50

modifies the size of the pixels


var my_text = text(message, x, y)

var my_text = text('I love coding!', 60, 55);

creates text on your video.

the first number after your message is the position from the left of your text. The second number is the position from the top of your canvas.

var emoji = text('😈')

Add emojis the same way you add text.

In your Chrome menu, click 'Edit' then 'Emoji and Symbols.' If you don't have that, you can from iemoji or getemoji.

my_text.message = "I'm an AMAZING coder!"

modify the message that the text is displaying

my_text.x = 15

modifies the horizontal text position

my_text.y = 100

modifies the vertical text position

my_text.color = "green";

modifies the color of your text

my_text.size = 50;

modifies the size of your text

my_text.font = "Times";

modifies the font of your text.

possible fonts: "Arial", "Comic Sans MS", "cursive", "serif", "monospace"

my_text.rotation = 75;

rotates the text

Drawing Shapes

var my_line = line(x1, y1, x2, y2, color, borderWidth)

var my_line = line(0, 0, 100, 100, "red")

draws a line

my_line.color = "orange";

modifies the color of your line.

my_line.width = 10;

modifies the weight, or thickness, of the line

my_line.rotation = 45;

rotates the line

var my_triangle = triangle(x1, y1, x2, y2, x3, y3, color, borderColor, borderWidth)

var my_triangle = triangle(0, 0, 0, 100, 50, 50, "red")

draws a triangle

my_triangle.color = "orange";

modifies the fill (inside) color of your triangle.

my_triangle.borderColor = "blue";

give your triangle a border color.

my_triangle.borderWidth = 10;

modifies the weight, or thickness, of the border

my_triangle.rotation = 45;

rotates the rectangle

var my_rect = rect(x, y, width, height, color, borderColor, borderWidth)

var my_rect = rect(50, 50, 150, 200, "red")

draws a rectangle

my_rect.color = "orange";

modifies the fill (inside) color of your rectangle.

my_rect.borderColor = "blue";

give your rectangle a border color.

my_rect.borderWidth = 10;

modifies the weight, or thickness, of the border

my_rect.rotation = 45;

rotates the rectangle

var my_circle = circle(x, y, radius, color, borderColor, borderWidth)

var my_circle = circle(50, 50, 100, "green");

draws a circle

my_circle.color = "blue";

modifies the color of your circle.

my_circle.borderColor = "purple";

give your circle a border color.

my_circle.borderWidth = 10;

modifies the weight, or thickness, of the border.

my_circle.radius = 50;

modifies the radius (length from the center to the edge) of the circle

Stop Motion

Used in Stop Motion

movie = stopmotion(frames, interval)

movie = stopMotion(['sample-1','sample-2','sample-3'], 250);

creates a stop motion, made up of frames (images), and an interval (how fast the images switch)

movie.frames = ['fish-1','fish-2','fish-3'];

modifies the frames of the movie


add a frame to the existing frame array

movie.interval = 700;

modifies the speed of the movie


var my_graphic = graphic(source, x, y)

var my_graphic = graphic("create");

adds a graphic

my_graphic.source = "rainbow";

modifies the image file of the graphic

my_graphic.x = 10;

moves the graphic horizontally (left and right)

my_graphic.y = 10;

moves the graphic vertically (up and down)

my_graphic.scale = 2;

modifies the size of the graphic

my_graphic.opacity = 0.5;

modifies the transparency of the graphic (0 is transparent, 1 is completely opaque)

my_graphic.rotation = 25;

rotates the graphic


var my_drawing = drawing();

when drawing is called, you can draw on your video with your cursor

my_drawing.color = 'green';

modifies the color of your drawing

my_drawing.lineWidth = 10;

modifies the line width of the drawing

my_drawing.x = 0;

sets the drawing's position left to right

my_drawing.y = 0;

sets the drawing's position up to down

Mouse Interaction


returns the horizontal position of your mouse


returns the vertical position of your mouse

   pokeball.x = mouse.x;
   pokeball.y = mouse.y;
}, 1);

use case - a graphic follows user's mouse around the canvas


Colors are always strings, which means you'll always put them in quotation marks like "blue".

Colors by Name


drawing and effects objects accept certain color names, such as "blue", "green" or "magenta".

Hex Colors


sets a color using a hexidecimal value. clicking on a hex color in your code will make a color-picker appear.


   //code that repeats
}, 3);

repeats the code inside the function every number of milliseconds (500 in this example)


stops repeat from running


starts repeat (if it was stopped)

my_repeat.interval = 200;

modifies how often the code inside repeat gets run in milliseconds


Variables are containers that hold elements of your code, like strings or numbers. These can be changed or replaced!

var effectAmt = 10;

effectAmt = 5;

effectAmt = effectAmt + 1;

var myColor = "green";

Conditional Statements

Remember that every open bracket { must have a matching closing bracket }

if (condition) {
   //code that will run if condition is true

if (condition) {
   //code that will run if the condition is true
} else {
   //code that will run if condition is not true


Comments are code that the computer ignores, but leaves messages for other humans looking at your code.

// Use single line comments to clarify code.

/* A multi-line comment describes your code
* to someone who is reading it. */


Programmers often print - or 'log' - text or variables to the console to help them debug and understand their code. The following example will print '3' to the console at the bottom of the workstation.

var myNumber = 3;



Use Math.random() to generate a random number between 0 and 1. If you want a random number between 0 and another number, multiply the result of Math.random() by that number.

var myNumber = Math.random(); // random number between 0 and 1

var myBiggerNumber = Math.random() * 100; // random number between 0 and 100