Need help with a JS Project/Animation
How can I recreate this sort of animation (See Video) ?; I'm having troubles with the lines/'traces' in particular 😬
I've found a 2D version of this animation on Codepen.io (https://codepen.io/loktar00/pen/rNMKZq) but if I were to fork this and modify it, how would I modify it to make it so that there's a (solid) box in the middle then make it so that the lines/traces branch off of said box?; Furthermore, how could I then turn this from 2D to 3D (Aka the video) ...?
Need help asap <:PES2_Pray:513342216287027220>
Please and Thanks in advance!
Loktar
CodePen
Circuit board pattern
Creates random circuit board traces. The code is meh, but the effect turned out pretty cool. Each traces checks the pixels in front of them as they t...
7 Replies
it would need a lot of tweaking, since the whole point of the pen you sent is to make the ciruit board in the shape of a square. to have it all branch from a given point, such as the center of a box, you would just remove the randomness from the
Trace function's x and y values. that would make all the lines start from the same point. to make it 3d, you're probably gonna want to use a webgl library like three.js.Yeah I figured I would need a WebGL Library as You rightly said to make the animation look/function like in the video that I attached. Luckily, My website (which is still a major WIP) already has ThreeJS including a ThreeJS Scene, I plan to modify this CodePen animation to make it function the way You described above then add it into the aforementioned ThreeJS Scene but in a 3D way, haha, with that being said..:
In reply to/about the
Trace function's X & Y values,
Is there an easy way (or a tool/plugin/whatever?? 👀) that I can use to help Me find (and set) X and Y positions on the page? Because I know how to draw boxes/cubes onto the page etc.- but I dunno if there's an easier way to find/locate X and Y positions instead of constantly changing the values xDno tools, the
Trace functions and those vars are defined in the code, just scroll down to where they are declared and change them to a number instead of a random numberOk I will try doing that in a bit, I’m still a bit confused on what’s the best way to try and find > set positions though, based on numbers.., on the outer edge(s) of the box.
Also, doesn’t HTML have some type of Grid system? Sure I read something about that online 🤔
read up on the canvas api
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Canvas tutorial - Web APIs | MDN
This tutorial describes how to use the element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content.
That’s what I was thinking of
Just saw that on that docs link lol