diff --git a/content/tracks/index.json b/content/tracks/index.json index 2969beed1..1bd09846b 100644 --- a/content/tracks/index.json +++ b/content/tracks/index.json @@ -18,6 +18,10 @@ "side-tracks/snowflakes", "side-tracks/pi-day", "side-tracks/web-sockets-and-p5js", - "side-tracks/teachable-machine" + "side-tracks/teachable-machine", + "side-tracks/transformations-in-p5", + "side-tracks/physics-libraries", + "side-tracks/noise", + "side-tracks/webgl" ] } diff --git a/content/tracks/side-tracks/webgl/index.json b/content/tracks/side-tracks/webgl/index.json new file mode 100644 index 000000000..16eed99c1 --- /dev/null +++ b/content/tracks/side-tracks/webgl/index.json @@ -0,0 +1,14 @@ +{ + "title": "WebGL", + "description": "This side track contains tutorials about WebGL.", + "videos": [ + "webgl/1-introduction", + "webgl/2-3d-geometries", + "webgl/3-light-and-material", + "webgl/4-texture", + "webgl/5-camera-and-perspective", + "webgl/6-createGraphics", + "webgl/7-loading-an-obj-file", + "webgl/8-3d-custom-shapes" + ] +} diff --git a/content/videos/webgl/1-introduction/index.json b/content/videos/webgl/1-introduction/index.json new file mode 100644 index 000000000..051039e59 --- /dev/null +++ b/content/videos/webgl/1-introduction/index.json @@ -0,0 +1,52 @@ +{ + "title": "Introduction to WebGL in p5.js - WebGL and p5.js Tutorial", + "description": "This is the first video in a playlist about the WEBGL renderer in the p5.js library. I discuss 3D rendering in the browser and the current state of capabilities in p5.js WEBGL.", + "videoNumber": "", + "videoId": "nqiKWXUX-o8", + "date": "2017-12-18", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl"], + "canContribute": false, + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "00:47", "title": "What is WebGL" }, + { "time": "03:35", "title": "three.js" }, + { "time": "05:37", "title": "Enabling 3D context" }, + { "time": "09:40", "title": "Rendering context" } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "three.js", + "description": "Documentation for three.js", + "url": "https://threejs.org" + }, + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/2-3d-geometries/images/img1.png b/content/videos/webgl/2-3d-geometries/images/img1.png new file mode 100644 index 000000000..13e05d007 Binary files /dev/null and b/content/videos/webgl/2-3d-geometries/images/img1.png differ diff --git a/content/videos/webgl/2-3d-geometries/index.json b/content/videos/webgl/2-3d-geometries/index.json new file mode 100644 index 000000000..486c856e7 --- /dev/null +++ b/content/videos/webgl/2-3d-geometries/index.json @@ -0,0 +1,61 @@ +{ + "title": "3D Geometries", + "description": "In this video about p5.js and WebGL I cover 3D geometry and primitive shapes.", + "videoNumber": "", + "videoId": "6TPVoB4uQCU", + "date": "2017-12-19", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl", "3D geometries"], + "canContribute": true, + "relatedChallenges": ["25-spherical-geometry", "26-3d-supershapes"], + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "01:25", "title": "Wireframes" }, + { "time": "02:00", "title": "How can you prove you are in 3D?" }, + { "time": "03:04", "title": "Rotating in 3D" }, + { "time": "05:35", "title": "3D primitives" }, + { "time": "07:20", "title": "Use translate to move 3D primitives" }, + { "time": "9:00", "title": "Use mouseX to translate along the z-axis" }, + { "time": "10:51", "title": "3D primitives on the p5.js website" }, + { "time": "11:15", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Adding a 3D primitive", + "description": "The sketch shows how to add a p5 primitive shape.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/_mw9Hiwk6" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/3-light-and-material/images/img1.png b/content/videos/webgl/3-light-and-material/images/img1.png new file mode 100644 index 000000000..5a008e0b7 Binary files /dev/null and b/content/videos/webgl/3-light-and-material/images/img1.png differ diff --git a/content/videos/webgl/3-light-and-material/index.json b/content/videos/webgl/3-light-and-material/index.json new file mode 100644 index 000000000..abd994256 --- /dev/null +++ b/content/videos/webgl/3-light-and-material/index.json @@ -0,0 +1,60 @@ +{ + "title": "Light and Material", + "description": "In this video, I investigate lights and materials in the p5.js WebGL 3D renderer. Functions covered are: ambientMaterial(), normalMaterial(), fill(), ambientLight(), directionalLight(), and pointLight(). Use can also now use lights(), which places an ambient and directional light in the scene", + "videoNumber": "", + "videoId": "k2FguXvqp60", + "date": "2017-12-22", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl", "lighting", "materials"], + "canContribute": true, + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "00:45", "title": "Material is the \"skin\" of 3D object" }, + { "time": "03:05", "title": "Normal materials" }, + { "time": "05:00", "title": "Ambient materials reflect light" }, + { "time": "07:32", "title": "Ambient light shines everywhere" }, + { "time": "07:54", "title": "Point lights add shadow" }, + { "time": "10:51", "title": "Directional light comes from a given direction" }, + { "time": "12:55", "title": "Illustration using the mouse" }, + { "time": "15:00", "title": "Basic material is fill" } + ], + "codeExamples": [ + { + "title": "Light and Material", + "description": "The sketch demonstrates how to add light and materials.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/cPrSUDhYS" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/4-texture/images/img1.png b/content/videos/webgl/4-texture/images/img1.png new file mode 100644 index 000000000..112034325 Binary files /dev/null and b/content/videos/webgl/4-texture/images/img1.png differ diff --git a/content/videos/webgl/4-texture/images/img2.png b/content/videos/webgl/4-texture/images/img2.png new file mode 100644 index 000000000..281c74a6c Binary files /dev/null and b/content/videos/webgl/4-texture/images/img2.png differ diff --git a/content/videos/webgl/4-texture/index.json b/content/videos/webgl/4-texture/index.json new file mode 100644 index 000000000..6cce3a0ea --- /dev/null +++ b/content/videos/webgl/4-texture/index.json @@ -0,0 +1,71 @@ +{ + "title": "Texture", + "description": "In this video, I cover textures in 3D using the p5.js WebGL renderer.", + "videoNumber": "", + "videoId": "O1mYw-3Wl_Q", + "date": "2017-12-26", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl", "texture"], + "canContribute": true, + "relatedChallenges": ["50-animated-circle-packing", "164-slitscan"], + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "01:25", "title": "Texturing with an image" }, + { "time": "01:49", "title": "Make a plane" }, + { "time": "02:29", "title": "Preload a kitten image" }, + { "time": "03:04", "title": "Texture with the image" }, + { "time": "03:53", "title": "Try other shapes" }, + { "time": "05:07", "title": "Use createCapture to add a video source" }, + { "time": "07:37", "title": "Add a plane at the bottom of the canvas" }, + { "time": "08:03", "title": "Translate and rotate the plane" }, + { "time": "09:24", "title": "Add a direction light" }, + { "time": "10:05", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Adding an image as texture", + "description": "The sketch demonstrates how to texture a shape with an image.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/OCrcEHyuLw" + } + }, + { + "title": "Using video to add texture", + "description": "The sketch demonstrates how to texture a shape with a video feed.", + "image": "img2.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/xTpnARe5_" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/5-camera-and-perspective/images/img1.png b/content/videos/webgl/5-camera-and-perspective/images/img1.png new file mode 100644 index 000000000..033a0eb94 Binary files /dev/null and b/content/videos/webgl/5-camera-and-perspective/images/img1.png differ diff --git a/content/videos/webgl/5-camera-and-perspective/images/img2.png b/content/videos/webgl/5-camera-and-perspective/images/img2.png new file mode 100644 index 000000000..d940aff39 Binary files /dev/null and b/content/videos/webgl/5-camera-and-perspective/images/img2.png differ diff --git a/content/videos/webgl/5-camera-and-perspective/images/img3.png b/content/videos/webgl/5-camera-and-perspective/images/img3.png new file mode 100644 index 000000000..8fd7f7b36 Binary files /dev/null and b/content/videos/webgl/5-camera-and-perspective/images/img3.png differ diff --git a/content/videos/webgl/5-camera-and-perspective/index.json b/content/videos/webgl/5-camera-and-perspective/index.json new file mode 100644 index 000000000..ba78cfc4f --- /dev/null +++ b/content/videos/webgl/5-camera-and-perspective/index.json @@ -0,0 +1,93 @@ +{ + "title": "Camera and Perspective", + "description": "In this video about p5.js and WebGL I discuss how the camera(), perspective(), and ortho() functions work in 3D.", + "videoNumber": "", + "videoId": "BW3D9WwalQE", + "date": "2017-12-27", + "languages": ["WebGL", "camera", "perspective"], + "topics": ["webgl"], + "canContribute": true, + "relatedChallenges": ["86-cube-wave-by-bees-and-bombs", "112-3d-rendering-with-rotation-and-projection"], + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "01:02", "title": "Camera properties" }, + { "time": "02:54", "title": "Camera is an artificial concept to create illusion of movement" }, + { "time": "03:38", "title": "Add the camera to the sketch" }, + { "time": "04:00", "title": "The default position of the camera" }, + { "time": "06:17", "title": "The \"look at\" location" }, + { "time": "07:04", "title": "Make a shaky camera" }, + { "time": "08:05", "title": "Perspective--field of view, clipping plane, and aspect ratio" }, + { "time": "11:02", "title": "Experiment with field of view" }, + { "time": "12:59", "title": "Orthographic projection" }, + { "time": "14:26", "title": "Demonstrate with more boxes" }, + { "time": "18:32", "title": "The clipping plane is relative to the camera" }, + { "time": "19:16", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Camera", + "description": "This sketch demonstates how the camera interacts with the scene.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/qXjZDCEsz" + } + }, + { + "title": "Perspective", + "description": "This sketch illustrates perspective.", + "image": "img2.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/ehXQR2obf" + } + }, + { + "title": "Orthographic Projection", + "description": "This sketch demonstates orthographic projection.", + "image": "img3.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/rzXV1dYan" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "three.js", + "description": "Documentation for three.js", + "url": "https://threejs.org" + }, + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + }, + { + "icon": "🔗", + "title": "The Book of Shaders", + "description": "This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders", + "url": "https://thebookofshaders.com" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/6-createGraphics/images/img1.png b/content/videos/webgl/6-createGraphics/images/img1.png new file mode 100644 index 000000000..0ca3166aa Binary files /dev/null and b/content/videos/webgl/6-createGraphics/images/img1.png differ diff --git a/content/videos/webgl/6-createGraphics/images/img2.png b/content/videos/webgl/6-createGraphics/images/img2.png new file mode 100644 index 000000000..1d7db2795 Binary files /dev/null and b/content/videos/webgl/6-createGraphics/images/img2.png differ diff --git a/content/videos/webgl/6-createGraphics/index.json b/content/videos/webgl/6-createGraphics/index.json new file mode 100644 index 000000000..807c160da --- /dev/null +++ b/content/videos/webgl/6-createGraphics/index.json @@ -0,0 +1,78 @@ +{ + "title": "createGraphics() as WebGL Texture", + "description": "In this video about p5.js and WebGL, I discuss how a graphics context created with createGraphics() can be applied as a texture to 3D geometry. This is especially useful for rendering text in 3D.", + "videoNumber": "", + "videoId": "3tTZlTq4Cxs", + "date": "2017-12-30", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl", "createGraphics"], + "canContribute": true, + "relatedChallenges": ["14-fractal-trees-recursive"], + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "02:05", "title": "Add a graphics object" }, + { "time": "02:37", "title": "Graphics context is transparent" }, + { "time": "03:20", "title": "Draw on graphics object" }, + { "time": "03:58", "title": "Rendering text in 3D" }, + { "time": "08:37", "title": "Graphics object does not need to be square" }, + { "time": "10:00", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Using a graphics object to add texture", + "description": "The sketch demonstrates how to use a graphics object to add texture.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/Dm6AF-mOE" + } + }, + { + "title": "Using text as texture", + "description": "The sketch demonstrates how to add text to a shape in WEBGL.", + "image": "img2.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/niiwRMKlo" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + } + ] + }, + { + "title": "Videos", + "links": [ + { + "icon": "🚂", + "title": "CreateGraphics()", + "description": "Tutorial on CreateGRaphics", + "url": "/tracks/code/2-variables/6-createGraphics" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/7-loading-an-obj-file/images/img1.png b/content/videos/webgl/7-loading-an-obj-file/images/img1.png new file mode 100644 index 000000000..b17512e3d Binary files /dev/null and b/content/videos/webgl/7-loading-an-obj-file/images/img1.png differ diff --git a/content/videos/webgl/7-loading-an-obj-file/index.json b/content/videos/webgl/7-loading-an-obj-file/index.json new file mode 100644 index 000000000..3fe249347 --- /dev/null +++ b/content/videos/webgl/7-loading-an-obj-file/index.json @@ -0,0 +1,57 @@ +{ + "title": "Loading OBJ Model", + "description": "In this video I demonstrate how to load an OBJ model in a p5.js sketch using the WebGL renderer.", + "videoNumber": "", + "videoId": "FUI7HEEz9B0", + "date": "2018-01-02", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl", "obj file"], + "canContribute": true, + "timestamps": [ + { "time": "00:00", "title": "Hello" }, + { "time": "01:35", "title": "LoadModel()" }, + { "time": "02:50", "title": "Load the train obj file" }, + { "time": "04:10", "title": "It is important to understand the model's internal coordinate system." }, + { "time": "05:36", "title": "Add a normal material" }, + { "time": "06:30", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Loading a obj model", + "description": "The sketch demonstrates how to load a obj model.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/H6d2vuxXm" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Documentation for all p5.js functions", + "url": "https://p5js.org/reference/" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/webgl/8-3d-custom-shapes/images/img1.png b/content/videos/webgl/8-3d-custom-shapes/images/img1.png new file mode 100644 index 000000000..73a18cc99 Binary files /dev/null and b/content/videos/webgl/8-3d-custom-shapes/images/img1.png differ diff --git a/content/videos/webgl/8-3d-custom-shapes/index.json b/content/videos/webgl/8-3d-custom-shapes/index.json new file mode 100644 index 000000000..6ec0cf494 --- /dev/null +++ b/content/videos/webgl/8-3d-custom-shapes/index.json @@ -0,0 +1,71 @@ +{ + "title": "3D Custom Shapes", + "description": "In this video I discuss how to use beginShape(), endShape() and vertex() to create custom shapes in p5.js / WebGL.", + "videoNumber": "", + "videoId": "DZlw-IS5OkI", + "date": "2018-01-03", + "languages": ["WebGL", "p5.js"], + "topics": ["webgl", "custom geometries"], + "canContribute": true, + "relatedChallenges": ["63-texturing-cloth-simulation", "25-spherical-geometry", "26-3d-supershapes"], + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "00:48", "title": "Use beginShape(), endShape(), and vertex() to create custom shape" }, + { "time": "01:12", "title": "Make a quad" }, + { "time": "04:50", "title": "Add pixel coordinates to the vertices" }, + { "time": "06:04", "title": "Now you use textureMode(normal) instead of ambientLight()" }, + { "time": "06:26", "title": "Change the dimensions of the quad" }, + { "time": "07:30", "title": "Flip the pixels" }, + { "time": "08:46", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Custom shape", + "description": "The sketch demonstrates how to add a custom shape.", + "image": "img1.png", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/jcL7sTdgp" + } + } + ], + "groupLinks": [ + { + "title": "Reference", + "links": [ + { + "icon": "🔗", + "title": "Getting started with WebGL in p5", + "description": "Tutorial on getting started in WebGL", + "url": "https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5" + }, + { + "icon": "⭐", + "title": "p5.js Reference", + "description": "Custom Shapes - p5.js", + "url": "https://p5js.org/reference/" + } + ] + }, + { + "title": "Videos", + "links": [ + { + "icon": "🚂", + "title": "Custom Shapes in p5.js", + "description": "In this video, I look at how to draw \"custom\" shapes in p5.js, using beginShape(), endShape(), vertex(), and curveVertex().", + "url": "https://www.youtube.com/watch?v=76fiD5DvzeQ" + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +}