# Curve density over an image

**URL:** <https://discourse.processing.org/t/curve-density-over-an-image/3210>\
**Category:** Project Guidance\
**Created:** [September 2, 2018, 11:25pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210 "2018-09-02T23:25:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [September 2, 2018, 11:25pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/1 "2018-09-02T23:25:56Z")

</div>

I’m curious how I might approach loading a high-contrast image and then creating lines/curves to that are more densely overlapped in the dark areas, to recreate something like this…

 ![ae38dec6253ce7d7093626021602d962](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/754ae9afdaa7fc1c4f747eaadd4134a5fd17399a.jpeg)

I’m fairly adept at understanding the pixel matrix of an image, but not sure how to approach drawing messy lines that are more or less dense depending on the underlying pixel values.

Any guidance is much appreciated!

---

<div class="post-metadata">

**Author:** ![bontempos](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bontempos/32/397_2.png) [@bontempos](https://discourse.processing.org/u/bontempos)\
**Post date:** [September 3, 2018, 2:03am UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/2 "2018-09-03T02:03:19Z")

</div>

Could this approach be useful for you?

> **[Messy Curve Draw - OpenProcessing](https://www.openprocessing.org/sketch/486307)**
>
> Draw a portrait with messy curves

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [September 3, 2018, 6:17pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/3 "2018-09-03T18:17:28Z")

</div>

Ahh, yes… that is very close to what I’m looking to do! I don’t quite understand the logic behind his algorithm, but I’ll walk through it line by line and see if I can follow. Thanks for the heads up, I haven’t messed with Processing in a while and I forgot about [openprocessing.org](http://openprocessing.org)! Any other good reference/example sites to check out?

Thanks!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 3, 2018, 6:37pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/4 "2018-09-03T18:37:13Z")

</div>

At a lower level (texture) you might be interested in **Handy** and **p5.scribble** :

- [handy gallery — giCentre](https://www.gicentre.net/handy/gallery/5h4l061o8j6nzfb4o0e4cpkssobxob)
- [handy — giCentre](https://www.gicentre.net/handy/)
- [Using the Handy library — giCentre](https://www.gicentre.net/handy/using/)
- [GitHub - generative-light/p5.scribble.js: Draw 2D primitives in a sketchy look in p5.js](https://github.com/generative-light/p5.scribble.js)

You could look into using a PShader – perhaps by browsing [shadertoy.com](http://shadertoy.com) for keywords like scribble, scrawl, hand-drawn, drawing, pencil, pen, charcoal etc.

- [https://www.shadertoy.com/results?query=pencil](https://www.shadertoy.com/results?query=pencil)

In general, you might also be interested in looking into some recent impressive CGI rendering techniques called “style transfer”, which specifically maps a hand-drawn style onto a photograph or model.

- [https://www.youtube.com/watch?v=ksCSL6Ql0Yg](https://www.youtube.com/watch?v=ksCSL6Ql0Yg)
- [Reddit - The heart of the internet](https://www.reddit.com/r/GraphicsProgramming/comments/5dcjl0/help_wanted_scribble_fill_algorithm/)

**Edit: for more on style transfer resources for Processing, see:**

> [@Neural style transfer in processing](https://discourse.processing.org/t/neural-style-transfer-in-processing/3497/3):
>
> Here are some pointers for getting started with Processing and neural style transfer. (I am not an expert): perspective An interesting overview from Hannu Töyrylä on switching from using Processing to neural style transfer, then re-incorporating it into a Processing workflow. [http://liipetti.net/erratic/2016/12/11/neural-networks-style-transfer-and-artistic-process/](http://liipetti.net/erratic/2016/12/11/neural-networks-style-transfer-and-artistic-process/) …more related posts: [http://liipetti.net/erratic/category/neural-networks/](http://liipetti.net/erratic/category/neural-networks/)try it out If you are looking to try out a working …

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [September 4, 2018, 4:21pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/5 "2018-09-04T16:21:55Z")

</div>

Thank you! Great info… much appreciated!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 14, 2018, 8:40pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/6 "2018-09-14T20:40:21Z")

</div>

I’m still interested in the question of a simple algorithm to approach the sketching of the top image. The most obvious is to use random curve generation,

- curveVertex ([https://processing.org/reference/curveVertex\_.html](https://processing.org/reference/curveVertex_.html)) or
- quadraticVertex ([https://processing.org/reference/quadraticVertex\_.html](https://processing.org/reference/quadraticVertex_.html)).

…seeding those curve points from a _weighted_ distribution of the pixels by brightness. However, that will tend to randomly connect dark points anywhere on the image.

By contrast, it looks like the artist has a few long lines, more medium length lines, and many short lines (or, if you prefer, lengths of continuous curves that are more compact rather than ranging widely. Some regions are loose and some regions are tight – the ear on the right-hand margin, for example, is very tightly rendered with small strokes, while the shadows on the left are treated like one region.

Such a constraint could be added by only picking curve points from a selected “area of attention” and drawing some number of curves within those bounds before changing the attention frame.

In addition, the artist is careful to seldom cross certain key areas that must remain bright values – e.g. the bridge of the nose and the highlights on the cheek – even though they are surrounded by dark. This might be managed by testing and pruning crossings – or perhaps by generating curves blindly and then testing the result to see if it is closer to or further from the reference image.

One interesting aspect of the drawing is that high energy curves pass outside the main drawn area and return into it – for example, around the ears, or that the head stops before getting to the chin, but we see lots of curve action down there with no form, like smoke. If the algorithm was working from a photo, it might apply a one or more transparency gradients to the image before processing it to create these fade-out edges on a subject.

Finally, and this gets at something such a naive algorithm cannot reproduce, the aggregate roundness of the curves tracks the contours of the face in a way that hints topographically at 3D information that isn’t necessarily in a 2D painting or photo – the roundness of the lip, the hollow of the cheekbone, etc. Many individual curves are scribbles, but some serve sculptural purposes – such as the one dramatic line that crosses the forehead. The sketch also contains a few decisive hard lines – such as the edge of the ear – which are not shade filling at all, but drawing, and would require a different algorithm.

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [September 17, 2018, 4:21pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/7 "2018-09-17T16:21:52Z")

</div>

I spent some time over the weekend working on an idea to accomplish this. It still needs a lot of work, but I think it has potential!

 ![IMG_0374](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7617f96483c8854a8b95fc810a791915b18cf5c1.jpeg)

 ![lauryn](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b8f31b89d3811031adee4c71cef4184f337987c9.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 18, 2018, 1:11am UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/8 "2018-09-18T01:11:30Z")

</div>

Very nice! Interesting use of multiple line colors.

Great results on highlights like the face and shoulder. Are you using a random walkers to pick very-nearby curve points with a probability of the next point based on the darkness of that region? The nose / lip lines around the right edge of the face aren’t quite right, but they are surprisingly disciplined for a scribble algorithm.

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [September 19, 2018, 6:15pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/9 "2018-09-19T18:15:49Z")

</div>

Basically, I’m iterating over each pixel in the image and storing a mapped brightness value in a 2d array of 0’s and 1’s. I do this a few times for different levels of brightness, so I end up with 3 or 4 2d arrays of x,y coords.

Then, and this part clearly needs optimization, I generate millions of coordinate locations. If the coordinates are also marked as 1 in the array, I add a curveVertex to the shape. This is wasteful from a cpu perspective, but provides a lot of randomness in the sketch, which I like.

I run the algorithm a few times for varying levels of brightness and layer the curves on top of each other with a little transparency.

Still needs a lot of refinement, but I’m digging the direction thus far!

Andre 3000 from Outkast 🙂

 ![06%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/059c5c092be222f8751fc400c3548301219bbb8f.png)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 19, 2018, 6:21pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/10 "2018-09-19T18:21:43Z")

</div>

Hi stirman,

Really nice work so far! love the result 🙂

I had an idea reading @jeremydouglass: maybe you can process your image in different ways to extract some key informations and use the data from all those processed image to run your algorithm.

I was mainly thinking of an “edge detection” image that could helps some lines following key features of the original picture 🤔

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [October 5, 2018, 3:12pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/11 "2018-10-05T15:12:47Z")

</div>

Been improving this algorithm and I bought an Axidraw (pen plotter) to draw these on paper!

 ![Tupac](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/88a1a80213791bd3d8b3bb446175fb2bc90bad83.png)

![18%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9ded083a99c55c3fbf80887f6c1c7979269bd139.jpeg) ![43%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/db5e48f76c42d6fdc7e78339cb0f35baeb37ac25.png)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 5, 2018, 3:15pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/12 "2018-10-05T15:15:21Z")

</div>

I’m really impressed! The result is super good!

What is the dimension of your real life canvas? And how long does it take to render it (with the pen machine)?

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [October 5, 2018, 3:21pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/13 "2018-10-05T15:21:14Z")

</div>

The plotter can draw up to A3 paper size (11" x 17"), but this 2Pac plot is 11" x 11".

The plots take between 30-60 minutes, usually depending on how much I want the black saturated. Really loving making these 🙂

---

<div class="post-metadata">

**Author:** ![Dan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dan/32/1829_2.png) [@Dan](https://discourse.processing.org/u/Dan)\
**Post date:** [October 5, 2018, 5:54pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/14 "2018-10-05T17:54:08Z")

</div>

Wow, I _really_ love this project!

I haven’t read through the many links above yet, but I’m wondering if your method could be used to batch process the frames of a video to make a video of these sorts of drawings?

Not to suggest any additions to your project, of course; it’s really amazing as is!  
Very inspiring work!

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [October 25, 2018, 8:58pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/15 "2018-10-25T20:58:26Z")

</div>

Thanks Dan!

Yeah, I could probably extrapolate the code to process frames of a video, but for now I’m focused on framed art as I’m showing a collection of these at a SF art show in a couple weeks 🙂

---

<div class="post-metadata">

**Author:** ![morozgrafix](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/morozgrafix/32/2127_2.png) [@morozgrafix](https://discourse.processing.org/u/morozgrafix)\
**Post date:** [October 29, 2018, 5:02pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/16 "2018-10-29T17:02:54Z")

</div>

This is very impressive. I think I’ve tried to reach out to you on reddit at some point. Would you please share info on your exhibit? I’m also in SF and would like to see your artwork in person if possible.  
Thanks.

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [October 29, 2018, 5:44pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/17 "2018-10-29T17:44:39Z")

</div>

Heyo! Sorry, didn’t see the message on reddit. Here’s a link to the [art show in SF](https://www.facebook.com/events/2024782917787950/), and you can see more of my scribble portraits [here](http://stirman.net/).

I came up with my own algorithm to do these scribbles and it’s crazy inefficient, but it still only takes ~10 seconds to draw a portrait, so I’m not stressing about it. Happy to explain the logic in more detail and have been considering writing a Medium post about it.

Would love to see you at the show and I can explain the logic in person 🙂

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jwolondon/32/95_2.png) [@jwoLondon](https://discourse.processing.org/u/jwoLondon)\
**Post date:** [October 30, 2018, 6:33pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/18 "2018-10-30T18:33:14Z")

</div>

I did some work using a [related approach](https://www.gicentre.net/blog/2014/9/1/a-visual-turing-test) with Processing a few years ago which produces a similar effect. Works reasonably well for some portraits but also creates quite nice architectural sketches.

![sketch](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7c937df3c7051b3f6e06fd46a61ff59153b91958.jpeg)

(BTW, I am also the author of the [Handy Processing library](https://www.gicentre.net/handy/) linked in the post above).

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jwolondon/32/95_2.png) [@jwoLondon](https://discourse.processing.org/u/jwoLondon)\
**Post date:** [October 30, 2018, 6:40pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/19 "2018-10-30T18:40:08Z")

</div>

Here’s an example of applying the same technique to a building. The overshooting of the Catmull Rom splines emphasises the vanishing points of the perspective projection producing a nice ‘construction lines’ effect.

 ![architecture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/de6c67469d033e03a8e3b50d1bcf802a860a56eb.jpeg)

---

<div class="post-metadata">

**Author:** ![stirman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stirman/32/1321_2.png) [@stirman](https://discourse.processing.org/u/stirman)\
**Post date:** [October 30, 2018, 7:30pm UTC](https://discourse.processing.org/t/curve-density-over-an-image/3210/20 "2018-10-30T19:30:20Z")

</div>

Beautiful, and Handy is really cool!

[Next page](https://discourse.processing.org/t/curve-density-over-an-image/3210.md?page=2)