Project 7

var nPoints = 500
function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(100)
}
function draw() {
    //background color varies with mouse X and mouse Y
    background(map(mouseX,0,width,0,144),map(mouseY,0,width,0,122),255)
    translate(25,25)

    //draw the 16 devil's curves
    for (x = 25; x < width; x += 100){
        for (y = 25; y < height; y += 100){
            push()
            translate(x,y)
            drawDevilCurve()
            pop()
        }
    }
}
function drawDevilCurve(){
    //Devil's Curve
    //https://mathworld.wolfram.com/DevilsCurve.html

    var x;
    var y;
    var a = mouseX/15;
    var b = constrain(mouseY/5, 0, a*100);
    fill(max(min(0,width),mouseX/2),max(min(0,width),mouseY/2),255);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = cos(t) * sqrt((sq(a) * sq(sin(t)) - sq(b) * sq(cos(t))) / (sq(sin(t)) - sq(cos(t))));
        y = sin(t) * sqrt((sq(a) * sq(sin(t)) - sq(b) * sq(cos(t))) / (sq(sin(t)) - sq(cos(t))));
        vertex(x, y);
    }
    endShape(CLOSE);
}