Category: Project-07-Curves

sketch

//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -07- project

var nLines = 300;// the amount of lines

function setup() {
  createCanvas(550, 550);
  function decreaseLevel(){
  level = level-10;
  
 }
  
}

function draw() {
  background('lightpink');
  myShape();
}

function myShape() {
  
  var h = constrain(mouseY/5, 0, 200); //constrain shape 
  var w = constrain(mouseX/5, 0, 200);//constrain shape 

  var colR = map(mouseY, 0, height, 20, 30);//changes color on y
  var colG = map(mouseY, 0, height, 0, 160);
  var colB = map(mouseY, 0, height, 300, 76);
  
  fill(colR, colB, colG);
  
  push();
  translate(height/2, width/2);
  beginShape();
  for (var i = 0; i < nLines; i++) {
    var t = map(i, 0, nLines, 0,  TWO_PI); 
    
    var x = 200 * pow(cos(t * w),3);
    var y = 200 * pow(sin(t * h),3);
    
    
    curveVertex(x , y); // adding curve edges
  }
  endShape();
}
function mousePressed(){
  nLines = random(5, 360); // the number of lines and points shows randomly when mouse is Pressed
  
}

I used Astroid Radial Curve to create this form. I wanted to create a form with complexed lines, and get a doodle-like form. Random shapes are created when mouse is clicked. Overall shapes look like that they have random shapes however it also keeps the pattern at the same time. 

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project-07

var nPoints = 1000;
var radiusA = 100;
var radiusB = 20;
var n = 7;
var X;
var colorG;
var colorB;
var angle;
var scaleA;

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

function draw() {
	background(224, colorG, colorB);
	stroke(255);
	strokeWeight(3);

    X = constrain(mouseX, 0, width);
    //background color changes based on mouseX
    colorG = map(X, 0, width, 200, 100);
    colorB = map(X, 0, width, 150, 100);
    //the shapes rotate based on mouseX
    angle = map(X, 0, width, 0, 4 * TWO_PI);
    //the shapes change sizes based on mouseX
    scaleA = map(X, 0, width, 0, 2);

    //the epicycloid (the outer shape)
	push();
	translate(width/2, height/2);
	scale(scaleA, scaleA)
	rotate(angle);
	beginShape(LINES);
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, 6 * TWO_PI);
		var px = (radiusA + 2 * radiusB) / radiusA * ((radiusA + radiusB) * cos(theta) + radiusB * cos((radiusA + radiusB) / radiusB * theta));
		var py = (radiusA + 2 * radiusB) / radiusA * ((radiusA + radiusB) * sin(theta) + radiusB * sin((radiusA + radiusB) / radiusB * theta));
		vertex(px, py);
	}
	endShape(CLOSE)
	pop();

	//involute of the epicycloid (the in-between shape)
	push();
	translate(width/2, height/2);
	scale(scaleA, scaleA)
	rotate(-angle);
	beginShape(LINES);
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, 6 * TWO_PI);
		var px = (radiusA + radiusB) * cos(theta) - radiusB * cos((radiusA + radiusB) / radiusB * theta);
		var py = (radiusA + radiusB) * sin(theta) - radiusB * sin((radiusA + radiusB) / radiusB * theta);
		vertex(px, py);
	}
	endShape(CLOSE)
	pop();

	//pedal curve for an n-cusped hypocycloid (the inner shape)
	push();
	translate(width/2, height/2);
	scale(scaleA, scaleA)
	rotate(angle);
	beginShape(LINES);
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, 6 * TWO_PI);
		var px = radiusA * (((n-1)*cos(theta) + cos((n-1)*theta)) / n)
		var py = radiusA * (((n-1)*sin(theta) + sin((n-1)*theta)) / n)
		vertex(px, py);
	}
	endShape(CLOSE)
	pop();
}

I was intrigued by the idea to create flower shapes utilizing epicycloid and hypocycloid formula. I mapped the background color, size of the flower shapes, as well as its rotation to the position of mouseX. Because there are three layers of pedals, I alternated the direction of each rotation to create a more interesting shape. Also, by increasing the size of the flowers based on mouseX, the shapes appear as if it’s approaching you.

 

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-07-A
var nPoints = 100;
function setup() {
   createCanvas(800, 150);
}
function draw() {
   background(255);
   for (var dist = -50; dist < 800; dist = dist + 100){
   push();
   translate(dist, 110);
   drawCycloid();
   pop();
}
}
function drawCycloid () {
  var x;
  var y;
  var a = 20;
  var yfactor = mouseX / 25;//makes waves!
  var colR = map(mouseY, 0, height, 151, 0);//changes color of waves
  var colB = map(mouseY, 0, height, 209, 111);
  var colG = map(mouseY, 0, height, 255, 189);
  noStroke();
  fill(colR, colB, colG);
  beginShape();
  for (var i = 0; i < nPoints; i++){
    var t = map(i, 0, nPoints, 0, TWO_PI);
    x = a * (t - sin(t + yfactor));//equations for cycloids
    y = a * (1 + cos(t));
    vertex(x, y);
}
endShape(CLOSE);
}

I was at first very scared for this project since it was using math equations. After getting the initial shape I had a lot of fun playing with possible interactions the mouse could have with the equation. In this project I wanted to create an animation of waves that crash as you move your mouse across the horizontal axis. The waves change color as you move your mouse across the vertical axis. I really enjoyed learning about the many ways you could alter math equations to create animations and had fun by using trial and error to discover new ways to move the object.

siminl-project7

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 7

//Archimedean Spiral
//r = a * pow( theta, 1 / n)
var nPoints = 100; //number of points in each individual spiral
var radius; // radius of the polar function
function setup() {
    createCanvas(640, 640);
    frameRate(8);
}

function draw() {    
	background(0);
	var X = constrain(mouseX,0,width);
	var Y = constrain(mouseY,0,height);
	//it wont work if cursor is off canvas
    var gap1 = map(X , 0, width, 0, 6);
    var gap2 = map(X, 0 , width, 4,0);
    var ellipseD = map(Y, 0 , height, 0, 4);  
    var R = map(Y, 0 , height, random(0,255), random(0,255));
    var G = map(X, 0 , width, random(0,255), random(0,255));
    var B = map(X + Y, 0 , width + height, random(0,255), random(0,255));
    //RGB values are randomly selected and then influenced by X and Y to make 3 colors
    var angle = map(X,0,width,0,3 * TWO_PI);
    color1 = color(R,G,B);
    color2 = color(G,R,B);
    color3 = color(R,B,G);
    //three colors are used to fill the three spirals in the center
    
    
    spiral(width / 2 ,height / 2,gap1 + 2,ellipseD + 2,color3,angle,1);//largest spiral
    spiral(width / 2 ,height / 2,gap1 + 1.2,ellipseD + 1,color2,angle,1);//larger spiral
    spiral(width / 2 ,height / 2,gap1,ellipseD ,color1,angle,1); //small spiral
    //center spiral group

    spiral(width / 4 ,height * 3 / 4,gap2 + 2,2,255,angle,1);
    spiral(width / 4 ,height * 3 / 4,gap2 + 1,2,255,angle,1);
    spiral(width / 4 ,height * 3 / 4,gap2,2,255,angle,1); 
    //bottom left spiral group

    spiral(width * 3 / 4 ,height * 3 / 4,gap2 + 2,2,255,angle,1);
    spiral(width * 3 / 4 ,height * 3 / 4,gap2 + 1,2,255,angle,1);
    spiral(width * 3 / 4 ,height * 3 / 4,gap2,2,255,angle,1);
    //bottom right spiral group

    spiral(width * 3 / 4 ,height / 4,gap2 + 2,2,255,angle,1);
    spiral(width * 3 / 4  ,height / 4,gap2 + 1,2,255,angle,1);
    spiral(width * 3 / 4  ,height / 4,gap2,2,255,angle,1);
    //top right spiral group

    spiral(width / 4 ,height / 4,gap2 + 2,2,255,angle,1);
    spiral(width / 4 ,height / 4,gap2 + 1,2,255,angle,1);
    spiral(width / 4 ,height / 4,gap2,2,255,angle,1);
    // top left spiral group
 }
 function spiral(spiralX,spiralY,gap,ellipseD,shade,angle,tightness){
 //draw spiral at spiralX,spiralY
 //the gap between each loop is gap
 //the diameter of the small circles or squares that make up the spiral is ellipseD
 //fill with shade
 //rotate by angle
 //tightness controls how wound up the spiral is
 //when tightness = 1 it is the famous Archimedes' spiral
push()
    translate(spiralX, spiralY);
    //coordinates of center of spiral
    rotate(angle);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints,0,  6 * TWO_PI);
        //map theta so there will be nPoints of squares or circles drawn
        radius = gap * pow( theta, 1 / tightness);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        //coordinates of squares or circles
        noStroke();
        
        fill(shade);
        if(i % 2 == 0){
        rectMode(CENTER);
        rect(px - 5, py - 5, ellipseD, ellipseD);}
        else{
        ellipse(px - 5, py - 5, ellipseD, ellipseD);
        }
        //alternate squares and circles
    }
pop();
}

I searched through the functions provided on math world and selected this   spiral because it had a simplicity to it, yet it could have so many different forms. I created this starry night image because spirals remind me of stars. A problem that I had to deal with was that if you put too many circles in a single spiral each ring would align and look less interesting.

I chose the bicorn curve, which looks somewhat like an upside down smiley face, which is why I reversed it. I made the mouseX control the width, and the mouseY control the depth of the curve as well as the size of the dots drawing it.

x = 

y =

kdlee-project-07

var points = 50;

function setup() {
    createCanvas(600, 600);
    frameRate(25);
    fill("#B1EEE8");//teal
    noStroke();
}

function draw() {
    background(250);

    push();
    translate(width/2, 0);
    drawBicorn();
    pop();
}

function drawBicorn(){
  //http://mathworld.wolfram.com/Bicorn.html
    var g = map(mouseX, 0, width, 0, width/2);
    var y;
    var a = map(sq(mouseY), 0, height, 0, 1);

    beginShape();
    for (var i = 0; i < points; i++) {
        var t = map(i, 0, points, 0, radians(360))
        x = g * sin(t);
        y = (a * cos(t) * cos(t) * (2 + cos(t))) / (3 + sin(t) * sin(t));
      //  vertex(x,y);
        ellipse(x, y, map(mouseY, 0, height, 1, 10), map(mouseY, 0, height, 1, 10));
    }
    endShape(CLOSE);
}

sketch

var nPoints = 100;
var x;
var y;


function setup() {
    createCanvas(680, 620);
}


function draw() {
    background(106,187,244); //blue background
    peach(60, 190, 100); //top left peach
    peach(80, width-200, 100); //top right peach
    peach(90, 200, height-270); //bottom left peach
    peach(70, width-190, height-240); //bottom right peach
}

//a general function that will draw a peach with given variables
function peach(a, shiftX, shiftY) {
    push();
    translate(shiftX, shiftY);
    rotate(radians(270));
    var a;
    var b = a / 2;
    var h = constrain(mouseY/8, 0, b);
    var ph = mouseX/50; 
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a * cos(t) * (1-cos(t)) - h * cos(ph + t * a);
        y = a * sin(t) * (1-cos(t)) - h * sin(ph + t * a);
        fill(244,148,106);
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
}

For this project, I made a bunch of “peaches” that start off looking like normal peaches while your mouse is at the top of the canvas. Once your mouse goes down the canvas, the edges of each of the peaches creates a new shape. Moving your mouse left or right changes the rotation of those edge shapes. The original curve that I found on the MathWorld website was called a “Cardioid”. I rotated it 270˚ in order to look more like a peach. Then while playing around with the values set in my curve equation, I found that I could create different-looking edge shapes, like how the top left curve’s edges seem to make star shapes, and the bottom left curve’s edges create more of a loop shape.

I started off with the peach shape:

I then played around with making edge shapes that grow and rotate based on mouse location:

And then changed the colors and created a grid of varying peaches, with varying edge shapes!

mluria-07

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-07-Project
*/

var nPoints = 100; //points in the shape

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

function draw() {
  background("Lavender");
  noStroke();

  push();
  translate(height/2, width/2); //center the work
  drawCurve(); //call curve drawing
  pop();

}

function drawCurve() {
    // base: Hypotrochoid
    
    var x; //controlled by mouseY
    var y; 
    var x2; //controlled by mouseX
    var y2;

    var a = 300; //diam
    var b = a / 2; //radius
    var h = constrain(mouseY / 5, 0, a); //constrain the shape motion using mouseY
    var w = constrain(mouseX / 5, 0, a); //constrain the shape motion using mouseY

    beginShape();
    fill(180, 200, 255);

    //draw the shape according to the number of points it has
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); //map points to a full circle
        
        x = (a - b) * cos(t) + h * cos((a-b) / b * t); //Hypotrochoid formula
        y = (a - b) * sin(t) - h * sin((a-b) /b * t); 

        x2 = (a - b) * cos(t) - w * cos((a-b) * t); //Hypotrochoid formula with variations
        y2 = (a - b) * sin(t) * sin((a-b) * t);

        vertex(x, y); //draw the vertex
        vertex(x2, y2); //draw second vertex    
    }
    endShape(CLOSE);
    
}

function mousePressed() {
    //when mouse is pressed, the number of point is the shape changes
    nPoints = random(70,250);
}

In this project, I started with a pretty simple equation of a Hypotrochoid. The shape turned out to be quite standard, but I wanted to create something that would use curves in a way that would be very difficult to physically draw, but easily computed. This is why I liked the idea of playing with the equation, and so I did. I ended up changing parts of it, which resulted in a interesting shape that evolves and moves according to the mouse coordinates (And it changes with every click!). I think that using the curve equations allowed beautiful continuous motion of a changing shape.