creyes1-Project-04-String-Art

creyes1 Project-04

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-04 (String Art)

//Variables for all 4 quadrants of diamond, counter-clockwise from top-right
var x1q1 = 200;
var y1q1 = 0;
var y1q1Interval = 5;
var x2q1 = 200;
var x2q1Interval = 5;
var y2q1 = 150;

var x1q2 = 200;
var y1q2 = 0;
var y1q2Interval = 5;
var x2q2 = 200;
var x2q2Interval = 5;
var y2q2 = 150;

var x1q3 = 200;
var y1q3 = 300;
var y1q3Interval = 5;
var x2q3 = 200;
var x2q3Interval = 5;
var y2q3 = 150;

var x1q4 = 200;
var y1q4 = 300;
var y1q4Interval = 5;
var x2q4 = 200;
var x2q4Interval = 5;
var y2q4 = 150;

//Variables for counter-clockwise spinning blue ring
var angleRing1 = 0;
var innercircleSaturation = 74;
var saturationInterval = -1;

//Variables for clockwise spinning rainbow ring
var angleRing2 = 0;
var circleHue = 0;

//Centerpoint to base rings off of
var cx = 200; //X coordinate of circle origin
var cy = 150; //Y coordinate of circle origin

function setup() {
    createCanvas(400, 300);
    background(229, 225, 174); //Darker yellow background
    angleMode(DEGREES);

    noStroke();

    fill(252, 248, 194); //Lighter yellow circle
    ellipse(width/2, height/2, 350, 350);

    fill(158, 224, 239); //Sky blue circle
    ellipse(width/2, height/2, 245, 245);

    fill(256, 40); //Transparent white circles
    ellipse(100, 100, 300, 300);
    ellipse(300, 200, 300, 300);
    ellipse(300, 100, 300, 300);
    ellipse(100, 200, 300, 300);

    //Diamond, Quadrant 1
    for(var i = 1; i <= 40; i++) {
        x2q1 += x2q1Interval;
        y1q1 += y1q1Interval;
        stroke(256);
        line(x1q1, constrain(y1q1, 30, 150), constrain(x2q1, 200, 320), y2q1);
    }

    //Diamond, Quadrant 2
    for (var i = 1; i <= 40; i++) {
        x2q2 -= x2q2Interval;
        y1q2 += y1q1Interval;
        stroke(230);
        line(x1q2, constrain(y1q2, 30, 150), constrain(x2q2, 80, 200), y2q2);
    }

    //Diamond, Quadrant 3
    for (var i = 1; i <= 40; i++) {
        x2q3 -= x2q3Interval;
        y1q3 -= y1q3Interval;
        stroke(256);
        line(x1q3, constrain(y1q3, 150, 270), constrain(x2q3, 80, 200), y2q3);
    }

    //Diamond, Quadrant 4
    for (var i = 1; i <= 40; i++) {
        x2q4 += x2q4Interval;
        y1q4 -= y1q4Interval;
        stroke(230);
        line(x1q4, constrain(y1q4, 150, 270), constrain(x2q4, 200, 320), y2q4);
    }

}

function draw() {

    colorMode(HSB);

    //Creates a constantly-looping, counter-clockwise spinning
    //blue ring with a varying saturation
    for(var i = 1; i <=1; i++) {
        angleRing1 -= 5
        stroke(205, innercircleSaturation, 105);
        line(computeX(50, angleRing1), computeY(50, angleRing1),
            computeX(50, angleRing1+140), computeY(50, angleRing1+140));
        innercircleSaturation += saturationInterval;
        //Switches b/w increasing & decreasing saturation at certain thresholds
        if (innercircleSaturation < 20 && saturationInterval < 0 ||
            innercircleSaturation > 74 && saturationInterval > 0) {
            saturationInterval = -saturationInterval;
        }
    }

    //Creates a constantly-looping, clockwise spinning rainbow ring
    for(var i = 1; i <=1; i++) {
        angleRing2 += 5
        stroke(circleHue, 52, 70);
        line(computeX(350, angleRing2), computeY(350, angleRing2),
             computeX(350, angleRing2+140), computeY(350, angleRing2+140));
        circleHue += 15;
        //Resets hue of line drawn to H = 0 to make a continuous transition
        if (circleHue > 360) {
            circleHue = 0;
        }
    }

}

//Computes the X position of a point on a circle according to given parameters
function computeX(ringRadius, angle) {
    return cx + ringRadius*cos(angle);
}

//Computes the Y position of a point on a circle according to given parameters
function computeY(ringRadius, angle) {
    return cy + ringRadius*sin(angle);
}

I was initially unsure as to how to approach this project, but I was somewhat inspired by circular string art patterns and – after accidentally creating several infinite loops while figuring out this week’s assignments – the motion of loading cursors (the blue ring on Windows and rainbow pinwheel on iOS). I’m definitely pleased with the final product, and enjoyed being able to experiment with parameters and seeing the various effects it could have on the program. For instance, the rainbow swirl was initially an accident, but it forced me to look into precisely what that code was doing, understanding it, and then modifying and leveraging it in order to achieve the final effect.