Something like storing a color and be able to make global changes to that color.
I would really like something to Import/export palette, and have them ready. I know that a lot of artist use universal palette.

Then, I don't think that there are other things that I may need. Seems awesome.

okay.. I'm taking the leap and letting anyone try my editor now.
http://pixel.tools/
save often. I'm not sure what bugs will surface, so let me know if anything strange happens. I'm interested in your feedback. If there are any questions about anything I can help explain things- I haven't completely documented everything yet.

There's still various things that need to be implemented.
If you don't see something you'd like implemented, let me know, or general feedback, will be useful going forward. I'm at that point where I need it get other hands on it.



Edited by AlexHW - 27 July 2014 at 9:26pm

Looking forward to it!
To clip a selection, you can hold Ctrl and click and drag, after you've dragged it you can stop holding ctrl (holding ctrl will snap it to the grid when you move it)..
Or you can hold Ctrl and Alt and click and drag to clone the selected portion instead of clipping it completely.
I should probably add this to the documentation.
Ctrl D deselects, or clicking outside the selection
delete key will delete the clipped selection, or clear the selected canvas if nothing has been clipped.

edit: okay added to the documentation- you can find it explained under the features tab at the bottom of the page. Also the hotkeys tab has info on what keys you can press..



Edited by AlexHW - 30 July 2014 at 4:02pm

rrrod, you can check if you have the wacom plugin installed and working :
http://www.wacomeng.com/web/TestFBPluginTable.html

The brush tool requires first setting up your color ramps in the colordex. Have you done this?.. Then you should make sure to click the icon to the right of the size slider to toggle pressure sensitivity on.
I'll start working on a quick video.. seems like it'll help explain things better.


Edited by AlexHW - 31 July 2014 at 12:40pm

realized there is a major bug with the colordex when you try to make complicated combinations of colors, it inserts unecessary black colors..
I'm sorting it out at the moment.

I think this is an awesome idea! The ability to pixel with others online is great.

Feed back:
- I've tested it and it just works .

- Maybe you could work on a right mouse button option if possible?

Edited by nivek - 01 August 2014 at 5:32pm

I would use it for a second color or eraser..
But my favorite use would be in graphics gale as a color picker.

It would also be great if you could use the mouse scroll to zoom in and out.

Awesome idea man!

I was messing around in it with two of my friends and it worked pretty well. It was fun being able to see what each other was doing and work on different sections of the pieces. Here's some of the work we made.


Here's a second one we made.


I would submit them to the gallery and easily win monthly top, but collaborations aren't allowed!!!Darn it!

No but seriously, the program worked great and seemed to have most of the features needed. Great work so far.

Some critique I would give is that the crossair gets in the way a little bit when you are pixelling on a small scale, not too big of a deal.

I couldn't figure out how to select something and drag it, I have this problem in photoshop too. In graphics gale if you right click and drag with the pencil it creates a selection box that you can grab and move or rotate or rescale. This one might just be me being dumb.

At one point we wanted to make the canvas size larger, so I went into the increase canvas thing and changed the values. I messed up though and forgot to add a 0 and it made the canvas super small, deleting almost the whole image. I couldn't undo it, or go to the history to restore a previous version. The history box just had "New" on it. Luckily we had saved a version just a few minutes earlier, but this would really suck if you were actually working on something important.

Thats about all the critique, but I do have a question. Do you have to invite someone to come work with you or can someone just randomly join your drawing? It would be kind of cool just to be able to randomly watch someone draw, and maybe they can give you permission to draw on it too or something.

Again, great job and lots of fun.

Adcrusher, thanks for the lengthy feedback, and images. Those are the first images made from the editor Ive seen from anyone besides myself.
Yes, that canvas resizing and image resizing can be frustrating, I'm going to attempt to find a solution to that. I could probably create a preview mode of the resize and require everyone connected to approve the preview before it is applied. That might at least prevent any mistakes.
There is a way to retrieve the previous state, but it requires saving the file, then playing it back until the point before the resize, and then creating a new file from the playback(which will allow you to continue from the point you stopped at in the playback).. That would be done by one person, and then everyone can reconnect to each other and continue working on it. Kind of a hassle, but it's at least a work around for now.
I'll try to come up with something to help prevent mistakes.

To move a portion of the image, you have to hold Ctrl and clickdrag the selection to clip it out(a little scissors icon should show when you hold ctrl with the selection tool.
I should add an option in the selection menu to clip a selection so you don't have to hold ctrl, that might help clear some confusion.

In regards to your question, the only way for someone to join you is to invite them. I thought about doing it as you describe, but there are some technical challenges to it that I'm not ready to tackle at this time.


Torridgristle.. part of the way the Colordex works is that it procedurally cycles through every unique color touching each other(colors that aren't separated by transparency). It's not meant to be used on an image like the one you tried because it would make way too many cycles trying to connect every single color to every other color..
I will do some tests with it and figure out if there should be a cutoff point for complexity so that timeouts don't occur, but if you use the Colordex appropriately you shouldn't have an issue.
Perhaps you can give a suggestion as to how I might better convey the appropriate way of using the Colordex?


Thanks again for the feedback, as it brings up various issues I need to address. I'll start working on implementing ways to solve these problems.
If anything else comes up, let me know! I could be overlooking things since I'm familiar with how to use everything.

Damian, I noticed that bug as well yesterday when I was using the paint bucket, I'll try to figure out why it does that.
For the grid snapping, it shouldn't snap if you let go of Ctrl key. You're talking about when you move a selected portion of the image with a selection tool right?

On a side note, I've been working on implementing a way to undo cropping/imageresize/canvasresize.. Almost have it ready. It'll only be able to undo the previous resize, but at least it's better than not being able to undo at all.

Added a new option under Edit menu; "Insert Clipart"
The image file you select will be pasted into your project. This is useful if you want to copy something from another image into your project.
Also, I fixed an issue with the selection outlines not showing after the selection was rotated.

Okay, considering the mouse wheel shortcut for magnification has been suggested to me before, I'll make that the next thing for me to add.
I'm also planning to start working on a way to preview all the colors being used in your image.

Woah! that's amazing. It's really cool seeing people's results with the editor.
I've added mousewheel scroll for zoom now.. Let me know if it isn't working how you'd expect it to.

Zooming in with the mouse wheel is useful, but I think the middle mouse button could be used to move the canvas, like the hand tool.

I felt compelled to join this site just so I could personally thank you for your amazing-- no, phenomenal~ pixel art program. :D

This is such a blessing-- I've looked and studied tutorials on this site and I'm glad you put in the effort to achieve effective-looking painting strokes! This is just another great resource for artists everywhere.

I've only played around with the program for about a few minutes and it's great. It is a bit of a learning curve but I'm starting to get excited about what I can create with this- thank you! <3

I do have a small suggestion but it's on aesthetics. In Photoshop I love to tweak the 'Transparency & Gamut' all the time when I'm working on my art. It's like this crazy obsession that I have. Because this program  heavily relies on tiny pixels, it may help to add an adjustment feature.

For example if your doing a scene at night, it might be hard to tell what's transparent and what's your pixels. Anyway... that's just small potatoes in all things considered. I'd be more then happy to post my art when I'm done with it.

Again-- Thank you!!

So, there was an issue with users on linux platforms not being able to draw in the editor if they used the firefox or midori browsers.
Today I managed to find the bug causing this issue and fix it.
If you go to http://www.pixel.tools/ it should now work and you can draw on the canvas, etc..
the issue was:

ctx.setLineDash([0]);

has to be this instead:

ctx.setLineDash([]);

While fixing that, I found another bug with the colordex that was causing it to not work, so I fixed that. The colordex should now work as expected. In order to use it, you have to Hold ctrl and click to make the Circle on a color, and the Big square OFF of a color(in the transparent space), and drag the smaller square onto a color.. This will allow you to draw from transparent space.. If you already have color laid down and want to modify it without drawing into transparent space, make the big square on a color instead..
The confusion I have had in the past is thinking I need the big square ontop of a color and the little square off of the color.. Perhaps there is a more intuitive method, and if anyone has suggestions, feel free to share them!
ALSO.. if anyone does find other bugs, let me know! I haven't tested everything on linux.

Hey Alex, I've tested it and the color picker isn't working? The mouse wheel and new additions are working great though.

Awesome tool, really enjoying it so far.

Is there currently any plans for previewing how a tile might repeat? Being able to see how a grass tile might lay out and if the 'seam' is noticeable would save a bit of time.

Okay, I finally got around to creating a video demonstration of how to setup and use the Colordex: http://youtu.be/QGLg-N9RT44

I also adjust the square markers you use to set it up, so that it doesn't matter which one is off the color ramp when drawing to transparent space as long as one is.

Good to hear that. Yea, I don't know how well it'll handle a big group painting together- it should be feasible, but I've never tested it with many people.

Just joined the forum to ask you Alex, will you be able to support other tablet brands? I'm using a tablet from a company called Huion, a Chinese but quite known company. I have been trying to get the pressure sensitivity to work on my mac and windows machine but nothing works. It is quite unfortunate because i would really like to test out the tool properly.

I know it is using the wacom browser plug-in, so it might be a long shot.


Edited by CandyFace - 01 September 2014 at 3:26am

Very nice tool! Respect +1

If you need any help, I would be glad to help you, I messed around with Canvas long time and know a lot about it.

I looked at the code and you use a lot of depreciated standards. If you wouldn't mind I'll give few suggestions:

1. href="javascript: <code> ;" is depreciated and may not work in modern browsers.


2. As you're using HTML5 Doctype, you should use <meta charset="UTF-8"/> instead of http-equiv.


3. Spaghetti code is hard to read, best practice is to separate business logic (JS), markup (HTML) and styles (CSS) should in different places. Currently I'm talking of using on<event>="" attribute, style="" and <style> tags within head (however using <style> in head is appropriate when you have small page).


4. else if (data.type == 'draw_pixel_line') ... can be changed to switch case (you have a lot of checks there), semantics basically.


5. $('selector') you're calling to jQuery too much! You need to define it in config once, and use it. That's why it's slow in some cases, because you're calling jQuery over, and over, and over!

I can continue, but I think I need to stop it here. If you interested in refactoring your code or in my advices (maybe), you can PM me. Good luck with this awesome project!

P.S.: I made some games on Canvas and Internet Meme editor, so I have experience with canvas

Edited by volter9 - 18 September 2014 at 8:31pm

> Doesn't the else if() give more control over the order of things?

Of course it does! However, in your case it's more semantically to use switch..case instead of if..else statement, because you're comparing just same variable to the string.
In your case, I would do in another way, but there's a lot of modifications that I would need to do in order to make it happen (change lots of code basically).

P.S.: you need to compare string with string with ===, because there's some issue may happen if you wouldn't, for example, if your variable would be integer have the same value as string (that may happen). More about it you can find it here (StackOverflow question).