JavaScript for Interactive Installations

Lesson 1: Setting Up JavaScript and p5.js

Objective: Get JavaScript up and running in your environment and set up the p5.js library for interactive graphics!

Step-by-Step Guide

1. Download and Set Up p5.js

   Go to the p5.js download page and follow the instructions to download the p5.js web editor or set it up locally.

   Tip: The easiest way to get started is by using the p5.js web editor.

2. Your First Program - Welcome to p5.js!

   function setup() {
     createCanvas(400, 400);
     background(220);
   }

   Run It! Press the "Play" button in the p5.js editor to see your canvas with a light gray background!

   Tip: Don't forget to save your file before you run it!

Lesson 2: Variables and Basic Data Types

Objective: Learn about variables, which store information for your program!

Step-by-Step Guide

1. Creating Variables

   let installationTitle = "Light Show Extravaganza";
   let numberOfLights = 5;
   let brightness = 0.8;
   let isActive = true;

2. Displaying Variables

   function setup() {
     createCanvas(400, 400);
     text("Title: " + installationTitle, 10, 20);
     text("Lights: " + numberOfLights, 10, 40);
     text("Brightness: " + brightness, 10, 60);
     text("Active: " + isActive, 10, 80);
   }

Challenge: Change the value of numberOfLights and observe how the text updates on the canvas!

Tip: Don't forget to save your file before you run it!

Lesson 3: Control Flow - Using if Statements and Loops

Objective: Make your program decide what to do based on conditions and repeat actions with loops!

Step-by-Step Guide

1. Using if Statements

   function setup() {
     createCanvas(400, 400);
     if (numberOfLights > 3) {
       text("Wow, that’s a lot of lights!", 10, 20);
     } else {
       text("This is a simpler installation.", 10, 20);
     }
   }

2. Using a Loop

   function setup() {
     createCanvas(400, 400);
     for (let i = 1; i <= numberOfLights; i++) {
       text("Light " + i + " is ON", 10, 20 * i);
     }
   }

Challenge: Modify the number of lights and see how the program's output changes!

Tip: Don't forget to save your file before you run it!

Lesson 4: Functions - Writing Reusable Code

Objective: Learn how to define functions that you can reuse to make your code cleaner and more efficient!

Step-by-Step Guide

1. Creating a Function

   function turnOnLight(lightNumber) {
     text("Light " + lightNumber + " is now ON", 10, lightNumber * 20);
   }

2. Calling the Function

   function setup() {
     createCanvas(400, 400);
     for (let i = 1; i <= numberOfLights; i++) {
       turnOnLight(i);
     }
   }

Challenge: Create a new function turnOffLight() and display a message when the light is turned off!

Tip: Don't forget to save your file before you run it!

Lesson 5: Creating Interactive Visuals with p5.js

Objective: Use p5.js to make your project interactive and respond to user input!

Step-by-Step Guide

1. Responding to Mouse Clicks

   function mousePressed() {
     background(random(255), random(255), random(255));
   }

   What’s Happening: Every time you click the mouse, the background color changes randomly.

2. Responding to Keyboard Input

   function keyPressed() {
     if (key === 'a' || key === 'A') {
       text("You pressed A!", 10, 100);
     }
   }

Challenge: Change the background color when pressing other keys, or create new interactions with the mouse!

Tip: Don't forget to save your file before you run it!

Lesson 6: Animations with p5.js

Objective: Create simple animations using p5.js!

Step-by-Step Guide

1. Creating a Moving Circle

   let x = 0;
   let y = 200;
   
   function setup() {
     createCanvas(400, 400);
   }
   
   function draw() {
     background(220);
     ellipse(x, y, 50, 50);
     x += 2;  // Move the circle to the right
   }

2. Making the Circle Move with Arrow Keys

   function keyPressed() {
     if (keyCode === LEFT_ARROW) {
       x -= 5;
     } else if (keyCode === RIGHT_ARROW) {
       x += 5;
     }
   }

Challenge: Try changing the circle’s color or making it bounce off the walls!

Tip: Don't forget to save your file before you run it!