I think having a checkbox that toggles between your suggestion and how it currently is would be optimal, but that's just because I prefer to focus on the smaller box.
Would be amazing to have a few sample patterns as a way to show how it works (what to paint). Would help newer designers figure out how to make good-looking patterns and provide a shortcut where others could just change the colors. It's often easier if you avoid beginning with a blank page.
Thanks for making it! I'm generating a pattern for my startup right now.
This is great! Had fun playing with it for 10 minutes. A UI note: a common behavior in pixel-based editors like this one is:
When you click on a blank pixel, fill it with color. As long as the mouse is held down, you're "drawing" and moving it to other blank pixels should color them as well.
Likewise, when you click on a colored pixel, erase it and stay in "erase" mode as long as the mouse button is held down.
This reminds me of the old days of creating desktop "wallpapers" on my Mac 512K. Except this allows color!
I've found one fun way to generate patterns (for websites, for example)is to use Colourlovers ( http://www.colourlovers.com/patterns/most-loved/all-time/met... ) - you get access to both great colo(u)r palettes and also some nice patterns. There are also awful patterns, but I just ignore those. Finally, there's a great pattern editor, but it takes a bit of work to start creating good patterns with it.
I get your point, but I think "generator" sounds cooler than "editor"… plus it's still a "generator" in the sense that you "generate" patterns yourself by clicking with your mouse :)
Great feedback about the mousedown though, I'll have to add that to my list.
Minor nitpick: When I click a pixel of a different color than my current color, I would expect to paint over the pixel, not clear it first. That would also make it much easier to play with different colors and "paint over" old pixels - half the clicks, twice the fun. Also, click & hold would be nicer than constantly clicking.
Yeah, I realized this too while using it. But then how would you delete a pixel? I would need to add an eraser tool, which means I need to rethink some of the UI, etc. So I decided to keep things simple for the MVP.
Clicking a pixel again (same color) would delete it, in lieu of an eraser tool. That would shift the burden of clicking twice to get your desired result to when you were deleting a pixel of different color.
OTOH – an eraser tool is really just a toggle button, isn't it?
But since there's no color palette or eyedropper, finding the same exact color is virtually impossible… so right now the way that you describe wouldn't really work.
And the eraser tool would be easy to implement technically, but I'm just not sure yet it's the best solution, or where to put it.
I'll probably end up doing something like holding shift while clicking will erase the pixel.
Nice! I would have it default to a nice looking pattern first to show it in use. Then a clear button would be useful. And finally I agree the drawing is annoying - just have them draw over things with white that they don't want! (have that as a clickable color beside the color selection, maybe with a few others too).
Almost all the controls at the bottom worked on the iPad but clicks in the drawing area didn't. I found it impossible to draw any pixels on. Perhaps I misunderstood how it is supposed to work, or does you JS specifically require mouse events?
