“Be willing to risk, make mistakes, and learn from failure.”

— Red Burns

Table of Contents

Movie

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

Audio

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.

Drawing

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

Facetracking

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

Filters

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

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

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

Graphics

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

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

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

Text

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 Interaction

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

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

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.

Variables

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";

Arrays

An array is an ordered list in your code

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)

Loops

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!

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

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. */

Logging

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;

log(myNumber);

Randomness

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

Press Enter to type your code!

If you wish to release your keyboard from the text editor, press Esc.

Console

This is the console! Try it with the log() function: write log("hello"); in your code. See full reference here!

Press Enter to interact with your project!

If you wish to release your keyboard from the renderer, press Esc.