Pixel Lide (Pixel art/ animations!)

Lide studios presents: Pixel Lide

Thing is that it’s kinda… incomplete. But it works good enough so far. I’m still working on adding some features. Here’s how it works:

Where’s the project?
Here it is:

I won’t share the Wick file since I’m still working on it.


< = Go to left frame
> = Go to right frame (create new frame if a right frame doesn’t exist)
enter = play/ pause animation
ctrl+z = undo
escape, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, - = Selecting color (ONLY WORKS when in color mode 1 (doesn’t work when using sliders))
+ = Add new frame

Believe it or not, it took forever in order to make the project work this fast ._.
Yes, I tried it, it is possible to animate with this thing.
The project can still run slow if your animation is too complex or big.
Also, I did try creating some stuff with it (as you saw in the video)

Here’s an animation of a pigeon flying:

The animation is supposed to loop

I’ll draw & share more stuff with it soon.
I would be really happy to see what you guys can make with this!

Enjoy :)


Was this for Mozilla Fest?

this is what i did with the ball example… :)


Look’s kinda like Langston’s Ant or Conway’s Game Of Life

1 Like

That looks amazing!
Thanks for trying it out & sharing, I really appreciate it :)

Yes, it was the project I talked about making for the hackathon.


you use replit.com too :D

Can you send me the github link so I can host it for you

you should have made it 720 p or something but it is still pretty good

Yes, I used repl.co for this and other projects that I created

Idk how github works, I rarely use it ._.

Then can you put it in a https://jsfiddle.net/ or https://gist.github.com/?

Thanks, I’ll check these out rn
I’ll let you know if I’ll “accomplish” anything

1 Like

No but you can just copy and paste the code

or can you just put the code here?

Thnx :)

The code is too long to paste here, here’s the html file
New Pixel Animator3-17-2021_17-21-52.html (2.2 MB)
(I’m surprised the file is big enough to upload here)

I just made edits to the site and fixed the bug where pixels would be placed when your talking with Blob.

Wow, I haven’t have the time to try it until now… great project @Hamzah_Al_Ani. One of the best wick projects that I have ever seen.

Here is what I was able to make with no effort.


Is there a way to export the animation?

Thanks @Jovanny
(you’re drawing looks great!)

Sadly, no, there isn’t a way to export the animation
(You can use a screen recorder instead)

Exporting animations (into gifs or mp4s) is going to be difficult to have.

Currently, I’m planning to add a way to have projects saved (and shared with people) so no one loses their work after closing the tab.

You know how the https://beepbox.co/ urls are really long because they have the song in them? Maybe that’s how you can export, like https://pixellide.web.app/1-4x5--2-4x7, or https://pixellide.web.app/framenumber-coordinates

That is exactly what I was thinking.

Currently I have all the pixels saved in an array of clones
(open Pixel Lide, place some pixels, click control + [, and type “alert(project.CloneArray)” to see project code)

I’m planning to have that code (with some adjustments) used to find a project

1 Like