Project 7: Composition with Curves

sketch

var x1;
var y1;
var x;
var y;
var a;
var t;
var r;
var g;
var b;
var bcolor;

function setup() {
    createCanvas(480, 480);
    let j = 700
    while (j > 0) {
        strokeWeight(0);
        j = j - 10
        bcolor = map(j, 700, 0, 0, 255);
        fill(bcolor);
        circle(240, 240, j);
    }
}

function draw() {
    stroke(r, g, b);
    strokeWeight(3);
    beginShape();
    for (var i = 0; i < 100; i++) {
        a = map(mouseX, 0, 480, 0, 100);
        t = map(mouseY, 0, 480, 0, 100);
        x1 = a * sin(t);
        y1 = a * sin(t) * cos(t);
        x = 240 + x1 * -1
        y = 240 + y1 * -1
        vertex(x, y);
        print(y);
    }
    endShape(CLOSE);
}

function mousePressed() {
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

As I started working on this project, I wanted the viewer to be able to “draw” the curves themselves. As MouseX changes, the size of the curve changes. As MouseY changes, different points are added on the curve. When the canvas is clicked, the color of the points change. If you manipulate the mouse in a certain way, you can make concentric figure 8s of varying colors. When I finished coding the curves and their mouse interaction, it still felt a little bland, so I added a circular gradient to the background to focus the eye gaze on the center of the canvas.