module-1 Let's Make the Canvas Move

Summary

  • Introduction to Drawing with Code
  • Errors, Console, and Comments
  • Color Theory

Introduction to Drawing with Code

  • open your online p5.js editor (Remember to sign up/login into your account)

  • Here is the layout of your online editor: p5.js editor Image from (p5.js website)

  • Name, Save, and Run Your First Sketch

    • Name Your Project: Click on the pencil icon above the text editor and type name for your project.
    • Save Your Project: Click on File in the top toolbar and select “Save”. Ensure you are logged in to save your work.
    • Run Your Code: Click the Play button in the top-left corner to view the output of your code.
  • The editor begins with the following code in the sketch.js file:
    • setup() is a function that's called once when the sketch begins running. learn more
    • draw() is a function that called repeatedly while the sketch runs.learn more
  • This 7mins Video is a great source for you to get familiar with the editor <!-- - order of the code: - setup() (line by line) - draw() (line by line, once finished, start from the first line)
            function setup() {
        createCanvas(400, 400);
        }

        function draw() {
        background(220);
        } -->

Errors, Console, and Comments

  • Understanding Errors

    • Syntax Errors: Syntax errors occur when the code is not written correctly according to the programming language's rules

      // Example: Missing closing parenthesis
console.log("Hello World"; // SyntaxError: missing ) after argument list
cosole.lof("Hello World"); // SyntaxError: typo error
console.log("Hello World"); // correct syntax, no syntax error

    • Runtime Errors: Runtime errors happen when the code encounters an issue during execution, even if the syntax is correct

      // this normal happens when your syntax is correct but there is some other issues
// Example: Undefined variable
console.log(x); // ReferenceError: x is not defined
----------------------------------------------------------------
let x = "Define the variable first";
console.log(x); // x is defined, so no error

  • Using the Console

    • Console.log(): This function helps you print messages to the console, which is useful for debugging.

      let name = "Alice";
console.log(name); // Output: Alice

    • Error Messages: The console will display error messages that indicate what went wrong and often provide a line number.

      let y = 10;
console.log(x); // ReferenceError: x is not defined
// you should be able to see ReferenceError: x is not defined in your console

    • Breakpoints: Use breakpoints to pause execution at certain points to inspect variables and understand the program flow.

      function multiply(a, b) {
let product = a * b;
return product;
}

let result = multiply(5, 7);
console.log(result); // Set a breakpoint on this line to inspect the value of 'result'

  • Writing Comments

    • Single-Line Comments: Use // to write comments that are on a single line.

      // This is a single line comment
// if you want to write comments using //, you have to use it for all comments

    • Multi-Line Comments: Use / ... / to write comments that span multiple lines.

      /*
This is a multiple lines comment
You can write as many comments as you want in this block
*/

    • Purpose of Comments: Comments help explain the code, making it easier to understand for yourself and others. They can also be used to temporarily disable code.

Color Theory

  • Basic Color Functions

    • fill(): Sets the color used to fill shapes.

      function setup() {
createCanvas(400, 200);
fill(255, 0, 0); // Red fill
rect(50, 50, 100, 100); // Draw a rectangle
}

    • stroke(): Sets the color used for lines and borders around shapes.

      function setup() {
createCanvas(400, 200);
stroke(0, 255, 0); // Green stroke
noFill(); // No fill
ellipse(100, 100, 100, 100); // Draw a circle
}

    • background(): Sets the color used for the canvas background.

      function setup() {
createCanvas(400, 250);
background(0, 0, 255); // Blue background
}

  • Color Modes

    • RGB (Red, Green, Blue): The default color mode, using values from 0 to 255.

      function setup() {
createCanvas(400, 400);
background(255, 0, 0); // Red background
}

    • HSB (Hue, Saturation, Brightness): A more intuitive color model for creating colors.

      function setup() {
createCanvas(400, 400);
colorMode(HSB);
background(200, 100, 100); // Set background using HSB
}

  • Color Palettes/Color Scheme

    • Analogous Colors: Colors that are next to each other on the color wheel.
    • Complementary Colors: Colors that are opposite each other on the color wheel.
    • Triadic Colors: Three colors that are evenly spaced around the color wheel.
  • Using Colors in p5.js
    • Hexadecimal Colors: Use #RRGGBB format for specifying colors.
    • Transparency: Use rgba() for colors with transparency (alpha channel).