|
896 | 896 | "AXES": {}, |
897 | 897 | "LABEL": {}, |
898 | 898 | "FALLBACK": {}, |
| 899 | + "CONTAIN": {}, |
| 900 | + "COVER": {}, |
899 | 901 | "print": { |
900 | 902 | "description": [ |
901 | 903 | "The <a href=\"#/p5/print\">print()</a> function writes to the console area of your browser. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes (\"\") and joined with the addition operator (+).", |
|
1213 | 1215 | }, |
1214 | 1216 | "blendMode": { |
1215 | 1217 | "description": [ |
1216 | | - "Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B): <ul> <li><code>BLEND</code> - linear interpolation of colours: C = A*factor + B. <b>This is the default blending mode.</b></li> <li><code>ADD</code> - sum of A and B</li> <li><code>DARKEST</code> - only the darkest colour succeeds: C = min(A*factor, B).</li> <li><code>LIGHTEST</code> - only the lightest colour succeeds: C = max(A*factor, B).</li> <li><code>DIFFERENCE</code> - subtract colors from underlying image.</li> <li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less extreme.</li> <li><code>MULTIPLY</code> - multiply the colors, result will always be darker.</li> <li><code>SCREEN</code> - opposite multiply, uses inverse values of the colors.</li> <li><code>REPLACE</code> - the pixels entirely replace the others and don't utilize alpha (transparency) values.</li> <li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li> <li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN </code>. Multiplies dark values, and screens light values. <em>(2D)</em></li> <li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50% gray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li> <li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and <code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em> </li> <li><code>DODGE</code> - lightens light tones and increases contrast, ignores darks. <em>(2D)</em></li> <li><code>BURN</code> - darker areas are applied, increasing contrast, ignores lights. <em>(2D)</em></li> <li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li> </ul>", |
| 1218 | + "Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B): <ul> <li><code>BLEND</code> - linear interpolation of colours: C = A*factor + B. <b>This is the default blending mode.</b></li> <li><code>ADD</code> - sum of A and B</li> <li><code>DARKEST</code> - only the darkest colour succeeds: C = min(A*factor, B).</li> <li><code>LIGHTEST</code> - only the lightest colour succeeds: C = max(A*factor, B).</li> <li><code>DIFFERENCE</code> - subtract colors from underlying image. <em>(2D)</em></li> <li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less extreme.</li> <li><code>MULTIPLY</code> - multiply the colors, result will always be darker.</li> <li><code>SCREEN</code> - opposite multiply, uses inverse values of the colors.</li> <li><code>REPLACE</code> - the pixels entirely replace the others and don't utilize alpha (transparency) values.</li> <li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li> <li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN </code>. Multiplies dark values, and screens light values. <em>(2D)</em></li> <li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50% gray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li> <li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and <code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em> </li> <li><code>DODGE</code> - lightens light tones and increases contrast, ignores darks. <em>(2D)</em></li> <li><code>BURN</code> - darker areas are applied, increasing contrast, ignores lights. <em>(2D)</em></li> <li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li> </ul>", |
1217 | 1219 | "<em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer. <em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer." |
1218 | 1220 | ], |
1219 | 1221 | "params": { |
|
1577 | 1579 | }, |
1578 | 1580 | "createSelect": { |
1579 | 1581 | "description": [ |
1580 | | - "Creates a dropdown menu <code><select></select></code> element in the DOM. It also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box. <ul> <li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li> <li><code>.value()</code> will return the currently selected option.</li> <li><code>.selected()</code> will return the current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a>.</li> <li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li> <li><code>.disable()</code> marks the whole dropdown element as disabled.</li> <li><code>.disable(value)</code> marks a given option as disabled.</li> </ul>" |
| 1582 | + "Creates a dropdown menu <code><select></select></code> element in the DOM. It also assigns select-related methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting an existing select box. Options in the menu are unique by <code>name</code> (the display text). <ul> <li><code>.option(name, [value])</code> can be used to add an option with <code>name</code> (the display text) and <code>value</code> to the select element. If an option with <code>name</code> already exists within the select element, this method will change its value to <code>value</code>.</li> <li><code>.value()</code> will return the currently selected option.</li> <li><code>.selected()</code> will return the current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a>.</li> <li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li> <li><code>.disable()</code> marks the whole dropdown element as disabled.</li> <li><code>.disable(value)</code> marks a given option as disabled.</li> </ul>" |
1581 | 1583 | ], |
1582 | 1584 | "returns": "p5.Element: pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node", |
1583 | 1585 | "params": { |
|
1644 | 1646 | "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content" |
1645 | 1647 | } |
1646 | 1648 | }, |
1647 | | - "VIDEO": {}, |
1648 | | - "AUDIO": {}, |
1649 | 1649 | "createCapture": { |
1650 | 1650 | "description": [ |
1651 | 1651 | "Creates a new HTML5 <code><video></code> element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>. The feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>. The loadedmetadata property can be used to detect when the element has fully loaded (see second example).", |
|
2035 | 2035 | "failureCallback": "Function(Event): (Optional) called with event error if the image fails to load." |
2036 | 2036 | } |
2037 | 2037 | }, |
| 2038 | + "saveGif": { |
| 2039 | + "description": [ |
| 2040 | + "Generates a gif of your current animation and downloads it to your computer!", |
| 2041 | + "The duration argument specifies how many seconds you want to record from your animation. This value is then converted to the necessary number of frames to generate it, depending on the value of units. More on that on the next paragraph.", |
| 2042 | + "An optional object that can contain two more arguments: delay (number) and units (string).", |
| 2043 | + "<code>delay</code>, specifying how much time we should wait before recording", |
| 2044 | + "<code>units</code>, a string that can be either 'seconds' or 'frames'. By default it's 'seconds'.", |
| 2045 | + "<code>units</code> specifies how the duration and delay arguments will behave. If 'seconds', these arguments will correspond to seconds, meaning that 3 seconds worth of animation will be created. If 'frames', the arguments now correspond to the number of frames you want your animation to be, if you are very sure of this number.", |
| 2046 | + "It is not recommended to write this function inside setup, since it won't work properly. The recommended use can be seen in the example, where we use it inside an event function, like keyPressed or mousePressed." |
| 2047 | + ], |
| 2048 | + "params": { |
| 2049 | + "filename": "String: File name of your gif", |
| 2050 | + "duration": "Number: Duration in seconds that you wish to capture from your sketch", |
| 2051 | + "options": "Object: An optional object that can contain two more arguments: delay, specifying how much time we should wait before recording, and units, a string that can be either 'seconds' or 'frames'. By default it's 'seconds'." |
| 2052 | + } |
| 2053 | + }, |
2038 | 2054 | "image": { |
2039 | 2055 | "description": [ |
2040 | 2056 | "Draw an image to the p5.js canvas.", |
2041 | 2057 | "This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.", |
2042 | | - "This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of \"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source image\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the \"source image\" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further: <img src=\"assets/drawImage.png\"></img>" |
| 2058 | + "This function can also be used with eight Number parameters. To differentiate between all these parameters, p5.js uses the language of \"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source image\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the \"source image\" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further: <img src=\"assets/drawImage.png\"></img>", |
| 2059 | + "This function can also be used to draw images without distorting the orginal aspect ratio, by adding 9th parameter, fit, which can either be COVER or CONTAIN. CONTAIN, as the name suggests, contains the whole image within the specified destination box without distorting the image ratio. COVER covers the entire destination box." |
2043 | 2060 | ], |
2044 | 2061 | "params": { |
2045 | 2062 | "img": "p5.Image|p5.Element|p5.Texture: the image to display", |
|
2054 | 2071 | "sx": "Number: the x-coordinate of the subsection of the source image to draw into the destination rectangle", |
2055 | 2072 | "sy": "Number: the y-coordinate of the subsection of the source image to draw into the destination rectangle", |
2056 | 2073 | "sWidth": "Number: (Optional) the width of the subsection of the source image to draw into the destination rectangle", |
2057 | | - "sHeight": "Number: (Optional) the height of the subsection of the source image to draw into the destination rectangle" |
| 2074 | + "sHeight": "Number: (Optional) the height of the subsection of the source image to draw into the destination rectangle", |
| 2075 | + "fit": "Constant: (Optional) either CONTAIN or COVER", |
| 2076 | + "xAlign": "Constant: (Optional) either LEFT, RIGHT or CENTER default is CENTER", |
| 2077 | + "yAlign": "Constant: (Optional) either TOP, BOTTOM or CENTER default is CENTER" |
2058 | 2078 | } |
2059 | 2079 | }, |
2060 | 2080 | "tint": { |
|
3165 | 3185 | ], |
3166 | 3186 | "params": { |
3167 | 3187 | "width": "Number: (Optional) width of the box", |
3168 | | - "Height": "Number: (Optional) height of the box", |
| 3188 | + "height": "Number: (Optional) height of the box", |
3169 | 3189 | "depth": "Number: (Optional) depth of the box", |
3170 | 3190 | "detailX": "Integer: (Optional) Optional number of triangle subdivisions in x-dimension", |
3171 | 3191 | "detailY": "Integer: (Optional) Optional number of triangle subdivisions in y-dimension" |
|
3503 | 3523 | }, |
3504 | 3524 | "ambientMaterial": { |
3505 | 3525 | "description": [ |
3506 | | - "Sets the current material as an ambient material of the given color.", |
| 3526 | + "Sets the ambient color of the material.", |
3507 | 3527 | "The ambientMaterial() color is the color the object will reflect under <strong>any</strong> lighting.", |
3508 | 3528 | "Consider an ambientMaterial() with the color yellow (255, 255, 0). If the light emits the color white (255, 255, 255), then the object will appear yellow as it will reflect the red and green components of the light. If the light emits the color red (255, 0, 0), then the object will appear red as it will reflect the red component of the light. If the light emits the color blue (0, 0, 255), then the object will appear black, as there is no component of the light that it can reflect.", |
3509 | 3529 | "You can view more materials in this <a href=\"https://p5js.org/examples/3d-materials.html\">example</a>." |
|
3518 | 3538 | }, |
3519 | 3539 | "emissiveMaterial": { |
3520 | 3540 | "description": [ |
3521 | | - "Sets the current material as an emissive material of the given color.", |
| 3541 | + "Sets the emissive color of the material.", |
3522 | 3542 | "An emissive material will display the emissive color at full strength regardless of lighting. This can give the appearance that the object is glowing.", |
3523 | 3543 | "Note, \"emissive\" is a misnomer in the sense that the material does not actually emit light that will affect surrounding objects.", |
3524 | 3544 | "You can view more materials in this <a href=\"https://p5js.org/examples/3d-materials.html\">example</a>." |
|
3534 | 3554 | }, |
3535 | 3555 | "specularMaterial": { |
3536 | 3556 | "description": [ |
3537 | | - "Sets the current material as a specular material of the given color.", |
| 3557 | + "Sets the specular color of the material.", |
3538 | 3558 | "A specular material is reflective (shiny). The shininess can be controlled by the <a href=\"#/p5/shininess\">shininess()</a> function.", |
3539 | 3559 | "Like <a href=\"#/p5/ambientMaterial\">ambientMaterial()</a>, the specularMaterial() color is the color the object will reflect under <a href=\"#/p5/ambientLight\">ambientLight()</a>. However unlike ambientMaterial(), for all other types of lights (<a href=\"#/p5/directionalLight\">directionalLight()</a>, <a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/spotLight\">spotLight()</a>), a specular material will reflect the <strong>color of the light source</strong>. This is what gives it its \"shiny\" appearance.", |
3540 | 3560 | "You can view more materials in this <a href=\"https://p5js.org/examples/3d-materials.html\">example</a>." |
|
0 commit comments