Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

P5.js - Is there a way to cut out an image area?

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

10x10px cutout from an 100x100px image from 50,50px

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.

like image 302
Oliver Goossens Avatar asked Oct 04 '17 21:10

Oliver Goossens


People also ask

How do I make an image smaller in JavaScript p5?

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).

What does p5 JS stand for?

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.

Does p5 js use canvas?

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.

What is the draw function in p5 JS?

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.


1 Answers

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.

like image 103
Oliver Goossens Avatar answered Sep 20 '22 01:09

Oliver Goossens