Unit 3 - INTRO TO PROGRAMMING

Lesson 18 - design a digital scene

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Write programs that address one component of a larger programming problem and integrate with other similarly designed programs.
Collaborate to break down a complex programming problem into its component parts.
Use code written by other programmers to complete a larger programming task.
Write responses to AP-style prompts

Supplementary Resources

VOCABULARY

Abstraction - a simplified representation of something more complex. Abstractions allow you to hide details to help you manage complexity, focus on relevant concepts, and reason about problems at a higher level.

Lesson 16 - FUnctions with parameters

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

abstract code even further, by making it possible to “pass” values into a function from the code that calls it.

Supplementary Resources

VOCABULARY

Abstraction: is the process of taking away or removing characteristics from something in order to reduce it to a set of essential characteristics. Through the process of abstraction, a programmer hides all but the relevant data about an object in order to reduce complexity and increase efficiency.

Lesson 15 - collision detection

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

detect collision between two rectangles
see the connection that similar algorithms can be applied to 2D games
detect collision between sprites in our game so we can trigger some actions. (removing sprites, updating score, etc.)

Supplementary Resources

P5.js Documentation (Reference)

VOCABULARY

Hitbox: An invisible shape commonly used in video games for real-time collision detection.
It is often a rectangle (in 2D games) or cuboid (in 3D) that is attached to and follows a point on a visible object (such as a model or a sprite)

Lesson 14 - KeyIsDown Function (Keyboard Control)

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

navigate sprites(game characters) via keyboard keys.
prevent sprites to move out of the canvas borders.

Supplementary Resources

P5.js Documentation (Reference)

VOCABULARY

Sprite: a computer graphic that may be moved on-screen.

Lesson 13 - Create and Display Images - Animated GIFs

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Learn how to load and display animated GIFs in a P5.js sketch.

Supplementary Resources

Lesson 12 - Load and Display Images - JPG & PNG

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Learn how to load pre-existing media into P5 sketches.

Supplementary Resources

Lesson 11 - Javascript Objects & Key Control

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

create simple objects in our program to store and access data in a more organized way.

Supplementary Resources

VOCABULARY

Object: A collection of properties, and a property is an association between a name (or key) and a value. The way of storing group of data in key-value pairs.

Lesson 10 - FUNCTIONS 2 - BOUNCING BALL

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

understand that functions are the parts of a program which separates them out into modular pieces.
analyze how a program produces different results based on varying circumstances via conditionals.

Supplementary Resources

Lesson 09 - Simple Functions & Conditional Statements

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

understand that functions are the parts of a program which separates them out into modular pieces.
analyze how a program produces different results based on varying circumstances via conditionals.

Supplementary Resources

Lesson 08 - SCALE

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Learn transformation techniques(scale) to change the size of what gets drawn on the canvas.

Supplementary Resources

Lesson 07 - TRANSLATE & ROTATE

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Learn transformation techniques(translate, rotation) for changing where and how shapes get drawn to the canvas.

Supplementary Resources

Lesson 06 - VARIABLES & DATA TYPES

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

declare and initialize variables that hold primitive values.
trigger sets of instructions when keyboard and mouse is pressed.

Supplementary Resources

Video Tutorial: Variables in p5.js (Make your own)

VOCABULARY

Variable: A placeholder of information that can be changed at run-time. A piece of computer memory holding some value.
Data Type: All values in a programming language have a "type" - such as a Number, Boolean, or String - that dictates how the computer will interpret it. For example 7+5 is interpreted differently from "7"+"5"
Boolean: A data type that has one of two possible values, intended to represent the two truth values of logic and Boolean algebra.
Concatenation: is the operation of joining two strings together. The term"concatenation" literally means to merge two things together. name = (firstname + lastname); console.log(“Score: ”+ points);
String: A string is a data type used in programming, such as an integer and floating point unit, but is used to represent text rather than numbers.

Lesson 05 - MOUSE INTERACTION

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

control the flow of the program by running setup() and draw() functions.
handle program events when the mouse is moved.

Supplementary Resources

Lesson 04 - Drawing 2D Shapes

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Draw various 2-D primitive shapes on the canvas.

Supplementary Resources

Video Tutorial : Shapes & Drawing - p5.js Tutorial
P5.js Documentation (Reference)

Lesson 03 - INTRO TO P5.JS

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

Learn each pixel of the screen is a coordinate that determines the location of a point in space.
Create a custom canvas and draw lines and rectangles on it.

Supplementary Resources

Lesson 02 - intro to programming languages

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

learn various creative and helpful purposes for programming.

Supplementary Resources

VOCABULARY

Computer Program: A list of instructions that tell a computer what to do.
High-level language: A programming language that enables a programmer to write programs that are more or less independent of a particular type of computer. Such languages are considered high-level because they are closer to human languages and further from machine languages.
Low-level language: used to write programs that relate to the specific architecture and hardware of a particular type of computer. They are closer to the native language of a computer (binary), making them harder for programmers to understand.
Assembly language: A low-level programming language designed for a specific type of processor.
Machine language: The lowest-level programming language. It is the only language a computer is capable of understanding (binary).
Compiler: A program that processes statements written in a particular programming language (High) and turns them into machine language(Low).

Lesson 01 - ALGORITHMS

LESSON MATERIALS (YOU CAN ACCESS ONLY VIA @BERGEN.ORG ACCOUNT)

Objectives

Students will be able to:

answer the question, "What is an algorithm?"
explore algorithms described in English

Supplementary Resources

Ted-ed Video: What's an algorithm?
Lightbot Game - Lightbot is an educational video game to command a little robot to navigate a maze and turn on lights.

VOCABULARY

Algorithm: precise step-by-step instructions for solving a specific problem or accomplishing a specific goal.
Pseudocode:
- An outline of a program, written in a form that can easily be converted into real programming statements.
- It uses short terms or simple English language syntax to write code for programs before it is actually converted into a specific programming language.
Flowchart: A diagram that represents a set of instructions.
Normally use standard symbols to show the step-by-step solution to the problem.

Report abuse