Wednesday, 3 December 2025

HTML 3D Animated Lines Image Animator

Google's GEMINNI 3 wrote a program (for free) to add moving lines to my drawings, in perspective, as if moving in 3D space, and I posted that program to use on my blog -- BURST:


The generated animated GIF was 42.77 MB,
I reduced the size in EzGIF


Gemini 3 did a good job with ONE SHOT -- giving me the HTML 3D Animated Lines Image Animator:

I can use the  resulting program
 inside Gemini 3


AI CODING PROCESS

I was looking for a program that generates animations like that below, so I uploaded that example animation into Gemini 3, and added a prompt:

MY IMAGE

Animated St Sebastian
I uploaded this animation to Gemini 3

My Prompt

"Can you write a program that adds animated moving color lines to an image that one uploads.  The lines have to move in a 3D space, getting thinner as they recede. The program has to be in html so that it can be posted on a webpage.  Also the moving lines over the image has to be able to be downloaded as an animated GIF."
 
INPUT

Animated St Sebastian
HTML 3D Animated Lines Image Animator
My prompt
and the animated GIF I uploaded

***

OUTPUT
RESPONSE

I have created a complete, single-file HTML application that fulfills your request.

Here is how it works:

1)  3D Logic: It uses a "Starfield" algorithm where lines (particles) are spawned in a 3D coordinate system (X, Y, Z). As Z decreases (moves towards the viewer), the 2D projection is calculated to create perspective.

2)  Visuals: The lines get thicker as they get closer and thinner as they recede, creating a true depth effect.

3)  Image Upload: You can upload any image, and it will resize the canvas to fit while maintaining aspect ratio.

4)  GIF Recording: I have integrated a GIF encoder. When you click "Record GIF," it captures the canvas frames for a few seconds, renders the GIF in the background, and automatically triggers a download.


How to use it:

1)  Download the file below (e.g., 3d_lines_animator.html).

2)  Open it in your browser.

3)  Upload your image (like the one you provided).

4)  Adjust the "Speed," "Count," and "Color" to your liking.

5)  Click "Record GIF" to create your animation.

3D Lines Image Animator Dec 3, 2:27 PM


REVISION

I hit the "Add Gemini features" button to see what it would do -- and got the "AI Magic Tune" feature added.  However I have to get an API key to use it, so I don't know what it does:

"Add Gemini features" button


I've updated the application to include Gemini API integration.

New Features:
  • ✨ AI Magic Tune: There is now a "Magic Tune" button. When you upload an image and click this, it sends the image to Gemini. Gemini analyzes the visual "mood" (colors, chaos, calmness) and automatically adjusts the Line Color, Speed, and Density to match the image.
  • Vibe Check: The AI also generates a short, creative 3-word "Vibe Title" (e.g., "Cyberpunk Neon Chaos" or "Serene Blue Drift") displayed below the button.

How to use the new features:

1)  Enter API Key: A new field for your Google Gemini API Key has been added at the top of the controls. (If you are running this in a specific preview environment that injects keys, it might work automatically, otherwise paste your key there).

2)  Upload Image: Select your background image.

3)  Click "✨ Magic Tune": Watch the sliders and colors update automatically to match your image!


*****

I pasted that code into Blogger, and made a new webpage with it -- BURST -- and that worked also.  However it was hard to see the animation over the tiny uploaded image in my blog:

BURST
I made a webpage on my blog
by just posting the code

I was able to download an animated GIF. However the 4 second animated GIF was 60 MB, so I reduced the byte size in EzGIF:

EzGIF
Generated from my blog page


After all that I hit my free limit for the day:





CONCLUSION

Apparently I need to generate my own art programs, as the new Gemini 3 is powerful enough to do so.  I realized this when I altered a program inside Gemini 3 to download VOXEL generations.

I have been trying to activate the space around, through, and inside my drawings for a while:

March 31, 2025


Animated St Sebastian
Perhaps this animation
is closest to what I desire

Spinning Drawings
Spinning parts activates a still drawing


I have been trying to do this for some time, as indicated in the previous blog posts:


I would like to revisit the Gemini 3 program, to get it to generate moving lines in a variety of colors and thicknesses, but still thin and fade into space to create a 3D illusion (rather than just snow).  Refining the program is going to cost more "thinking" time, which I ran out of.  So I will have to wait another day.


Posted by at

No comments:

Post a Comment

Note: only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)