Warp Images with Particles

[@BarneyCodes]

Be sure to check out my other P5js videos: kzbin.info/aero/PLlaA0JvEhcG8kb6x-Cc3RM5JMjq4ribQ5 What would you like to see me do in the next video?

[@ChaseRiesterer-c4e]

What if the particles keep sliding off of the canvas after we hover over it?

[@BarneyCodes]

Good question! You should be able to use the constrain() function to make sure the particles position stays inside the screen (use 0 for the low value and width or height for the high value depending on which axis, x or y, you're constraining. You can read more on the constrain function here: p5js.org/reference/#/p5/constrain Hope that helps! Let me know if you have any more questions!

[@zeroalpha_nz]

Hey Barney, cheers for this. Great tutorial and well presented. can this be done with a shape I already have in a class instead of a image? I want to place the particles so they replace the shape

[@BarneyCodes]

Thanks so much, and that's a great question! The way I'd probably approach this is to use createGraphics (p5js.org/reference/#/p5/createGraphics) which essentially creates a new canvas that you can draw your shape onto, but won't actually be seen on the screen. You can then use this graphics object (after you've drawn your shape onto it) the exact same way that I use the image in video. Let me know how you go, and if you have any more questions I'm more than happy to answer them!

[@kiwis2923]

Hi Barney, is there a way to do this for moving particles being repelled by the mouse?

[@BarneyCodes]

I think my first ever video on this channel did something similar to this. The general idea is the same, where the proximity to the mouse influences a particle, but instead of having a "home" position that the particle is trying to reach, they just have a velocity that they use to move around. The velocity can then just be pushed in a direction away from the mouse if the particle gets too close. Hope that helps!

[@theman7050]

Nice Barney. But I think you could have used P5's in-built vector.heading() function to get the angle between points, instead of atan2(). Am I right?

[@BarneyCodes]

You definitely could use the heading() function! I believe that it gets the angle between a vector and the origin though, so you'd still have to do a bit of fiddling around to get the angle between two vectors. Something like: let angle = p5.Vector.sub(v1, v2).heading(); Probably just comes down to a matter of preference, good suggestion though!

[@theman7050]

@@BarneyCodes thanks for that snippet. Yeah I am not familiar with the use of tan/atan in p5 as no tutorials exclusively exist that I know of, so I depend on in-built functions. Great vid again, mate. :)

[@BarneyCodes]

No worries, glad you enjoyed the video! Both tan and atan are just things I remember from maths at school, if you wanted to learn more I highly recommend this video: kzbin.info/www/bejne/eoHJqZ2Ha9ikqMU There's a section dedicated to angles, but there's a lot more great information in there too! Once you're comfortable with the concepts, using the functions in p5 will become second nature.

[@theman7050]

@@BarneyCodes thx very much.