sketch

var spacing = 5;

function setup() {
    createCanvas(300, 400);
}

function draw() {
    background(0);
    //botton right corner
    for (i = 0; i < 100; i++){
        stroke(251, 201, 137);
        //limit mouseX
        if (mouseX < 100){
            mouseX = 100;
        }
        if (mouseX > 300){
            mouseX = 300;
        }
        map(mouseX, 0, width, 0, 30);
        line(0, height, mouseX * i, 5*i);
    }
    for (i = 0; i < 20; i++){
        map(mouseY, 0, height, 0, 20);
        //upper left corner
        //color gradient
        stroke(50, 200, mouseX);
        line(0, i * spacing * 5, width - i * spacing * 3, 0);
        //upper right corner
        stroke(255, 255 - i * 3, 255 - i *10);
        line(width - i * spacing, 0, width - i * spacing, height - i * spacing *5);
        //red lines
        //limit mouseY
        if (mouseY > 50){
            mouseY = 50;
        }
        stroke("red");
        line(width - i * mouseY, 0, i * spacing, height);
    }
    //background white lines
    for (i = 0; i < 50; i++) {
        stroke(255);
        line(width, height - i * spacing * 3, sq(i * spacing/6), height - i * spacing * 3);
    }
}

I played around with different variables, compositions, color gradient to create a visually harmonious image.

karinac-Project-04

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-04

function setup() {
    createCanvas(500, 500);
    background(0);
}

function draw() {
    //points of triangle
    var x1 = width/3;
    var y1 = height/3;
    var x2 = width/3;
    var y2 = height-(height/3);
    var x3 = width-(width/3);
    var y3 = height/3;
    var x4 = width-(width/3);
    var y4 = height-(height/3);

    stroke(255,100,0);
    strokeWeight(2);
    rectMode(CENTER);
    fill(250,200,0);
    rect(width/2,height/2,width/3,height/3);


    for (var i = 0; i < 50; i +=2) {
        strokeWeight(0.2);

        //lines outside square
        line(x1, y1, 1, i*10);
        line(x1, y1, i*10, 1);
        line(x2, y2, 1, height-i*10);
        line(x2, y2, i*10, height-1);
        line(x3, y3, width-i*10, 1);
        line(x3, y3, width-1, i*10);
        line(x4, x4, width-1, height-i*10);
        line(x4, x4, width-i*10, height-1);
    }

}

At first, I did not know how I wanted this project to look. I just played around with the loop function to draw lines until I came across a design that I could branch off of. I implemented this design that is based off of the concept of light, which includes the source of light in the middle and the rays that come from it. The most difficult part for me was definitely coming up with a design that was proud to create. After that process was over and I could see a clear picture of what I wanted to draw, the rest was straightforward.

hyt-04-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing


var angle = 0; // line rotating angle

function setup() {
  createCanvas(400, 300);
  background(0, 0, 0);
//  angleMode(DEGREES);

}


function draw() {

// left side gradient lines
    var x1 = 0; 
    var y1 = 0; 

    push();
    for (var i = 0; i < 200; i++) {
        translate(mouseX, 0);
        map(mouseX, 0, width, 100, 250);
        stroke(150, 201 - i * 2, 202);
        strokeWeight(1);
        x1 += 5;
        y1 += 5;
        line(x1, y1, x1 + i * 7, y1);
    }
    pop();

// left bottom "shadow" on the highlight
    var x2 = 0; 
    var y2 = 0;
    push();
    for (var i = 0; i < 200; i++) {
        //rotate(radians(x2 *3));
        stroke(150 + i * 2, 189, 226);
        x2 -= 5; 
        y2 += 5; 
        line(x1, y1, 0, y2);
    }
    pop();

// left top corner
    var x3 = 20; 
    var y3 = height / 2; 
    for (var i = 0; i < 50; i++) {
        stroke(125, 206, 160 +i * 10);
        line(x3, 0, 0, y3);
        x3 += 10;
        y3 -= 10;
    }

// right top corner
    var x4 = width / 2; 
    var y4 = height / 2; 
    for (var i = 0; i < 50; i++) {
        stroke(246, 221, 204 + i *4);
        line(x4, 0, width, y4);
        x4 -= 10; 
        y4 -= 10;
    }

// spotlight

ellipse(350, 250, 40, 40);

}

For this project i wanted to create something that resembles a stage lighting design, hence the creation of this neon color drawing. I thought the corner drawings were actually not as hard as aligning perfectly the middle section (the two horizontal lined triangles).

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-04

var ellipX1 = 0; //x variable of outer ellipses
var ellipX2 = -82; // x variable of inner ellipses
var ellipY1 = -88; // y variable of outer ellipses
var ellipY2 = 0; // y value of inner ellipses


function setup() {
    createCanvas(300, 400);
}

function draw() {
	background(255);
	noStroke();
	for (var i = 0; i < 24; i++) { // creates 24 iterations of ellipses and lines
		drawCircle1(i); // created a function below for drawing each ellipse
	}
	//parabolic organism in the center
    var startpointX = 100; // initial outer constraints
    var endpointX = 200;
    var dotX1 = lerp(startpointX, endpointX, .125);
    var dotX2 = lerp(startpointX, endpointX, .25);
    var dotX3 = lerp(startpointX, endpointX, .375);
    var dotX4 = lerp(startpointX, endpointX, .625);
    var dotX5 = lerp(startpointX, endpointX, .75);
    var dotX6 = lerp(startpointX, endpointX, .875);

    var startpointY = 150 // initial outer constraints
    var endpointY = 245
    var dotY1 = lerp(startpointY, endpointY, .125);
    var dotY2 = lerp(startpointY, endpointY, .25);
    var dotY3 = lerp(startpointY, endpointY, .375);
    var dotY4 = lerp(startpointY, endpointY, .625);
    var dotY5 = lerp(startpointY, endpointY, .75);
    var dotY6 = lerp(startpointY, endpointY, .875);

    var yconver = constrain(mouseY, 150, 245); // modifies shape of organism based on mouse position
    var xconver = constrain(mouseX, 100, 200);

    //application of variables
    stroke(0);
    strokeWeight(2);
    line(dotX1, yconver, xconver, dotY3);
    line(dotX2, yconver, xconver, dotY2);
    line(dotX3, yconver, xconver, dotY1);
    line(dotX4, yconver, xconver, dotY1);
    line(dotX5, yconver, xconver, dotY2);
    line(dotX6, yconver, xconver, dotY3);
    line(dotX1, yconver, xconver, dotY4);
    line(dotX2, yconver, xconver, dotY5);
    line(dotX3, yconver, xconver, dotY6);
    line(dotX4, yconver, xconver, dotY6);
    line(dotX5, yconver, xconver, dotY5);
    line(dotX6, yconver, xconver, dotY4);

}
		
function drawCircle1(dotcount) {
	push();
	translate(width/2, height/2); // translation to center of canvas
	rotate(radians(dotcount * 15)); // rotates about the center -- 24 count of ellipses.
	rotate(mouseY);
	fill(0)
	ellipse(ellipX1, ellipY1, 8, 8);
	pop();
	push();
	translate(width/2, height/2);
	rotate(radians(dotcount * 15));
	rotate(mouseY);
	fill(0)
	ellipse(ellipX2, ellipY2, 4.75, 4.75);
	pop();
	push();
	translate(width/2, height/2);
	rotate(radians(dotcount * 15));
	rotate(mouseY);
	stroke(0);
	strokeWeight(2);
	line(ellipX1, ellipY1, ellipX2, ellipY2); // lines follow ellipses.
	pop();
}

I was inspired by the form and movement of birds during the initial ideation phase of my project, as well as animal nests. In thinking about these two concepts, I developed an interactive mouse-based string work that changes the “form” of the organism inside of the parabolic nest. As always, I used Illustrator to determine my composition (and widths, heights, coordinates) prior to starting the code.

When I saw the project, I was reminded of the 2013 Great Gatsby movie poster, and I wanted to make a version of it using the string art. I thought this project was going to be a huge difficulty for me, but after really looking at it and asking tutors, I got a better grasp of the assignment and was able to make better guesses at figuring coordinates out. I tried to use the x1,y1/x2, y2 concept listed in the instructions as well as the x1 += x1StepSize, because I figured it was probably the simplest way to help generate the “curves,” so I could focus more on creating a better design.

sketch2

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-04-StringArt

var height = 300;
var width = 400;
//coordinates for light gold loops
var x1 = 0;
var y1 = 0;
var x1StepSize = width/20;
var y1StepSize = height/20;
//coordinates for dark gold loops
var x2 = 0;
var y2 = 0;
var x2StepSize = width/20;
var y2StepSize = height/20;
//to change from gold to silver
var colorR1 = 219;
var colorG1 = 180;
var colorB1 = 117;
var colorR2 = 183;
var colorG2 = 129;
var colorB2 = 59;

function setup() {
    createCanvas(400, 300);
    background(0);
    fill(255);
//display text
    textSize(15);
    text("The Great", 168, 135);
    textSize(50);
    text("GATSBY", 105, 180);
}

function draw() {
    stroke(colorR2, colorG2, colorB2);
//change the colors from gold to silver
    if (mouseX <= height/2) {
        colorR2 = 183;
        colorG2 = 129;
        colorB2 = 59;
    }
    else {
        colorR2 = 109;
        colorG2 = 111;
        colorB2 = 106;
    }
    strokeWeight(10);
//how far apart each line is from each other
    var spacing = 20;
//lines down left
    for (var x = 65; x <= 115; x += spacing) {
        line(x, 0, x, height/2.3);
    }
//lines down right
    for (var x3 = 300; x3 <= 350; x3 += spacing) {
        line(x3, 0, x3, height/2.3);
    }
//lines across left
    line(0, height/2.3, width/4, height/2.3);
    line(0, height/2.6, width/4, height/2.6);
    line(0, height/3, width/4, height/3);
//lines across right
    line(width - width/4.2, height/2.3, width, height/2.3);
    line(width - width/4.2, height/2.6, width, height/2.6);
    line(width - width/4.2, height/3, width, height/3);
//lines going down left
    for (var x4 = 45; x4 <= 102; x4 += spacing) {
        line(x4, height/2.3, x4, height);
    }
//lines going down right
    for (var x5 = 320; x5 <= 360; x5 += spacing) {
        line(x5, height/2.3, x5, height);
    }
//light gold set of "curves"/loops
    for (var i = 0; i <= 400; i++) {
        strokeWeight(1);
        stroke(colorR1, colorG1, colorB1);
        line(0, y1, x1, height);
        line(0, height - y1, x1, 0);
        line(width, y1, width - x1, height);
        line(width, height - y1, width - x1, 0);
        x1 += x1StepSize;
        y1 += y1StepSize;

    }
//dark gold set of "curves"/loops
    for (var j = 0; j <= 400; j++) {
        strokeWeight(1);
        stroke(colorR2, colorG2, colorB2);
        line(0, y2, x2, height);
        line(0, height - y2, x2, 0);
        line(width, y2, width - x2, height);
        line(width, height - y2, width - x2, 0);
        x2 += 1.3*x2StepSize;
        y2 += 1.5*y2StepSize;

    }
//top triangle
    for (var k = 0; k < 5; k++) {
        stroke(colorR1, colorG1, colorB1);
        line(width/2, 110, k * 20, 50);
        line(width/2, 110, 60 + k * 20 , 50);
        line(width/2, 110, 120 + k * 20, 50);
        line(width/2, 110, 180 + k * 20, 50);
        line(width/2, 110, 240 + k * 20, 50);
        line(width/2, 110, 300 + k * 20, 50);
    }
//bottom triangle
    for (var l = 0; l < 5; l++) {
        stroke(colorR1, colorG1, colorB1);
        line(width/2, height - 110, l * 20, height - 50);
        line(width/2, height - 110, 60 + l * 20 , height - 50);
        line(width/2, height - 110, 120 + l * 20, height - 50);
        line(width/2, height - 110, 180 + l * 20, height - 50);
        line(width/2, height - 110, 240 + l * 20, height - 50);
        line(width/2, height - 110, 300 + l * 20, height - 50);
    }
    if (mouseX <= width/2) {
        colorR1 = 219;
        colorG1 = 170;
        colorB1 = 91;
    }
    else {
        colorR1 = 180;
        colorG1 = 177;
        colorB1 = 172;
    }
}

A really rough sketch of my initial idea. It ended up changing, because I felt like it originally looked too busy. I did have help from the CS pedagogy tutors in trying to figure out how to approach this assignment.

sketch

//global variables that hold x and y position as well as the amount that is added to both values
//(different x and y variables per function)

var x1 = -100;
var y1 = 0;
var x1Step = 2;
var y1Step = 4;

var x2 = 400;
var y2 = 0;
var x2Step = 2;
var y2Step = 2;

var gradient = 0;
var gradient2 = 256;
var gradient3 = 256;

var x11 = 0;
var x22 = 400;
var y11 = 300;
var y22 = 0;
var x11Step = 0.5;
var y11Step = 1;
var x22Step = 0.5;
var y22Step = 1;

function setup() {
    createCanvas(400,300);
}

function draw() {
    //makes background change color value
    background(gradient3--);
    //calls functions that produce lines
    lines();
    lines2();
    lines34();
}

//lines converging in center
function lines(){
    var x1constrain = constrain(mouseX,-100,0);
    strokeWeight(0.8);
    for(var i=0;i<1000;i+=10){
        stroke(gradient+i);
        line(x1constrain+i, 0, 0, y1-i);

    }
    x1+=x1Step;
    y1+=y1Step;
}

//lines converging in center
function lines2(){
    var y2constrain =constrain(mouseX,-100,0);
    strokeWeight(0.8);
    for(var i=0;i<1000;i+=10){
        stroke(gradient2-i);
        line(x2-i, 300, 400, y2constrain+i);

    }
    x2-=x2Step;
    y2+=y2Step;
}

//slower corner lines
function lines34(){
    //increases i at a faster rate so as to draw less lines
    for(var i=0;i<1000;i+=30){
        stroke(gradient+i*1.2);
        line(x11+i,0,0,y11-i);
        stroke(gradient+i*1.2);
        line(x22-i,300,400,y22+i);
    }
    //changes x11 and y22 values so that it creates a curve
    x11+=x11Step;
    y11-=y11Step;
    x22-=x22Step;
    y22+=y22Step;
}

For this project, I decided that I wanted to play with adding motion into my string art. I started with figuring out the values in order to make the first loop of lines in the top left corner and used my experimentation with that in order to mirror the lines into the bottom right corner.

While I thought that the two looked interesting together, I decided that rather than create two more loops for the other corners, I wanted to create two new series of lines that would start from the same corner but act in a very different way. While playing around with that concept, I came up with the code below.

sketch

//lines1 variables
var x1=0;
var x1Step=0.5;
var y1=300;
var y1Step=1;
var x2=400;
var x2Step=1;
var y2=0;
var y2Step=1;
var gradient=0;

var y3=100;
var y3Step=0.5;
var x3=1000;
var x3Step=1;
var y4=400;
var y4Step=1;
var x4=400;
var x4Step=1;


function setup() {
    createCanvas(400,300);
}

function draw() {
    background(255,200,200);
    lines1();
}

function lines1(){
    if(y1 >0 & y1 < 300){
    for(var i=0;i<1000;i+=20){
        strokeWeight(0.8);
        //gradient black to white lines
        stroke(gradient+i*1.2);
        line(x1+i,0,0,y1-i);
        //teal lines
        stroke(gradient+i*1.2);
        line(x2-i,300,400,y2+i);
    }
}
     for(var i=0;i<1000;i+=60){
        strokeWeight(0.8);
        stroke(0);
        line(0,y3+i,x3-i,0);
        stroke(256);
        line(0,y4-i,x4+i,0);
    }
    x1+=x1Step;
    y1-=y1Step;
    x2-=x2Step;
    y2+=y2Step;
    x3+=x3Step;
    y3-=y3Step;
    x4-=x4Step;
    y4+=y4Step;

}

Although I found that I was able to satisfy the requirements of the project, I decided that I was not satisfied with the inconsistent ways that the lines would move, so I restarted and played around with changing different variables. Through more experimentation, I was able to come up with my final code, which appeared more sophisticated in terms of the spacing of the grid it created as well as the monochrome colors.

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Project-4

function setup() {
    createCanvas(400, 300);
    background(0);
    pixelDensity(5.0);
    noStroke();
    colorMode(HSB, 360, 100, 100);
}

function draw() {
    background(0);
    noStroke();
    var x1;
    var x2;
    var y1;
    var y2;
    var r = 90; //radius of iris
    var eyeBright; //variable used to fade iris background to black
    for (var i = 0; i < 100; i++) { //iris faded background
        eyeBright = i;
        fill(213, 20, eyeBright);
        ellipse(width/2, height/2, 2.5*r - i*2.5*r/100, 2.5*r - i*2.5*r/100);
    }

    //blue iris coloring
    translate(width/2, height/2);
    for (var i = 0; i < 4; i++) { //for loop to create four foci by which to fill in the iris
        push();
        angleMode(RADIANS);
        rotate(i*PI/2); //rotates 90 degrees between foci
        for (var j = -14; j < 15; j++) { //21 strings from each foci are used to fill in circle
            if(j == -1 || j == -2 || j == 1 || j ==2 || j == -14 || j == -13 || j == 13 || j == 14) {
              continue; //skip center lines for both star visual effect, and to
                        //concentrate blue color to the outside of the iris
            }
            angleMode(DEGREES);
            x1 = -r;
            y1 = sqrt(sq(r)-sq(x1)); //uses equation for a circle to calculate y coordinate
            x2 = r*cos(12*j); //makes and end point every 12 degrees
            y2 = r*sin(12*j);
            stroke(199, 46, 80); //blue
            strokeWeight(1);
            line(x1, y1, x2, y2);
        }
        pop();
    }
    
    //green center iris
    var r2 = 5*r/12;
    for (var i = 0; i < 4; i++) { //for loop to create for foci by which to fill in the circle
        push();
        angleMode(RADIANS);
        rotate(i*PI/2); //rotates 90 degrees between foci
        for (var j = -12; j < 13; j++) { //21 strings from each foci are used to fill in circle
            if(j == -1 || j == -2 || j == 1 || j ==2) {
              continue;
            }
            x1 = -r/2;
            y1 = sqrt(sq(r/2)-sq(x1)); //uses r/2 to create a star shape
            angleMode(DEGREES);
            x2 = r2*cos(15*j); //makes and end point every 15 degrees
            y2 = r2*sin(15*j);
            stroke(77, 93, 48);//pale yellow/green
            strokeWeight(.5);
            line(x1, y1, x2, y2);
        }
        pop();
    }
    fill(0);
    ellipse(0, 0, r/2, r/2); //pupil
    fill(100); 
    ellipse(r/7, -r/8, r/9, r/9); //pupil light reflection

    //outside iris
    for (var i = 0; i < 30; i++) { //upper right accent
        x1 = i*(r+r/4)/29
        y1 = -r - r/4
        x2 = r+ r/4
        y2 = -r - r/4 + i*(r)/29
        stroke(80);
        line(x1, y1, x2, y2);
    }
    for (var i = 0; i < 30; i++) { // lower left accent
        x1 = -i*(r+r/4)/29
        y1 = r + r/4
        x2 = -r - r/4
        y2 = r + r/4 - i*(r)/29
        stroke(80);
        line(x1, y1, x2, y2);
    }
 

    //eyelid
    translate(-width/2, -height/2)
    for (var j = 0; j < 45; j++) { //fills in quarter circle with 45 lines
        x1 = 0
        y1 = height - j*height/45
        x2 = j * width/45
        y2 = 0
        stroke(100 + j*4, 60, 77); //slowly changes color from green to purple from left to right
        line(x1, y1, x2, y2);
    }
    for (var j = 0; j < 45; j++) { //fills in quarter circle with 45 lines
        x1 = width
        y1 = height - j*height/45
        x2 = j * width/45
        y2 = height
        stroke(100 + j*4, 60, 77); //slowly changes color from green to purple from left to right
        line(x1,y1,x2,y2);
    }

}

This project was pretty difficult for me to wrap my head around at first… I had never done any sort of string art before, nor could I quite get the feel for it. So, the way I started this project was pretty much playing around with the string art form: trying to make different shapes, and seeing what different loops I could use to accomplish drawing efficiently.

Somewhere along the lines, I ended up deciding on an eye as the theme for my drawing. Once I got going, I discovered some of the advantages of using string art, mainly, its ability to create compositional lines. After deciding on the shapes and composition, the next thing was the color and negative space. Negative space was definitely something that I realized later on was a very important part of the string drawing. Originally, all of the space was filled with strings, and the drawing became quickly cluttered. I had to decide on what to remove, and where perhaps I should use less strings to render the shapes.

As for the finished product, I enjoy how the strings led to a reptilian aesthetic. The spaces between the lines give the image texture and curvature that would be hard to do otherwise. The iris of the lizard’s eye plays off the geometric qualities of drawing with string art, creating different polygons with the lines and shapes where lines are removed.

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-04


function setup() {
    createCanvas(400, 300);
    background(220);
}
 
function draw() 
{
    strokeWeight(1);
    //Sun
    //Drawn between points along a half circle in the middle of the canvas.
    //i is an angle measure going from 0 to 90 degrees.
    stroke(200,200,50);
    for(var i = 0; i < 90; i += 5 )
    {
        line( width / 2 + 50 * cos(radians(i)), 
              height / 2 - 50 * sin(radians(i)),
              width / 2 - 50 * cos(radians(i)),
              height/2 - 50 * sin(radians(i)));
    }
 
    //Sun rays
    //Drawn along the same angles between 2 circles, 1 radius 50
    //(the edge of the sun), the other with radius 250
    stroke(221,85,119);
    for( var i = 0; i <= 180; i += 5 )
    {
        line( width / 2 + 50 * cos(radians(i)),
              height / 2 - 50 * sin(radians(i)),
              width / 2 + 250 * cos(radians(i)),
              height / 2 - 250 * sin(radians(i)));
    }

    //Sea
    //The sea is just sketched in with diagonal lines spaced out linearly
    stroke(25, 25, 150)
    for( var i = -20; i < 600; i += 10 )
    {
        line( 0, height / 2 + i, i, height / 2 );
    }

    strokeWeight( 2 );
    //Sun's reflection on the water
    //horizontal lines following a sinusoidal pattern
    stroke( 200, 200, 50 );
    for( var i = 0; i < 150; i += 5 )
    {
        line( width / 2 - 35 - i / 3 - 4 * sin(radians(i * 12)), height / 2 + i,
              width / 2 + 35 + i / 3 + 4 * sin(radians(i * 12)), height / 2 + i );
    }
} 

It’s a sunrise

I used a lot of circles; the sun’s reflection on the water uses a sinusoidal pattern.

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-04_ (String Art)


function setup() {
    createCanvas(300, 400);
    background(0);
    angleMode(DEGREES);
}

function draw() {
    var x = 0;
    var y = 0;
    var x1 = 300;
    var y1 = 400;
    var xspacing = 7.5;
    var yspacing = 10;
    var i;

    var r = map(mouseX, 0, width, 100, 200);
    var g = map(mouseX, 0, width, 0, 100);
    var b = map(mouseY, 0, height, 200, 250);

    for (i = 0; i < 50; i++) {
      stroke(r, g, b);
      strokeWeight(0.5);
      line(x, y + i * yspacing, x + i * xspacing, y1);
      line(x + i * xspacing, y, x1, y + i * yspacing);

      stroke(b, r, g);
      line(x + i * xspacing, y, x, y1 - i * yspacing);
      line(x + i * xspacing, y1, x1, y1 - i * yspacing);
    }
}

I found that string art is simple yet so aesthetic. Numberless lines drawn by mathematics create beautiful composition which makes you just zone into.
I wish I could figure out more complicated formulas.

sketch

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(60);

}

function draw() {
  fill(50);
  rect(0,0,windowWidth,windowHeight);
  // for(var j = 0; j < windowHeight ; j=j+20){
    for(var i = 0; i < windowWidth; i=i+10){
      from = color(200, 200, 32);
      to = color(72, 61, 200);
      for(var i=0; i < windowWidth; i++){
        var lerp = map(i, 0, windowWidth, 0, 1);
        stroke(lerpColor(from, to, lerp));
      line(0+mouseX,i+mouseY,i+cos(radians((i*5)%360))+50, windowHeight/2+sin(radians((i*5)%360))*5);
    }
   }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

This sketch explores using strings to create a gradient curtain on a sine wave. I liked creating this simple interaction where it felt like I was pulling back a sheer curtain of individual lines.