Project 07 – Curves

The inspiration behind this project was Viviani’s Curve, which is normally contained in 3D space, but can be represented from its front view on the 2D plane as a parabolic curve. I also animated a few circles moving along the curve to give it a bit more life. You can make some pretty interesting shapes, one of which is pictured below.

AAAAAAAAAAAAAAAAAAAAAAAA

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);

    // want to animate circles along curves
    circlePos = 0; // this follows the angle and is a global
}

function draw() {
    background(0);
    var angleIncr = 0.01; // hopefully leads to high definition curve
    var angle = 0;
    var dx, dy;
    var hw = width / 2; // "half width"
    var hh = height / 2;


    beginShape();
    fill(128, 128, 128, 128); // using RGBA
    stroke(128, 128, 128, 128);
    strokeWeight(1);
    // more understandable than using a for loop
    while (angle < 2*PI) {
        // aiming to use Viviani's Curve
        dx = sin(angle);
        dy = 2 * sin(0.5 * angle);

        // want to scale values based on mousePos
        dx *= mouseX - hw;
        dy *= mouseY - hh;

        vertex(dx + hw, dy + hh); // beginShape() doesn't work with translate()
        vertex(-dx + hw, -dy + hh);
        vertex(dy + hw, dx + hh);
        vertex(-dy + hw, -dx + hh);

        // increment angle
        angle += angleIncr;
    }
    endShape();

    angle = 0;
    // second while outside of beginShape()
    while (angle < 2*PI) {
        // aiming to use Viviani's Curve
        dx = sin(angle);
        dy = 2 * sin(0.5 * angle);

        // want to scale values based on mousePos
        dx *= mouseX - hw;
        dy *= mouseY - hh;

        // draw circle
        if (circlePos == angle) {
            fill(mouseX % 255, mouseY % 255, (mouseX + mouseY) % 255);
            circle(dx + hw, dy + hh, 15);
            circle(-dx + hw, -dy + hh, 15);
            circle(dy + hw, dx + hh, 15);
            circle(-dy + hw, -dx + hh, 15);
        }

        angle += angleIncr;
    }

    circlePos = circlePos + angleIncr;
    if (circlePos > 2*PI) circlePos = 0; // can't modulo properly with PI
}