I’m using the react-p5 library for generating PerlinNoise wave animation in my about page. When I use the p5 on any page it returns a 404 page, but if click back to the home page and open about.js using the link it will work. After refresh, it won’t work. Everything works if I remove the p5 compon…
Tag: p5.js
How to move ellipse filled with an image to mask similar background?
I am a super early user of coding from Italy. I came up with an idea to promote a company logo on their website and I almost reached the goal so I am sharing this problem. The idea is to obtain a sort of clipping mask effect when the mouse/cursor move on the image I’ve made so far a code
Randomize assigned colors in an array in p5.js
I have been trying to recreate one of Vera Molnar’s paintings, and to add a twist, I wanted to randomize the colors in the array as I drag my mouse over the canvas. However, I cannot for the life of me figure out how to do this. Below is one of many attempts at this. What could I be doing
Efficiently mask shapes using createGraphics in p5.js
I am trying to create various shapes in p5.js and fill them with specific patterns/drawings. Each shape will have a unique pattern generated using createGraphics. Since my different shapes won’t cover all of my base canvas, I am thinking of creating smaller-sized graphics for my patterns to improve perf…
Tile drawing is not displaying
I’m working on this code where if you put in certain characters for the map array, the canvas will display the image corresponding to that character. I have an array for all the ground blocks, at the top. Here’s my code so far: However, nothing seems to be drawing to the screen. I believe this mig…
Error in object generation to logic gates simulator in p5.js
in my logic gates simulator I am doing another object to generate to the canvas and I am doing a frequency generator but when I have the onclick function on the button so that it is generated, my frequency does not work and the whole object does not work. Someone would advise me thank you. The link to the who…
p5.js: Drawing tool doesn’t work well on mobile devices
For a project, I would like to work with this code: I realized that it doesn’t work well on mobile devices. Sometimes nothing draws, sometimes I get some colored dots. It should possible to draw “normally” with the finger. Is there a way to fix that? Would be very thankful for help! <3 An…
How do I add a color filter to an image so that its average RGB gets closer to that color?
I have a 100×100 image: I get all of its pixels and I calculate the average RGB of that image: I also have a reference RGB of a different color: I know now want to add a filter to the image, so that the avgRgbOfImg gets pretty close to my refRgb: In simpler terms, I have an image and I
Cursor trail algorithm for p5.js
I found this little coding exercise on Processing’s website (https://processing.org/examples/storinginput.html) and decided to make a p5.js version of it. The part that I do not understand about this algorithm is how the ellipses drawn (in the trail) shrinks when variable i, which is used as the scale o…
P5.js object not leaving a trail
I have a project in which I’m trying to make a helix effect, where two ellipses rotate around each other, and they leave a trail which keeps going downwards and then disappearing. now the problem is, I cant get the trail to show up. I followed a tutorial by the coding train on making a trail, and while …