Month: September 2017

sketch

//ryu kondrup
//rkondrup@andrew.cmu.edu
//Section D
//project-04-string-art

var shadow = 5;
var downDown = 30;

function setup() {
    createCanvas(400, 300);
    strokeWeight(1);
    noFill();

}

function draw() {
    background(0);
    for (var i = 20; i < 400; i += 20) {
      //line(i*1.2+120, 0, i/4-50, height);
      //line(i*1.2+120, 0, i/20+200, height+200);
      //line(i/20+200, height+200, 0, 0);

      //red
      stroke(255, 0, 0);
      //big swoop
      bezier(-100, height+1000,
        i*.6, i+10, i*2, i*1.2,
        width-i+100, height-i+100);
        //small swoop
      bezier(0, i*.2+downDown,
             i*.2, i*.3+downDown,
             i*1.7, i*1.6+downDown,
             -100, height+1000+downDown);

        //blue
        stroke(0, 0, 255);
        //big swoop
        bezier(-100+shadow*.4, height+1000,
          i*.6, i+10+shadow*.4, i*2, i*1.2,
          width-i+100+shadow*.4, height-i+100);
          //small swoop
          bezier(0+shadow*.4, i*.2+downDown,
                 i*.2+shadow*.4, i*.3+downDown,
                 i*1.7+shadow*.4, i*1.6+downDown,
                 -100 + shadow*.6, height+1000+downDown);

        //green
        stroke(0, 255, 0)
        //big swoop
        bezier(-100 + shadow*.6, height+1000,
          i*.6 + shadow*.6, i + 10,
          i*2 + shadow*.6, i*1.2,
          width-i + 100 + shadow, height - i + 100);
        //small swoop
        bezier(0 + shadow*.6, i*.2+downDown,
               i*.2 + shadow*.6, i*.3+downDown,
               i*1.7 + shadow*.6, i*1.6+downDown,
               -100 + shadow*.6, height+1000+downDown);



    }

}

In this project, I wanted to create something simple and abstract, but also explore different forms that can be made using curves inside of for loops. I also wanted to experiment with visual effects, so I offset each curve slightly and changed colors to RGB values to give the lines a sense of three-dimensionality and layering.

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.

sketch

//project

var yspace = 10;
var xspace = 25; 
var x1 = 1;
var y1 = 299;
var x2 = 399;
var y2 = 1; 

function setup(){
	createCanvas(400, 300);
	background(0);
}

function draw() {
	for(var i = 0; i < 100; i +=1){
		strokeWeight(0.01);
		stroke(255);
		line(x1, height - yspace * i, xspace * i, y2);
		line(x1, yspace * i, xspace * i, y1);
		line(xspace * i, y1, x2, height - yspace * i); 
		line(x2, yspace * i, xspace * i, y2); 
	}
}

This was a really cool project for me, I think my favorite part is that when you refresh the page you can almost see the loop working as it draws up. The math behind the concepts of this code are also super interesting.