# Adobe Illustrator blend tool simulation in Processing

**URL:** <https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649>\
**Category:** Project Guidance\
**Created:** [June 11, 2021, 11:05am UTC](https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649 "2021-06-11T11:05:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![borjan.pavlek](https://avatars.discourse-cdn.com/v4/letter/b/f05b48/32.png) [@borjan.pavlek](https://discourse.processing.org/u/borjan.pavlek)\
**Post date:** [June 11, 2021, 11:05am UTC](https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649/1 "2021-06-11T11:05:06Z")

</div>

Hey everyone,  
just a quick question - is it possible to re-create blending tool via code in processing?  
It should look something like this. I am new to processing, I can understand basics and this is something I would love to learn.

Thank you.

 ![Screenshot 2021-06-11 at 13.02.57](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/878cfbdcba711b5fd6123fc50e10e26ca38e64f7.png)

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 11, 2021, 3:38pm UTC](https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649/2 "2021-06-11T15:38:42Z")

</div>

Hello @borjan.pavlek

The color gradation can be done using lerpColor().

[https://processing.org/reference/lerpColor\_.html](https://processing.org/reference/lerpColor_.html)

However, regarding the morphing of shapes… There is a lerp() function. Though I _suspect_ the results would be more challenging to meet. I could be wrong…

[https://processing.org/reference/lerp\_.html](https://processing.org/reference/lerp_.html)

Hopefully this helps!  
🤓

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 11, 2021, 6:44pm UTC](https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649/3 "2021-06-11T18:44:20Z")

</div>

Hello,

Here is a simple example that lerps from a square to a triangle:

```auto

void setup()
  {
  size(110, 110);
  }
  
void draw()
  {
  float step = map(mouseX, 0, width, 0, 10); //Move mouse on window
    
  strokeWeight(2);
  beginShape();
  vertex(30, 20);
  vertex(85, 20); //Start
  vertex(85, 75); //Start
  vertex(30, 75);
  endShape(CLOSE);
    
// Halfway there!
  strokeWeight(2);
  beginShape();
  vertex(30, 20);
  vertex(85, lerp(20, 50, step/10.0));
  vertex(85, lerp(75, 50, step/10.0));
  vertex(30, 75);
  endShape(CLOSE);  
   
  beginShape();  
  vertex(30, 20);
  vertex(85, 50); // Stop
  vertex(30, 75);
  endShape(CLOSE);  
  }

```

I made this from code examples in the references and experience.

References:

- [lerp() \ Language (API) \ Processing 3+](https://processing.org/reference/lerp_.html)
- [vertex() \ Language (API) \ Processing 3+](https://processing.org/reference/vertex_.html)
- [map() \ Language (API) \ Processing 3+](https://processing.org/reference/map_.html)

There are resources (tutorials, examples, references, etc.) at the Processing website:  
_[www.processing.org](http://www.processing.org)_

Think about how you might do this transition from a square to a circle.

There will be more work to make this a tool!

Start simple and build on that.

Added a _for()_ loop and some color:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/96a52e655eb2e65887cbbb333ada85a79f3763f7.png)

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 12, 2021, 2:05am UTC](https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649/4 "2021-06-12T02:05:42Z")

</div>

I just stumbled upon this in the examples section:  
[https://processing.org/examples/morph.html](https://processing.org/examples/morph.html)  
🤓

---

<div class="post-metadata">

**Author:** ![borjan.pavlek](https://avatars.discourse-cdn.com/v4/letter/b/f05b48/32.png) [@borjan.pavlek](https://discourse.processing.org/u/borjan.pavlek)\
**Post date:** [June 15, 2021, 9:00am UTC](https://discourse.processing.org/t/adobe-illustrator-blend-tool-simulation-in-processing/30649/5 "2021-06-15T09:00:12Z")

</div>

Hi everybody!  
Thank you so much for all the info. There is a lot I can ue from your comments.  
I will post the results if I manage to do it.  
Thank you all 🙂