3D Creative Coding using P5.js for Beginners

Create a 3D box in p5.js using width, height, and depth parameters; you can use a single value to make all sides equal.

Create a 3D sphere with radius and detail X and detail Y to control subdivisions and smoothness, adjusting up to 24 in each dimension to shape new forms.

Create a 3d cone in p5.js by adjusting radius, height, detail X, detail Y, and cap, and observe how the cap and details shape the hollow base and surfaces.

Learn to create a 3d cylinder in p5.js by adjusting radius, height, detail X, detail Y, top cap, and bottom cap; observe how subdivisions and booleans affect smoothness and hollowness.

Learn to create a 3d torus in p5.js using radius, tube-radius, detail X, and detail Y. Adjust these parameters to control smoothness, thickness, and the torus shape.

Create a 3d ellipsoid in p5.js by adjusting radius x, y, z and detail x, detail y to control subdivisions, with detail x 24 and detail y 16.

Create a 3D plane in p5.js by using plane(width, height) with width 250 and height 250, then move the plane around and explore its position and size.

Explain how radians and degrees relate using pi, two pi, half pi, and quarter pi; demonstrate rotations on x, y, and z axes and converting between radians and degrees.

Rotate 3D shapes in p5.js by incrementing an angle and applying rotateX, rotateY, and rotateZ. Use push and pop to isolate rotations and distinguish global versus local variables.

Learn how to change an object's origin with the translate function in p5.js, using the X and Y values to place a torus in each quadrant from first to fourth.

Learn the map function in p5.js, mapping a value from original range to a new range with bounds to animate a torus via a sine angle.

Explore 3d artwork creation in p5.js by using a for loop to arrange cone and torus shapes, apply sine and cosine rotations, and translate with push/pop for stacked visuals.

Using push and pop to build a spaceship with ellipsoid, torus, cone, and cylinder; rotate torus 90 degrees and animate with a global angle while moving with the mouse.

Initialize global x, y, and z to zero and translate the spaceship. Create controls function mapping arrows for x and y, spacebar to increase z, and enter to decrease z.

Texture a 3d shape in p5.js by using preload to load an image and applying the texture function to wrap it around a box, with no stroke.

Use preload to load three textures in p5.js to texture a space background and a space shuttle, then apply them to an ellipsoid and torus with no stroke.

Texture a rotating 3d box with a 2d circle in p5.js by applying a create graphics texture. Move the mouse to vary color with mouseX and mouseY.

Apply trigonometric functions to texture a 3d shape with 2d generative art. Use create graphics for a 2d circle on a 3d box, adjusting angle and gap to create patterns.

Map the mouse x position to angle increments to generate diverse 2D generative art patterns on a 3D shape, and refactor the code into two functions for clean texture rendering.

Texture a rotating 3D plane in p5.js with text by using a create graphics canvas, styling 2D text, and mapping it onto the plane via reusable twoDtext and threeD functions.

Texture 3D shapes with live video in p5.js by defining a drawShape function to rotate and translate spheres and apply a video texture using a camera capture.

Learn to build a hot air balloon in p5.js with basic shapes, materials, and transforms, then add a microphone-driven audio input to drive motion in the next video.

Utilize sound interactivity in p5.js to control a hot air balloon by using volume to modulate changingFactor and altitude, translating the balloon up and down and ensuring it lands.

Use the p5 sound library to create music-driven 3D visualizations with rotating textured toruses, and drive their radius and tube radius with amplitude and get level.

Learn to build a generative plant in p5.js by applying angle mode for degrees and multiple directional lights to shade a 3D pot and soil.

Explore generative plant creation in p5.js by adding textures with preload and loadImage, building a 3d pot and soil, and rendering a 20-leaf plant with rotation and directional light.

Create a generative tree with leaves added on click, lit by directional lighting for depth, drawn as a trunk and pot, and run without the draw loop to preserve items.

Generate 3D tree leaves with a mouse click using a for loop and random rotations to form a spherical cluster, translated upward in green hues.

Load 3d models into a p5.js sketch with loadModel, assemble a snowman from parts like snow, buttons, carrot, hat, and hands, and set up lights for upright orientation.