Video není dostupné.
Omlouváme se.
Scratch Off/Cut Out Effect (Using Layers in P5js)
Vložit
- čas přidán 5. 08. 2024
- Demo and code from video: editor.p5js.org/BarneyCodes/s...
Creating a scratch off reveal or cut out effect in P5js is actually really straightforward! In this video we learn how to use multiple layers and the "remove" blend mode in order to create this effect with ease.
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
0:00 Intro
0:17 Loading images in P5js
0:45 Second graphics layer
1:56 "Remove" blend mode
2:16 Displaying the second graphics layer
2:41 Drawing on the canvas
3:18 HELLO THERE (Scratch off reveal)
3:26 erase() vs blendMode(REMOVE)
3:51 Using a stamp to cut out
5:04 Final result
#creativecoding #p5js #javascript
What are you going to use this scratch off/cut out effect for? Let me know!
After days of searching, this is exactly the video I needed! Was trying to punch a circle out of a rectangle to see behind it, and this concept is exceptionally outlined in your video. Thanks for all your help, and keep making these great videos!
Thanks so much, I'm glad the video helped!
Hey, that's awesome! I really like this type of video format, you showed a simple solution to a complex problem in my opinion. Based only on the title I would have expected at least 30 minutes of video, but you showed everything needed for the effect in 5 minutes. That's amazing, keep it up, I hope your videos gets more attention!
Thank you so much for such a kind comment! I only started doing my videos in this format recently but I really like getting straight into it now, don't want to waste people's time!
This is exactly the information I was looking for!
Thank you, man
No worries at all! Glad it was helpful!
Hey, thank you so much for this easy and nice tutorial! This gets me close to what I want, but do you have any tip how I can achieve that the mask is not scratching the top layer away, but acting more like a shaped window into the background layer? I was trying to achieve this by putting every command of the toplayer in the draw function (instead of setup) including the drawing of the background, but this only gives me the backround layer.
Glad you liked the video! It sounds like what you want to do is draw the background onto the normal canvas, and then just draw the shape you want to cut out onto the top layer. You'll have to make sure to draw the top layer mask onto the background too, sometimes I forget to do that!
really nice work!! but I find the background of normal canvas can not be shown if I write background() in setup section...Do you know how to solve it? I need to put the background in setup() since I want to keep the trail of my animation...
Thanks!
I think the issue is that we draw the topLayer onto the main canvas every frame so whatever's already been drawn there will get overridden. I think the simplest way to fix this would be to create another graphics layer just like the topLayer (called bottomLayer maybe?) which you can draw your animation onto.
Then in the draw function you can add the line "image(bottomLayer, 0, 0);" on the line before we do the same thing with the topLayer.
Keeping your animation on a separate layer should keep it "clean" while still getting the effect to work. Hope that helps!
Thank you so much for posting this-is it possible to use this method to scratch off multiple layers of images one by one?
No worries, glad you found it useful! I think there would be a way to do that but it might get a little bit complicated. My idea would be to use each layer as a mask on the one below it, so you can only draw (scratch) in the region that's uncovered by the one above.
Thankfully p5 has a mask function that should make this a bit more straight forward to achieve (p5js.org/reference/#/p5.Image/mask)
Does it also work if the stamp is a gif with transparent background?
This is a great question, and I don't actually know the answer! I've never tried using a gif in P5js.
I'd encourage you to try it out and see how you go (and report back afterwards because I'm curious!!)
how do you load an image on the top layer instead of text?
In the setup function, where we call "topLayer.text(...);" we can instead say "topLayer.image(...);" and pass in whatever image you like! You'll have to load the image in the preload function (like we do for the background image already).
Hope that helps, let me know if you have any other questions!
@@BarneyCodes that worked! thanks for getting back to me :)
No worries, happy to help!
looks nice but its not working. :/
Huh, that's a shame! It seems to be working for me, what error are you getting?
@@BarneyCodes Downloaded and unziped files and have message 'Loading...' while opening index.html in chrome. Same in brave
@@bartek6902 Oh okay, I haven't really tested out downloading it, just running it in the web editor. I've just downloaded it and it looks like there are two issues, but both are easy to fix!
Firstly, for security reasons, browsers won't let you load files from the local system. In the "preload" function in the "sketch.js" file, we try and load in two images. The way to get around this is to either find images online and use their URL in the loadImage function or you can host a local server for your files by following this tutorial: github.com/processing/p5.js/wiki/Local-server
Secondly, it looks like there is some issue using the P5 sound library which we're not using in this sketch, so we can remove it! If you look in the "index.html" file, you can see there are two "script" tags inside the "head" section, the second one loads in the P5 sound library. If you remove this line it should start working.
Web browsers are pretty particular about security (which is good!) but it can make local development a little confusing at times. I hope this helps, and let me know if you have any more questions!
@@BarneyCodes Hey, I'm also trying to run it on my computer and i keep getting that REMOVE is not defined? If I try with ADD for example, it works fine. I even just straight up copy and pasted your code but still nothing :(
@@user-zh7gc8wu7m Hmmm I'm not sure what could be causing that, the REMOVE blend mode is listed as one of the ones available: p5js.org/reference/#/p5/blendMode Very strange that it doesn't have a problem with other blend modes. I'm really sorry but I'm not sure I can really help you much more without being able to debug your code. Does it work in the browser for you?