This is where js would be handy - right? Personally I would just update the dom element and send a http post in the background.
I get that it's just a toy, but still it shows that languages* should have a good client side story too. Maybe some Lumen integration?
* that are for the web.
edit: reminds me of the million dollar homepage http://www.milliondollarhomepage.com/
We started out by making an EventSource endpoint and using JS EventSource object to get updates. Seemed to work great.
Pushed it live.
To everyone on the site. Not just to the people on /l/place. Oops. Mistake #1.
Mistake #2: I was aware that Arc kills threads that take longer than 30 seconds, but I was unaware that EventSource automatically tries to reconnect. Welcome to the DoS party.
With no way to tell the clients to stop. Mistake #3.
It was only live for about 10 minutes, but it took around two hours before the last few clients finally refreshed their browser and stopped DoSing the endpoint. The server absorbed the extra traffic like a champ, but the server logs were ridiculous for about an hour. Lots of "client took too long" error messages spit out by Arc every second.
Sooo yeah, submitting changes via JS is easy. Getting updates is the hard part.
Could poll. But then that's still hammering the server. Moreso than it already is.
It's probably a feature that it's painful to use. Only the determined will use it for art.
That said, if anyone has ideas for how to tweak arc for performance for this scenario – and remember to calculate how much memory is used by how many simultaneous sockets are open – I'd be willing to try again.
-----
> I was aware that Arc kills threads that take longer than 30 seconds...
> Sooo yeah, submitting changes via JS is easy. Getting updates is the hard part.
That's why I suggested a post request...
Just deliver the page and create an api end point, on the server, that gives you the last x changes from the change log.
With that ajax request, you could return these net updates for the client and use client side js to apply them to the dom. You could even create a trivial js debounce[1] algo to throttle requests if you wanted to go even further.
1. 'debounce' for those who don't know -> https://davidwalsh.name/javascript-debounce-function Only I'm suggesting it as a way to throttle ajax reqs.
-----
Timelapse: https://www.youtube.com/watch?v=G0sG08jKCTI
-----
As it is, the more "pixels" you have, the slower the page loads. You could probably have just a single canvas and a single event handler.
You could preserve functionality for non-js users by using an imagemap (assuming browsers still even support those) or sticking the existing code in noscript tags.
-----
The repo's open, and I could help get you set up with it if you wanted to work on some of this. https://github.com/laarc/laarc
It should be a matter of:
git clone https://github.com/laarc/laarc
cd laarc
make
rlwrap bin/arc
((load "news.arc"))
-----
-----
If it's to be done in JS, might as well implement a drawing tool in an actual canvas element.
I've seen tutorials that are reasonably simple. The complicated part would be actually saving it. It is possible to export a canvas as a png and upload it with an AJAX request but I don't know how cross-browser compatible that is.
-----
I will say; I did a page reload and noticed the color pick was still in place and had to go hunt for the x. I expected it to reset, but I'm not sure if you see that as a bug or a feature :)
also, it looks like the client side is pure js... Is Lumen not up to that task? just curious if you tried that as it might be nice if, someday, we could get to the point where this kind of stuff could be done in arc.
-----
The trick to clear the x is to scroll up and click on the color palette.
Here's a timelapse for the curious. https://www.youtube.com/watch?v=G0sG08jKCTI
-----