Category: Project-07-Curves

sketch

//Brandon Hyun
//bhyun1@andrew.cmu.edu
// 15104 Section B
// Project 07

var k = 900/30;
var j = 60/80;


function setup() {
    createCanvas(440, 440);
    frameRate(100);
}

function draw() {
	background(0);
  translate(width/2, height/2);
	beginShape();

	stroke(30, 400, 21);
	fill(255);
	strokeWeight(0.5);

	for (var t = 0; t < TWO_PI * 8; t += 0.2){
		var r = map(mouseX, 0, (500 * cos(k * t)), mouseY, (200 * cos((k*j) * t)));
		var x = r * sin(t);
		var y = r * cos(t);
		vertex(x,y);
	}

	for (var s = 0; s < TWO_PI * 4; s += 0.01){
		var r2 = map(mouseX, 0, (40 * cos(k * s)), mouseY, (20 * cos((k*j) * s)));
		var x2 = r2 * sin(s);
		var y2 = r2 * cos(s);
		vertex(x2,y2);
	}

	endShape(CLOSE);
}

For this Project, I wanted to create a LaserBeam effect using different curvatures and effects. When I came up with this idea I knew that the color of the strokes that I am creating have to be light green and also very thin. So I decided to add these effects into my code and make sure that it represented that.

Since we had to create compositions with geometric shapes I wanted to see them inside the laser beams that I created. So as you move the mouse to mouseX and mouse Y, you can see that there are geometric shapes that exist in those light beams which are very dynamic.

It was difficult in the beginning, but did some research in the internet and also referred to some of Schiffman’s videos in Youtube and that helped me a lot with this assignment. It has been a while since I did mathematics and getting refreshers on sin, cos, and tan was somewhat exciting and new. I hope I can create different compositions with this method of using trigonometry and lines.

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-07 (Composition with Curves)

//draw canvas
function setup() {
    createCanvas(480, 480);
}

//map the r, g, b color
function draw() {
    var r = map(mouseX, 0, width, 100, 255);
    var g = map(mouseY, 0, height, 0, 150);
    var b = map(mouseX, 0, width, 0, 255);
    noFill();
    background(0);

//Hypotrochoid changing color based on mouse cursor
    push();
    stroke(r, g, b, 50);
    strokeWeight(0.5);

    translate(width / 2, height / 2);
    drawHypotrochoid();
    pop();

//hypocycloid changing color based on mouse cursor
    push();
    stroke(b, r, g);
    strokeWeight(0.2);

    translate(width / 2, height / 2);
    drawHypocycloid();
    pop();
}

function drawHypotrochoid() {
//draw hypotrochoid
//http://mathworld.wolfram.com/Hypotrochoid.html
    var x;
    var y;
    var h = 400;
    var a = map(mouseX, 0, width, 0, 5);
    var b = map(mouseY, 0, height, 0, 1);
//x = (a - b) * cos t + h cos(((a - b) / b) * t)
//y = (a - b) * sin t - h sin(((a - b) / b) * t)
    beginShape();
      for(var i = 0; i < 500; i ++) {
        var angle = map(i, 0, 200, 0, 360);
        x = (a - b) * cos(angle) + h * cos(((a - b)) * angle);
        y = (a - b) * sin(angle) - h * sin(((a - b)) * angle);
        vertex(x, y);
      }
    endShape();
}

function drawHypocycloid() {
//draw hypocycloid
//http://mathworld.wolfram.com/Hypocycloid.html
    var x;
    var y;
    var a = map(mouseX / 2, 0, width, 0, 200);
    var b = map(mouseY / 2, 0, height, 0, 200);
//x = ((a - 1) * cos t) + ((a - 1) * cos t)
//y = ((a - 1) * sin t) - ((a - 1) * sin t)
    beginShape();
    for (var i = 0; i < 300; i ++) {
      var angle = map(i, 0, 100, 0, 6);
      x = ((a - 1) * cos(angle / 2)) + ((a - 1) * cos(angle * b));
      y = ((a - 1) * sin(angle / 2)) - ((a - 1) * sin(angle * b));
      vertex(x, y);
    }
    endShape();
}

For this assignment, I looked through the Mathworld curves site first. And I realized that It’s been a while(I mean.. really….) to study any math so I need to start from very simple math stuff. I also got little help from some friends who are familiar with math to build a equation for this. After long time struggle, I finally managed to build a curves, and then I played it with fun! It was very hard to think about draw something with math, but after knowing the formula it was fun to play with numbers!
Here are some screenshot images from composition curves that I made.

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Project 7

var a = 100 // inner asteroid diagonal radius
var b = 100 // second inner asteroid diagonal radius
var a2 = 200 //outer astroid diagonal radius
var b2 = 200 //second outer astroid diagonal radius
var lineArrayX = [a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a]
var lineArrayY = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
var lineLength = 30
var lineSize = 5
function setup() {
    createCanvas(480, 480);
    background(255);
}

function draw() {
    background(255);
    mouseDistX = dist(mouseX, height/2, width/2, height/2); //X distance from center
    mouseDistY = dist(width/2, mouseY, width/2, height/2); //Y distance from center
    a = map(mouseDistX, 0, 240, 0, 150) //maps X distance from center to max a value
    b = map(mouseDistY, 0, 240, 0, 150); //maps Y distance from center to max b value
    a2 = map(mouseDistX, 0, 240, 0, 300); //maps X distance from center to max a2 value
    b2 = map(mouseDistY, 0, 240, 0, 300); //maps Y distance from center to max b2 value
    traceAstroid(height/2, width/2, a, b);
    drawAstroid(height/2, width/2, a2, b2);
}


//drawing line asteroid
function traceAstroid(x, y, a, b) {
    asteroidX =  a * pow(cos(millis()/1000), 3);// x parametric for an astroid x = acos^3(t)
    asteroidY =  b * pow(sin(millis()/1000), 3);// y parametric for an asteroid y = asin^3(t)
    push();
    translate(x, y);
    for(i = 0; i < lineArrayX.length; i++) {
        fill(255 - i*255/lineArrayX.length); //fades line into background
        noStroke();
        if(i < lineArrayX.length - 1){ //if not the leading point
            //trails behind the leading point
            lineArrayX[i] = lineArrayX[i+1] 
            lineArrayY[i] = lineArrayY[i+1]
        } else { //if the leading point
             //next X and Y coordinates
            lineArrayX[i] = asteroidX
            lineArrayY[i] = asteroidY
        }
        ellipse(lineArrayX[i], lineArrayY[i], lineSize, lineSize);
        ellipse(-lineArrayX[i], -lineArrayY[i], lineSize, lineSize);
    }
    pop();
}


//outer asteroid
function drawAstroid(x, y, a2, b2) {
    push();
    translate(width/2, height/2);
    rotate(TWO_PI/8); //eighth rotation so that inner astroid touches the inside walls
    for(i = 0; i < 472; i++) { // 472 stops the astroid exactly halfway down the vertical sides
        asteroidX2 = a2 * pow(cos(i/200), 3); // x parametric for an astroid x = acos^3(t)
        asteroidY2 = b2 * pow(sin(i/200), 3); // y parametric for an asteroid y = asin^3(t)
        fill(0);
        noStroke();
        ellipse(asteroidX2, asteroidY2, lineSize, lineSize);
        ellipse(-asteroidX2, -asteroidY2, lineSize, lineSize);
    
    }
    pop();
}

I thought this project was super fun… I haven’t had the chance to do any sort of geometry or math in a while, and this was a nice way to sort of flex those old muscles.

To start off, I just clicked around on the geometry site provided for us. I was just looking for a curve that both looked feasible to implement (with out smoke coming out of my ears) and aesthetically interesting. Eventually I stumbled across the astroid, and decided, sure, let’s use that.

After that, I just started playing around with how I could draw the shape and modify it. I knew right off the bat that I wanted to do something with a trailing point… so that was actually the first part I coded. After that I added the second rotated astroid (to make the whole image an astroid evolute).

On their own, these shapes aren’t super exciting. Originally, since the astroid is a hypocycloid, I was going to play around with the number of points in the curve (instead of just four points). Instead, I went a rotation direction instead. Well, I say rotation, but nothing is truly rotating in the image. In the code, the distance between diagonal points is being altered, to create the illusion of rotation. I thought that was pretty cool, especially with the trailing point moving around. To me this animation feels like a card turning around on one point.