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?
Hi @Kiraw! Your English is good.
Check out the Morph Processing example. The idea is to represent your two curves as two lists of points, and the blend is achieved by using linear interpolation between the points in curve_1 with the points in curve_2.
Hi,
I’m german too 
here you go 
:
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…
1 Like
@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:
3 Likes
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).
I would 
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.
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.
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?
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.
You’re wrong. It defines the whole circle however the circle is just a point.
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:
I don’t want to derail this thread, so if you want to discuss this further, please post in the site feedback category.
2 Likes