Unit 1: Day 2
Tasks
2.1 Computing Science Scavenger Hunt
- See doc in Shared Activities Folder (1.1 & 1.3 - Year 1 Theory)
- This activity is just for fun.
- Have those born after June to start at the end and work up.
2.2 Debrief Scavenger Hunt
- Many of the items in the hunt are Computing Innovations
- A Computing innovation includes a program as an integral part of its functions.
- A computing innovation can be physical (e.g., self-driving car), non-physical computing software (e.g., picture editing software), or non-physical computing concepts (e.g., e-commerce).
- Would an abacus be considered a computing innovation? The Difference engine? What about the World Wide Web?
2.3 What Is a Program?
- A program is a collection of program statements that performs a specific task when run by a computer. A program is often referred to as software.
- A code segment refers to a collection of program statements that are part of a program.
- A program needs to work for a variety of inputs and situations.
- The behavior of a program is how a program functions during execution and is often described by how a user interacts with it.
- A program can be described broadly by what it does, or in more detail by both what the program does and how the program statements accomplish this function.
- Discuss types of programming languages – Brainstorm any you have heard of and categorize as markup, script or a language level (from binary code to assembly to C to Java)
- Where do games fit into Computing Science?
2.4 How Does a Programming Language Work?
- Talk about the binary to assembly language to higher level language to graphical languages
- Languages are described in levels
- A Low Level language is closer to what the computer speaks. The lowest level is the binary 1s and 0s.
- A higher language is closer to what a human can understand. At the highest level are Educational languages like Scratch.
- To program a computer you need 2 things:
- The Language - The computer needs the “vocabulary” of the language. For humans, this takes years to develop. We can load the entire vocabulary of a language like Javascript or Java onto a computer in a few seconds.
- The Software called and IDE - You need a way of converting from the high level language, such as Java to the machine code (ones and zeros). This is done with something called an IDE that interprets and compiles your code.
- Discuss the IDE you will be using with them (our recommendation is replit.com or the P5 Editor)
2.5 Javascript
- Discuss our language Javascript and its library P5.js that will be the focus of our first unit.
- Watch the video What is JavaScript? [2:16] - This is a quick intro to our main language.
- P5.js is what is known as a ‘library’ of Javascript. This means it is a subset of Javascript. In this case, it was written to work with a ‘canvas’ to make drawing, animating and user interaction simpler than just using regular Javascript.
Note: We recommend completing some or all of the first programming unit using the P5 editor. https://editor.p5js.org/. This tool does not have the teacher tools that you would prefer but its ease of use gets students up and running quickly. Have them create an account and immediately send you their username. You can see (but not edit) all of their files by going the page: https://editor.p5js.org/StudentUsername/sketches.
For the second programming unit, we recommend the more robust replit.com but this requires some setup files and a bit of HTML experience to use properly. This will be discussed at the beginning of the next programming unit.
2.6 IDE
- Create and Join the IDE of your choice. Depending on the IDE and set up of your choice, you may need to spend some time walking through the logistics of the first lines of code.
- The P5 Javascript Editor (https://editor.p5js.org/) is recommended for this unit.
2.7 Basic Javascript Programming Structures
- Discuss basic Javascript Programming Structures as they compare to the SNAP Hour of Code language from lesson 1
- Draw the SNAP If statement and compare it to the common ___ () {} structure
- if( something to test ) { lines of code }
- function functionname ( ) { lines of code }
- It is common practice to end most most other lines of code with a semicolon. However, Javascript does not require a semicolon
- Everything is case sensitive. Almost everything is lower case unless it is in quotes. Occasionally (such as for textSize() ) you will see camel case.
- Our first programs will have 3 main areas: SETUP function, DRAW function, Global Variables section
- Soon we will add additional sections such as a PRELOAD function, KEYPRESSED function and MOUSEPRESSED function
- // - this is called a comment and is used to write English for you as a programmer and me as your teacher
2.8 PS Editor
- Introduce the P5 Editor by comparing the console to the display window with the println() statement
- Discuss the console window (mostly for introduction and for debugging) vs display window
- Complete a few basic println statements such as:
- println(“Where does this print?”);
- text(“Ok, what about this?” 50,50);
- String name = “student name”);
- println((“Hello there “ + name);
- Test run a few errors before continuing. Have them recognize the most common errors including:
- Forgetting semi-colon
- Unclosed quotes or brackets
- Mis-capitalization
Reminder: All of the examples in the following lessons are fully coded at the following link (32 MB Zip file). Using those fully coded examples will become even more helpful once you add images and fonts to your activities.
2.9 Ex1_Intro
- Be sure to immediately name and save the code. After saving once, autosave will be automatically turned on. It will NOT autosave until you have named and saved it once.
- Good Teaching Practice: Copy and share the link to your code immediately. Then students can copy and paste your code if they fall behind.
- Start by introducing color with the background line. P5 uses a one number color (0-255) for grayscale or a 3 number color(0-255, 0-255, 0-255) for an RGB color.
- Demonstrate that color can also be used for FILL and STROKE
- Introduce the basic shapes and how they are drawn
- Add STROKEWEIGHT and the other changes
- Add the MOUSEPRESSED function to help draw future shapes
- Ask students to draw each shape (rect, square, ellipse, line, circle) one more time
Unit 1 - Example 1 - Intro
function setup() {
let sketch = createCanvas(600, 200);
sketch.parent("mycanvas");
}
function draw() {
background(255,255,0); //RGB up to 255
fill(0,0,255);
stroke(255,0,0);
strokeWeight(13)
rect(300, 100, 150, 75); //x,y,w,h
fill(100,100,255);
ellipse(300, 100, 150, 75);
strokeWeight(3);
line(456,114, 512, 92);
circle(50,50, 75);
square(100,100, 75);
stroke(0);
strokeWeight(3);
fill(255);
}
function mousePressed(){
print( mouseX + ", " + mouseY );
}
2.10 Ex2_Scrolling Text
- Discuss the interplay between size and background. Background is just an automatically drawn rectangle that starts at zero, zero and covers the whole screen.
- Experiment with more background colours. Perhaps use an outside color picker.
- Discuss the concept of a FUNCTION. The program includes setup() and draw() but we added mousePressed too. Later we will learn how to make our own custom functions.
- Add text(“words”, x, y) to the draw method, using an event from your own school
- Experiment with commenting out the background code and see how it changes the look of the text. Note: it may not at this time.
- Review some basic errors (semicolon, quotation marks, brackets)
Unit 1 - Example 2 - Scrolling Text
let textX = 250;
function setup() {
let sketch = createCanvas(500, 600);
sketch.parent("mycanvas");
}
function draw() {
background(255,0,0);
noStroke();
fill(255,255,0);
textSize(18);
text("Week of Welcome starts today!", textX,30);
textX = textX - 2;
if ( textX < -250 ){
textX=500;
print("too far left");
}
}// end draw
As these lessons are designed to also help you meet the AP CS Principles outcomes, they will occasionally be embedded in the lessons. Most AP outcomes are covered numerous times but each is directly referenced at least once so you can use the same terminology to help prepare your students for the exam.
Additional AP CSP Outcomes Covered in This Lesson
- The assignment operator allows a program to change the value represented by a variable. textX = 500;
Continue to Unit 1: Day 3 »