# Evolving Mona Lisa

**URL:** <https://discourse.processing.org/t/evolving-mona-lisa/18837>\
**Category:** Gallery\
**Created:** [March 20, 2020, 1:05pm UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837 "2020-03-20T13:05:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanc4s](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@seanc4s](https://discourse.processing.org/u/seanc4s)\
**Post date:** [March 20, 2020, 1:05pm UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837/1 "2020-03-20T13:05:35Z")

</div>

Using the so called Continuous Gray Code optimization algorithm to evolve an image of Mona Lisa with circles.  
[https://www.cs.bham.ac.uk/~jer/papers/ctsgray.pdf](https://www.cs.bham.ac.uk/~jer/papers/ctsgray.pdf)  
The wide variation of mutation strengths allows it jump out of local minimums better than most simple evolution algorithms.

[https://editor.p5js.org/siobhan.491/full/1qRYZ5r0i](https://editor.p5js.org/siobhan.491/full/1qRYZ5r0i)

I don’t know what the edit link allows, I presume you get a _copy_ of the code!  
[https://editor.p5js.org/siobhan.491/sketches/1qRYZ5r0i](https://editor.p5js.org/siobhan.491/sketches/1qRYZ5r0i)

---

<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:** [March 23, 2020, 9:23pm UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837/2 "2020-03-23T21:23:40Z")

</div>

Thank you for sharing this!

Are you getting good results? What kind of runtime does it take before something like a figure emerges?

> [@seanc4s](#):
>
> I don’t know what the edit link allows, I presume you get a _copy_ of the code!

You are viewing / running the original, but editing it locally in the browser. If you want to save / duplicate, it becomes a new sketch – people cannot edit _your_ copy without your username and password.

For example, I selected “Duplicate” and added a counter:

> **[p5.js Web Editor](https://editor.p5js.org/jeremydouglass/sketches/tfIaIPXLJ)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![seanc4s](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@seanc4s](https://discourse.processing.org/u/seanc4s)\
**Post date:** [March 23, 2020, 10:58pm UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837/3 "2020-03-23T22:58:22Z")

</div>

Okay, got it. It should only take a few minutes to see something happening.

---

<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:** [March 24, 2020, 4:38am UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837/4 "2020-03-24T04:38:40Z")

</div>

Odd. The target domain seems to have different dimensions than the source domain.

 ![Screen Shot 2020-03-23 at 9.34.40 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4198190f408d374a64f8ec268592cbde909731d2.png)

---

<div class="post-metadata">

**Author:** ![seanc4s](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@seanc4s](https://discourse.processing.org/u/seanc4s)\
**Post date:** [March 24, 2020, 8:48am UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837/5 "2020-03-24T08:48:51Z")

</div>

It runs fine on the Palemoon browser. Perhaps it is that high resolution display mode thing again (the 4 pixels per pixel thing!!!) I had some issues around that with my connect 4 game. Or other people had issues I should say.  
I certainly don’t have hi-res anything. I have the remnants of a laptop that I have to start with a screwdriver. 😁

---

<div class="post-metadata">

**Author:** ![seanc4s](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@seanc4s](https://discourse.processing.org/u/seanc4s)\
**Post date:** [March 24, 2020, 9:14am UTC](https://discourse.processing.org/t/evolving-mona-lisa/18837/6 "2020-03-24T09:14:11Z")

</div>

Yes you see in the costL2 function there is pixel level access:

```auto
function costL2() {
  var cost = 0;
  for (var i = 0; i < ml.pixels.length; i += 4) {
    var d = ml.pixels[i] - eg.pixels[i];
    cost += d * d;
    d = ml.pixels[i + 1] - eg.pixels[i + 1];
    cost += d * d;
    d = ml.pixels[i + 2] - eg.pixels[i + 2];
    cost += d * d;
  }
  return cost;
}

```

That is why in the isometric game I avoided anything to do with pixel access.  
I haven’t done much code with JS/P5 and it will take some time until I can get some proficiency. However I really like the online editor and ability to share.