"Sparklers" (an attempt at something animated)



https://pastebin.com/1wk5BnMW

A little toy of sorts that creates four dynamic rectangles which go off in cardinal directions.
The rectangles themselves start slow, then get faster, then slow again. The length of the rectangles is determined by their speed, which achieves a stretching effect.

Users can either click to get the "sparklers" on click, or press Enter to toggle random sparkles.

This was tougher than I thought it would be to get to work. I implemented all sorts of weird spaghetti things and trees of conditionals I probably could have optimized better, had I not placed undue time constraints on myself. I still encounter an issue where, if there's more than one "group" of sparklers onscreen, all of them will be deleted when the first one gets deleted. Which is strange, seeing as how they're all working on individual destruction flags and timers. So, for "random", I just spawn one at a time.

Comments

Post a Comment

Popular posts from this blog

veins - a weird visual toy

Image
I call this particular bit of code "veins" because it ... sorta looks like veins. Put less creepily, it's a bit like an old Windows screensaver (the one with all the random tubes) crossed with a Jackson Pollock painting. But less elegant. It's a pretty simple toy - I just get the pixel color of wherever the user is clicking, then I send our four "pix" objects that carry that color in random directions, creating random lines at 90-degree angles to each other. It's kind of neat on its own, but clicking many times in a single location / holding the mouse button down also creates an interesting corruption-style effect, or a wavelike effect if the mouse is dragged. For performance considerations, I stop the "pix" objects after 500 steps, so I can rapidly click/hold the mouse button down without bogging down the browser. https://github.com/b-bolles/veins
Read more

Squeezy Circle

Image
My latest invention takes after the subgenre of infinite runners akin to the Flash classic Helicopter and the infamous iPhone game Flappy Bird - namely, ones that require the player to finesse a specific input to weave between randomly placed pillars flying at the player on a 2-D plane. In my case, it's an FSR controlling a sphere. It's particularly jerky, since it's not interpolating the inputs, just assigning them directly to the sphere, but it works well enough. I have a series of blocks objects that steadily approach the sphere, and delete themselves once they're offscreen. They check for collision with the ball only when they're at relatively the same x position, and compare the ball's center coordinate with their own openings. Checking the center of an object as opposed to the entire thing is a practice employed by many 2D 'shmup games, which I am terrible at. Since I seem to be incapable of writing solid serial communication on my own, I borro
Read more

Audio-Reactive Drawing Machine

Image
The assignment was to develop a drawing machine, and since I've been thinking about linking sound and light a lot recently, I thought I'd dip my toes in. It's a crude little thing, for sure. But it works. Mostly.  The RGB values of every color (of the background and each of the shapes) are set to be some multiple of the amplitude of the song playing. I chose Only Shallow by My Bloody Valentine, partially because of the distinct colors of the album art and partially because I love that band. Up and down arrow keys allow the user to select from three different methods of drawing - placing squares, placing circles, or drawing a line. There is a rather strange bug related to the selection index resetting changing how the shapes appear, but it honestly makes the whole thing look better, so I didn't bother with fixing it. This was my first time writing anything in Javascript, so I did spend a lot of time searching up syntax and un-learning variable type convention
Read more