|
2 | 2 | "project": { |
3 | 3 | "name": "p5", |
4 | 4 | "description": "[](https://www.npmjs.com/package/p5)", |
5 | | - "version": "1.11.8", |
| 5 | + "version": "1.11.9", |
6 | 6 | "url": "https://github.com/processing/p5.js#readme" |
7 | 7 | }, |
8 | 8 | "files": { |
|
11233 | 11233 | "type": "p5.File" |
11234 | 11234 | }, |
11235 | 11235 | "example": [ |
11236 | | - "\n<div>\n<code>\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(img, 0, y, 100, 100);\n }\n\n describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n</code>\n</div>" |
| 11236 | + "\n<div>\n<code>\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(images[i], 0, y, 100, 100);\n }\n\n describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n</code>\n</div>" |
11237 | 11237 | ], |
11238 | 11238 | "class": "p5", |
11239 | 11239 | "module": "DOM", |
|
13468 | 13468 | { |
13469 | 13469 | "file": "src/image/loading_displaying.js", |
13470 | 13470 | "line": 888, |
13471 | | - "description": "<p>Draws an image to the canvas.</p>\n<p>The first parameter, <code>img</code>, is the source image to be drawn. <code>img</code> can be\nany of the following objects:</p>\n<ul>\n<li><a href=\"#/p5.Image\">p5.Image</a></li>\n<li><a href=\"#/p5.Element\">p5.Element</a></li>\n<li><a href=\"#/p5.Texture\">p5.Texture</a></li>\n<li><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a></li>\n<li><a href=\"#/p5.FramebufferTexture\">p5.FramebufferTexture</a></li>\n</ul>\n<p>The second and third parameters, <code>dx</code> and <code>dy</code>, set the coordinates of the\ndestination image's top left corner. See\n<a href=\"#/p5/imageMode\">imageMode()</a> for other ways to position images.</p>\n<p>Here's a diagram that explains how optional parameters work in <code>image()</code>:</p>\n<p><img src=\"assets/drawImage.png\"></img></p>\n<p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are optional. They set the\nthe width and height to draw the destination image. By default, <code>image()</code>\ndraws the full source image at its original size.</p>\n<p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are also optional.\nThese coordinates define the top left corner of a subsection to draw from\nthe source image.</p>\n<p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are also optional.\nThey define the width and height of a subsection to draw from the source\nimage. By default, <code>image()</code> draws the full subsection that begins at\n<code>(sx, sy)</code> and extends to the edges of the source image.</p>\n<p>The ninth parameter, <code>fit</code>, is also optional. It enables a subsection of\nthe source image to be drawn without affecting its aspect ratio. If\n<code>CONTAIN</code> is passed, the full subsection will appear within the destination\nrectangle. If <code>COVER</code> is passed, the subsection will completely cover the\ndestination rectangle. This may have the effect of zooming into the\nsubsection.</p>\n<p>The tenth and eleventh paremeters, <code>xAlign</code> and <code>yAlign</code>, are also\noptional. They determine how to align the fitted subsection. <code>xAlign</code> can\nbe set to either <code>LEFT</code>, <code>RIGHT</code>, or <code>CENTER</code>. <code>yAlign</code> can be set to\neither <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By default, both <code>xAlign</code> and <code>yAlign</code>\nare set to <code>CENTER</code>.</p>\n", |
| 13471 | + "description": "<p>Draws an image to the canvas.</p>\n<p>The first parameter, <code>img</code>, is the source image to be drawn. <code>img</code> can be\nany of the following objects:</p>\n<ul>\n<li><a href=\"#/p5.Image\">p5.Image</a></li>\n<li><a href=\"#/p5.Element\">p5.Element</a></li>\n<li><a href=\"#/p5.Texture\">p5.Texture</a></li>\n<li><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a></li>\n<li><a href=\"#/p5.FramebufferTexture\">p5.FramebufferTexture</a></li>\n</ul>\n<p>The second and third parameters, <code>dx</code> and <code>dy</code>, set the coordinates of the\ndestination image's top left corner. See\n<a href=\"#/p5/imageMode\">imageMode()</a> for other ways to position images.</p>\n<p>Here's a diagram that explains how optional parameters work in <code>image()</code>:</p>\n<p><img src=\"assets/drawImage.png\"></img></p>\n<p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are optional. They set the\nthe width and height to draw the destination image. By default, <code>image()</code>\ndraws the full source image at its original size.</p>\n<p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are also optional.\nThese coordinates define the top left corner of a subsection to draw from\nthe source image.</p>\n<p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are also optional.\nThey define the width and height of a subsection to draw from the source\nimage. By default, <code>image()</code> draws the full subsection that begins at\n<code>(sx, sy)</code> and extends to the edges of the source image.</p>\n<p>The ninth parameter, <code>fit</code>, is also optional. It enables a subsection of\nthe source image to be drawn without affecting its aspect ratio. If\n<code>CONTAIN</code> is passed, the full subsection will appear within the destination\nrectangle. If <code>COVER</code> is passed, the subsection will completely cover the\ndestination rectangle. This may have the effect of zooming into the\nsubsection.</p>\n<p>The tenth and eleventh parameters, <code>xAlign</code> and <code>yAlign</code>, are also\noptional. They determine how to align the fitted subsection. <code>xAlign</code> can\nbe set to either <code>LEFT</code>, <code>RIGHT</code>, or <code>CENTER</code>. <code>yAlign</code> can be set to\neither <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By default, both <code>xAlign</code> and <code>yAlign</code>\nare set to <code>CENTER</code>.</p>\n", |
13472 | 13472 | "itemtype": "method", |
13473 | 13473 | "name": "image", |
13474 | 13474 | "example": [ |
|
19728 | 19728 | "type": "Number" |
19729 | 19729 | }, |
19730 | 19730 | "example": [ |
19731 | | - "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Caclulate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n</code>\n</div>" |
| 19731 | + "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n</code>\n</div>" |
19732 | 19732 | ], |
19733 | 19733 | "class": "p5", |
19734 | 19734 | "module": "Math", |
|
0 commit comments