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

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

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

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

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

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.