Bettina-Project07-Curves-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 07 Curves

bgCol = {"r": 200, "g": 180, "b": 180}; //background color
col = {"r": 200, "g": 220, "b": 220}; //color of dots and lines


function setup() {
    createCanvas(480,480);
}

function draw() {
    var nPoints = map(mouseX, 50, width, 1, 40, true); //varies the number of points 1 to 40
    var t = map(mouseY,0,height, 10, 400); //varies size of astroid
    var w = map(mouseY, 0, height, -100, 120); //moves center of lines left and right
    bgCol.r = map(mouseY,0,height,50,200);
    col.r = map(mouseY,0,height,50,200);
    background(bgCol.r, bgCol.g, bgCol.b);
    push();
    translate(240,235); //translate to center of canvas
    drawAstroidDots(nPoints, t, w);
    drawAstroidLines(nPoints, t, w);
    pop();
  
}

function drawAstroidDots(nPoints, t) {
    beginShape();
        for (var i = 0; i < nPoints; i++) {
            var x = t * cos(i)^3;
            var y = t * sin(i)^3;
            noStroke();
            fill(col.r, col.g, col.b);
            ellipse(x,y,5,5);
        }
    endShape();
}

function drawAstroidLines(nPoints, t, w) {
    beginShape();
        for (var i = 0; i < nPoints; i++) {
            var x = t * cos(i)^3;
            var y = t * sin(i)^3;
            if (nPoints > 1) {
                stroke(col.r, col.g, col.b);
                line(w,120,x,y); //draws lines from one center point to each dot
            }
        }
    endShape();
}

I approached this project without a visual concept as I was unfamiliar with the curves and unsure of mathematical capabilities. Instead, I found a curve that I liked, the astroid, and decided to get to know what each variable in the function does.

I soon learned of variables that affected size and number of points, and decided the astroid fit the concept of a “star burst” both in nomenclature and form.

I added interactivity with position, size, amount, and color. I was able to incorporate objects into adjust the color by adjusting the “red” variable in the RGB codes.