Programming with Javascript (and p5.js)

Introduction

Computer science is the study of information processes. A process is a sequence of steps. Each step changes the state of the world in some way.

To program computers, we need tools that allow us to describe processes precisely and succintly. Since the procedures are carried out by a machine, every step needs to be described completely. Because the computer cannot "think," we need mechanical procedures that can be followed without any thinking.

A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. These languages provide a set of rules and syntax that allow programmers to create sequences of instructions that the computer can execute. Think of a programming language as a specialized language that bridges the gap between human-readable instructions and the machine-readable code that computers can understand. By using a programming language, we can precisely define the steps involved in a process, ensuring that the computer carries out the instructions correctly and consistently.

Javascript and p5.js

There are many programming languages out there. C, C++, C#, Python, Java, Rust, Haskell are just a few examples of the many different languages in use today. When you are starting your journey into computer programming, I think most languages are a fine place to start. For this class, we will be using the language called Javascript.

I am choosing Javascript for this class for a few reasons. One, the instructions you write in Javascript are supported basically by all modern web browsers, making it easy for you to distribute and share your work with others. Two, since it is so widely used on the web, you will gain a highly practical skill if you want to pursue CS further as a career.

The third reason is because I want to use the p5.js programming library. What is p5.js? p5.js is a JavaScript library that simplifies the process of creating interactive graphics and animations. It's designed with artists, designers, and beginners in mind, making it easy to learn and use. I want us to be able to visually see the results of our computer programs. This makes the activity more artful and gives us more feedback on our code-writing.

Getting Started

To write our computer programs, I want us to use a text-editing program that understands the code we are writing. One of the main benefits of this is that it will color the text we write so that it makes it easier to understand. The program I want us to use is called Visual Studio Code by Microsoft. Please download it onto your computer and install it.

Afterwards, open VS Code and install the "Live Preview" extension, and the "p5.vscode" extension. Use the p5.vscode extension to create a starter project. Open the index.html file that it gives you and press the Live Preview button to get live feedback on your coding.

Lesson 1: Drawing Shapes

function setup() {
  createCanvas(400, 300)
  background(100, 100, 200);
}

function draw() {
  stroke(0);
  fill(130, 255, 100);
  circle(300, 100, 50);

  fill(255, 0, 0);
  rect(50, 220, 300, 50);

  stroke(0,0,255);
  line(30, 180, 240, 70);
}

Code Vocabulary

• p5.js Functions
• createCanvas
• background
• stroke
• fill
• rect
• circle
• line

Exercises

1. Modify the numbers in the code above to deduce the behavior of the functions.
• Explain what each of the three numbers in fill do.
• What happens when you use only 1 number in stroke instead of 3 numbers? Is this the same behavior as with fill?
• Explain what each of the 3 numbers for circle do.
• Explain what each of the 4 numbers for rect do.
• Explain what each of the 4 numbers for line do.
2. In the above example, we created a canvas of width 400 and height 300. Mark these points on the rectangle:
• (0, 0)
• (400, 0)
• (0, 300)
• (400, 300)
3. Create a landscape or portrait. If two neighboring students have the same or similar pictures, both of you will receive a zero. Here are some examples:

Lesson 2: The Draw-Loop, Variables, and Time

// I declare the variable t here.
// This is what I am using to hold my "time"
let t = 0;

function setup() {
  createCanvas(400, 300);
  background(100);
};

function draw() {
  background(100);

  // This circle moves forward with time
  circle(t, 100, 50);
  // This circle moves back and forth because of the sine function
  circle(
    100 * Math.sin(t * 0.1) + 200,
    180,
    50
  );
  // This circle will follow the mouse,
  // using the special variables mouseX and mouseY
  circle(
    mouseX,
    mouseY,
    50
  );
  // This circle will appear in the middle of the screen
  circle(
    width/2,
    height/2,
    25
  );

  // This variable increments up by 1 at every frame drawn
  // This is how I am implementing the idea of "time" in my sketch
  t += 1;
};

Code Vocabulary

• p5.js Functions
• setup
• draw
• p5.js Special Variables
• mouseX
• mouseY
• width
• height
• Javascript Operators
• %
• Javascript Keywords
• let myVariable = 123;
• myVariable = 123;
• Javascript Functions
• Math.sin
• Math.cos
• Computing Concepts
• What is a frame in animation?
• What is a loop?

Exercises

1. Create an animation where the colors of some shapes react to the position of the mouse. Be artistic!
2. Use sine or cosine to create a looping animation!
3. What other uses for a variable can you think of besides storing the frame count? Show me! (Could using 2 or more variables be interesting? What can you do to the variable beside incrementing it by 1 every frame? More possibilities will come when we learn more about Javascript)

Lesson 3: Conditionals

let xvel = Math.random() * 5;
let yvel = Math.random() * 5;
let xpos = 100;
let ypos = 100;

function setup() {
  createCanvas(400, 300);
  background(50,150,250);
}

function draw() {
  background(50,150,250);
  circle(xpos, ypos, 50);
  text("DVD", xpos - 12, ypos - 3);
  text("VIDEO", xpos - 18, ypos + 9);
  xpos = xpos + xvel;
  ypos = ypos + yvel;

  if (xpos > width - 25) {
    xvel = -xvel;
  }

  if (xpos < 25) {
    xvel = -xvel;
  }

  if (ypos > height - 25) {
    yvel = -yvel;
  }
  
  if (ypos < 25) {
    yvel = -yvel;
  }
}

Lesson 4: Colors, Stroke, and Fill

Code Vocabulary

function setup() {
    createCanvas(400, 300);
    background(100, 100, 200);
}
  
function draw() {
    colorMode(RGB);
    background(0,0,0,10);

    colorMode(RGB);
    stroke(255,255,0);
    fill(255, 100,  100);
    square(10, 10, 30);

    colorMode(HSB);
    stroke(255,255,0);
    fill(255, 100, 100);
    square(10, 10 + 40, 30);

    colorMode(RGB);
    stroke(255,255,0);
    noFill();
    square(10, 10 + 100, 30);

    noStroke();
    fill(255,255,0);
    square(10, 10 + 140, 30);

    strokeWeight(mouseY / 20)
    stroke(255,255,0);
    noFill();
    square(10, 10 + 230, 30);


    // The HSB color mode lets me easily range over all hues
    colorMode(HSB);
    stroke(
        (atan2(mouseX - width/2, mouseY - height/2) + PI) / (2*PI) * 360,
        255,
        255,
    );
    strokeWeight(2)
    line(width/2, height/2, mouseX, mouseY);
}

• p5.js Functions
• noStroke
• stroke
• noFill
• fill
• strokeWeight
• colorMode
• Computing Concepts
• How is color stored in the computer?
• What is RGB? What is RGBA?
• What is HSB?
• What is a pixel?

Lesson 5: Abstraction, Functions

Lesson 6: For-Loops

Lesson 8: Object-Oriented Programming

Lesson 8: Randomness

Lesson 9: Events, User Input

Art Project