Coded Pixel Creation(s)

[Sharkie]

A while ago, I discovered I could make beautiful pixel art with code. And since then, I've discovered this is one of the main ways I relax, while also feeling productive and making awesome things.

I have just completed my most recent art, and I am so proud of him.

Meet my Good Dragon Boi:

https://codepen.io/JustSharkieCodes/pen/oNXgZbj?editors=1100

Made with a heck ton of box shadow code, this dragon took a long time and a lot of work to make. It may seem redundant, coding the same stuff, but copy/paste is a miracle.

Other creations include:

Squirrel - https://codepen.io/JustSharkieCodes/pen/bPJjOL

Pikachu - https://codepen.io/JustSharkieCodes/pen/YzzQBNL

 

[adam]

Amazing! And slightly crazy. But mostly amazing! Love the Pikachu.

 

[Sharkie]

Slightly crazy is right! 😂

But hey, it's a good way to relax after a crazy day, and prettttyyyy.

 

[adam]

You can animate box-shadows, have you ever tried?

 

[Sharkie]

I dabbled with it, but last time it didn't work out so well. I need to try again and actually make it work and look semi-nice.

 

[LividJay]

Pretty cool. Had no idea you could even do that.

 

[Sharkie]

Neither did I till I saw a blog post about it! I can see it being helpful in more practical ways as well.

 

[Talia]

I'm impressed. Like really impressed. Those are amazing, especially the squirrel and dragon.

 

[Sharkie]

I'm impressed. Like really impressed. Those are amazing, especially the squirrel and dragon.

Thank you! Those two took the most effort, with all the shading.

Also I realise I meant Chipmunk, but those are basically the same animal so I'm gonna leave it. 😂

 

[Gummibeer]

You can animate box-shadows, have you ever tried?

I think that the Pikachu would be pretty cool as animation.

It's really impressive! I would do a more programmatic approach like generating the code by a char map.

_x_
x_x
_x_

Would be a rotated square. 😅
For me this would be also easier to create with if I have a visual representation.

Will check if I can create one. 🙈

 

[Sharkie]

I think that the Pikachu would be pretty cool as animation.

Ooo Pikachu would be a great animation! I'll look into that. 👀

Will check if I can create one. 🙈

Yessss, good luck! Share it if it works!

 

[adam]

Ooo Pikachu would be a great animation! I'll look into that. 👀

Yessss, good luck! Share it if it works!

Could start with just 2 frames by changing on hover. Perhaps the dragon could breathe some fire? 😄

Only if you fancied the challenge though, they are fab as they are!

 

[Mike Rees]

That's really outstanding! How long does one picture take?

 

[Sharkie]

Well the dragon took me a while, but I did have a hiatus so I have no real idea for it.

Pikachu probably took 2-3 hours altogether, with the Chipmunk a bit more than that!

 

[sfcgeorge]

They are really good. I've seen similar done in Excel by changing cell colors. Do you find doing it therapeutic, kinda like knitting or coloring? Or do you like that you're using a simple tool to create something beautiful?

If you enjoy the process you might not want to try anything else. But if you do fancy programming your art like @Gummibeer suggests I'd recommend Processing. It was one of the gateways that got me into programming because it's very visual and live, so you can immediately see what your code is doing.

 

[Sharkie]

They are really good. I've seen similar done in Excel by changing cell colors. Do you find doing it therapeutic, kinda like knitting or coloring? Or do you like that you're using a simple tool to create something beautiful?

If you enjoy the process you might not want to try anything else. But if you do fancy programming your art like @Gummibeer suggests I'd recommend Processing. It was one of the gateways that got me into programming because it's very visual and live, so you can immediately see what your code is doing.

It's extremely therapeutic! Especially recently, with everything being a bit hectic and my emotions returning full blast, I needed something where I could just relax, and this was that thing.

I definitely intrigued to figure out how to do it with programming, and Processing looks like a great way to try it out! I'll have to look into it.

 

[tom]

THIS IS SOOOO COOOOOOOOOOL!! (sorry for shouting but this was necessary...) I love this, this is awsome. Great work @Sharkie 🔥

 

[Sharkie]

THIS IS SOOOO COOOOOOOOOOL!! (sorry for shouting but this was necessary...) I love this, this is awsome. Great work @Sharkie 🔥

The shouting is appreciated. 😊

Thanks!

 

[panphora]

Wow, this is super interesting. What's your process for doing this? Do you sketch it ahead of time? How many revisions do you do?

 

[Sharkie]

Wow, this is super interesting. What's your process for doing this? Do you sketch it ahead of time? How many revisions do you do?

I grid/sketch it out and have a general idea of how I want it to look before I dig into the actual code, with colours and everything. That way when I get to the code, I have an idea of what colour every box in the image is gonna be.

And then I change and adapt to whatever I think it going to look the best as I go. At the end I usually do a once over for anything that still looks odd, but usually I just have to go through the coding part once because I've already planned it out.

It's an interesting process, and usually ends up in some great pieces. And sometimes it doesn't and those don't get shown to the world. 😂