function setup() {
createCanvas(400, 300);
background("black");
}
var x1; //variables for central white, blue, and purple curves
var x2; //variables for peripheral curves
var stepX1 = 10;//steps of change for central curves
var stepX2 = 20;//steps of change for peripheral curves
var y1=0;//variables for peripheral curves
var angle;//variables for the red curves
var radius = 30;//varaibles for the size of red curves
function draw() {
// top green lines
for (var i = 0; i < 30; i++){
x2 = -50 + i * stepX2;
x3 = 30 + width;
y1 = 15 * i;
stroke(3,122,43);
strokeWeight(0.1);
line(x2, 0, x3, y1);
}
// bottom blue curves
push();
translate(0,height);
for (var i1 = 0; i1 <= 90; i1 += 5){
x2 = i1*5;
y1 = 0;
x3 = 450-x2;
y2 = sin(radians(i1))*-80;
stroke("blue");
strokeWeight(0.1);
line(x2,y1,x3,y2);
}
pop();
// Dark purple lines on the bottom;
push();
translate(0,height);
for (var i2 = 0; i2 <= 90; i2 += 5){
x2 = i2*5;
x3 = 450-x2;
y2 = sin(radians(i2))*-80;
i3 = map(i2, 0, 90, 0, PI*1/4);
x4 = -50 + 500*cos(i3);
y4 = 300-500*cos(i3);
stroke(71,3,112);
strokeWeight(0.1);
line(x3,y2,x4,y4);
}
pop();
// Central to left bottom White Lines
push();
translate(width/2,height/2);
rotate(radians(60));
for(x1 = 0; x1 < 150; x1 += stepX1){
strokeWeight(0.5);
stroke("white");
line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
}
// Central to left top light blue lines
rotate(radians(120));
for(x1 = 0; x1 < 150; x1 += stepX1){
strokeWeight(0.5);
stroke(109,129,185);
line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
}
// central to right light purple lines
rotate(radians(120));
for(x1 = 0; x1 < 150; x1 += stepX1){
strokeWeight(0.5);
stroke(152,109,185);
line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
}
pop();
// left top Taichi Fish
push();
translate(100,70);
rotate(radians(80));
for (angle = 0; angle <90; angle += 5){
angConv = radians(angle);
angConv2 = 1.5*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
}
for (angle=90; angle<100; angle += 3){
angConv = radians(angle);
angConv2 = 1.8*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
}
for (angle=120; angle<=180; angle += 3){
angConv = radians(angle);
angConv2 = 3*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
}
for (angle=135; angle<163; angle+=4){
angConv = radians(angle);
strokeWeight(0.5);
stroke("red");
line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
}
pop();
// right side top Taichi Fish
push();
translate(320,150);
rotate(radians(190));
for (angle = 0; angle <90; angle += 5){
angConv = radians(angle);
angConv2 = 1.5*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
}
for (angle=90; angle<100; angle += 3){
angConv = radians(angle);
angConv2 = 1.8*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
}
for (angle=120; angle<=180; angle += 3){
angConv = radians(angle);
angConv2 = 3*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
}
for (angle=135; angle<163; angle+=4){
angConv = radians(angle);
strokeWeight(0.5);
stroke("red");
line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
}
pop();
// left bottom Taichi Fish
push();
translate(110,230);
rotate(radians(320));
for (angle = 0; angle <90; angle += 5){
angConv = radians(angle);
angConv2 = 1.5*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
}
for (angle=90; angle<100; angle += 3){
angConv = radians(angle);
angConv2 = 1.8*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
}
for (angle=120; angle<=180; angle += 3){
angConv = radians(angle);
angConv2 = 3*angConv;
strokeWeight(0.5);
stroke("red");
line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
}
for (angle=135; angle<163; angle+=4){
angConv = radians(angle);
strokeWeight(0.5);
stroke("red");
line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
}
pop();
}
This drawing was my attempt to understand how small changes of the two coordinates can create fluent curves. With the combinations of different lineweights, I was experimenting with the visual depth of different elements. Meanwhile, the three “Taichi” like symbols were inspired by the Sharingan from Naruto which represents creating a world of illusions.