Filling an object in p5.js [closed]

I’m relatively new to coding/javascript and p5.js . I’m heading towards the end of an introduction to programming course where we need to make a sidescroller game in p5.js.

I have a lot of ideas but I’m also unsure of my own limits and the limits of p5.js despite googling.

I currently have boring canyons ( a quad shape) which I want to make more interesting (i.e make it look like water or lava. Animated would be cool if i can pull it off). It seems like it could be possible to fill a 2D shape with webgl and an image (tell me if I’m wrong !)

Is it possible to code a pattern in a separate sketch file and use that pattern to fill an object drawn in another file ?

What are other efficient ways to fill a shape with a texture or pattern without causing lag?

Any advice appreciated :). I just need a direction to go in and that I can concentrate on trying to pull it off.

I have tried bezier curve and tutorials on perlin noise but end up just following the tutorial and it doesn’t end up my own work. Therefore I’m exploring other options.

  • This is pretty broad. Can you share some concrete code as a minimal reproducible example so we can understand your use case and attempt and debug it? Otherwise, answers would sort of have to guess and offer some rather complex examples of water animations that have a low probability of even being applicable to your needs. Thanks.

    – 




  • @Bippidyboppity Hi and welcome. As ggorlen mentoined it would be good if you could post your p5.js attempts that you describe (e.g. quad shape canyons or bezier curve). Without seeing the code I can only make (possible inaccurate) assumptions. I recommend trying to encapsulate the drawing function calls to shape you want into functions with arguments to tweak those shapes. This way you should be able to reuse functions across sketches. You might find this answer potentially helpful.

    – 




Leave a Comment