movie.color = "red";

changes the color of the background

movie.height;

returns the height of the video

movie.width;

returns the width of the video

movie = video();

sets the type of the background to a video

movie.source = "concert.mp4";

sets the source of the background movie

movie.duration();

returns the length of the video

movie.currentTime

returns the current time of the video in seconds

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 = webcam();

makes the background what your webcam sees

movie = image();

makes the background an image

movie.source = "my_image.jpeg";

sets the source of the background image

flipHorizontal();

flipVertical();

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.

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

Movie must be type 'graphic' or 'webcam' to turn on facetracking

movie.facetracking = true;

turns on facetracking

movie.faces

returns an array of rectangle objects. Each rectangle contains a face. Their coordinates can be accessed with .x, .y, .width, and .height. Access .faces from inside a repeat block

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_graphic = graphic(source, x, y)

var my_graphic = graphic("create");

adds a graphic

Tip: Remember when placing graphics that code reads from top to bottom. Graphics will be layered in the order they are written. For example:
var heart = graphic("heart");
var arrow = graphic("arrow");
will place the arrow on top of the heart;

var arrow = graphic("arrow");
var heart = graphic("heart");
will place the heart on top of the arrow.

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

my_graphic.source = "rainbow";

modifies the image file of the graphic

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_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_input = textInput(0, 0);

adds a text input field in the top left of your vidcode

my_input.x = 50;

my_input.y = 50;

moves the textInput

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.

var effectAmt = 10;

effectAmt = 5;

effectAmt = effectAmt + 1;

var myColor = "green";

var weekdays = [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”];

To retrieve something from the array, you have to refer to its number in the list. Computers count in a special way. Instead of starting with the number one, they start with the number zero!

If I wanted to retrieve “Sun” from this array, I would use the code:

var day = weekdays[0];

If I wanted to retrieve “Mon” from this array, I would use the code:

weekdays[1];

video with more details (5 mins)

Repeat Loop

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

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

video with more details (7 mins)

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

For Loop

for(var i = 0; i < 4; i++) {
   log(i);
}

increments i by 1 on each loop. will loop until the condition (i < 4 in the example above) is met.

While Loop

while(i < 10) {
   log(i);
   i++;
}

the while loop loops through a block of code as long as a specified condition is true. careful, without the i++ above, this while loop would go on forever and break the program!

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