flanniganable
flanniganable
  • 183
  • 333 496
Equation of a Line Math Simulator p5.js
Learn how to use p5 JavaScript Library to make an equation of a line math simulator that uses two drag and drop points make from a constructor, how to make the p5 canvas a coordinate plane, how to calculate slope and y intercept, and how to make a HUD that shows mouse position, each point position, slope, y intercept and equation of the line.
Timestamps:
00:00 Introduction
00:23 Task list
00:54 p5 Canvas vs Coordinate Plane
01:52 Make points using constructor
03:32 How to create coordinate plane on p5 canvas
05:52 How to add drag and drop capability to points
07:59 How to calculate slope, y-intercept and equation of line
09:32 Add HUD (heads-up display)
Resources:
p5 web editor: editor.p5js.org/
p5 library: p5js.org/
p5 reference: p5js.org/reference/
Переглядів: 285

Відео

25d How to explode objects threejs
Переглядів 2,6 тис.2 роки тому
Learn how to break up objects into smaller triangles and move the triangles in a direction to make an explosion. Learn how to use color and velocity in BufferGeometry. Learn how to use Tesselate Modifier in three.js. Timestamps: 00:00 Intro/demo 00:10 Get TesselateModifier.js 00:21 How does explosion effect work? three.js 01:18 Import statements 01:37 Vertex shader, fragment shader, uniforms th...
25c Flashlight effect three.js
Переглядів 1,4 тис.2 роки тому
Learn how to make a flashlight effect in three.js using PointerLockControls and SpotLight. Learn how to make a switch to turn the flashlight on and off. Learn how to make objects child of a parent object. Timestamps: 00:00 Intro/demo 00:16 How to make objects children of a parent object 02:03 Import PointerLockControls.js & use key controls from three.js PointerLockControls example 02:21 Add ca...
26a Text to Speech three.js
Переглядів 8252 роки тому
How to use text to speech in three.js. Learn how to control speech text, speech volume, speech rate, speech voice of text to speech. Using text to speech can reinforce learning(information retention) and increase accessibility of your project. Timestamps: 00:00 Intro/demo 00:22 Load voices to use (other than default voice) 01:17 How to set language, rate, volume, and text to read 02:36 How to u...
8c How to use drag controls for snap to grid three.js
Переглядів 6 тис.2 роки тому
Learn how to configure drag controls to snap an object to a grid in three.js. Timestamps: 00:00 Intro/demo 00:25 Import DragControls.js into three.js 00:34 Create GridHelper three.js 01:14 Create ground and cube mesh objects 01:21 Create dragControls and add event listeners three.js 01:50 Configure DragControls.js to snap objects on grid Resources: DragControls.js @ GitHub: raw.githubuserconten...
25b Pulse effect three.js
Переглядів 8902 роки тому
Learn how to make a simple pulse effect in three.js using sprites and tween.js. Learn how to make a sprite. Learn how to get and use tween.esm.js (module). Learn how to animate scale and opacity of sprite. Timestamps: 00:00 Intro/demo 00:20 Get image with transparent background 00:52 Get and import tween.esm.js into three.js 01:17 Update tween animations in animate loop 01:27 Make animation tri...
25a Lightning effect three.js
Переглядів 1,4 тис.2 роки тому
Learn how to make lightning in three.js. Learn how to configure lightningStrike parameters/options three.js. Learn how to animate lightning using time three.js. Learn how to control duration of lightning three.js. Timestamps: 00:00 Intro/demo 00:20 Get LightningStike.js & SimplexNoise.js three.js 01:20 Creating lightning strike geometry three.js 03:30 Make lightning mesh three.js 04:13 How to a...
24d How to make a mirror three.js
Переглядів 1,9 тис.2 роки тому
Learn how reflectors work in three.js. Learn how to make a reflector in three.js. Learn how to get and import Reflector.js into three.js. Learn how to set reflector options three.js. Learn how to make reflector geometry three.js. Timestamps: 00:00 Intro/demo 00:12 How reflectors work in three.js 00:34 Get Reflector.js from three.js GitHub page 00:56 Import Reflector and make/code a reflector th...
14b How to merge BufferGeometries three.js
Переглядів 3,5 тис.2 роки тому
Learn how to merge different buffer geometries into a single buffer geometry to increase performance and treat different buffer geometries as a single mesh object. Timestamps: 00:00 Intro/demo 00:08 Why merge buffer geometries? three.js 00:40 Get and import BufferGeometryUtils.js into three.js 01:34 Create each BufferGeometry and translate position three.js 02:06 Merge BufferGeometries into sin...
24b How to make a river three.js
Переглядів 6 тис.2 роки тому
Learn how to make moving water in three.js. Learn how to read, use, and make a flow map in three.js. Learn how to read, use, and make a height map in three.js. Learn how to texture objects using color map, normal map, displacement map, roughness map, ambient occlusion map in three.js. Learn how to use export & import in three.js. Timestamps: 00:00 Intro/demo 00:20 To do list 00:26 Get water tex...
24a Waving Reeds three.js
Переглядів 1,3 тис.2 роки тому
Learn how to export and import using modules in three.js. Learn how to texture objects in three.js. Learn how to make a noise function in vertex shader three.js. Learn how to use fog in three.js. Learn how to make reeds using instanced mesh in three.js. Learn how to animate reeds in three.js. Learn how to make and animate water in three.js. Timestamps: 00:00 Intro/demo 00:10 To do list 00:16 Fi...
12d How to convert TIF images to PNG or JPEG for textures in three.js
Переглядів 5382 роки тому
Learn how to convert TIF images to PNG or JPEG images to use as textures in three.js. Three.js does not use TIF images for textures. Free textures available at: www.textures.com/ polyhaven.com/ www.pexels.com/
16f Simple Solar System: Sun, Earth, Moon three.js
Переглядів 4,4 тис.2 роки тому
Learn how to make earth orbit sun and moon orbit earth three.js. Learn how to orbit object using time on a curve three.js. Learn how to orbit object using unit circle (cos, sin) three.js. Learn how to texture objects - bump map, specular map, color map, emissive map. Learn how to make a background sphere texture. Timestamps: 00:00 Intro/demo 00:12 Where to get image textures three.js 00:35 Plac...
16e Fireworks Effect three.js
Переглядів 1,7 тис.2 роки тому
Learn how to make exploding particles in three.js. Learn how to make a constructor in three.js. Learn how to use sprites and sprite material in three.js. Learn how to use forEach and filter ES6 methods. Timestamps: 00:00 Intro/demo 00:10 Need image with transparent background for particles 00:18 Key controls for particle explosions three.js 01:49 Explosion constructor: properties 02:30 Explosio...
16c Roller Coaster Effect three.js
Переглядів 1,3 тис.2 роки тому
Learn how to make a roller coaster effect in three.js. Learn how to animate camera along a curve/path in three.js Learn how to import curves from CurvesExtra.js in three.js Learn about modulus. Learn how to find a point on a curve. Timestamps: 00:00 Intro/demo 00:15 What is a modulus? 00:34 How to find a point on a loop/curve 02:38 Get CurvesExtra.js in three.module.js 03:20 Importing curves/kn...
13 How to make fancy curves in three.js using CurvesExtra.js - updated
Переглядів 7102 роки тому
13 How to make fancy curves in three.js using CurvesExtra.js - updated
16d Particles follow path effect three.js
Переглядів 1,7 тис.2 роки тому
16d Particles follow path effect three.js
16b How to make camera shake effect three.js
Переглядів 1,9 тис.2 роки тому
16b How to make camera shake effect three.js
23a How to make falling snow three.js
Переглядів 3,8 тис.2 роки тому
23a How to make falling snow three.js
22b How to color terrain from heightmap three.js
Переглядів 2,9 тис.2 роки тому
22b How to color terrain from heightmap three.js
22a How to quickly make terrain using a heightmap three.js
Переглядів 9 тис.2 роки тому
22a How to quickly make terrain using a heightmap three.js
21g Landspeeder project - cannon.js & three.js: episode 6
Переглядів 7432 роки тому
21g Landspeeder project - cannon.js & three.js: episode 6
18d How to make enemy see player using raycasting three.js
Переглядів 1,6 тис.2 роки тому
18d How to make enemy see player using raycasting three.js
21f Landspeeder project - three.js & cannon.js: episode 5
Переглядів 1,2 тис.2 роки тому
21f Landspeeder project - three.js & cannon.js: episode 5
21e Landspeeder project - three.js & cannon.js: episode 4
Переглядів 1,5 тис.2 роки тому
21e Landspeeder project - three.js & cannon.js: episode 4
21d Landspeeder project - three.js & cannon.js: episode 3
Переглядів 1,3 тис.2 роки тому
21d Landspeeder project - three.js & cannon.js: episode 3
21c Landspeeder project - three.js & cannon.js: episode 2
Переглядів 1,1 тис.2 роки тому
21c Landspeeder project - three.js & cannon.js: episode 2
21b Landspeeder project - three.js & cannon.js: episode 1
Переглядів 1,4 тис.2 роки тому
21b Landspeeder project - three.js & cannon.js: episode 1
21a Landspeeder Project Intro: cannon.js and three.js
Переглядів 6752 роки тому
21a Landspeeder Project Intro: cannon.js and three.js
19 How to add background music and sound effects three.js
Переглядів 4,1 тис.2 роки тому
19 How to add background music and sound effects three.js

КОМЕНТАРІ