Code Art: Learn Creative Coding to Generate Visuals with JS

Explore creating a pixel rain effect in vanilla JavaScript and apply it to a group of images.

Set up the creative coding project from the terminal, install the code command, and open it in code; import images, create an image object, and configure its source and position.

Learn how to access image data in JavaScript, extract RGBA values from each pixel, compute brightness, and prepare data structures for effects like a pixel rain and color separation.

Create a particle class to generate downward particles with random x and top y, varying radii and brightness-based updates; map positions to a brightness grid, draw and recycle at bottom.

Map 2d x,y coordinates to a 1d brightness array using an index formula, illustrating how pixel coordinates translate to array positions, with floor to handle non-integer values.

Apply the mapping formula in your code and prepare the animation function to reveal visuals, as the lecture guides parameter setup and expanding the window before animation.

Create the draw method to render a circle with x, y, and radius using pi times two, and beginning patterns while exploring color options to color pixels.

Create a canvas particle system using global alpha and a full-screen rectangle to render a blue blur, updating brightness from image pixels each frame, and apply to any image.

Experiment with rgb colors by pushing red, green, and blue values into an rgb area and rendering them as particles that form the image.

Begin your creative coding journey by exploring visuals inspired by Bruno's color works. Install Node.js and the Canvas sketch library to start building a Bruno-inspired project in Campbell sketch module.

Download node from the provided URL, choose the arm64 build for M1 or the Windows installer, then verify with node -v and npm -v.

Install the canvas-sketch library globally with npm, create a sketch project in a folder, and run a live server to view the sketch in the browser.

Learn canvas-sketch by configuring a settings object for width and orientation, drawing a rectangle with begin path and context fill or stroke, and enjoy live browser updates plus quick screenshots.

Create a responsive strip of 12 rectangles in JavaScript with common sketch, using a for loop to position and fill them with a 100-pixel gap.

Learn how canvas translate shifts the origin from zero zero, draws rectangles at translated coordinates, and reveals the new origin under the hood to affect subsequent drawings.

Learn to rotate the canvas context after translating, convert degrees to radians (pi/180), and draw a rotated rectangle to demonstrate color and shape rotation.

Use the save and restore block to create a checkpoint before translation and rotation, so you can restore the context to the initial phase.

Discover how randomness animates creative coding with JavaScript by generating random patterns and rectangles, manipulating positions, sizes, and loops to create evolving visuals.

Reverses velocity at zero to create a bounce animation, making a ball move between two sides in an infinite loop.

Define a Circle class with x, y, and radius; implement a draw(context) method that renders a full circle using arc from 0 to 2*pi with a black stroke.

Generate circles creates multiple circles with random x, y, and z values, stores them in an array, and renders each with a for each loop to produce dynamic visuals.

Animate circles by generating velocity in the x or y direction and updating their position each frame, then enable animation and use functions to control movement and appearance.

Write a bounce function to keep circles inside the canvas by checking x and y against zero and the canvas width and height, then reverse velocity on collision.

Calculate the Euclidean distance between two points to draw a connecting line between circles in a JavaScript canvas, using the distance formula with dx and dy.

Explore drawing lines between every pair of circles in a js creative coding project, using nested loops, context moveTo and lineTo, stroke, and distance-based rendering to avoid duplicates.

Learn to compute the Euclidean distance between two circle centers using a get distance function in JavaScript, and draw a line only when the distance is under 215 pixels.

Adjust line width by setting a maximum value (ten) and decreasing it with the distance between circles. Fill the interiors with white to keep lines from appearing inside the circles.

Build an amazing audio visualizer that responds to any audio input, with balls jumping to talk, clipping, or music, showcasing responsive visuals through creative coding with JavaScript.

Set up for the audio visualizer by navigating from the command line, creating an audio visualizer folder and essential files (microphone.js and visualizer.js), and opening the project in code editor.

Import two JavaScript files in the edge terminal boilerplate, create a new script, and use the microphone class within the visualizer to define the visual components.

Explore practical steps for adding and organizing files in code, creating new files quickly, and starting to write HTML and JavaScript for visual coding.

Copy and paste a microphone boilerplate to access the audio input, retrieve samples half of the FFO size, and drive visualizations with a volume-based data stream.

Create a microphone object and fetch real-time data through an animation frame loop, logging 256 samples to visualize sound as the data streams in.

Create a Ball class in JavaScript visuals with x and y, radius 8, and color options, plus draw, fall, and jump methods to simulate balls falling from the top.

Generate balls dynamically based on browser width by computing the distance between balls, filling an array, looping to push new balls, and drawing them with a draw function.

Animate falling balls by drawing and updating them each frame, applying gravity and increasing fall force, and stop when balls reach halfway down.

Learn to simulate gravity and jumping for balls using pure JavaScript, managing is falling, jump force, and position with frame-by-frame updates.

Learn to make balls jump in response to audio input by mapping microphone samples to jump forces, using the sample index for each ball and time scaling.

Get started by building an audio visualizer that renders on screen and responds to music, demonstrated by playing audio to show the effect.

Set up the audio visualizer project by applying the same template and styles, updating the title, and adjusting margins, padding, and a black background.

Create a figure class in JavaScript to draw colored circles and spawn ten figures at random positions on a canvas, then animate them with a render loop.

Drive circular movement by updating x and y with cosine and sine on a looping counter from zero to 360, converting degrees to radians, to draw a continuous circular path.

Use microphone input to control circle size in real time by mapping the samples array with a power meter; adjust size each frame, scaling values around 200 for visibility.

Change the size of figures with voice input and play a song to illustrate audio-driven visuals. Explore creative coding with JS to control visuals and audio.

customize visuals by adding a teleport animation to figures, control random teleport frequency with constraints, and speed up motion by increasing the animate function calls to boost frame rate.

Discover three.js, a library that simplifies creating and animating 3D objects on maps, with its own camera, scene, and geometry, akin to a game engine with physics.

Explore practical use cases of three.js for rendering interactive 3d models, games, and engaging websites, and learn to set up and test a first 3d cube project in the browser.

Install Node.js and npm, set up a project folder, and install three.js with npm to access its renders, lights, cameras, audio, and materials.

Create and organize project files using the terminal and commands like touch and index.js, then open the JavaScript project with code or the editor’s command palette.

Import three.js into a web project, adjust the scene by removing gaps, create two objects, and load the three.js build via script tags for rendering visuals.

Learn how to create a scene and a perspective camera in three.js, set the field of view and aspect ratio, and apply near and far clipping to control rendering.

Create and configure the renderer, then set its size to full screen and append the render element to the document body. Establish the scene camera and two regions.

Create a cube by defining its geometry and a basic material, set its color, assemble a mesh, add it to the scene, and adjust the camera z-position to reveal it.

Render the scene in the browser by wiring an animate loop with requestAnimationFrame, using a renderer and camera to display a green cube created with the library.

Learn to animate the cube by updating rotation in the animation loop, tweaking rotation x with steps like 0.1, and exploring 3d positioning and collisions of cubes.

Create a 3d space effect that mirrors a prior project, now with a 3d look used in portfolios and landing pages; get ready to dive in the next video.

Create a new space file with an HTML template, set the title to 3D space; import the assets and three.js, and apply styles (no margins, black background).

Define a three.js init function that creates scene, camera, and WebGL renderer, configures a perspective camera with fov 64, aspect ratio, near 1, far 1000, and attaches renderer to document.

Create 5000 stars with a for loop, assign random positions, track velocity and acceleration, and build a three.js buffer geometry stored in an array for rendering.

Create a sprite with a 3d texture loader, define a star material and points geometry, set color and size 0.6, and add stars to the scene inside the init function.

Learn to animate a 3D scene with a custom animate function in JavaScript, using requestAnimationFrame, updating positions with velocity and acceleration, and updating buffer geometry to render dynamic visuals.

Finish the project by wrapping stars that exit the cosmos, resetting their position to 200 and velocity to zero, and rotating them along the y axis for a cinematic effect.

Explore three.js particle effects on 3D models with JavaScript, using a template, color post-processing, and importable assets. Learn to apply particle effects to any model and imagine music-driven visuals.