This is my project 04.
sketch
function setup() {
createCanvas(400, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
//Inside-wing top left & bottom right
var dx1;
var dy1;
var dx2;
var dy2;
var numberLines = 15
function draw() {
background(249,214,214);
//background line-top left
stroke(168,141,158);
line(50,0,150,0);
line(0,50,0,150);
dx1 = (150-50)/numberLines;
dy1 = (0-0)/numberLines;
dx2 = (0-0)/numberLines;
dy2 = (150-50)/numberLines;
var x1 = 50;
var y1 = 0;
var x2 = 0;
var y2 = 150;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//background line-top right
line(250,0,350,0);
line(400,50,400,150);
dx1 = (350-250)/numberLines;
dy1 = (0-0)/numberLines;
dx2 = (400-400)/numberLines;
dy2 = (150-50)/numberLines;
var x1 = 250;
var y1 = 0;
var x2 = 400;
var y2 = 50;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
line(0,150,0,250);
line(150,300,50,300);
dx1 = (0-0)/numberLines;
dy1 = (250-150)/numberLines;
dx2 = (50-150)/numberLines;
dy2 = (300-300)/numberLines;
var x1 = 0;
var y1 = 150;
var x2 = 50;
var y2 = 300;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(400,150,400,250);
line(250,300,350,300);
dx1 = (400-400)/numberLines;
dy1 = (250-150)/numberLines;
dx2 = (350-250)/numberLines;
dy2 = (300-300)/numberLines;
var x1 = 400;
var y1 = 150;
var x2 = 350;
var y2 = 300;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//feeler left
stroke(146,63,75);
line(185,80,190,75);
line(197,117,203,115);
dx1 = (190-185)/numberLines;
dy1 = (75-80)/numberLines;
dx2 = (203-197)/numberLines;
dy2 = (115-117)/numberLines;
var x1 = 185;
var y1 = 80;
var x2 = 203;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//feeler right
line(220,80,215,75);
line(197,117,203,115);
dx1 = (215-220)/numberLines;
dy1 = (75-80)/numberLines;
dx2 = (203-197)/numberLines;
dy2 = (115-117)/numberLines;
var x1 = 220;
var y1 = 80;
var x2 = 197;
var y2 = 117;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
stroke(63,41,54);
line(130,50,130,110);
line(280,140,280,230);
dx1 = (130-130)/numberLines;
dy1 = (110-50)/numberLines;
dx2 = (280-280)/numberLines;
dy2 = (230-140)/numberLines;
var x1 = 130;
var y1 = 50;
var x2 = 280;
var y2 = 230;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//Inside-wing top right & bottom left
line(120,140,120,230);
line(270,50,270,110);
dx1 = (120-120)/numberLines;
dy1 = (230-140)/numberLines;
dx2 = (270-270)/numberLines;
dy2 = (110-50)/numberLines;
var x1 = 120;
var y1 = 140;
var x2 = 270;
var y2 = 110;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//Outside-top left
stroke(189,135,134);
line(110,20,110,115);
line(200,115,200,130);
dx1 = (110-110)/numberLines;
dy1 = (115-20)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (130-115)/numberLines;
var x1 = 110;
var y1 = 20;
var x2 = 200;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Outside-top right
line(290,20,290,115);
line(200,115,200,130);
let numLines = 10;
dx1 = (290-290)/numberLines;
dy1 = (115-20)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (130-115)/numberLines;
var x1 = 290;
var y1 = 20;
var x2 = 200;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Ouside-bottom left
line(100,135,110,260);
line(200,125,200,140);
dx1 = (110-100)/numberLines;
dy1 = (260-135)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (140-125)/numberLines;
var x1 = 100;
var y1 = 135;
var x2 = 200;
var y2 = 125;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Ouside-bottom right
line(300,135,290,260);
line(200,125,200,140);
dx1 = (290-300)/numberLines;
dy1 = (260-135)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (140-125)/numberLines;
var x1 = 300;
var y1 = 135;
var x2 = 200;
var y2 = 125;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//bottom patterning
stroke(107,87,104)
line(150,150,170,150);
line(130,180,150,180);
dx1 = (170-150)/numberLines;
dy1 = (150-150)/numberLines;
dx2 = (150-130)/numberLines;
dy2 = (180-180)/numberLines;
var x1 = 150;
var y1 = 150;
var x2 = 150;
var y2 = 180;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(225,150,245,150);
line(245,180,265,180);
dx1 = (245-225)/numberLines;
dy1 = (150-150)/numberLines;
dx2 = (265-245)/numberLines;
dy2 = (180-180)/numberLines;
var x1 = 225;
var y1 = 150;
var x2 = 265;
var y2 = 180;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//upper patterning
line(145,90,155,90);
line(140,105,150,105);
dx1 = (155-145)/numberLines;
dy1 = (90-90)/numberLines;
dx2 = (150-140)/numberLines;
dy2 = (105-105)/numberLines;
var x1 = 145;
var y1 = 90;
var x2 = 150;
var y2 = 105;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(245,90,255,90);
line(250,105,260,105);
dx1 = (255-245)/numberLines;
dy1 = (90-90)/numberLines;
dx2 = (260-250)/numberLines;
dy2 = (105-105)/numberLines;
var x1 = 245;
var y1 = 90;
var x2 = 260;
var y2 = 105;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
}