Photo editing example pointers

p5.js Project Guidance
1

Loving these images and apparently they’re done using processing or something similar.

Does anyone have any pointers on how to achieve things like these, have been hunting around but not found any tuts so far.



(there’s others on their page)

Thanks in advance!
<3

1 Like
2

Have you tried contacting the artist and asking what the method is?

One approach:

For the circular cutout rotator, you would use the mouse to select a circular mask

https://p5js.org/reference/#/p5.Image/mask

and copy the masked contents into a separate PImage layer. You could then rotate that layer before display. As long as each new selection copies from the screen pixels, each new masked circle will contain those layered cutout effects. The greent indicators, drawn with circle() and line(), are bonuses to the basic effect.

The second piece is much, much simpler. Draw a vertical line through the image, and copy each pixels found on that line into a horizontal band. This effect may be hand drawn with an algorithmic brush – you can see some slight irregularities in the edges of the bars. To test the effect interactively, make a simple p5.js sketch that loads a photo, then:

  • If the mouse is down:
    • get the current mouse pixel color
    • draw a horizontal line through the mouse in that color.

An easy and fun beginner project that you can then build on.

1 Like