This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revisionBoth sides next revision |
| p5js-photos [2024/02/22 01:10] – renick | p5js-photos [2024/02/22 01:44] – renick |
|---|
| ==== getting part of the image and displaying it ==== | ==== getting part of the image and displaying it ==== |
| |
| We use the 'get' function to take part of the image. We need to say to start from where, and then the size of the a rect to get from that image. Then we can use that as the source of a new image using the image function, whose position we can control as shown in this example: | We use the 'get' function to take part of the image. We need to say to start from where, and then the size of the a rect to get from that image. To make that easier, we'll drop in the code to show our mouse coordinates. We have to do that at the end so that the text appears on top of the image. Then we can use that as the source of a new image using the image function, whose position we can control as shown in this example: |
| |
| <HTML> | <HTML> |
| <iframe src="https://editor.p5js.org/renick/full/BojYOjuLw" width=99% height=800></iframe> | <iframe src="https://editor.p5js.org/renick/full/BojYOjuLw" width=99% height=800></iframe> |
| | </HTML> |
| | |
| | ==== repeating part of the image ==== |
| | |
| | We can repeat that part of the image easily using the Point class and the buildArray tools that we have studied earlier. Take a look at how this works: |
| | |
| | <HTML> |
| | <iframe src="https://editor.p5js.org/renick/full/nJi9YjUap" width=99% height=800></iframe> |
| </HTML> | </HTML> |