Category: Project-07-Curves

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 07
*
*/

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

function draw(){
	background(0);
	stroke(255, 0, 0);
	strokeWeight(3);
	fill(255);
	drawScarabaeusCurve();
} 

function drawScarabaeusCurve(){
	// Scarabaeus:
	// http://mathworld.wolfram.com/Scarabaeus.html

	var x;
	var y;
	var nPoints = 500; 
	var a = mouseX;
	var b = mouseY;

	beginShape();
	for(var i = 0; i < nPoints; i++){
		var th = map(i, 0, nPoints, 0, TWO_PI);
		var r = b * cos(2 * th) - a * cos(th);
		x = r * cos(th) / 2 + width/2;
		y = r * sin(th) / 2 + height/2;
		vertex(x , y);
	}
	endShape(CLOSE);
}

For this project I decided to go with the “scarabaeus” curve, mostly because it had a cool name. I ended up liking the shape (reminded me of the suit of clubs) and originally I wanted to make nPoints = 5, because it made the shape turn into a star if you moved the mouse the right way, but I figured that kind of defeated the purpose of the whole “curve” bit.
I considered changing the colors too, but I liked the simple black-white-red look. I also find it interesting how you can end up making it just a circle.

ijhong-07

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-07 

//taken from example code 
var nPoints = 100; 


function setup() {  
	createCanvas(600, 600);
	noStroke(); 
	frameRate(15); 
}

function draw() {
	background(0, 0, 77); 	
	//draw evolutes in multiple spots on canvas 
	push(); 
	translate(width / 8, height / 2); 
	drawEllipseEvolute(); 
	pop();  
	push(); 
	translate(width / 3.25, height / 2); 
	drawEllipseEvolute(); 
	pop();
	push(); 
	translate(width / 2, height / 2); 
	drawEllipseEvolute(); 
	pop();
	push(); 
	translate(width / 1.45, height / 2); 
	drawEllipseEvolute(); 
	pop();
	push(); 
	translate(width / 1.15, height / 2); 
	drawEllipseEvolute(); 
	pop();
	
}

function drawEllipseEvolute() {
//http://mathworld.wolfram.com/EllipseEvolute.html
	//will be used for evolute drawing equations 
	var x; 
	var y; 
	//keep within canvas 
	var a = constrain((mouseX / width), 0.5, 1); 
	var b = constrain((mouseY / height), 0.5, 1);  
	//taken from example code  
	beginShape(); 
	for (var i = 0; i < nPoints; i++) {
		var t = map(i, 0, nPoints, 0, TWO_PI); 
		//fill evolute
		var colorR = map(mouseY, 0, height, 255, 192);
		var colorG = map(mouseY, 0, height, 215, 192);
		var colorB = map(mouseY, 0, height, 0, 192);
		fill(colorR, colorG, colorB); 
		//equation to draw evolute  
		x = ((Math.pow(a + (mouseX / 100), 2) - Math.pow(b, 2)) / a * (Math.pow(cos(t), 3))); 
		y = ((Math.pow(b + (mouseY / 100), 2) - Math.pow(a, 2)) / b * (Math.pow(sin(t), 3)));
		vertex(x, y); 
	}
	endShape(CLOSE); 
}

	


	

For this project, the most difficult thing was getting the curve to draw properly and figuring out how to code the curve properly. The ellipse evolute curve was the only one that I could get to work and appear in the correct manner.

My inspiration for this project were stars and the night sky. As the mouse is moved, the “stars” enlarge or shrink and change from a gold to silver color. When the mouse is moved all the way to the far left, the stars almost “disappear”, representing an ultra dark night sky.

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-07

var Y_AXIS = 1;
var X_AXIS = 2;
var Xpos;
var Ypos;
var r;
var t;
var b1, b2, c1, c2; //p5js
var rColor = 255;
var gColor = 255;
var bColor = 255;

function setup() {
  createCanvas(600, 600);
  //Defines the colors, p5js
  b1 = color(255);
  b2 = color(0);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);
}

function draw() {
  background(150);
  setGradient(0, 0, width/2, height, b1, b2, X_AXIS);       //sets background color p5js
  setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);      //sets background color p5js
  if(mouseX<width/3){
      rColor = map(random(0,255),mouseX,0,width/3,0);        //makes it flash if mouseX in first third
    }
    if(mouseX>2*width/3){
      gColor = map(random(0,255),mouseX,0,width/3,0);      //makes it flash if mouseX in last third
    }
  if(mouseIsPressed){
       rColor = random(0,255);
       gColor = random(0,255);       //changes the color randomly when the mouse is clicked
       bColor = random(0,255);
  }
  stroke(rColor,gColor,bColor);
  drawcurve(width/2, height/2);
}

function drawcurve(x, y) {
push()
translate(x, y);    //centers

  beginShape();
  for (var i = 0; i < 600; i++) {           //creates the number of verticies
     t = map(i, 0, mouseX, 0, PI);            //creates theta

    r = 150 * mouseY * tan(t*100) ;        //the equation and makes r

    Xpos = r * sin(t);      //the equation to define the x position
    Ypos = r * cos(t);      //the equation to define the y position

    vertex(Xpos,Ypos); //center of the shape
  } 
    endShape();
pop();
} 

function setGradient(x, y, w, h, c1, c2, axis) {      //from p5js

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) {  // Left to right gradient
    for (var i = x; i <= x+w; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}

I started browsing the Mathworlds curve site to start my program.  Most of them were too complicated for me to understand but I finally found one and then asked a math major to explain it to me and two fellow programmers to help me so I would know how to incorporate the equation into my code.  After that I just added in some constants,had the mouseX position dictate whether or not the colors flashed, made the color change if the mouse is pressed, and mapped different parameters to the mouseX and mouseY positions.

sketch
I tried to use curve to depict a flower shapes with the change of color gradients.I used the curve equation from the site below.

//zhuoying Lin
//section a 
//zhuoyinl
//Project 07-composition with curves

var nPoint = 100;

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

function draw() {
    var colG = map(mouseX, 0, height, 180,140);
    background(255, colG, colG+mouseY*0.1);//make background change with curve
   
    for (var i= 0; i<10; i++) {
        var col = map(i, 0, 10, 100,200);//chaneg curve color
        stroke(col);
        strokeWeight(1);
        noFill();
        drawFourarcs(i*30, mouseY,i);
    }    
}

function drawFourarcs (x,y,r) {//draw curve

    push();
    translate(width/2, height/2);
    var x;
    var y;
    var r;
    var a = map(mouseY, 0, width, 1, 20);// size of pattern
    var n = map(mouseX, 0, height, 1,15)//division

    beginShape();
    for (var i = 0; i<nPoint; i++) {
        var t = map (i, 0, nPoint, 0, TWO_PI);
        x = (a/r)*(n*cos(t)-cos(n*t));
        y = (a/r)*(n*sin(t)-sin(n*t));
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}

Uhh, so I tried to pore over all the curves available on mathworlds and kept on getting frustrated over my lack of understanding (math is, unsurprisingly, my weakest subject… especially when there are letters involved). I ended up modifying the example Epitrochoid code displayed in the deliverables section for week 7 to turn it into something completely unusual and unique compared to its original form. I named the function ‘Spanish Dancer’ because it reminds me of the wiggling, gyrating movements of fabric that are signature aspects of the revered Spanish Dance technique. My final product looks vaguely like the result of the sun reflecting light in a swimming pool, I suppose. I think that the final product was enhanced greatly by the inclusion of the ghosting effect, varying levels of opacity, and the rotation of one of the curves.

 

sketch

/* Rhea Nayyar
rnayyar@andrew.cmu.edu
Section C
Project 07-3; Curve Composition
*/

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


function draw() {
    background(20,20,20, 30); //background with the ghosting command
    
    push();
    translate(width/2 - 30, height/2 - 30); //first curve shifted
    fill(70, 10, 200, 30); //Fluorescent Indigo-ish 
    spanishDancer(); // my curve function name
    pop();

    push();
    translate(width/2, height/2); //Second Curve Shifted
    rotate(20); //Tilt!
    fill(50, 160, 220, 20); //Somewhat greenish. Like a transluscent teal.
    spanishDancer(); //Second curve function called
    pop();
 

    push();
    translate(width/2 + 30, height/2 + 30); //Third curve shifted
    fill(100, 100, 220, 60); //It's kind of like a more intense version of periwinkle? 
    spanishDancer(); //third curve function called
    pop();
    
}

function spanishDancer(a, x, y) { //my curve
    var x;
    var y;
    
    var a = 80.0; //starts off with the same parameters as that example epitrochoid function on the deliverables page
    var b = a / 2.0;
    var h = constrain(mouseY / 15.0, 0, b);
    var ph = mouseX / 20.0;
    
    
    noStroke();
    beginShape(); //but then it gets wacked out by me playing with the parameters
    for (var i = 0; i < 100; i++) {
        var t = map(i, 0, 100, 0, TWO_PI);
        
        x = (a + b) * cos(t/2) - h * cos(ph + t*2 * (a + b) / b);
        y = (a + b) * sin(t*2) - h * sin(ph + t/2 * (a + b) / b);
        vertex(x,y);

        //lots of guessing and checking led to this happy, aesthetic accident. :)
    }
    endShape(CLOSE);
 


   
}

jinheel1_project-07

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-07

var nPoints = 100;
var angle = 0; //start angle for rotating (out of canvas)

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

function draw() {
	background(250);

    translate(width / 2, height / 2);
    if (mouseX > width) { //this one's for you, Anirudh
    	rotate(angle); //shape rotates in place
    }

    drawDeltoidCurve(); //calling helper function

    angle += 0.05; //increment for rotation
}

function drawDeltoidCurve() {
	// Deltoid
	// http://mathworld.wolfram.com/Deltoid.html

	var x; //curve in parametric form
	var y;

	var minSize = 80; //min size of shape
	var maxSize = 160; //max size of shape
	var mapA = map(mouseY, 0, width, minSize, maxSize); //maps size between minSize and maxSize
	var a = constrain(mapA, minSize, maxSize); //so that shape doesn't grow when mouseX beyond canvas
	var b = a / 3; //variable for curve equations
	var rot = constrain(mouseX / 30, 0, width / 30); //rotate according to mouseX

	fill("red"); //larger red circle
	ellipse(0, 0, 2 * a, 2 * a);

	fill(0);
	beginShape();
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, TWO_PI);

		x = 2 * b * cos(theta) + b * cos(2 * theta - rot); //parametric equations of curve
		y = 2 * b * sin(theta) - b * sin(2 * theta - rot);
		vertex(x, y);
	}
	endShape(CLOSE);

	fill("red"); //smaller red circle
	ellipse(0, 0, b, b);
}

Having to implement parametric equations felt daunting at first, but in a broader look, it was mostly plugging in the deltoid curve’s equation with the templates given in the prompt. The two red circles I made separately fairly easily, but I made them share variables with the deltoid curve that governed its size, so they would all grow proportionally.

P.S.,

Fun fact, if you spin the deltoid to the right past the canvas, then you get-
YOU ARE NOW UNDER MY GENJUTSU

curve

var x = [];
var y = [];
var con = 0;
var mult = 1;
var col = [];
var rectX = 0;
var rectY = 25;
var rpY;

function setup() {
    createCanvas(400, 425);
    rpY = height - rectY;
}

function draw() {
	background("lightPink");
  strokeWeight(.5);
  for (var i = 0; i < width; i ++) {
  var term = 12 * con * cos(i) * sin(i);
  x[i] = term * cos(i);
  y[i] = term * sin(i);
  line(x[i] + width/2,y[i] + height/2,x[i+1] + width/2,y[i+1] + height/2);
  }
  con = mult * con + 1;
  if (con > 500) {
  con = mult * con + 2;
  }
  if(con > 1000) {
  con = mult * con + 3;
  }
  if (con > 6000) {
  con = mult * con + 50;
  }
  if (con > 10000) {
  con = 0;
  }
  println(con);
  fill("black")

  rect(rectX,rpY,10,25);
}

function mouseDragged() {
  rectX = mouseX;
  if (rectX > width - 10) {
  rectX = width - 10;
  }
  if (rectX < 0) {
  rectX = 0;
  }
  mult = rectX/50;

}

structured around an astroid radial curve

move slider to adjust speed (epilepsy warning for higher settings, imo)

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-07

var nPoints = 300;
var a;
var x;
var y;
var posX;
var posY;
var color = 0;
var numLayer = 3;
var numCurve = 6;

function setup() {
    createCanvas(600,700);
}

function draw(){
    background(0);
    //constrain the x, y position of mouse;
    posX = constrain(mouseX, 0, width);
    posY = constrain(mouseY, 0, height);

    //control the amount that shift in x and in y direction with the position of mouse;
    var shiftY = map(posY, 0, height,1,5);
    var shiftX = map(posX, 0, width,1,5);

    //define unit of offsets;
    var intervX = width/10;
    var intervY = height/10;

    //generate three layer of multiple curves;
    for (var j = 0; j<numLayer; j++){
        for (var i = 0; i<numCurve; i++) {
            //cotrol the degree of curvatures with the change in mouse X;
            a = map(mouseX, 0, width, -width/3, width/2);
            //control the factor of scaling with the change of shift;
            var scaleX = shiftX/(3-j)*(i+1);
            var scaleY = shiftY/(3-j)*(i+1);
            //control the gradient;
            color = (i+1)*10*(j+3);
            drawConchoid(shiftX+i*intervX, shiftY+i*intervY,a,scaleX,scaleY,color);
        }
    }
}

// draw Conchoid of De Sluze Curve
function drawConchoid(sX, sY, a, scaleX, scaleY,color){
    push();
    stroke(color);
    //move the curvatures with the mouse;
    translate(posX,posY);
    beginShape(POINTS);
    for (var i = 0; i < nPoints; i++){
        var t =  map(i, 0, nPoints, 0, TWO_PI);
        x = (1/cos(t)+ a* cos(t))* cos(t);
        y = (1/cos(t)+ a* cos(t))* sin(t);
        x *= scaleX;
        y *= scaleY;
        vertex(x+sX,y+sY);
    }
    endShape();
    pop();
}

In this project I experimented with a lot of functions that create different curvatures, and I was mainly exploring the dynamic movement of the curves associating with the mouse.

I also tried to create black background in contrast with points of different gradient for a sense of space and depth.

sketch-90.js

var c1nPoints = 10; // Number of points for curve 1
var c2nPoints = 7; // Number of points for curve 2

function setup() {
    createCanvas(500, 500);
    frameRate(15);
}

function draw() {    
    // Draw the frame
    fill(255, mouseX, mouseY);
    rect(0, 0, width-1, height-1); 
    
    // Draw the curve
    push();
    translate(width / 2, height / 2);
        drawCurve1();
        drawCurve2();
    pop();
}

// Relying on class notes for drawCranioidCurve() for Week 7 Deliverables
// Drawing this curve:
// http://mathworld.wolfsram.com/Scarabaeus.html - Sextic curve

function drawCurve1() {
    strokeWeight(1.2);
    fill(mouseX, mouseY, 255);
    var x;
    var y;
    var r;
  
    var a = constrain((mouseX / width), 0.0, 1.0);
    var b = constrain((mouseY / height), 0.0, 1.0);
    // Color depends on x and y movements of mouse
    fill(mouseY, mouseX, 255);
    beginShape();
    for (var i = 0; i < c1nPoints; i++) {
        var t = map(i, 0, c1nPoints, 0, TWO_PI);

        // Curve 1 - Used equation from mathworld.com
        r = (b + mouseY) * cos(2*t) -
        (a + mouseX) * cos(t);

        // Using code from class notes under "Deliverables Week 7"
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawCurve2() {
    strokeWeight(0.5); 
    var x;
    var y;
    var r;
    

    var a = constrain((mouseX / width), 0.0, 1.0);
    var b = constrain((mouseY / height), 0.0, 1.0);
    // Color depends on x and y movements of mouse
    fill(mouseX, mouseY, 255);
    beginShape();
    for (var i = 0; i < c2nPoints; i++) {
        var t = map(i, 0, c2nPoints, 0, TWO_PI);

        // Curve 2 - Used equation from mathworld.com
        r = (b + mouseX) * cos(2*t) -
        (a + mouseY) * cos(t);

        // Using code from class notes under "Deliverables Week 7"
        x = r * cos(t); 
        y = r * sin(t);
        vertex(x, y); 
    }
    endShape(CLOSE);
}

The process for creating the project this week was different from what I usually do.
Because it was difficult to visualize how changing certain elements of my code would change what I saw, I could not really draw a sketch to plan what I wanted to created.

I went on the website provided to us and just picked a curve and to be honest, I relied pretty heavily on the template code that was provided to us. The end result of this project far exceeded my expectations, and I am super happy with the final result!

I especially really like that at one point when you are moving your mouse (move your mouse to the far left near the middle of the canvas!), the curves create a star.