2nd post on the forums ever. Let's hope I get the hang of this.

I've been messing around with a drawing game called skribbl.io (basically Pictionary), and I've figured out a way to automate drawings with JavaScript. This involves firing MouseEvents (mousedown, mousemove, and mouseup) with specified coordinates, and it can be used for drawing both dots and lines much like pen in Scratch.

The challenge is, regardless of how fast a drawing algorithm runs in JavaScript, the servers can only handle so many inputs per second, so the image has to be drawn with as few strokes as possible. Believe me, I've tried drawing images pixel by pixel, even with a low resolution, but there's not enough time and most people aren't patient enough to wait for the finished result on their end.

I figure with all the NPR projects on Scratch, there's got to be an ideal algorithm for this kind of thing.

Try this. It may be made for video, but it should still work for stills.

I get the idea of starting with larger dots and working to smaller ones to fine tune the image, though I can't seem to view nor download the Java code he included… I'll see what I can do with that though.

Alright, I tested out the large dots to smaller dots algorithm (changing the pen size manually for now using the scroll wheel), and it's decent for some images. Unfortunately, the more detail the image has, the harder it is to render it well in time.

Here's an example (didn't realize you couldn't upload images, so bear with me on this):
https://drive.google.com/file/d/1n9-zZ7z5U65wf7cEHuRvMIY-5SbNT_A_/view?usp=sharing

Now that I think about it, perhaps edge detection would be better for this situation.
I've also seen gtoal's ETF data project before and what it's been used for, so I may consider that.

Get vector input in the first place?

If you mean calculating the vectors in the first place before rendering the image, that ought to work.

Java_Programmer wrote:

If you mean calculating the vectors in the first place before rendering the image, that ought to work.

I meant, instead of inputting png/jpg/etc, input svg/etc. You'll get the primitives directly (typically in terms of Bezier curves, but you can linearize it as desired); no need for hacks or anything

Unfortunately, there's no general way to convert to a vector format from a raster image, but nowadays there's more than enough vector content that you should be okay. Without knowing more about the problem space, I can't commend further.