6 ms·

Make 8-bit art

109 points by of 11y ago

jeffehobbs 11y ago
Awesome. Also, love @jennmoneydollars.
- jennmoney 11y ago
  <3
jheriko 11y ago
cool, but runs like a dog for me :(
- jennmoney 11y ago
  oh noooo pls let me know what environment you're running it on!
  - jheriko 11y ago
    its a 2012 mac mini with windows 8.1 and chrome as the browser. works fine if i use firefox and osx 10.10 on my 2013 macbook pro. :)
  - jheriko 11y ago
    i'm really enjoying playing around with this actually! one other small niggle i've found is that it doesn't respect my swapping of cmd+ctrl on mac for e.g. cmd+z undo. tiny niggle, but niggling all the same. :)
stevekinney 11y ago
If you have any problems, open an issue on GitHub (jennschiffer/make8bitart) or tweet at @jennschiffer. She's about to have time to work on stuff soon hopefully.
jathu 11y ago
I made something similar a while back: http://jathu.me/pixels/ http://jathu.me/pixels/ Check the source: https://github.com/jathu/pixels https://github.com/jathu/pixels. You can also undo/redo by pressing z and y on the keyboard.
- deleted 11y ago
  [deleted]
- jonahx 11y ago
  Very nice. I like the simplicity of your interface.
baumgarn 11y ago
should implement a proper line drawing algorithm
- jennmoney 11y ago
  yes, i'm working on it but have been v busy with work lately. gave a talk about bresenham's line algorithm at genius back in march (https://www.youtube.com/watch?v=zytBpLlSHms https://www.youtube.com/watch?v=zytBpLlSHms) embarrassed it's been so long without a product. #opensourceisaprison
themightyone 11y ago
amazing!!!! thanks @jennmoneydollars $$$$
makepanic 11y ago
aseprite [0] a great open source (desktop) pixel art editor [0] - http://www.aseprite.org/ http://www.aseprite.org/
- mintplant 11y ago
  Seconding the aseprite recommendation. The support for layers and animations is really nice.
ceph_ 11y ago
Looks like it doesnt work on Android.
- bobajeff 11y ago
  Yep, I also tried in Chrome for Android. Won't paint or grab anything.
jstarks 11y ago
Cool. This works pretty well with a Surface pen. The only limitation seems to be that it doesn't recognize the eraser as distinct from the tip; it would be neat if the eraser would draw the transparent color.
- jennmoney 11y ago
  i'm assuming the eraser only triggers a touch event in the case of a web browser, so i'm not sure if there is anything i can do to change that but i'll look into it!
  - jstarks 11y ago
    I think you have to use pointer events to detect the eraser -- e.button should be 5 for pointerdown events. I'm not sure how hard it is to use pointer events when available (currently only on IE/Edge, it looks like).
  - jstarks 11y ago
    I decided to learn something today and got this working :). I sent a PR on GitHub.
    - jennmoney 11y ago
      yessssss thanks I will be able to check it out early this week!
    - deleted 11y ago
      [deleted]
craigjb 11y ago
It always makes me smile when I hear the term "8-bit" used to describe art. The strict hardware and software limitations of early computers spawned a complete visual aesthetic!
- nsxwolf 11y ago
  And yet I can't think of many 8-bit systems that let you set any pixel any color like most of today's "8-bit" art. Most had tile based systems with various color limitations in each tile, to save memory. Graphics on different systems had a distinctive look because of this. Most of today's "pixel art" games look pretty samey.
  - louhike 11y ago
    The current 8-bit art just uses some inspiration from old games, it does not aim to remake the same experience (which will be pretty boring because there already is a ton of games like that). And I have to disagree to the fact they all look the same. When I watch Super Meat Boy, Shovel Knight, Void & Medler, Swords & Sorcery etc. they have really distinctive design.
    - nsxwolf 11y ago
      You picked an interesting one, Shovel Knight, because its graphics engine actually emulates how the NES graphics chip works (with a few enhancements). That gives it a look that stands out from a lot of others. Super Meat Boy is an example of the visual sameness in my opinion. It looks exactly like Broforce or Super Time Force Ultra or a million others. The aesthetic seems to be 256 color VGA with really tiny sprites. It doesn't really remind me of anything or look inspired by anything in particular IMO.
- frozenport 11y ago
  Further the color channels offered by today '8-bit' don't correspond to the RRRGGGBB packing of the systems they emulate.
amjd 11y ago
Great work @jennmoneydollars! This is fun. I feel that I missed my calling as an artist. http://imgur.com/zxE2QKC http://imgur.com/zxE2QKC
douche 11y ago
The flood-fill tool seems a little slow. It seems like it is doing something much more complicated than I would expect (simple breadth-first search) - and I get some weird results with different brush sizes.
RodgerTheGreat 11y ago
Getting around the challenges of portably saving files from a JS application by using imgur's API is clever- I may use the same idea in a project I'm working on. I make little coding sandbox things and allowing users to easily record gifs or screenshots without a separate tool would be a boon.
potomak 11y ago
Check out also Draw![0], you can use it to draw tiny pixel art pictures and GIF animations. Update: I made a while ago to experiment with Redis and the <canvas> element. The code is open source at https://github.com/potomak/drawbang https://github.com/potomak/drawbang. [0] http://drawbang.com http://drawbang.com
RobLach 11y ago
But it's 32 bit..?
- jennmoney 11y ago
  don't let the cops know!
Patronus_Charm 11y ago
Very cool little time waster. Kids will love it.
SeeThruHead 11y ago
https://jackschaedler.github.io/goya/ https://jackschaedler.github.io/goya/
Yahivin 11y ago
My personal favorite: http://www.danielx.net/pixel-editor/ http://www.danielx.net/pixel-editor/ Source: https://github.com/STRd6/pixel-editor/ https://github.com/STRd6/pixel-editor/ Let me know if you want any tips for reliable undo, Bresenham's line algo, or flood fill.
ZenPsycho 11y ago
Well gee, as long as we're adding our competing projects in the comments, here's mine: http://pix.pe http://pix.pe
robotnoises 11y ago
The auto-upload to imgur is a nice touch! This is me: http://i.imgur.com/5JUJt5g.png http://i.imgur.com/5JUJt5g.png

Make 8-bit art

109 points by of 11y ago

jeffehobbs 11y ago

Awesome. Also, love @jennmoneydollars.

jennmoney 11y ago
<3

jheriko 11y ago

cool, but runs like a dog for me :(

jennmoney 11y ago
oh noooo pls let me know what environment you're running it on!
- jheriko 11y ago
  its a 2012 mac mini with windows 8.1 and chrome as the browser. works fine if i use firefox and osx 10.10 on my 2013 macbook pro. :)
- jheriko 11y ago
  i'm really enjoying playing around with this actually! one other small niggle i've found is that it doesn't respect my swapping of cmd+ctrl on mac for e.g. cmd+z undo. tiny niggle, but niggling all the same. :)

stevekinney 11y ago

If you have any problems, open an issue on GitHub (jennschiffer/make8bitart) or tweet at @jennschiffer. She's about to have time to work on stuff soon hopefully.

jathu 11y ago

I made something similar a while back: http://jathu.me/pixels/ http://jathu.me/pixels/ Check the source: https://github.com/jathu/pixels https://github.com/jathu/pixels. You can also undo/redo by pressing z and y on the keyboard.

deleted 11y ago
[deleted]
jonahx 11y ago
Very nice. I like the simplicity of your interface.

baumgarn 11y ago

should implement a proper line drawing algorithm

jennmoney 11y ago
yes, i'm working on it but have been v busy with work lately. gave a talk about bresenham's line algorithm at genius back in march (https://www.youtube.com/watch?v=zytBpLlSHms https://www.youtube.com/watch?v=zytBpLlSHms) embarrassed it's been so long without a product. #opensourceisaprison

themightyone 11y ago

amazing!!!! thanks @jennmoneydollars $$$$

makepanic 11y ago

aseprite [0] a great open source (desktop) pixel art editor [0] - http://www.aseprite.org/ http://www.aseprite.org/

mintplant 11y ago
Seconding the aseprite recommendation. The support for layers and animations is really nice.

ceph_ 11y ago

Looks like it doesnt work on Android.

bobajeff 11y ago
Yep, I also tried in Chrome for Android. Won't paint or grab anything.

jstarks 11y ago

Cool. This works pretty well with a Surface pen. The only limitation seems to be that it doesn't recognize the eraser as distinct from the tip; it would be neat if the eraser would draw the transparent color.

jennmoney 11y ago
i'm assuming the eraser only triggers a touch event in the case of a web browser, so i'm not sure if there is anything i can do to change that but i'll look into it!
- jstarks 11y ago
  I think you have to use pointer events to detect the eraser -- e.button should be 5 for pointerdown events. I'm not sure how hard it is to use pointer events when available (currently only on IE/Edge, it looks like).
- jstarks 11y ago
  I decided to learn something today and got this working :). I sent a PR on GitHub.
  - jennmoney 11y ago
    yessssss thanks I will be able to check it out early this week!
  - deleted 11y ago
    [deleted]

craigjb 11y ago

It always makes me smile when I hear the term "8-bit" used to describe art. The strict hardware and software limitations of early computers spawned a complete visual aesthetic!

nsxwolf 11y ago
And yet I can't think of many 8-bit systems that let you set any pixel any color like most of today's "8-bit" art. Most had tile based systems with various color limitations in each tile, to save memory. Graphics on different systems had a distinctive look because of this. Most of today's "pixel art" games look pretty samey.
- louhike 11y ago
  The current 8-bit art just uses some inspiration from old games, it does not aim to remake the same experience (which will be pretty boring because there already is a ton of games like that). And I have to disagree to the fact they all look the same. When I watch Super Meat Boy, Shovel Knight, Void & Medler, Swords & Sorcery etc. they have really distinctive design.
  - nsxwolf 11y ago
    You picked an interesting one, Shovel Knight, because its graphics engine actually emulates how the NES graphics chip works (with a few enhancements). That gives it a look that stands out from a lot of others. Super Meat Boy is an example of the visual sameness in my opinion. It looks exactly like Broforce or Super Time Force Ultra or a million others. The aesthetic seems to be 256 color VGA with really tiny sprites. It doesn't really remind me of anything or look inspired by anything in particular IMO.
frozenport 11y ago
Further the color channels offered by today '8-bit' don't correspond to the RRRGGGBB packing of the systems they emulate.

amjd 11y ago

Great work @jennmoneydollars! This is fun. I feel that I missed my calling as an artist. http://imgur.com/zxE2QKC http://imgur.com/zxE2QKC

douche 11y ago

The flood-fill tool seems a little slow. It seems like it is doing something much more complicated than I would expect (simple breadth-first search) - and I get some weird results with different brush sizes.

RodgerTheGreat 11y ago

Getting around the challenges of portably saving files from a JS application by using imgur's API is clever- I may use the same idea in a project I'm working on. I make little coding sandbox things and allowing users to easily record gifs or screenshots without a separate tool would be a boon.

potomak 11y ago

Check out also Draw![0], you can use it to draw tiny pixel art pictures and GIF animations. Update: I made a while ago to experiment with Redis and the <canvas> element. The code is open source at https://github.com/potomak/drawbang https://github.com/potomak/drawbang. [0] http://drawbang.com http://drawbang.com

RobLach 11y ago

But it's 32 bit..?

jennmoney 11y ago
don't let the cops know!

Patronus_Charm 11y ago

Very cool little time waster. Kids will love it.

SeeThruHead 11y ago

https://jackschaedler.github.io/goya/ https://jackschaedler.github.io/goya/

Yahivin 11y ago

My personal favorite: http://www.danielx.net/pixel-editor/ http://www.danielx.net/pixel-editor/ Source: https://github.com/STRd6/pixel-editor/ https://github.com/STRd6/pixel-editor/ Let me know if you want any tips for reliable undo, Bresenham's line algo, or flood fill.

ZenPsycho 11y ago

Well gee, as long as we're adding our competing projects in the comments, here's mine: http://pix.pe http://pix.pe

robotnoises 11y ago

The auto-upload to imgur is a nice touch! This is me: http://i.imgur.com/5JUJt5g.png http://i.imgur.com/5JUJt5g.png