diff --git a/docs/parameterData.json b/docs/parameterData.json index 0bdd3fa6da..eb05dadcc5 100644 --- a/docs/parameterData.json +++ b/docs/parameterData.json @@ -243,13 +243,6 @@ [] ] }, - "abs": { - "overloads": [ - [ - "Number" - ] - ] - }, "mult": { "overloads": [ [ @@ -267,11 +260,23 @@ ] ] }, + "vectorValidation": { + "overloads": [ + [] + ] + }, "hour": { "overloads": [ [] ] }, + "abs": { + "overloads": [ + [ + "Number" + ] + ] + }, "randomSeed": { "overloads": [ [ @@ -296,13 +301,6 @@ ] ] }, - "ceil": { - "overloads": [ - [ - "Number" - ] - ] - }, "ellipseMode": { "overloads": [ [ @@ -447,11 +445,9 @@ ] ] }, - "constrain": { + "ceil": { "overloads": [ [ - "Number", - "Number", "Number" ] ] @@ -552,6 +548,15 @@ ] ] }, + "constrain": { + "overloads": [ + [ + "Number", + "Number", + "Number" + ] + ] + }, "endClip": { "overloads": [ [] @@ -597,24 +602,6 @@ [] ] }, - "dist": { - "overloads": [ - [ - "Number", - "Number", - "Number", - "Number" - ], - [ - "Number", - "Number", - "Number", - "Number", - "Number", - "Number" - ] - ] - }, "asin": { "overloads": [ [ @@ -702,6 +689,15 @@ ] ] }, + "mix": { + "overloads": [ + [ + "Number|p5.Vector", + "Number|p5.Vector", + "Number|Boolean" + ] + ] + }, "applyMatrix": { "overloads": [ [ @@ -836,6 +832,24 @@ ] ] }, + "dist": { + "overloads": [ + [ + "Number", + "Number", + "Number", + "Number" + ], + [ + "Number", + "Number", + "Number", + "Number", + "Number", + "Number" + ] + ] + }, "resetMatrix": { "overloads": [ [] @@ -848,13 +862,6 @@ ] ] }, - "exp": { - "overloads": [ - [ - "Number" - ] - ] - }, "second": { "overloads": [ [] @@ -919,13 +926,6 @@ [] ] }, - "floor": { - "overloads": [ - [ - "Number" - ] - ] - }, "str": { "overloads": [ [ @@ -961,6 +961,15 @@ ] ] }, + "set": { + "overloads": [ + [ + "Number", + "Number", + "Number|Number[]|Object" + ] + ] + }, "loadModel": { "overloads": [ [ @@ -1034,6 +1043,13 @@ [] ] }, + "exp": { + "overloads": [ + [ + "Number" + ] + ] + }, "beginShape": { "overloads": [ [ @@ -1092,15 +1108,6 @@ ] ] }, - "lerp": { - "overloads": [ - [ - "Number", - "Number", - "Number" - ] - ] - }, "createGraphics": { "overloads": [ [ @@ -1116,19 +1123,19 @@ ] ] }, - "frameRate": { + "freeGeometry": { "overloads": [ [ - "Number" - ], - [] + "p5.Geometry" + ] ] }, - "freeGeometry": { + "frameRate": { "overloads": [ [ - "p5.Geometry" - ] + "Number" + ], + [] ] }, "cos": { @@ -1192,6 +1199,13 @@ ] ] }, + "floor": { + "overloads": [ + [ + "Number" + ] + ] + }, "rotate": { "overloads": [ [ @@ -1207,20 +1221,20 @@ ] ] }, - "setMoveThreshold": { + "bezierTangent": { "overloads": [ [ + "Number", + "Number", + "Number", + "Number", "Number" ] ] }, - "bezierTangent": { + "setMoveThreshold": { "overloads": [ [ - "Number", - "Number", - "Number", - "Number", "Number" ] ] @@ -1249,13 +1263,6 @@ ] ] }, - "log": { - "overloads": [ - [ - "Number" - ] - ] - }, "createP": { "overloads": [ [ @@ -1322,14 +1329,6 @@ ] ] }, - "mag": { - "overloads": [ - [ - "Number", - "Number" - ] - ] - }, "noCursor": { "overloads": [ [] @@ -1406,36 +1405,33 @@ ] ] }, - "degrees": { + "lerp": { "overloads": [ [ + "Number", + "Number", "Number" ] ] }, - "rotateX": { + "degrees": { "overloads": [ [ "Number" ] ] }, - "createFramebuffer": { + "rotateX": { "overloads": [ [ - "Object?" + "Number" ] ] }, - "map": { + "createFramebuffer": { "overloads": [ [ - "Number", - "Number", - "Number", - "Number", - "Number", - "Boolean?" + "Object?" ] ] }, @@ -1547,6 +1543,13 @@ ] ] }, + "log": { + "overloads": [ + [ + "Number" + ] + ] + }, "green": { "overloads": [ [ @@ -1579,17 +1582,6 @@ ] ] }, - "max": { - "overloads": [ - [ - "Number", - "Number" - ], - [ - "Number[]" - ] - ] - }, "bezierVertex": { "overloads": [ [ @@ -1645,6 +1637,17 @@ ] ] }, + "clear": { + "overloads": [ + [ + "Number?", + "Number?", + "Number?", + "Number?" + ], + [] + ] + }, "setup": { "overloads": [ [] @@ -1662,17 +1665,6 @@ ] ] }, - "clear": { - "overloads": [ - [ - "Number?", - "Number?", - "Number?", - "Number?" - ], - [] - ] - }, "char": { "overloads": [ [ @@ -1683,6 +1675,14 @@ ] ] }, + "mag": { + "overloads": [ + [ + "Number", + "Number" + ] + ] + }, "rotateY": { "overloads": [ [ @@ -1783,17 +1783,6 @@ ] ] }, - "min": { - "overloads": [ - [ - "Number", - "Number" - ], - [ - "Number[]" - ] - ] - }, "shuffle": { "overloads": [ [ @@ -1809,11 +1798,6 @@ ] ] }, - "noDebugMode": { - "overloads": [ - [] - ] - }, "blue": { "overloads": [ [ @@ -1839,6 +1823,11 @@ ] ] }, + "noDebugMode": { + "overloads": [ + [] + ] + }, "sphere": { "overloads": [ [ @@ -1884,12 +1873,15 @@ ] ] }, - "norm": { + "map": { "overloads": [ [ "Number", "Number", - "Number" + "Number", + "Number", + "Number", + "Boolean?" ] ] }, @@ -1907,20 +1899,31 @@ ] ] }, - "pow": { + "loadBlob": { "overloads": [ [ - "Number", - "Number" + "String|Request", + "Function?", + "Function?" ] ] }, - "loadBlob": { + "fullscreen": { "overloads": [ [ - "String|Request", - "Function?", - "Function?" + "Boolean?" + ] + ] + }, + "point": { + "overloads": [ + [ + "Number", + "Number", + "Number?" + ], + [ + "p5.Vector" ] ] }, @@ -1952,25 +1955,6 @@ ] ] }, - "fullscreen": { - "overloads": [ - [ - "Boolean?" - ] - ] - }, - "point": { - "overloads": [ - [ - "Number", - "Number", - "Number?" - ], - [ - "p5.Vector" - ] - ] - }, "alpha": { "overloads": [ [ @@ -2001,23 +1985,6 @@ ] ] }, - "set": { - "overloads": [ - [ - "Number", - "Number", - "Number|Number[]|Object" - ] - ] - }, - "round": { - "overloads": [ - [ - "Number", - "Number?" - ] - ] - }, "hex": { "overloads": [ [ @@ -2041,13 +2008,25 @@ ] ] }, - "imageLight": { + "max": { "overloads": [ [ - "p5.Image" + "Number", + "Number" + ], + [ + "Number[]" ] ] }, + "pixelDensity": { + "overloads": [ + [ + "Number?" + ], + [] + ] + }, "httpGet": { "overloads": [ [ @@ -2063,12 +2042,11 @@ ] ] }, - "pixelDensity": { + "imageLight": { "overloads": [ [ - "Number?" - ], - [] + "p5.Image" + ] ] }, "updatePixels": { @@ -2082,11 +2060,9 @@ [] ] }, - "sq": { + "displayDensity": { "overloads": [ - [ - "Number" - ] + [] ] }, "panorama": { @@ -2104,11 +2080,6 @@ ] ] }, - "displayDensity": { - "overloads": [ - [] - ] - }, "keyTyped": { "overloads": [ [ @@ -2189,10 +2160,14 @@ ] ] }, - "sqrt": { + "min": { "overloads": [ [ + "Number", "Number" + ], + [ + "Number[]" ] ] }, @@ -2228,11 +2203,9 @@ [] ] }, - "fract": { + "getURLPath": { "overloads": [ - [ - "Number" - ] + [] ] }, "splineTangent": { @@ -2246,9 +2219,13 @@ ] ] }, - "getURLPath": { + "norm": { "overloads": [ - [] + [ + "Number", + "Number", + "Number" + ] ] }, "normal": { @@ -2360,6 +2337,14 @@ ] ] }, + "pow": { + "overloads": [ + [ + "Number", + "Number" + ] + ] + }, "rect": { "overloads": [ [ @@ -2451,6 +2436,14 @@ ] ] }, + "round": { + "overloads": [ + [ + "Number", + "Number?" + ] + ] + }, "vertexProperty": { "overloads": [ [ @@ -2472,6 +2465,15 @@ ] ] }, + "screenToWorld": { + "overloads": [ + [ + "Number|p5.Vector", + "Number", + "Number?" + ] + ] + }, "createModel": { "overloads": [ [ @@ -2494,19 +2496,17 @@ ] ] }, - "screenToWorld": { + "mousePressed": { "overloads": [ [ - "Number|p5.Vector", - "Number", - "Number?" + "MouseEvent?" ] ] }, - "mousePressed": { + "sq": { "overloads": [ [ - "MouseEvent?" + "Number" ] ] }, @@ -2560,6 +2560,14 @@ ] ] }, + "createWriter": { + "overloads": [ + [ + "String", + "String?" + ] + ] + }, "spotLight": { "overloads": [ [ @@ -2644,14 +2652,6 @@ ] ] }, - "createWriter": { - "overloads": [ - [ - "String", - "String?" - ] - ] - }, "fill": { "overloads": [ [ @@ -2857,6 +2857,13 @@ ] ] }, + "sqrt": { + "overloads": [ + [ + "Number" + ] + ] + }, "noFill": { "overloads": [ [] @@ -2874,6 +2881,13 @@ ] ] }, + "fract": { + "overloads": [ + [ + "Number" + ] + ] + }, "imageShader": { "overloads": [ [ @@ -3085,6 +3099,11 @@ ] ] }, + "makeGuardedCallbacks": { + "overloads": [ + [] + ] + }, "createInput": { "overloads": [ [ @@ -3543,671 +3562,671 @@ ] } }, - "p5.Element": { - "remove": { - "overloads": [ - [] - ] - }, - "parent": { + "p5.Vector": { + "getValue": { "overloads": [ [ - "String|p5.Element|Object" - ], - [] + "Number" + ] ] }, - "child": { + "setValue": { "overloads": [ - [], [ - "String|p5.Element?" + "Number", + "Number" ] ] }, - "html": { + "set": { "overloads": [ - [], [ - "String?", - "Boolean?" + "Number?", + "Number?", + "Number?" + ], + [ + "p5.Vector|Number[]" ] ] }, - "id": { + "copy": { "overloads": [ - [ - "String" - ], [] ] }, - "class": { + "add": { "overloads": [ [ - "String" + "Number|Array", + "Number?", + "Number?" ], - [] - ] - }, - "addClass": { - "overloads": [ [ - "String" + "p5.Vector|Number[]" ] ] }, - "removeClass": { + "rem": { "overloads": [ [ - "String" - ] - ] - }, - "hasClass": { - "overloads": [ + "Number", + "Number", + "Number" + ], [ - null + "p5.Vector|Number[]" ] ] }, - "toggleClass": { + "sub": { "overloads": [ [ - null + "Number", + "Number?", + "Number?" + ], + [ + "p5.Vector|Number[]" ] ] }, - "center": { + "mult": { "overloads": [ [ - "String?" + "Number" + ], + [ + "Number", + "Number", + "Number?" + ], + [ + "Number[]" + ], + [ + "p5.Vector" ] ] }, - "position": { + "div": { "overloads": [ - [], [ - "Number?", - "Number?", - "String?" + "Number" + ], + [ + "Number", + "Number", + "Number?" + ], + [ + "Number[]" + ], + [ + "p5.Vector" ] ] }, - "show": { + "mag": { "overloads": [ [] ] }, - "hide": { + "magSq": { "overloads": [ [] ] }, - "size": { + "dot": { "overloads": [ - [], [ - "Number|AUTO?", - "Number|AUTO?" + "Number", + "Number?", + "Number?" + ], + [ + "p5.Vector" ] ] }, - "style": { + "cross": { "overloads": [ [ - "String" - ], - [ - "String", - "String|p5.Color" + "p5.Vector" ] ] }, - "attribute": { + "dist": { "overloads": [ - [], [ - "String", - "String" + "p5.Vector" ] ] }, - "removeAttribute": { + "normalize": { "overloads": [ - [ - "String" - ] + [] ] }, - "value": { + "limit": { "overloads": [ - [], [ - "String|Number" + "Number" ] ] }, - "mousePressed": { + "setMag": { "overloads": [ [ - "Function|Boolean" + "Number" ] ] }, - "doubleClicked": { + "heading": { "overloads": [ - [ - "Function|Boolean" - ] + [] ] }, - "mouseWheel": { + "setHeading": { "overloads": [ [ - "Function|Boolean" + "Number" ] ] }, - "mouseReleased": { + "rotate": { "overloads": [ [ - "Function|Boolean" + "Number" ] ] }, - "mouseClicked": { + "angleBetween": { "overloads": [ [ - "Function|Boolean" + "p5.Vector" ] ] }, - "mouseMoved": { + "lerp": { "overloads": [ [ - "Function|Boolean" + "Number", + "Number", + "Number", + "Number" + ], + [ + "p5.Vector", + "Number" ] ] }, - "mouseOver": { + "slerp": { "overloads": [ [ - "Function|Boolean" + "p5.Vector", + "Number" ] ] }, - "mouseOut": { + "reflect": { "overloads": [ [ - "Function|Boolean" + "p5.Vector" ] ] }, - "dragOver": { + "array": { "overloads": [ - [ - "Function|Boolean" - ] + [] ] }, - "dragLeave": { + "equals": { "overloads": [ [ - "Function|Boolean" + "Number?", + "Number?", + "Number?" + ], + [ + "p5.Vector|Array" ] ] }, - "changed": { + "clampToZero": { "overloads": [ - [ - "Function|Boolean" - ] + [] ] }, - "input": { + "fromAngle": { "overloads": [ [ - "Function|Boolean" + "Number", + "Number?" ] ] }, - "drop": { + "fromAngles": { "overloads": [ [ - "Function", - "Function?" + "Number", + "Number", + "Number?" ] ] }, - "draggable": { + "random2D": { "overloads": [ - [ - "p5.Element?" - ] + [] + ] + }, + "random3D": { + "overloads": [ + [] ] } }, - "p5.XML": { - "getParent": { + "p5.Element": { + "remove": { "overloads": [ [] ] }, - "getName": { + "parent": { "overloads": [ + [ + "String|p5.Element|Object" + ], [] ] }, - "setName": { + "child": { "overloads": [ + [], [ - "String" + "String|p5.Element?" ] ] }, - "hasChildren": { + "html": { + "overloads": [ + [], + [ + "String?", + "Boolean?" + ] + ] + }, + "id": { "overloads": [ + [ + "String" + ], [] ] }, - "listChildren": { + "class": { "overloads": [ + [ + "String" + ], [] ] }, - "getChildren": { + "addClass": { "overloads": [ [ - "String?" + "String" ] ] }, - "getChild": { + "removeClass": { "overloads": [ [ - "String|Integer" + "String" ] ] }, - "addChild": { + "hasClass": { "overloads": [ [ - "p5.XML" + null ] ] }, - "removeChild": { + "toggleClass": { "overloads": [ [ - "String|Integer" + null ] ] }, - "getAttributeCount": { + "center": { "overloads": [ - [] + [ + "String?" + ] ] }, - "listAttributes": { + "position": { + "overloads": [ + [], + [ + "Number?", + "Number?", + "String?" + ] + ] + }, + "show": { "overloads": [ [] ] }, - "hasAttribute": { + "hide": { "overloads": [ - [ - "String" - ] + [] ] }, - "getNum": { + "size": { "overloads": [ + [], [ - "String", - "Number?" + "Number|AUTO?", + "Number|AUTO?" ] ] }, - "getString": { + "style": { "overloads": [ + [ + "String" + ], [ "String", - "Number?" + "String|p5.Color" ] ] }, - "setAttribute": { + "attribute": { "overloads": [ + [], [ "String", - "Number|String|Boolean" + "String" ] ] }, - "getContent": { + "removeAttribute": { "overloads": [ [ - "String?" + "String" ] - ] - }, - "serialize": { - "overloads": [ - [] - ] - } - }, - "p5.TableRow": { - "set": { + ] + }, + "value": { "overloads": [ + [], [ - "String|Integer", "String|Number" ] ] }, - "setNum": { + "mousePressed": { "overloads": [ [ - "String|Integer", - "Number|String" + "Function|Boolean" ] ] }, - "setString": { + "doubleClicked": { "overloads": [ [ - "String|Integer", - "String|Number|Boolean|Object" + "Function|Boolean" ] ] }, - "get": { + "mouseWheel": { "overloads": [ [ - "String|Integer" + "Function|Boolean" ] ] }, - "getNum": { + "mouseReleased": { "overloads": [ [ - "String|Integer" + "Function|Boolean" ] ] }, - "getString": { + "mouseClicked": { "overloads": [ [ - "String|Integer" + "Function|Boolean" ] ] - } - }, - "p5.Vector": { - "getValue": { + }, + "mouseMoved": { "overloads": [ [ - "Number" + "Function|Boolean" ] ] }, - "setValue": { + "mouseOver": { "overloads": [ [ - "Number", - "Number" + "Function|Boolean" ] ] }, - "set": { + "mouseOut": { "overloads": [ [ - "Number?", - "Number?", - "Number?" - ], - [ - "p5.Vector|Number[]" + "Function|Boolean" ] ] }, - "copy": { + "dragOver": { "overloads": [ - [] + [ + "Function|Boolean" + ] ] }, - "add": { + "dragLeave": { "overloads": [ [ - "Number|Array", - "Number?", - "Number?" - ], - [ - "p5.Vector|Number[]" + "Function|Boolean" ] ] }, - "rem": { + "changed": { "overloads": [ [ - "Number", - "Number", - "Number" - ], - [ - "p5.Vector|Number[]" + "Function|Boolean" ] ] }, - "sub": { + "input": { "overloads": [ [ - "Number", - "Number?", - "Number?" - ], - [ - "p5.Vector|Number[]" + "Function|Boolean" ] ] }, - "mult": { + "drop": { "overloads": [ [ - "Number" - ], - [ - "Number", - "Number", - "Number?" - ], - [ - "Number[]" - ], - [ - "p5.Vector" + "Function", + "Function?" ] ] }, - "div": { + "draggable": { "overloads": [ [ - "Number" - ], - [ - "Number", - "Number", - "Number?" - ], - [ - "Number[]" - ], - [ - "p5.Vector" + "p5.Element?" ] ] - }, - "mag": { + } + }, + "p5.XML": { + "getParent": { "overloads": [ [] ] }, - "magSq": { + "getName": { "overloads": [ [] ] }, - "dot": { + "setName": { "overloads": [ [ - "Number", - "Number?", - "Number?" - ], - [ - "p5.Vector" + "String" ] ] }, - "cross": { + "hasChildren": { "overloads": [ - [ - "p5.Vector" - ] + [] ] }, - "dist": { + "listChildren": { + "overloads": [ + [] + ] + }, + "getChildren": { "overloads": [ [ - "p5.Vector" + "String?" ] ] }, - "normalize": { + "getChild": { "overloads": [ - [] + [ + "String|Integer" + ] ] }, - "limit": { + "addChild": { "overloads": [ [ - "Number" + "p5.XML" ] ] }, - "setMag": { + "removeChild": { "overloads": [ [ - "Number" + "String|Integer" ] ] }, - "heading": { + "getAttributeCount": { "overloads": [ [] ] }, - "setHeading": { + "listAttributes": { "overloads": [ - [ - "Number" - ] + [] ] }, - "rotate": { + "hasAttribute": { "overloads": [ [ - "Number" + "String" ] ] }, - "angleBetween": { + "getNum": { "overloads": [ [ - "p5.Vector" + "String", + "Number?" ] ] }, - "lerp": { + "getString": { "overloads": [ [ - "Number", - "Number", - "Number", - "Number" - ], - [ - "p5.Vector", - "Number" + "String", + "Number?" ] ] }, - "slerp": { + "setAttribute": { "overloads": [ [ - "p5.Vector", - "Number" + "String", + "Number|String|Boolean" ] ] }, - "reflect": { + "getContent": { "overloads": [ [ - "p5.Vector" + "String?" ] ] }, - "array": { + "serialize": { "overloads": [ [] ] - }, - "equals": { + } + }, + "p5.TableRow": { + "set": { "overloads": [ [ - "Number?", - "Number?", - "Number?" - ], - [ - "p5.Vector|Array" + "String|Integer", + "String|Number" ] ] }, - "clampToZero": { + "setNum": { "overloads": [ - [] + [ + "String|Integer", + "Number|String" + ] ] }, - "fromAngle": { + "setString": { "overloads": [ [ - "Number", - "Number?" + "String|Integer", + "String|Number|Boolean|Object" ] ] }, - "fromAngles": { + "get": { "overloads": [ [ - "Number", - "Number", - "Number?" + "String|Integer" ] ] }, - "random2D": { + "getNum": { "overloads": [ - [] + [ + "String|Integer" + ] ] }, - "random3D": { + "getString": { "overloads": [ - [] + [ + "String|Integer" + ] ] } }, @@ -4587,6 +4606,19 @@ "Number[]|Float32Array|Object[]" ] ] + }, + "read": { + "overloads": [ + [] + ] + }, + "set": { + "overloads": [ + [ + "Number", + "Number|Object" + ] + ] } }, "p5.Geometry": { diff --git a/src/math/calculation.js b/src/math/calculation.js index 82b788e788..0494e10517 100644 --- a/src/math/calculation.js +++ b/src/math/calculation.js @@ -36,6 +36,35 @@ function calculation(p5, fn){ * // from the middle. * rect(0, 100 - h, 100, h); * } + * + * `abs()` can also be used in shaders with p5.strands. The following example + * uses `abs()` to create a mirror effect on the color of a shape. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with colors that fold back like a mirror.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = abs(sin(t)); + * let navy = [0.2, 0.2, 0.8, 1]; + * let coral = [0.8, 0.2, 0.2, 1]; + * finalColor.begin(); + * finalColor.set(mix(navy, coral, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.abs = Math.abs; @@ -75,6 +104,34 @@ function calculation(p5, fn){ * * describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.'); * } + * + * `ceil()` can also be used in shaders with p5.strands. The following example + * uses `ceil()` to create a stepped color effect on a shape. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with stepped color bands.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let steps = ceil(t * 2) / 2; + * let value = fract(steps); + * finalColor.begin(); + * finalColor.set([value, 0.5, 1 - value, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.ceil = Math.ceil; @@ -262,6 +319,35 @@ function calculation(p5, fn){ * // Draw a point. * point(x, y); * } + * + * `exp()` can also be used in shaders with p5.strands. The following example + * uses `exp()` to create an accelerating color transition on a shape. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that brightens with accelerating speed.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.0005; + * let value = min(exp(t) * 0.01, 1); + * let darkBlue = [0.1, 0.1, 0.3, 1]; + * let lightYellow = [1, 1, 0.5, 1]; + * finalColor.begin(); + * finalColor.set(mix(darkBlue, lightYellow, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.exp = Math.exp; @@ -296,6 +382,34 @@ function calculation(p5, fn){ * * describe('Two rectangles. The one on the left is bright red and the one on the right is black.'); * } + * + * `floor()` can also be used in shaders with p5.strands. The following example + * uses `floor()` to create banding effects on a shape. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with posterized color bands.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let bands = floor(t * 5) / 5; + * let value = fract(bands); + * finalColor.begin(); + * finalColor.set([0.2, value, 0.8, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.floor = Math.floor; @@ -377,6 +491,36 @@ function calculation(p5, fn){ * x = mouseX; * y = mouseY; * } + * + * `lerp()` can also be used in shaders with p5.strands, where it maps to the + * GLSL `mix()` function. The following example uses `lerp()` to blend colors + * on a shape over time. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that blends between teal and coral.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = 0.5 + 0.5 * sin(t); + * let teal = [0, 0.8, 0.8, 1]; + * let coral = [1, 0.5, 0.3, 1]; + * finalColor.begin(); + * finalColor.set(lerp(teal, coral, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.lerp = function(start, stop, amt) { // p5._validateParameters('lerp', arguments); @@ -431,6 +575,36 @@ function calculation(p5, fn){ * // Draw a point. * point(x, y); * } + * + * `log()` can also be used in shaders with p5.strands. The following example + * uses `log()` to create a decelerating color transition on a shape. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that slowly shifts from purple to yellow.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = log(1 + t) * 0.2; + * value = min(value, 1); + * let purple = [0.5, 0, 0.5, 1]; + * let yellow = [1, 1, 0, 1]; + * finalColor.begin(); + * finalColor.set(mix(purple, yellow, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.log = Math.log; @@ -546,6 +720,33 @@ function calculation(p5, fn){ * // Draw the circle. * circle(50, 50, 20); * } + * + * `map()` can also be used in shaders with p5.strands. The following example + * uses `map()` to remap time values to color in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that cycles through hues over time.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = map(sin(t), -1, 1, 0, 1); + * finalColor.begin(); + * finalColor.set([value, 0.5, 1 - value, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.map = function(n, start1, stop1, start2, stop2, withinBounds) { // p5._validateParameters('map', arguments); @@ -614,6 +815,33 @@ function calculation(p5, fn){ * * describe('The number 20 written in the middle of a gray square.'); * } + * + * `max()` can also be used in shaders with p5.strands. The following example + * uses `max()` to clamp values in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with colors clamped to a minimum brightness.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = max(sin(t), 0); + * finalColor.begin(); + * finalColor.set([value, 0.3, 0.8, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ /** * @method max @@ -690,6 +918,33 @@ function calculation(p5, fn){ * * describe('The number 5 written in the middle of a gray square.'); * } + * + * `min()` can also be used in shaders with p5.strands. The following example + * uses `min()` to clamp values in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with colors clamped to a maximum brightness.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = min(abs(sin(t)), 0.5) * 2; + * finalColor.begin(); + * finalColor.set([0.8, value, 0.2, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ /** * @method min @@ -790,6 +1045,35 @@ function calculation(p5, fn){ * * describe('A series of circles that grow exponentially from top left to bottom right.'); * } + * + * `pow()` can also be used in shaders with p5.strands. The following example + * uses `pow()` to create a gamma curve effect on colors in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with colors that shift with a power curve.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = pow(abs(sin(t)), 2); + * let blue = [0.2, 0.4, 0.8, 1]; + * let pink = [0.8, 0.2, 0.4, 1]; + * finalColor.begin(); + * finalColor.set(mix(blue, pink, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.pow = Math.pow; @@ -844,6 +1128,33 @@ function calculation(p5, fn){ * * describe('The number 12.78 written in middle of canvas.'); * } + * + * `round()` can also be used in shaders with p5.strands. The following example + * uses `round()` to quantize colors in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with posterized quantized colors.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = round(sin(t) * 5) / 5 + 0.5; + * finalColor.begin(); + * finalColor.set([value * 0.8, 0.3, 0.7, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.round = function(n, decimals) { if (!decimals) { @@ -956,6 +1267,35 @@ function calculation(p5, fn){ * // Draw the point. * point(x, y); * } + * + * `sqrt()` can also be used in shaders with p5.strands. The following example + * uses `sqrt()` to create a smooth easing curve on colors in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with colors that ease smoothly.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = sqrt(abs(sin(t))); + * let purple = [0.3, 0.1, 0.5, 1]; + * let amber = [0.9, 0.6, 0.2, 1]; + * finalColor.begin(); + * finalColor.set(mix(purple, amber, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.sqrt = Math.sqrt; @@ -989,6 +1329,33 @@ function calculation(p5, fn){ * * describe('The number 56.78 written above the number 0.78.'); * } + * + * `fract()` can also be used in shaders with p5.strands. The following example + * uses `fract()` to create repeating patterns in a shader. + * + * @example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with a repeating gradient pattern.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = fract(t * 0.5); + * finalColor.begin(); + * finalColor.set([value, 0.5, 1 - value, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } */ fn.fract = function(toConvert) { // p5._validateParameters('fract', arguments);