# "Blend" two Shapes in processing

**URL:** <https://discourse.processing.org/t/blend-two-shapes-in-processing/2816>\
**Category:** Coding Questions\
**Created:** [August 21, 2018, 10:54am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816 "2018-08-21T10:54:45Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiraw](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@kiraw](https://discourse.processing.org/u/kiraw)\
**Post date:** [August 21, 2018, 10:54am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/1 "2018-08-21T10:54:45Z")

</div>

Hey, English isn’t my first language so please be kind. I do by best and hope you understand my problem. 🙂  
This is my first processing project and i have completely no idea what i’m doing or have to do… I want to “Blend” the circle and the outline together with 20 lines. (like in the picture, which i do with illustrator and the blend-tool) The code you can see, is my “start” but I’m pretty sure it isn’t right or even the right way to solve my problem.  
Thank you for every help or maybe directly the right code? 🙂

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [August 21, 2018, 11:17am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/2 "2018-08-21T11:17:01Z")

</div>

Hi @Kiraw! Your English is good. 🙂

Check out the [Morph Processing example](https://processing.org/examples/morph.html). The idea is to represent your two curves as two lists of points, and the blend is achieved by using [linear interpolation](https://processing.org/reference/lerp_.html) between the points in curve\_1 with the points in curve\_2.

---

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [August 21, 2018, 12:08pm UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/3 "2018-08-21T12:08:37Z")

</div>

Hi,  
I’m german too 😛

here you go 😃 :

```auto
float scale = 0.3;
int shapelength = 12;
int iterations = 10;

float[][][] shape_coords = new float[2][shapelength][2];

void setup() {
  size(1152, 648); //skaliert mit * 0.3
  background (255);

  // innen (2)
  shape_coords[1][0][0] = 1500 * scale;
  shape_coords[1][0][1] = 900 * scale;
  shape_coords[1][1][0] = 1500 * scale;
  shape_coords[1][1][1] = 900 * scale;
  shape_coords[1][2][0] = 1500 * scale;
  shape_coords[1][2][1] = 900 * scale;
  shape_coords[1][3][0] = 1500 * scale;
  shape_coords[1][3][1] = 900 * scale;
  shape_coords[1][4][0] = 1500 * scale;
  shape_coords[1][4][1] = 900 * scale;
  shape_coords[1][5][0] = 1500 * scale;
  shape_coords[1][5][1] = 900 * scale;
  shape_coords[1][6][0] = 1500 * scale;
  shape_coords[1][6][1] = 900 * scale;
  shape_coords[1][7][0] = 1500 * scale;
  shape_coords[1][7][1] = 900 * scale;
  shape_coords[1][8][0] = 1500 * scale;
  shape_coords[1][8][1] = 900 * scale;
  shape_coords[1][9][0] = 1500 * scale;
  shape_coords[1][9][1] = 900 * scale;
  shape_coords[1][10][0] = 1500 * scale;
  shape_coords[1][10][1] = 900 * scale;
  shape_coords[1][11][0] = 1500 * scale;
  shape_coords[1][11][1] = 900 * scale;

  //außen (1)
  shape_coords[0][0][0] = 1520 * scale;
  shape_coords[0][0][1] = 485 * scale;
  shape_coords[0][1][0] = 2020 * scale;
  shape_coords[0][1][1] = 1150 * scale;
  shape_coords[0][2][0] = 2535 * scale;
  shape_coords[0][2][1] = 775 * scale;
  shape_coords[0][3][0] = 2880 * scale;
  shape_coords[0][3][1] = 1130 * scale;
  shape_coords[0][4][0] = 3100 * scale;
  shape_coords[0][4][1] = 1633 * scale;
  shape_coords[0][5][0] = 2720 * scale;
  shape_coords[0][5][1] = 1770 * scale;
  shape_coords[0][6][0] = 2170 * scale;
  shape_coords[0][6][1] = 1275 * scale;
  shape_coords[0][7][0] = 1365 * scale;
  shape_coords[0][7][1] = 1760 * scale;
  shape_coords[0][8][0] = 725 * scale;
  shape_coords[0][8][1] = 1160 * scale;
  shape_coords[0][9][0] = 1520 * scale;
  shape_coords[0][9][1] = 485 * scale;
  shape_coords[0][10][0] = 2020 * scale;
  shape_coords[0][10][1] = 1150 * scale;
  shape_coords[0][11][0] = 2880 * scale;
  shape_coords[0][11][1] = 1130 * scale;
}

void draw() {

  strokeWeight (2 * scale);

  //malen
  for (int j = 0; j < iterations; j++) {
    
    stroke (100 + float(j)/float(iterations) * 100);
    
    beginShape();
    noFill();
    for (int i = 0; i < shapelength; i++) {
      curveVertex(lerp(shape_coords[0][i][0], shape_coords[1][i][0], float(j)/float(iterations)), lerp(shape_coords[0][i][1], shape_coords[1][i][1], float(j)/float(iterations)));
    }
    endShape();
  }
}

```

I was a bit lazy with the circle. Also your screen resolution didn’t fit mine so I changed it a bit…

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 21, 2018, 5:12pm UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/4 "2018-08-21T17:12:52Z")

</div>

@MxFxM It’s awesome that you’re trying to help, but please do not post full code solutions. Instead, try to guide people through solving their own problems. After all, you wouldn’t just do somebody else’s homework for them, right?

Please read this guide:

> [@Guidelines—Answering Questions](https://discourse.processing.org/t/guidelines-how-to-answer-questions/2145):
>
> If you’re here, it means you’re thinking about contributing to the Processing community by answering questions on the forum. That’s great! This guide is meant to help you answer questions in a way that’s most helpful. Be nice. Remember that you’re talking to a person! Follow the guidelines in the [FAQ](https://discourse.processing.org/faq). Also read through the [P5.js community guidelines](https://p5js.org/community/). Specifically, avoid making judgments like “this code is bad” or “that’s a dumb way to do this”. Be mindful of how your tone comes across over the…

---

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [August 22, 2018, 5:37am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/5 "2018-08-22T05:37:26Z")

</div>

> [@kiraw](#):
>
> maybe directly the right code? 🙂

He (or she) asked for it.  
Also I don’t have much to do so I might as well programm the whole thing. If I just give a hint he might ask again and I would have to answer again (for that I don’t have the time. programming something this simple doesn’t take me too long).

> [@Kevin](#):
>
> After all, you wouldn’t just do somebody else’s homework for them, right?

I would 😛

---

<div class="post-metadata">

**Author:** ![kiraw](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@kiraw](https://discourse.processing.org/u/kiraw)\
**Post date:** [August 22, 2018, 8:41am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/6 "2018-08-22T08:41:46Z")

</div>

Thanks a lot! I just have to understand what you did and change it so my model.

@Kevin To be honest a guide through solving my problem woulnd’t help me. Like I said, I have completely no plan from processing. I have the code now, but this isn’t my whole project and I also have to understand what the code is doing. So he didn’t my homework, he just helped me. 🙂

---

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [August 22, 2018, 8:51am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/7 "2018-08-22T08:51:47Z")

</div>

First thing I did was transferring your vertices in an array instead of having them one by one so I can iterate through it with the inner for loop.

Then I added a second shape (the circle) with the same amount of vertices as the first shape. In this step it’s important to match the positions of the vertices (e.g. you dont want the upper right corner to go towards the lower left or maybee you do I don’t know).

Next step is to find a point between the outer shape and the inner one. I used the lerp() function for that. You can look it up in the reference, it’s pretty straight forward.  
Depending on how many steps you want inbetween the shapes you will have to do that muliple times (outer for loop which does iterations cycles).

For visuals I also changes the color of the line going inwards.

---

<div class="post-metadata">

**Author:** ![kiraw](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@kiraw](https://discourse.processing.org/u/kiraw)\
**Post date:** [August 22, 2018, 9:22am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/8 "2018-08-22T09:22:10Z")

</div>

I get it! 🙂  
But one more question, why I cannot see the inner circle as a circle? I can only see the first “shape”?  
“innen (2)” define only the coordinates of the first point of the circle or am i wrong? But why it isn’t a real circle?

---

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [August 22, 2018, 10:34am UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/9 "2018-08-22T10:34:41Z")

</div>

I guess if you make a real circle instead of a point you would see it but I don’t have the time to try that.

> [@kiraw](#):
>
> “innen (2)” define only the coordinates of the first point of the circle

You’re wrong. It defines the whole circle however the circle is just a point.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 22, 2018, 4:26pm UTC](https://discourse.processing.org/t/blend-two-shapes-in-processing/2816/10 "2018-08-22T16:26:07Z")

</div>

> [@MxFxM](#):
>
> > maybe directly the right code? 🙂
> 
> He (or she) asked for it.  
> Also I don’t have much to do so I might as well programm the whole thing. If I just give a hint he might ask again and I would have to answer again (for that I don’t have the time. programming something this simple doesn’t take me too long).
> 
> ![](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/40/37_1.png) Kevin:
> 
> > After all, you wouldn’t just do somebody else’s homework for them, right?
> 
> I would 😛

Please note that the official policy of these forums is to **not** give out full code solutions like this, and to **not** do other people’s homework for them.

Continued ignoring of this policy will result in a ban.

It’s great that you want to help, and I truly appreciate your time. But offering full code solutions short-circuits the most important thing we can help with here: the practice of breaking a problem down and solving it one step at a time.

Again, I advise you to read this guide:

> [@Guidelines—Answering Questions](https://discourse.processing.org/t/guidelines-how-to-answer-questions/2145):
>
> If you’re here, it means you’re thinking about contributing to the Processing community by answering questions on the forum. That’s great! This guide is meant to help you answer questions in a way that’s most helpful. Be nice. Remember that you’re talking to a person! Follow the guidelines in the [FAQ](https://discourse.processing.org/faq). Also read through the [P5.js community guidelines](https://p5js.org/community/). Specifically, avoid making judgments like “this code is bad” or “that’s a dumb way to do this”. Be mindful of how your tone comes across over the…

I don’t want to derail this thread, so if you want to discuss this further, please post in the [site feedback](https://discourse.processing.org/c/site-feedback) category.