# Min Jun Kim- Project 7 Curves

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.