Coding for Visual Learners: Learning JavaScript from Scratch

Set up your JavaScript environment with the p5.js library, download and run example projects, and launch index file in a browser. Use a text editor or online editor to code.

Explore JavaScript basics by writing code, using console.log to display results, and defining and calling functions with inputs. Learn to use browser console and create shapes with functions.

Learn to use variables to store values, assign with the assignment operator, and choose meaningful names while following syntax rules and semicolon conventions for readable code.

Learn how JavaScript differentiates data types using numbers and strings, with quotation marks defining text to avoid treating words as variables. Use comments // and /* */ to annotate code.

Learn how p5.js initializes with a setup function, runs a draw loop repeatedly to animate graphics, and use built-in functions like createCanvas, background, and rect to draw shapes.

Explore the p5.js coordinate system, with x and y axes meeting at the origin. Draw shapes using rect, ellipse, and rectMode center, and learn how setup and draw manage placement.

Explore how p5.js uses the RGB and RGBA color models to control sketch backgrounds and shapes, with values from 0 to 255, grayscale when R=G=B, and optional alpha for transparency.

Set shape colors with fill and stroke functions, experiment with RGB colors, switch active colors, and remove fill or stroke with no fill or no stroke for dynamic visuals.

Explore operator precedence in javascript, using addition, subtraction, multiplication, and division, and learn how parentheses control the order of operations to produce correct results.

Explore using variables to avoid repeating values, update a single variable to move shapes, and improve readability by naming x and y when drawing a circle and a rectangle.

Explore variable scope by declaring key dimensions at the top level so setup and draw share global variables, keeping shapes centered as the canvas size changes.

Explore predefined p5.js variables that expose the current canvas size and other values, and learn to animate by updating a global counter inside the draw loop at 60 fps.

Explore how p5.js exposes frame, frameRate, and frameCount variables to track draw calls, and learn to display the live frame rate on screen using text, textSize, fill, and centering.

Explore conditionals in JavaScript by using if statements, booleans, and comparison operators to control on-screen text, color, and actions within setup and draw.

Master conditional logic with if, else, and else-if blocks, refactoring for concise code, and using variables to manage text display and frame-based animation in p5.js.

Learn to use mouseIsPressed in p5.js to trigger interactivity, drawing a rectangle conditionally and toggling color with a toggle variable and if statements, noting click-detection quirks in the draw loop.

Explore how mouseX and mouseY provide x and y coordinates to move a circle, enabling interactive painting as the cursor moves and dots appear while background is cleared in draw.

Learn to use a for loop to repeat code, initialize and update a counter, and draw multiple circles with the ellipse function, offsetting by the loop index and diameter.

Explore nested loops in JavaScript to draw circles on a canvas with p5.js, using an outer loop for placement and an inner loop for drawing, adjusting x and y coordinates.

Learn how the p5.js random function produces values from 0 to 1, or between two bounds, and visualize these results on screen, noting the difference from gradual noise.

Explore the noise function to generate smooth, incremental values for visuals. Use frame counts and coordinates, with i and j, and nested loops to yield unique, organic animations.

Learn how to create and name your own JavaScript functions in p5, pass parameters, and call them to draw shapes like circles, while understanding function scope and encapsulation.

Use the return keyword to output values from a function, enabling squaring and on-screen display. Learn to declare and call modular, reusable p5 functions for flexible computations.

Create and expand JavaScript objects using object initializers, dot notation, and square bracket notation for numeric or dynamic property names. Access and modify properties like color values.

Demonstrate how to define functions as object properties called methods, use this to access an object's properties, and organize related behaviors inside a circle object with draw and grow methods.

Explore constructor functions as blueprints for creating multiple circle objects, using the new keyword, capitalized function names, and this to access object properties in object oriented programming.

Learn how arrays in JavaScript store diverse data, how to create and push items, access elements by zero-based indices, handle undefined, and use a for loop to generate multiple items.

Learn to use the array length property to derive item counts and build dynamic visuals by pushing random sizes into an array, then drawing hundreds of ellipses with no fill.

Explore how the remainder operator in JavaScript yields the division remainder and drives cyclic values between zero and a target, using frame counts, indices, and color arrays for visualization.