Search the Community
Showing results for tags 'p5'.
Found 2 results
-
Hello! I am new to using GSAP so I apologise if I follow an incorrect format. I'm currently creating an interaction map that is made out of SVG that uses zoom and pan. I have used multiple solutions (specifically this one) from other topics related to my idea and tried code from CodePen created by other users. At the same time, I am using p5.js which I noticed that this library can be used with. The issue I'm facing is when I try to implement the zoom/pan interaction from one of the examples, it causes an error when I try to interact with the SVG: "Uncaught TypeError: point.matrixTransform is not a function". I was constantly searching for the exact cause until I have removed the "setup()" and "draw()" functions which causes the interaction to work. Nothing else could have interefered as I have created a completely new project that only contained the SVG and the code of the interaction without any of the p5 functions which also worked. I tried to search if other people had a similar issue to mine, but it seems like I'm the first. I am very confused why this happens, does anybody know why? I need both of those functions to do the fundamental things with p5. -
Hi, Recently, I'm trying to explore slightly more advanced animations. I'm scoured the web, forums for any examples, but it seems I'm stuck. Wondering if anyone can point me in some directions. I'm trying to achieve an similar effect like this -> https://looi.co/ But, probably not as complicated as this site. I believed there's certain level of 'voodoo' in this lol. The example above is using Three.js, nt sure if greensock is being used. I'm looking to do some interactions, and gravity in my visualisations. See, my attached design -> So the letter in the center will be like a container where the particles will not move in or interact. And when I move my mouse on the screen there will be a like a repelling effect on the particles, like the website above. So in my head right now, my train of thought is like 1) Generate the particles moving inside the viewport (bouncing when reach the end or something) 2) Then animate the particles to move using Math.random or sin or cos (Not sure about this, I researched on sin and cos to make your motions looks more natural yet random, but haven't found an article to clearly explain how it works, what kind of maths formula should i be using?) 3) When the particles reached the letter, it bounces off (I assume you have to push it away with a if/else statement? So do I implement a collision library or something ? ) I'm still looking into p5.js (which is based on processing) and pixi.js (which is frequently recommend in this forum). But I'm unsure if pixi.js is to be compare similarly to p5.js. I guess I will definitely need to use webgl since there're tons of particles involved. The pixi examples website seems to be extremely basic. Are there websites that explores more complicated stuffs like http://openprocessing.org/
