<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.9.0, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>
//Ghalya Alsanea
//04 String Art

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

function draw() {
    background(0);
    stroke(255);

    //make x and y depend on mouse postition
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    //create the mirrored x and y positions
    var ix = width - x;
    var iy = height - y;

    //create 4 parabolas mirroring each other to make an X like shape 
    //each parabola spans the width and height incrementally
    for (var i = 0; i <=width; i += 10) {
        //as the lines draw, make them darker proportionally
        stroke(255 - i / 2);

        line(i, iy, ix, height - i);
        line(width - i, y, x, i);
        line(width - i, iy, x, height - i);
        line(i, y, ix, i);
    }
    
    //same thing but on the inside of existing shape
    for (var i = 0; i <=width; i += 10) {
        //as the lines draw, make them go form red to darker proportionally
        stroke(255 - i / 2, 0 , 0);

        line(width - i, y, ix, height - i);
        line(i, iy, x, i);
        line(width - i, iy, ix, i);
        line(i, y, x, height - i);
    }
    
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.