Coded Pixel Creation(s)

Sharkie

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

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

gooddragonboi.png

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

 
Upvote 8
adam

adam

Mr. Webwide
Administrator
Local time
04:23
Joined
Sep 24, 2019
Messages
1,264
Pronouns
he/him

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

 
Sharkie

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

Slightly crazy is right! 😂

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

 
Sharkie

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

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.

 
Sharkie

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

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

 
Sharkie

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

Talia said:
I'm impressed. Like really impressed. Those are amazing, especially the squirrel and dragon.
Click to expand...

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

Gummibeer

Astroneer
Moderator
Local time
05:23
Joined
Oct 5, 2019
Messages
1,187
Pronouns
he/him

Adam said:
You can animate box-shadows, have you ever tried?
Click to expand...
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.

Code: 
_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. 🙈

 
adam

adam

Mr. Webwide
Administrator
Local time
04:23
Joined
Sep 24, 2019
Messages
1,264
Pronouns
he/him

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

Yessss, good luck! Share it if it works!

Click to expand...
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!

 
Sharkie

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

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

sfcgeorge

Sonic the developer
Gold Member
Local time
04:23
Joined
Oct 5, 2019
Messages
129
Pronouns
He/Him

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

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

sfcgeorge said:
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.

Click to expand...

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.

 
panphora

panphora

Member
Local time
23:23
Joined
Dec 12, 2019
Messages
19
Pronouns
they

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

Sharkie

🦈
Gold Member
Local time
23:23
Joined
Feb 14, 2020
Messages
144
Pronouns
She/Her

panphora said:
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?
Click to expand...

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. 😂

 
Top