Steven Fei – Project 4

sketch


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.

Leave a Reply