movie.color = "red";

changes the color of the background

movie.height;

returns the height of the video

movie.width;

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.

movie.duration();

returns the length of the video

movie.currentTime

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.

black_and_white(5)

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

blur(amount);

blurs video

color_invert()

inverts video colors

vignette(amount, x, y);

vignette(55);

vignette(55, 220, 50);

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

exposure(amount);

lightens video

sepia();

adds a warm sepia effect

tint(color, amount);

tint("red", 35);

adds a color overlay to project

grayscale();

turns video gray

motion_blur(amount);

adds motion blur effect

noise(amount);

adds visual noise

pixelate(amount);

adds a pixelated effect

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

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

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

movie.frames.push("another-frame")

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.x;

returns the horizontal position of your mouse

mouse.y;

returns the vertical position of your mouse

repeat(function(){
   pokeball.x = mouse.x;
   pokeball.y = mouse.y;
}, 1);

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

Colors by Name

"blue"

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

Hex Colors

"#ff0000"

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

repeat(function(){
   //code that repeats
}, 3);

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

my_repeat.stop();

stops repeat from running

my_repeat.start();

starts repeat (if it was stopped)

my_repeat.interval = 200;

modifies how often the code inside repeat gets run in milliseconds

var effectAmt = 10;

effectAmt = 5;

effectAmt = effectAmt + 1;

var myColor = "green";

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
}

// Use single line comments to clarify code.

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

var myNumber = 3;

log(myNumber);

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

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