Computational Concepts: Vidcode

Through the Creative Coding projects, students will learn about and apply core programming concepts related to JavaScript, such as sequence, functions, variables and objects. Take the time to introduce these key terms using easy-to-understand language and by relating the concepts to students’ experiences. Incorporate the vocabulary beyond the coding projects whenever possible, and encourage students to use the terms in oral and written communication.  

Following are the concepts students will encounter, relevant Creative Coding projects in red, and some examples.   

Arguments provide more information about what or how much the function should do.
Below, hello world is the argument.

EXAMPLE:
text(“hello world!”);

Arrays are ordered lists of data that can hold words, numbers, objects, and more. (Stop Motion)

EXAMPLE:
[“image1.png”, “image2,png”, “image3.png”];

Code is one or more commands or algorithms for a computer to carry out.

Conditionals are codes that run only if certain conditions are met. (Newscast)
The code below moves a cat graphic back to the left of the movie canvas if it goes over 200px.

EXAMPLE:
if(cat.x > 200) {
   cat.x = 0;
}

Functions are the main way of getting things done in JavaScript. A function is an action that has a name. Functions are written in parentheses. (Meme, Doodle Augmented Reality, Newscast)

EXAMPLE:
function dance(my_graphic) {
   my_graphic.x += 20;
   my_graphic.rotation += 10;
}

JavaScript is a programming language.

Loops tells the computer to repeat one or more line of code. (Newscast)

EXAMPLE:
repeat(function() {
   //looping stuff here
});

Methods are functions that belong to an object, or things the object can do.

Objects store data, including multiple variables as well as functions. When a variable is stored in an object we call it a property.  

Operators are symbols that manipulate numbers. (Newscast)

EXAMPLE:
The “>” in:

if(headline > movie.width)

Properties are the elements that are about the object, or belong to the object. (Meme, Doodle AR, News)

EXAMPLE:
my_drawing.color = “red”;

Sequence is the order that things are done in a program.
NOTE: Programs are read top to bottom. (Meme, Doodle AR, Stop Motion, Newscast)

Strings are the words inside a function. Strings are always written with quotation marks. (Meme, Doodle AR, Newscast)

EXAMPLE:
text(“welcome to my video!”);

Or

EXAMPLE:
my_text.color = “orange”;

Variables store and give a name to a piece of data, such as a number or a “string” of text. (Meme, Doodle AR, Newscast)

var my_drawing = drawing();

var message = “Hello BrainPOP!”;