3

I've been searching for a way to get the average color of a raster image, to use in a vector grid in front of it to create a mosaic effect - the "Object > Create Object Mosaic..." menu option does not provide enough flexibility to get the effect I want.

Basically, I'd like to do this: http://vectorboom.com/load/tutorials/effects/polygonal_vector_mosaic/3-1-0-305

It seems like Scriptographer would have been PERFECT for what I'm trying to do, but it is only supported up to CS5, and I'm on CC. I've looked into Paper.js (the sort of...evolution of Scriptographer), but cannot figure out how to implement it into Illustrator.

Does anyone know how to use Paper.js with Illustrator? And, more specifically, has anyone had any success with Paper.js in creating an effect similar to the one I posted above?

Improve this question
1
  • I note that there is SVG import capability. They have a "jpeg raster" demo of a mona lisa Jpeg, which loads a jpeg, generates a vector overlay on the fly and fills with averaged color. I checked the source of scriptographer's "colorize.js" and it basically does what the example does (the example averages as the paths are generated though: you would need to modify it to step through the paths). The raster class interface looks identical at a glance.
    – Yorik
    Mar 16, 2016 at 20:52

1 Answer 1

Reset to default
4

Paper.js is an intentional departure from Illustrator. Here's an explanation from one of the author's website:

[Scriptographer] was initially developed for Illustrator 9, and kept up-to-date and improved in functionality until Illustrator CS5. Unfortunately, the launch of CS6 brought too many changes in the underlying APIs and has therefore set an end to the project.

But the effort lives on in Paper.js, created by Jürg Lehni and Jonathan Puckey as an open-source vector graphics programming framework that runs on top of open-web standards such as Canvas 2D and SVG, with the aim to broaden the reach of Scriptographer’s API and free it from the closed and expensive confines of Illustrator.

If you're determined to use Paper.js to achieve that effect (or any effect for use with Illustrator), it seems like your best bet is to let your web browser do the work, export to SVG, then import the SVG to Illustrator. It worked well for the Mona Lisa example at least!

Paper.js example

Side note: if you're just looking for an easy way to accelerate the process of achieving that effect, you could try using the Crystallize effect. It doesn't give a result anywhere near as nice as a hand-tuned job, but it does give you a head start.

Crystallize filter

This is a raster effect, so you'd have to use Image Trace to create a vector version.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.