Add webgl track - ready for review

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"
   ]
 }

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"
+  ]
+}

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}