From d86e4ac062b59a04ccf4b1d6575f2e7d8432b9a0 Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Fri, 1 Jul 2022 16:07:10 -0600 Subject: [PATCH 1/2] added describe() to all 3d reference examples, resolving issue #5705 --- src/webgl/3d_primitives.js | 54 ++++++++++++++++++++++++++++++++++++++ src/webgl/interaction.js | 20 ++++++++++++++ src/webgl/light.js | 22 ++++++++++++++++ src/webgl/loading.js | 6 +++++ src/webgl/material.js | 35 ++++++++++++++++++++++++ src/webgl/p5.Camera.js | 42 +++++++++++++++++++++++++++++ src/webgl/p5.Shader.js | 4 +++ 7 files changed, 183 insertions(+) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 090a89479e..779af9491c 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -33,6 +33,8 @@ import * as constants from '../core/constants'; * background(200); * plane(50, 50); * } + * + * describe('a white plane with black wireframe lines'); * * * @@ -120,6 +122,8 @@ p5.prototype.plane = function(width, height, detailX, detailY) { * rotateY(frameCount * 0.01); * box(50); * } + * + * describe('a white box rotating in 3D space'); * * */ @@ -237,6 +241,8 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * background(205, 102, 94); * sphere(40); * } + * + * describe('a white sphere with black wireframe lines'); * * * @@ -257,6 +263,10 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * rotateY(millis() / 1000); * sphere(40, detailX.value(), 16); * } + * + * describe( + * 'a white sphere with low detail on the x-axis, including a slider to adjust detailX' + * ); * * * @@ -277,6 +287,10 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * rotateY(millis() / 1000); * sphere(40, 16, detailY.value()); * } + * + * describe( + * 'a white sphere with low detail on the y-axis, including a slider to adjust detailY' + * ); * * */ @@ -449,6 +463,8 @@ const _truncatedCone = function( * rotateZ(frameCount * 0.01); * cylinder(20, 50); * } + * + * describe('a rotating white cylinder'); * * * @@ -469,6 +485,10 @@ const _truncatedCone = function( * rotateY(millis() / 1000); * cylinder(20, 75, detailX.value(), 1); * } + * + * describe( + * 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX' + * ); * * * @@ -489,6 +509,10 @@ const _truncatedCone = function( * rotateY(millis() / 1000); * cylinder(20, 75, 16, detailY.value()); * } + * + * describe( + * 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY' + * ); * * */ @@ -584,6 +608,8 @@ p5.prototype.cylinder = function( * rotateZ(frameCount * 0.01); * cone(40, 70); * } + * + * describe('a rotating white cone'); * * * @@ -604,6 +630,10 @@ p5.prototype.cylinder = function( * rotateY(millis() / 1000); * cone(30, 65, detailX.value(), 16); * } + * + * describe( + * 'a rotating white cone with limited X detail, with a slider that adjusts detailX' + * ); * * * @@ -624,6 +654,10 @@ p5.prototype.cylinder = function( * rotateY(millis() / 1000); * cone(30, 65, 16, detailY.value()); * } + * + * describe( + * 'a rotating white cone with limited Y detail, with a slider that adjusts detailY' + * ); * * */ @@ -698,6 +732,8 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * background(205, 105, 94); * ellipsoid(30, 40, 40); * } + * + * describe('a white 3d ellipsoid'); * * * @@ -718,6 +754,10 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * rotateY(millis() / 1000); * ellipsoid(30, 40, 40, detailX.value(), 8); * } + * + * describe( + * 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX' + * ); * * * @@ -738,6 +778,10 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * rotateY(millis() / 1000); * ellipsoid(30, 40, 40, 12, detailY.value()); * } + * + * describe( + * 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY' + * ); * * */ @@ -834,6 +878,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * rotateY(frameCount * 0.01); * torus(30, 15); * } + * + * describe('a rotating white torus'); * * * @@ -854,6 +900,10 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * rotateY(millis() / 1000); * torus(30, 15, detailX.value(), 12); * } + * + * describe( + * 'a rotating white torus with limited X detail, with a slider that adjusts detailX' + * ); * * * @@ -874,6 +924,10 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * rotateY(millis() / 1000); * torus(30, 15, 16, detailY.value()); * } + * + * describe( + * 'a rotating white torus with limited Y detail, with a slider that adjusts detailY' + * ); * * */ diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js index 87680921df..26d8a32493 100644 --- a/src/webgl/interaction.js +++ b/src/webgl/interaction.js @@ -37,6 +37,7 @@ import * as constants from '../core/constants'; * rotateY(0.5); * box(30, 50); * } + * describe('Camera orbits around a box when mouse is hold-clicked & then moved.'); * * * @@ -178,6 +179,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * noDebugMode(); * } * } + * describe( + * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.' + * ); * * * @alt @@ -201,6 +205,8 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * orbitControl(); * box(15, 30); * } + * + * describe('a 3D box is centered on a grid in a 3D sketch.'); * * * @alt @@ -221,6 +227,10 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * orbitControl(); * box(15, 30); * } + * + * describe( + * 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.' + * ); * * * @alt @@ -243,6 +253,8 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * orbitControl(); * box(15, 30); * } + * + * describe('a 3D box is centered on a grid in a 3D sketch'); * * * @alt @@ -267,6 +279,10 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * stroke(255, 0, 150); * strokeWeight(0.8); * } + * + * describe( + * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.' + * ); * * * @alt @@ -372,6 +388,10 @@ p5.prototype.debugMode = function(...args) { * noDebugMode(); * } * } + * + * describe( + * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.' + * ); * * * @alt diff --git a/src/webgl/light.js b/src/webgl/light.js index 559f3a468e..010df053e5 100644 --- a/src/webgl/light.js +++ b/src/webgl/light.js @@ -44,6 +44,7 @@ import * as constants from '../core/constants'; * ambientMaterial(255, 127, 80); // coral material * sphere(40); * } + * describe('sphere with coral color under black light'); * * * @alt @@ -62,6 +63,7 @@ import * as constants from '../core/constants'; * ambientMaterial(255, 127, 80); // coral material * sphere(40); * } + * describe('sphere with coral color under white light'); * * * @alt @@ -172,6 +174,10 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) { * function mouseClicked() { * setRedSpecularColor = !setRedSpecularColor; * } + * + * describe( + * 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.' + * ); * * * @@ -266,6 +272,9 @@ p5.prototype.specularColor = function(v1, v2, v3) { * noStroke(); * sphere(40); * } + * describe( + * 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.' + * ); * * * @@ -391,6 +400,9 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) { * noStroke(); * sphere(40); * } + * describe( + * 'scene with sphere and point light. The position of the light is controlled with the mouse position.' + * ); * * * @@ -490,6 +502,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * rotateZ(millis() / 1000); * box(); * } + * describe('the light is partially ambient and partially directional'); * * * @@ -557,6 +570,9 @@ p5.prototype.lights = function() { * sphere(20); * pop(); * } + * describe( + * 'Two spheres with different falloff values show different intensity of light' + * ); * * * @@ -672,6 +688,9 @@ p5.prototype.lightFalloff = function( * noStroke(); * sphere(40); * } + * describe( + * 'scene with sphere and spot light. The position of the light is controlled with the mouse position.' + * ); * * * @@ -1005,6 +1024,9 @@ p5.prototype.spotLight = function( * ambientMaterial(255); * sphere(13); * } + * describe( + * 'Three white spheres. Each appears as a different color due to lighting.' + * ); * * * diff --git a/src/webgl/loading.js b/src/webgl/loading.js index 78e19145c2..39ed1d9b0e 100755 --- a/src/webgl/loading.js +++ b/src/webgl/loading.js @@ -58,6 +58,8 @@ import './p5.Geometry'; * rotateY(frameCount * 0.01); * model(octahedron); * } + * + * describe('Vertically rotating 3-d octahedron.'); * * * @@ -87,6 +89,8 @@ import './p5.Geometry'; * normalMaterial(); // For effect * model(teapot); * } + * + * describe('Vertically rotating 3-d teapot with red, green and blue gradient.'); * * * @@ -610,6 +614,8 @@ function parseASCIISTL(model, lines) { * rotateY(frameCount * 0.01); * model(octahedron); * } + * + * describe('Vertically rotating 3-d octahedron.'); * * * diff --git a/src/webgl/material.js b/src/webgl/material.js index 075d081674..89078ea821 100644 --- a/src/webgl/material.js +++ b/src/webgl/material.js @@ -51,6 +51,8 @@ import './p5.Texture'; * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); * quad(-1, -1, 1, -1, 1, 1, -1, 1); * } + * + * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.'); * * * @@ -169,6 +171,8 @@ p5.prototype.loadShader = function( * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); * quad(-1, -1, 1, -1, 1, 1, -1, 1); * } + * + * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.'); * * * @@ -253,6 +257,10 @@ p5.prototype.createShader = function(vertSrc, fragSrc) { * function mouseClicked() { * showRedGreen = !showRedGreen; * } + * + * describe( + * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.' + * ); * * * @@ -354,6 +362,10 @@ p5.prototype.shader = function(s) { * box(width / 4); * pop(); * } + * + * describe( + * 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.' + * ); * * * @alt @@ -403,6 +415,8 @@ p5.prototype.resetShader = function() { * texture(img); * box(width / 2); * } + * + * describe('spinning cube with a texture from an image'); * * * @alt @@ -429,6 +443,8 @@ p5.prototype.resetShader = function() { * noStroke(); * plane(50); * } + * + * describe('plane with a texture from an image created by createGraphics()'); * * * @alt @@ -456,6 +472,8 @@ p5.prototype.resetShader = function() { * function mousePressed() { * vid.loop(); * } + * + * describe('rectangle with video as texture'); * * * @@ -486,6 +504,8 @@ p5.prototype.resetShader = function() { * vertex(-40, 40, 0, 1); * endShape(); * } + * + * describe('quad with a texture, mapped using normalized coordinates'); * * * @alt @@ -541,6 +561,8 @@ p5.prototype.texture = function(tex) { * vertex(-50, 50, 0, 1); * endShape(); * } + * + * describe('quad with a texture, mapped using normalized coordinates'); * * * @alt @@ -569,6 +591,8 @@ p5.prototype.texture = function(tex) { * vertex(-50, 50, 0, img.height); * endShape(); * } + * + * describe('quad with a texture, mapped using image coordinates'); * * * @alt @@ -640,6 +664,8 @@ p5.prototype.textureMode = function(mode) { * vertex(-1, -1, 0, 0, 0); * endShape(); * } + * + * describe('an image of the rocky mountains repeated in mirrored tiles'); * * * @@ -682,6 +708,8 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) { * normalMaterial(); * sphere(40); * } + * + * describe('Sphere with normal material'); * * * @alt @@ -739,6 +767,7 @@ p5.prototype.normalMaterial = function(...args) { * ambientMaterial(70, 130, 230); * sphere(40); * } + * describe('sphere reflecting red, blue, and green light'); * * * @alt @@ -758,6 +787,7 @@ p5.prototype.normalMaterial = function(...args) { * ambientMaterial(255); // white material * box(30); * } + * describe('box reflecting only red and blue light'); * * * @alt @@ -777,6 +807,7 @@ p5.prototype.normalMaterial = function(...args) { * ambientMaterial(255, 0, 255); // magenta material * box(30); * } + * describe('box reflecting no light'); * * * @alt @@ -849,6 +880,7 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) { * emissiveMaterial(130, 230, 0); * sphere(40); * } + * describe('sphere with green emissive material'); * * * @@ -932,6 +964,8 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) { * shininess(50); * torus(30, 10, 64, 64); * } + * + * describe('torus with specular material'); * * * @alt @@ -1002,6 +1036,7 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) { * shininess(20); * sphere(20); * } + * describe('two spheres, one more shiny than the other'); * * * @alt diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index f09dee3923..03c3b0e91b 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -52,6 +52,7 @@ import p5 from '../core/main'; * camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0); * plane(10, 10); * } + * describe('a square moving closer and then away from the camera.'); * * * @@ -98,6 +99,10 @@ import p5 from '../core/main'; * fill(255, 102, 94); * box(85); * } + * + * describe( + * 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.' + * ); * * * @alt @@ -160,6 +165,9 @@ p5.prototype.camera = function(...args) { * box(30); * pop(); * } + * describe( + * 'two colored 3D boxes move back and forth, rotating as mouse is dragged.' + * ); * * * @@ -220,6 +228,9 @@ p5.prototype.perspective = function(...args) { * box(30); * pop(); * } + * describe( + * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' + * ); * * * @@ -283,6 +294,9 @@ p5.prototype.ortho = function(...args) { * box(30); * pop(); * } + * describe( + * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' + * ); * * * @@ -335,6 +349,8 @@ p5.prototype.frustum = function(...args) { * camera.setPosition(sin(frameCount / 60) * 200, 0, 100); * box(20); * } + * + * describe('An example that creates a camera and moves it around the box.'); * * * @alt @@ -427,6 +443,10 @@ p5.prototype.createCamera = function() { * translate(35, 0, 0); * box(20); * } + * + * describe( + * 'camera view pans left and right across a series of rotating 3D boxes.' + * ); * * * @@ -462,6 +482,8 @@ p5.Camera = function(renderer) { * box(10); * div.html('eyeX = ' + cam.eyeX); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -489,6 +511,8 @@ p5.Camera = function(renderer) { * box(10); * div.html('eyeY = ' + cam.eyeY); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -516,6 +540,8 @@ p5.Camera = function(renderer) { * box(10); * div.html('eyeZ = ' + cam.eyeZ); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -544,6 +570,8 @@ p5.Camera = function(renderer) { * orbitControl(); * box(10); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -572,6 +600,8 @@ p5.Camera = function(renderer) { * orbitControl(); * box(10); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -600,6 +630,8 @@ p5.Camera = function(renderer) { * orbitControl(); * box(10); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -623,6 +655,8 @@ p5.Camera = function(renderer) { * div.style('color', 'blue'); * div.style('font-size', '18px'); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -646,6 +680,8 @@ p5.Camera = function(renderer) { * div.style('color', 'blue'); * div.style('font-size', '18px'); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -669,6 +705,8 @@ p5.Camera = function(renderer) { * div.style('color', 'blue'); * div.style('font-size', '18px'); * } + * + * describe('An example showing the use of camera object properties'); * * * @alt @@ -1784,6 +1822,10 @@ p5.Camera.prototype._isActive = function() { * translate(35, 0, 0); * box(20); * } + * + * describe( + * 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.' + * ); * * * diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index 740e95978e..a4014b31af 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -363,6 +363,10 @@ p5.Shader.prototype.useProgram = function() { * function mouseClicked() { * showRedGreen = !showRedGreen; * } + * + * describe( + * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.' + * ); * * * From cce628bf417edfe6bc425fac34cef1a581bb13cb Mon Sep 17 00:00:00 2001 From: Austin Slominski Date: Tue, 5 Jul 2022 11:31:13 -0600 Subject: [PATCH 2/2] moved describe() into setup(), fixing failed tests --- src/webgl/3d_primitives.js | 91 ++++++++++++++++---------------------- src/webgl/interaction.js | 37 +++++++--------- src/webgl/light.js | 43 +++++++++--------- src/webgl/loading.js | 9 ++-- src/webgl/material.js | 59 ++++++++++-------------- src/webgl/p5.Camera.js | 72 +++++++++++++----------------- src/webgl/p5.Shader.js | 8 ++-- 7 files changed, 136 insertions(+), 183 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 779af9491c..ef6a973cb0 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -27,14 +27,13 @@ import * as constants from '../core/constants'; * // with width 50 and height 50 * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a white plane with black wireframe lines'); * } * * function draw() { * background(200); * plane(50, 50); * } - * - * describe('a white plane with black wireframe lines'); * * * @@ -114,6 +113,7 @@ p5.prototype.plane = function(width, height, detailX, detailY) { * // with width, height and depth of 50 * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a white box rotating in 3D space'); * } * * function draw() { @@ -122,8 +122,6 @@ p5.prototype.plane = function(width, height, detailX, detailY) { * rotateY(frameCount * 0.01); * box(50); * } - * - * describe('a white box rotating in 3D space'); * * */ @@ -235,14 +233,13 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * // draw a sphere with radius 40 * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a white sphere with black wireframe lines'); * } * * function draw() { * background(205, 102, 94); * sphere(40); * } - * - * describe('a white sphere with black wireframe lines'); * * * @@ -256,6 +253,9 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * detailX = createSlider(3, 24, 3); * detailX.position(10, height + 5); * detailX.style('width', '80px'); + * describe( + * 'a white sphere with low detail on the x-axis, including a slider to adjust detailX' + * ); * } * * function draw() { @@ -263,10 +263,6 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * rotateY(millis() / 1000); * sphere(40, detailX.value(), 16); * } - * - * describe( - * 'a white sphere with low detail on the x-axis, including a slider to adjust detailX' - * ); * * * @@ -280,6 +276,9 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * detailY = createSlider(3, 16, 3); * detailY.position(10, height + 5); * detailY.style('width', '80px'); + * describe( + * 'a white sphere with low detail on the y-axis, including a slider to adjust detailY' + * ); * } * * function draw() { @@ -287,10 +286,6 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) { * rotateY(millis() / 1000); * sphere(40, 16, detailY.value()); * } - * - * describe( - * 'a white sphere with low detail on the y-axis, including a slider to adjust detailY' - * ); * * */ @@ -455,6 +450,7 @@ const _truncatedCone = function( * // with radius 20 and height 50 * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a rotating white cylinder'); * } * * function draw() { @@ -463,8 +459,6 @@ const _truncatedCone = function( * rotateZ(frameCount * 0.01); * cylinder(20, 50); * } - * - * describe('a rotating white cylinder'); * * * @@ -478,6 +472,9 @@ const _truncatedCone = function( * detailX = createSlider(3, 24, 3); * detailX.position(10, height + 5); * detailX.style('width', '80px'); + * describe( + * 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX' + * ); * } * * function draw() { @@ -485,10 +482,6 @@ const _truncatedCone = function( * rotateY(millis() / 1000); * cylinder(20, 75, detailX.value(), 1); * } - * - * describe( - * 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX' - * ); * * * @@ -502,6 +495,9 @@ const _truncatedCone = function( * detailY = createSlider(1, 16, 1); * detailY.position(10, height + 5); * detailY.style('width', '80px'); + * describe( + * 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY' + * ); * } * * function draw() { @@ -509,10 +505,6 @@ const _truncatedCone = function( * rotateY(millis() / 1000); * cylinder(20, 75, 16, detailY.value()); * } - * - * describe( - * 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY' - * ); * * */ @@ -600,6 +592,7 @@ p5.prototype.cylinder = function( * // with radius 40 and height 70 * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a rotating white cone'); * } * * function draw() { @@ -608,8 +601,6 @@ p5.prototype.cylinder = function( * rotateZ(frameCount * 0.01); * cone(40, 70); * } - * - * describe('a rotating white cone'); * * * @@ -623,6 +614,9 @@ p5.prototype.cylinder = function( * detailX = createSlider(3, 16, 3); * detailX.position(10, height + 5); * detailX.style('width', '80px'); + * describe( + * 'a rotating white cone with limited X detail, with a slider that adjusts detailX' + * ); * } * * function draw() { @@ -630,10 +624,6 @@ p5.prototype.cylinder = function( * rotateY(millis() / 1000); * cone(30, 65, detailX.value(), 16); * } - * - * describe( - * 'a rotating white cone with limited X detail, with a slider that adjusts detailX' - * ); * * * @@ -647,6 +637,9 @@ p5.prototype.cylinder = function( * detailY = createSlider(3, 16, 3); * detailY.position(10, height + 5); * detailY.style('width', '80px'); + * describe( + * 'a rotating white cone with limited Y detail, with a slider that adjusts detailY' + * ); * } * * function draw() { @@ -654,10 +647,6 @@ p5.prototype.cylinder = function( * rotateY(millis() / 1000); * cone(30, 65, 16, detailY.value()); * } - * - * describe( - * 'a rotating white cone with limited Y detail, with a slider that adjusts detailY' - * ); * * */ @@ -726,14 +715,13 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * // with radius 30, 40 and 40. * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a white 3d ellipsoid'); * } * * function draw() { * background(205, 105, 94); * ellipsoid(30, 40, 40); * } - * - * describe('a white 3d ellipsoid'); * * * @@ -747,6 +735,9 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * detailX = createSlider(2, 24, 12); * detailX.position(10, height + 5); * detailX.style('width', '80px'); + * describe( + * 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX' + * ); * } * * function draw() { @@ -754,10 +745,6 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * rotateY(millis() / 1000); * ellipsoid(30, 40, 40, detailX.value(), 8); * } - * - * describe( - * 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX' - * ); * * * @@ -771,6 +758,9 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * detailY = createSlider(2, 24, 6); * detailY.position(10, height + 5); * detailY.style('width', '80px'); + * describe( + * 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY' + * ); * } * * function draw() { @@ -778,10 +768,6 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) { * rotateY(millis() / 1000); * ellipsoid(30, 40, 40, 12, detailY.value()); * } - * - * describe( - * 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY' - * ); * * */ @@ -870,6 +856,7 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * // with ring radius 30 and tube radius 15 * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a rotating white torus'); * } * * function draw() { @@ -878,8 +865,6 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * rotateY(frameCount * 0.01); * torus(30, 15); * } - * - * describe('a rotating white torus'); * * * @@ -893,6 +878,9 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * detailX = createSlider(3, 24, 3); * detailX.position(10, height + 5); * detailX.style('width', '80px'); + * describe( + * 'a rotating white torus with limited X detail, with a slider that adjusts detailX' + * ); * } * * function draw() { @@ -900,10 +888,6 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * rotateY(millis() / 1000); * torus(30, 15, detailX.value(), 12); * } - * - * describe( - * 'a rotating white torus with limited X detail, with a slider that adjusts detailX' - * ); * * * @@ -917,6 +901,9 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * detailY = createSlider(3, 16, 3); * detailY.position(10, height + 5); * detailY.style('width', '80px'); + * describe( + * 'a rotating white torus with limited Y detail, with a slider that adjusts detailY' + * ); * } * * function draw() { @@ -924,10 +911,6 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * rotateY(millis() / 1000); * torus(30, 15, 16, detailY.value()); * } - * - * describe( - * 'a rotating white torus with limited Y detail, with a slider that adjusts detailY' - * ); * * */ diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js index 26d8a32493..d13a9acd3e 100644 --- a/src/webgl/interaction.js +++ b/src/webgl/interaction.js @@ -30,6 +30,9 @@ import * as constants from '../core/constants'; * function setup() { * createCanvas(100, 100, WEBGL); * normalMaterial(); + * describe( + * 'Camera orbits around a box when mouse is hold-clicked & then moved.' + * ); * } * function draw() { * background(200); @@ -37,7 +40,6 @@ import * as constants from '../core/constants'; * rotateY(0.5); * box(30, 50); * } - * describe('Camera orbits around a box when mouse is hold-clicked & then moved.'); * * * @@ -168,6 +170,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); * normalMaterial(); * debugMode(); + * describe( + * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.' + * ); * } * * function draw() { @@ -179,9 +184,6 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * noDebugMode(); * } * } - * describe( - * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.' - * ); * * * @alt @@ -198,6 +200,7 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); * normalMaterial(); * debugMode(GRID); + * describe('a 3D box is centered on a grid in a 3D sketch.'); * } * * function draw() { @@ -205,8 +208,6 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * orbitControl(); * box(15, 30); * } - * - * describe('a 3D box is centered on a grid in a 3D sketch.'); * * * @alt @@ -220,6 +221,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); * normalMaterial(); * debugMode(AXES); + * describe( + * 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.' + * ); * } * * function draw() { @@ -227,10 +231,6 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * orbitControl(); * box(15, 30); * } - * - * describe( - * 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.' - * ); * * * @alt @@ -246,6 +246,7 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); * normalMaterial(); * debugMode(GRID, 100, 10, 0, 0, 0); + * describe('a 3D box is centered on a grid in a 3D sketch'); * } * * function draw() { @@ -253,8 +254,6 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * orbitControl(); * box(15, 30); * } - * - * describe('a 3D box is centered on a grid in a 3D sketch'); * * * @alt @@ -268,6 +267,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); * normalMaterial(); * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0); + * describe( + * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.' + * ); * } * * function draw() { @@ -279,10 +281,6 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) { * stroke(255, 0, 150); * strokeWeight(0.8); * } - * - * describe( - * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.' - * ); * * * @alt @@ -377,6 +375,9 @@ p5.prototype.debugMode = function(...args) { * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); * normalMaterial(); * debugMode(); + * describe( + * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.' + * ); * } * * function draw() { @@ -388,10 +389,6 @@ p5.prototype.debugMode = function(...args) { * noDebugMode(); * } * } - * - * describe( - * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.' - * ); * * * @alt diff --git a/src/webgl/light.js b/src/webgl/light.js index 010df053e5..c5df0add0a 100644 --- a/src/webgl/light.js +++ b/src/webgl/light.js @@ -37,6 +37,7 @@ import * as constants from '../core/constants'; * function setup() { * createCanvas(100, 100, WEBGL); * noStroke(); + * describe('sphere with coral color under black light'); * } * function draw() { * background(100); @@ -44,7 +45,6 @@ import * as constants from '../core/constants'; * ambientMaterial(255, 127, 80); // coral material * sphere(40); * } - * describe('sphere with coral color under black light'); * * * @alt @@ -56,6 +56,7 @@ import * as constants from '../core/constants'; * function setup() { * createCanvas(100, 100, WEBGL); * noStroke(); + * describe('sphere with coral color under white light'); * } * function draw() { * background(100); @@ -63,7 +64,6 @@ import * as constants from '../core/constants'; * ambientMaterial(255, 127, 80); // coral material * sphere(40); * } - * describe('sphere with coral color under white light'); * * * @alt @@ -146,6 +146,9 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) { * function setup() { * createCanvas(100, 100, WEBGL); * noStroke(); + * describe( + * 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.' + * ); * } * * function draw() { @@ -174,10 +177,6 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) { * function mouseClicked() { * setRedSpecularColor = !setRedSpecularColor; * } - * - * describe( - * 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.' - * ); * * * @@ -262,6 +261,9 @@ p5.prototype.specularColor = function(v1, v2, v3) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe( + * 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.' + * ); * } * function draw() { * background(0); @@ -272,9 +274,6 @@ p5.prototype.specularColor = function(v1, v2, v3) { * noStroke(); * sphere(40); * } - * describe( - * 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.' - * ); * * * @@ -383,6 +382,9 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe( + * 'scene with sphere and point light. The position of the light is controlled with the mouse position.' + * ); * } * function draw() { * background(0); @@ -400,9 +402,6 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) { * noStroke(); * sphere(40); * } - * describe( - * 'scene with sphere and point light. The position of the light is controlled with the mouse position.' - * ); * * * @@ -493,6 +492,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('the light is partially ambient and partially directional'); * } * function draw() { * background(0); @@ -502,7 +502,6 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * rotateZ(millis() / 1000); * box(); * } - * describe('the light is partially ambient and partially directional'); * * * @@ -547,6 +546,9 @@ p5.prototype.lights = function() { * function setup() { * createCanvas(100, 100, WEBGL); * noStroke(); + * describe( + * 'Two spheres with different falloff values show different intensity of light' + * ); * } * function draw() { * ortho(); @@ -570,9 +572,6 @@ p5.prototype.lights = function() { * sphere(20); * pop(); * } - * describe( - * 'Two spheres with different falloff values show different intensity of light' - * ); * * * @@ -670,6 +669,9 @@ p5.prototype.lightFalloff = function( * * function setup() { * createCanvas(100, 100, WEBGL); + * describe( + * 'scene with sphere and spot light. The position of the light is controlled with the mouse position.' + * ); * } * function draw() { * background(0); @@ -688,9 +690,6 @@ p5.prototype.lightFalloff = function( * noStroke(); * sphere(40); * } - * describe( - * 'scene with sphere and spot light. The position of the light is controlled with the mouse position.' - * ); * * * @@ -1004,6 +1003,9 @@ p5.prototype.spotLight = function( * * function setup() { * createCanvas(100, 100, WEBGL); + * describe( + * 'Three white spheres. Each appears as a different color due to lighting.' + * ); * } * function draw() { * background(200); @@ -1024,9 +1026,6 @@ p5.prototype.spotLight = function( * ambientMaterial(255); * sphere(13); * } - * describe( - * 'Three white spheres. Each appears as a different color due to lighting.' - * ); * * * diff --git a/src/webgl/loading.js b/src/webgl/loading.js index 39ed1d9b0e..039eba7fea 100755 --- a/src/webgl/loading.js +++ b/src/webgl/loading.js @@ -50,6 +50,7 @@ import './p5.Geometry'; * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('Vertically rotating 3-d octahedron.'); * } * * function draw() { @@ -58,8 +59,6 @@ import './p5.Geometry'; * rotateY(frameCount * 0.01); * model(octahedron); * } - * - * describe('Vertically rotating 3-d octahedron.'); * * * @@ -79,6 +78,7 @@ import './p5.Geometry'; * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('Vertically rotating 3-d teapot with red, green and blue gradient.'); * } * * function draw() { @@ -89,8 +89,6 @@ import './p5.Geometry'; * normalMaterial(); // For effect * model(teapot); * } - * - * describe('Vertically rotating 3-d teapot with red, green and blue gradient.'); * * * @@ -606,6 +604,7 @@ function parseASCIISTL(model, lines) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('Vertically rotating 3-d octahedron.'); * } * * function draw() { @@ -614,8 +613,6 @@ function parseASCIISTL(model, lines) { * rotateY(frameCount * 0.01); * model(octahedron); * } - * - * describe('Vertically rotating 3-d octahedron.'); * * * diff --git a/src/webgl/material.js b/src/webgl/material.js index 89078ea821..6694427a3b 100644 --- a/src/webgl/material.js +++ b/src/webgl/material.js @@ -45,14 +45,13 @@ import './p5.Texture'; * shader(mandel); * noStroke(); * mandel.setUniform('p', [-0.74364388703, 0.13182590421]); + * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.'); * } * * function draw() { * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); * quad(-1, -1, 1, -1, 1, 1, -1, 1); * } - * - * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.'); * * * @@ -164,6 +163,7 @@ p5.prototype.loadShader = function( * * // 'p' is the center point of the Mandelbrot image * mandel.setUniform('p', [-0.74364388703, 0.13182590421]); + * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.'); * } * * function draw() { @@ -171,8 +171,6 @@ p5.prototype.loadShader = function( * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000)))); * quad(-1, -1, 1, -1, 1, 1, -1, 1); * } - * - * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.'); * * * @@ -237,6 +235,10 @@ p5.prototype.createShader = function(vertSrc, fragSrc) { * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]); * * noStroke(); + * + * describe( + * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.' + * ); * } * * function draw() { @@ -257,10 +259,6 @@ p5.prototype.createShader = function(vertSrc, fragSrc) { * function mouseClicked() { * showRedGreen = !showRedGreen; * } - * - * describe( - * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.' - * ); * * * @@ -334,6 +332,10 @@ p5.prototype.shader = function(s) { * * // Create our shader * shaderProgram = createShader(vertSrc, fragSrc); + * + * describe( + * 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.' + * ); * } * * // prettier-ignore @@ -362,10 +364,6 @@ p5.prototype.shader = function(s) { * box(width / 4); * pop(); * } - * - * describe( - * 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.' - * ); * * * @alt @@ -404,6 +402,7 @@ p5.prototype.resetShader = function() { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('spinning cube with a texture from an image'); * } * * function draw() { @@ -415,8 +414,6 @@ p5.prototype.resetShader = function() { * texture(img); * box(width / 2); * } - * - * describe('spinning cube with a texture from an image'); * * * @alt @@ -431,6 +428,7 @@ p5.prototype.resetShader = function() { * createCanvas(100, 100, WEBGL); * pg = createGraphics(200, 200); * pg.textSize(75); + * describe('plane with a texture from an image created by createGraphics()'); * } * * function draw() { @@ -443,8 +441,6 @@ p5.prototype.resetShader = function() { * noStroke(); * plane(50); * } - * - * describe('plane with a texture from an image created by createGraphics()'); * * * @alt @@ -460,6 +456,7 @@ p5.prototype.resetShader = function() { * } * function setup() { * createCanvas(100, 100, WEBGL); + * describe('rectangle with video as texture'); * } * * function draw() { @@ -472,8 +469,6 @@ p5.prototype.resetShader = function() { * function mousePressed() { * vid.loop(); * } - * - * describe('rectangle with video as texture'); * * * @@ -491,6 +486,7 @@ p5.prototype.resetShader = function() { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('quad with a texture, mapped using normalized coordinates'); * } * * function draw() { @@ -504,8 +500,6 @@ p5.prototype.resetShader = function() { * vertex(-40, 40, 0, 1); * endShape(); * } - * - * describe('quad with a texture, mapped using normalized coordinates'); * * * @alt @@ -549,6 +543,7 @@ p5.prototype.texture = function(tex) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('quad with a texture, mapped using normalized coordinates'); * } * * function draw() { @@ -561,8 +556,6 @@ p5.prototype.texture = function(tex) { * vertex(-50, 50, 0, 1); * endShape(); * } - * - * describe('quad with a texture, mapped using normalized coordinates'); * * * @alt @@ -579,6 +572,7 @@ p5.prototype.texture = function(tex) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('quad with a texture, mapped using image coordinates'); * } * * function draw() { @@ -591,8 +585,6 @@ p5.prototype.texture = function(tex) { * vertex(-50, 50, 0, img.height); * endShape(); * } - * - * describe('quad with a texture, mapped using image coordinates'); * * * @alt @@ -639,6 +631,7 @@ p5.prototype.textureMode = function(mode) { * function setup() { * createCanvas(100, 100, WEBGL); * textureWrap(MIRROR); + * describe('an image of the rocky mountains repeated in mirrored tiles'); * } * * function draw() { @@ -664,8 +657,6 @@ p5.prototype.textureMode = function(mode) { * vertex(-1, -1, 0, 0, 0); * endShape(); * } - * - * describe('an image of the rocky mountains repeated in mirrored tiles'); * * * @@ -701,6 +692,7 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('Sphere with normal material'); * } * * function draw() { @@ -708,8 +700,6 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) { * normalMaterial(); * sphere(40); * } - * - * describe('Sphere with normal material'); * * * @alt @@ -759,6 +749,7 @@ p5.prototype.normalMaterial = function(...args) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('sphere reflecting red, blue, and green light'); * } * function draw() { * background(0); @@ -767,7 +758,6 @@ p5.prototype.normalMaterial = function(...args) { * ambientMaterial(70, 130, 230); * sphere(40); * } - * describe('sphere reflecting red, blue, and green light'); * * * @alt @@ -780,6 +770,7 @@ p5.prototype.normalMaterial = function(...args) { * // so object only reflects it's red and blue components * function setup() { * createCanvas(100, 100, WEBGL); + * describe('box reflecting only red and blue light'); * } * function draw() { * background(70); @@ -787,7 +778,6 @@ p5.prototype.normalMaterial = function(...args) { * ambientMaterial(255); // white material * box(30); * } - * describe('box reflecting only red and blue light'); * * * @alt @@ -800,6 +790,7 @@ p5.prototype.normalMaterial = function(...args) { * // green, it does not reflect any light * function setup() { * createCanvas(100, 100, WEBGL); + * describe('box reflecting no light'); * } * function draw() { * background(70); @@ -807,7 +798,6 @@ p5.prototype.normalMaterial = function(...args) { * ambientMaterial(255, 0, 255); // magenta material * box(30); * } - * describe('box reflecting no light'); * * * @alt @@ -872,6 +862,7 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('sphere with green emissive material'); * } * function draw() { * background(0); @@ -880,7 +871,6 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) { * emissiveMaterial(130, 230, 0); * sphere(40); * } - * describe('sphere with green emissive material'); * * * @@ -948,6 +938,7 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) { * function setup() { * createCanvas(100, 100, WEBGL); * noStroke(); + * describe('torus with specular material'); * } * * function draw() { @@ -964,8 +955,6 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) { * shininess(50); * torus(30, 10, 64, 64); * } - * - * describe('torus with specular material'); * * * @alt @@ -1020,6 +1009,7 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) { * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('two spheres, one more shiny than the other'); * } * function draw() { * background(0); @@ -1036,7 +1026,6 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) { * shininess(20); * sphere(20); * } - * describe('two spheres, one more shiny than the other'); * * * @alt diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 03c3b0e91b..637ada8e69 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -45,6 +45,7 @@ import p5 from '../core/main'; * * function setup() { * createCanvas(100, 100, WEBGL); + * describe('a square moving closer and then away from the camera.'); * } * function draw() { * background(204); @@ -52,7 +53,6 @@ import p5 from '../core/main'; * camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0); * plane(10, 10); * } - * describe('a square moving closer and then away from the camera.'); * * * @@ -83,6 +83,9 @@ import p5 from '../core/main'; * sliderGroup[i].position(10, height + h); * sliderGroup[i].style('width', '80px'); * } + * describe( + * 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.' + * ); * } * * function draw() { @@ -99,10 +102,6 @@ import p5 from '../core/main'; * fill(255, 102, 94); * box(85); * } - * - * describe( - * 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.' - * ); * * * @alt @@ -146,6 +145,9 @@ p5.prototype.camera = function(...args) { * function setup() { * createCanvas(100, 100, WEBGL); * perspective(PI / 3.0, width / height, 0.1, 500); + * describe( + * 'two colored 3D boxes move back and forth, rotating as mouse is dragged.' + * ); * } * function draw() { * background(200); @@ -165,9 +167,6 @@ p5.prototype.camera = function(...args) { * box(30); * pop(); * } - * describe( - * 'two colored 3D boxes move back and forth, rotating as mouse is dragged.' - * ); * * * @@ -211,6 +210,9 @@ p5.prototype.perspective = function(...args) { * function setup() { * createCanvas(100, 100, WEBGL); * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500); + * describe( + * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' + * ); * } * function draw() { * background(200); @@ -228,9 +230,6 @@ p5.prototype.perspective = function(...args) { * box(30); * pop(); * } - * describe( - * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' - * ); * * * @@ -277,6 +276,9 @@ p5.prototype.ortho = function(...args) { * createCanvas(100, 100, WEBGL); * setAttributes('antialias', true); * frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200); + * describe( + * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' + * ); * } * function draw() { * background(200); @@ -294,9 +296,6 @@ p5.prototype.ortho = function(...args) { * box(30); * pop(); * } - * describe( - * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' - * ); * * * @@ -342,6 +341,7 @@ p5.prototype.frustum = function(...args) { * createCanvas(100, 100, WEBGL); * background(0); * camera = createCamera(); + * describe('An example that creates a camera and moves it around the box.'); * } * * function draw() { @@ -349,8 +349,6 @@ p5.prototype.frustum = function(...args) { * camera.setPosition(sin(frameCount / 60) * 200, 0, 100); * box(20); * } - * - * describe('An example that creates a camera and moves it around the box.'); * * * @alt @@ -414,6 +412,9 @@ p5.prototype.createCamera = function() { * cam = createCamera(); * // set initial pan angle * cam.pan(-0.8); + * describe( + * 'camera view pans left and right across a series of rotating 3D boxes.' + * ); * } * * function draw() { @@ -443,10 +444,6 @@ p5.prototype.createCamera = function() { * translate(35, 0, 0); * box(20); * } - * - * describe( - * 'camera view pans left and right across a series of rotating 3D boxes.' - * ); * * * @@ -475,6 +472,7 @@ p5.Camera = function(renderer) { * cam = createCamera(); * div = createDiv(); * div.position(0, 0); + * describe('An example showing the use of camera object properties'); * } * * function draw() { @@ -482,8 +480,6 @@ p5.Camera = function(renderer) { * box(10); * div.html('eyeX = ' + cam.eyeX); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -504,6 +500,7 @@ p5.Camera = function(renderer) { * cam = createCamera(); * div = createDiv(); * div.position(0, 0); + * describe('An example showing the use of camera object properties'); * } * * function draw() { @@ -511,8 +508,6 @@ p5.Camera = function(renderer) { * box(10); * div.html('eyeY = ' + cam.eyeY); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -533,6 +528,7 @@ p5.Camera = function(renderer) { * cam = createCamera(); * div = createDiv(); * div.position(0, 0); + * describe('An example showing the use of camera object properties'); * } * * function draw() { @@ -540,8 +536,6 @@ p5.Camera = function(renderer) { * box(10); * div.html('eyeZ = ' + cam.eyeZ); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -564,14 +558,13 @@ p5.Camera = function(renderer) { * div = createDiv('centerX = ' + cam.centerX); * div.position(0, 0); * div.style('color', 'white'); + * describe('An example showing the use of camera object properties'); * } * * function draw() { * orbitControl(); * box(10); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -594,14 +587,13 @@ p5.Camera = function(renderer) { * div = createDiv('centerY = ' + cam.centerY); * div.position(0, 0); * div.style('color', 'white'); + * describe('An example showing the use of camera object properties'); * } * * function draw() { * orbitControl(); * box(10); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -624,14 +616,13 @@ p5.Camera = function(renderer) { * div = createDiv('centerZ = ' + cam.centerZ); * div.position(0, 0); * div.style('color', 'white'); + * describe('An example showing the use of camera object properties'); * } * * function draw() { * orbitControl(); * box(10); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -654,9 +645,8 @@ p5.Camera = function(renderer) { * div.position(0, 0); * div.style('color', 'blue'); * div.style('font-size', '18px'); + * describe('An example showing the use of camera object properties'); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -679,9 +669,8 @@ p5.Camera = function(renderer) { * div.position(0, 0); * div.style('color', 'blue'); * div.style('font-size', '18px'); + * describe('An example showing the use of camera object properties'); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -704,9 +693,8 @@ p5.Camera = function(renderer) { * div.position(0, 0); * div.style('color', 'blue'); * div.style('font-size', '18px'); + * describe('An example showing the use of camera object properties'); * } - * - * describe('An example showing the use of camera object properties'); * * * @alt @@ -1782,6 +1770,10 @@ p5.Camera.prototype._isActive = function() { * * // set variable for previously active camera: * currentCamera = 1; + * + * describe( + * 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.' + * ); * } * * function draw() { @@ -1822,10 +1814,6 @@ p5.Camera.prototype._isActive = function() { * translate(35, 0, 0); * box(20); * } - * - * describe( - * 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.' - * ); * * * diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index a4014b31af..5435814f2d 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -341,6 +341,10 @@ p5.Shader.prototype.useProgram = function() { * createCanvas(100, 100, WEBGL); * shader(grad); * noStroke(); + * + * describe( + * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.' + * ); * } * * function draw() { @@ -363,10 +367,6 @@ p5.Shader.prototype.useProgram = function() { * function mouseClicked() { * showRedGreen = !showRedGreen; * } - * - * describe( - * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.' - * ); * * *