Category: Project-07-Curves

sketch

/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-07 */

var numLines = 20;
var angle = 0;
var angleX;
var clickCount = 1;
var circleW;
var circleC;

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

function draw() {
    background(0);
    for(var i = 0; i < numLines; i++){
        noFill();
        strokeWeight(clickCount);
        push();
        angleX = map(mouseX, 0, 480, 0, 90); //altering how slow or fast ellipses rotate 
        circleC = map(mouseX, 0, 480, 20, 255); //altering stroke color from black to white
        numLines = map(mouseY, 0, 480, 5, 50); // altering amount of lines drawn
        circleW = map(mouseY, 0, 480, 200, 50); //altering ellipse width
        stroke(circleC);
        translate(width / 2, height / 2);
        rotate(radians(angle));
        ellipseMode(CENTER);
        ellipse(0, 0, circleW, 400);
        pop();
        angle += angleX;

    }
}

function mouseClicked(){
    //increases strokeWeight parameter based on mouse clicks
    clickCount++;
}

function keyPressed() {
    clickCount = 1;
}

For this project, I was inspired by the spirograph curves. I created a set of ellipses that change based on mouseX and mouseY parameters. The mouseX changes the color of the stroke and the angle of rotation for the ellipses. The mouseY changes how many curves are drawn and the width of the curves. Additionally, when the mouse is clicked the strokeWeight will increase. When any key is pressed, the strokeWeight defaults back to its original value.

Try clicking and dragging!
sketch

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 7
*/

//This project draws a 3D model of spherial spiral

//how many points there are
var nPoints = 500;
//used for dragging
var dragging = false;

function setup() {
    createCanvas(480, 480, WEBGL);
    frameRate(100);
}


function draw() {
    background(0);
    // draw the frame
    stroke(255);
    noFill(); 
    rect(-width/2+3, -height/2+3, width-6, height-6); 
    //a circle that follows the mouse
    ellipse(mouseX-width/2,mouseY-height/2, 50,50);

	
    
    // draws the curve
    push();
    //rotate on z axis automatically, rotate x and y when clicked
    rotateZ(millis() / 8000);
    if (dragging == true) {
    	rotateX((mouseX-width/2) / 500);
	    rotateY((mouseY-height/2) / 500);
    }
    //calls drawing function.
    drawSphericalSpiral();
    pop();
}

//--------------------------------------------------
function drawSphericalSpiral() {
    // Spherical Spiral
    // http://mathworld.wolfram.com/SphericalSpiral.html
    //initialize points
    var x;
    var y;
    var z;
    //complexity depends on mouse
    var ph = mouseX / 10000.0;
    stroke(255);
    //transparent fill
    fill(255, 200, 200,3);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);        
        x = 80*cos(i)/Math.pow(1+ph*ph*t*t,1/2);
        y = 80*sin(i)/Math.pow(1+ph*ph*t*t,1/2);
        z = 80*-ph*i/Math.pow(1+ph*ph*t*t,1/2);
        vertex(x, y, z);
    }
    endShape(CLOSE);
 	
}

function mousePressed() {
	dragging = true;
}

function mouseReleased() {
	dragging = false;
}

At first, I didn’t quite understand how to use mathematical functions to draw, but after messing around with the vertices, I learned the basics of it. I messed around with various functions, but I wanted to use a more complex curve. I then tried to implement a 3D function and the one that I liked the most was a spherical spiral. I thought that the shape was interesting in the drawings I found online. I realized that it doesn’t look exactly like that image I found online, which can possibly partly be attributed to the lack of negative values available in the functions, but I think that it still looks very interesting. The constant rotation made me dizzy so I implemented a dragging function so that it looks much simpler from one side. From the z axis, it looked like a regular circle so I made the coloring of it more transparent so that the planes are more see-through. I think the project turned out great and it taught me a lot about how to draw in javascript.

Here are some iterations where I was messing around with the numbers and variables in the function.