This is the console! Try it with the log() function: write log("hello"); in your code. See full reference here!
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
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
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_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");
will place the arrow on top of the heart;
var arrow = graphic("arrow");
var arrow = graphic("arrow");
will place the heart on top of the arrow.
var heart = graphic("heart");
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 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 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";
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];
Repeat Loop
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
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!
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;
log(myNumber);
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
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!
If you wish to release your keyboard from the renderer, press Esc.