<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);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.