Is there a way to "cut out" a piece of image and use it with the P5.js library?
Example: Lets say I have a image of the size 100x100 but need to get a 10x10 pixel cutout that starts at pixel 50,50
I want to take the resulting 10x10 image and place it anywhere with image(result, X, Y, 10, 10).
Note: The only thing I could find online similar to this was using mask() but the result is not what I need.
Description. Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. For instance, to make the width of an image 150 pixels, and change the height using the same proportion, use resize(150, 0).
The p5. p5. js is a JavaScript library for creative coding. A collection of pre-written code, it provides us with tools that simplify the process of creating interactive visuals with code in the web browser.
p5. js is a library that starts with the original goal of Processing –to make to make coding accessible for artists, designers, educators, and beginners– and reinterprets it for the web using the metaphor of a software sketchbook with a set of drawing functionality. With p5. js we are able to draw in the canvas.
The draw() function in p5 runs as a loop. The code inside the draw() function runs continuously from top to bottom until the program is stopped. The draw() loop may be stopped by calling noLoop(), and can then be resumed with loop(). If using noLoop() in setup(), it should be the last line inside the block.
After a deeper look inside, and help from fellow P5ers I figured out that the solution is:
The GET() method from P5.js
https://p5js.org/reference/#/p5/get
The get() method can be used as needed: get(startX, startY, width, height) and returns and image that can be saved or used as needed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With