hyt-Project-04: Dynamic Drawing

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).

rmanagad-Project04-StringArt-SectionE

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.

 

NatalieKS-Project-04

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.

Jonathan Perez Looking Outwards 4

 

Yuri Suzuki’s Sonic Pendulum

Earlier this year, Yuri Suzuki collaborated with QOSMO — one of the worlds leading AI experts — to create a “Sonic Pendulum”. This installation generates a calming soundscape that is continuously generated by the AI system in response to its surroundings.

The actual installation itself is comprised of three swing-set-like rigs, with a series of speakers hanging as pendulums. These pendulums swing back in forth in different, organic patterns that are regulated by the central algorithm. In this way, not only is the installation aural, but visual. Viewers experience the sound as an observable motion in space, and furthermore, as a physical feeling in their bodies. The swinging motion generates a doppler effect, changing the pitch of the perceived sound, and thus oscillating the resonation in the viewers body.

The central algorithm controls all the aspects of this system, creating a unique interaction, a conversation, with the viewers. A number of cameras and microphones are set up to register the sound level and population of the viewers. The central algorithm takes in this input and adjusts the oscillation pattern of the pendulums as well as the music being generated to match and respond to the environment.

I admire this projects interdisciplinary and inter-sensory nature. Yuri Suzuki seamlessly bridges music composition, design, and AI computer science in a way so that each informs the other. As a result the viewer can receive a much fuller experience… a much more impactful one, too. Suzuki intended this project to calm and relax its viewers, and he could not have achieved that goal to the same degree without the implementation of visual with audio, and the audio with physical sensation, all of which are conducted by the AI.

One last note about this project. I really admire Suzuki’s intent for the Sonic Pendulums to create a mindful space. I would like to see more and more of this kind of art in the future, using human advancements to further mental health.

For more information, and a cool demonstration of the project, here’s a link.

https://vimeo.com/214206048

SaveSave

SaveSave

mecha-project04-string-art

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.

Jonathan Perez Project 4

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.

Project-04 Sunrise

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.

LookingOutwards-04

For this particular Looking-Outwards post, I looked at an artistic piece of Otobong Nkanga named Wetin You Go Do?. In this particular artistic piece, a distinctive sound can be heard from three of the balls. The sound is very carefully edited and layered in a specific way. The sound is edited to portray a part narrative and part song, with shifts between stream of consciousness and profound statements in English, French and Nigerian Pidgin, an English-based Creole language widely spoken across Nigeria.

Symbolism plays a part where each sphere represents a different imaginary character. The ropes connecting the spheres suggest networks within society.

I admire the simplicity yet the strong importance of symbolism behind this artistic piece. Additionally, the sound editing plays an essential role in conveying this symbolic message. The algorithms behind the sound editing is a bit hard for me to guess but I assume that there is definitely a distinct pattern between the usage of different languages and sounds.

The artist’s artistic sensibility especially shines in the simple way he successfully conveys a very distinct, clear, and “loud” message. The message can be loud without having to be physically loud by sound.

Nayeon_Project04_String Art

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.

Draft for string art

agusman-Project04-StringArt

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.