Category: Section E

sketch
This project was quite difficult for me to execute. With the link provided I was able to look at different algebraic functions and graphs; however, once I looked at the mathematical
functions themselves I got really confused. Overall, I am not really proud of this project and hope to be able to incorporate mathematical functions into my code in the future.

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-07
}
*/

var nPoints=100

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

function draw() {
    background(0,50,50);
    var mX = mouseX; //establishes mouseX and mouseY function
    var mY = mouseY;
    noFill();
    strokeWeight(1);


//mouse position is constrained to the canvas size
    mouseX=constrain(mX, 0, width);
    mouseY=constrain(mY, 0, height);

    mPos=dist(mX,mY,width/2,height/2);
    a= map(mPos,0,width,0,480);

    eight(); //draws first eight loop
    circleOne(); //draws ellipse

//draws second eight loop
    push();
    rotate(HALF_PI);
      for(var i=0;i<nPoints;i++){
        var r = map(mouseX,0,width,100,255);
        var g = map(mouseX,0,width,100,200);
        var b = map(mouseY,0,height,100,100);
        stroke(r/2,g*3,b)
        // stroke(r,g,b)
          strokeWeight(1.5);

          var t = map(i,0,nPoints,0,TWO_PI);

          x=a*sin(t);
          y=a*sin(t)*cos(t);

          rotate(PI); //rotates figure
          x2=a*sin(t*2)*PI;
          y2=a*sin(t*2)*cos(t)*PI;

        vertex(x2,y2)

      endShape(CLOSE);
    pop();
    }
}
function eight(){ //draws first eight loop
  var r = map(mouseX,0,width,255,100); //changes color based on where mouseX and Y is
  var g = map(mouseX,0,width/10,200,100);
  var b = map(mouseY,0,height,80,100);
  stroke(r,g,b)

    strokeWeight(3);
    // stroke(r,g,b)
    var x;
    var y;

    beginShape();

      translate(width/2,height/2);

      for(var i=0;i<nPoints;i++){
        var t = map(i,0,nPoints,0,TWO_PI);

        x=a*sin(t);
        y=a*sin(t)*cos(t);
      vertex(x,y);

    endShape(CLOSE);
}
}
function circleOne(){ //draws the circle
  strokeWeight(1)
  var r = map(mouseX,0,width/4,100,300);
  var g = map(mouseX,0,width/4,180,200);
  var b = map(mouseY,0,height*6,100,200);
  for(var i=0;i<nPoints;i++){ //draws the loop of ellipse
    ellipse(0,0,a*i,a*i)
  }
}

sketch
I was really intrigued by the hypotrochoid curve and how it was drawn the site itself. Through this project I was able to play around with the functions of cos and sin which I havent been able to delve into before. It was interesting to play with the numbers and see what different shapes appeared because of the repetitively drawn lines.

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project-07 Composition with Curves*/

var nPoints = 200
function setup() {
    createCanvas(480, 480);
    		frameRate(15);

    
}

function draw() {
	background(200,34,164);
	push();
	//into middle
	translate(width/2, height/2);
	drawHypotrochoidCurve();
	pop();
}



function drawHypotrochoidCurve(){
		//Hyptotrochoid
		//Link: http://mathworld.wolfram.com/Hypotrochoid.html

		var x;
		var y;
		
		var h = 15;
	

		var a = map(mouseX, 0,width,100,300); // (wat u want to effect, orginal range, new range) makes the variables interactive
		var b = map(mouseY, 0, height, 100,300);

		stroke(210,36,117);
		strokeWeight(2);

		beginShape();
			for(var i = 0; i <nPoints; i ++){

				// set variable t within the for loop so it keeps on looping (this acts as the angle for mouse)
				var t = map (i, 0, nPoints, 0 , 330 );

					// equation for the curve
				x = (a - b) * cos(t) + h * cos((a - b) * t); 
				y = (a - b) * sin(t) - h * sin((a - b) * t);
				vertex(x,y); // setting the patternn in the middle

			}
		endShape(CLOSE);






}

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 07
*/

let x = 0;
let y = 0;
let ang = 90;
let col = 0;
let moveC = 1;

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

function draw() {
  background(random(100, 255), random(200, 50), random(0, 255), 5);
  stroke(100, 100, 40);

  //moving the color value
  col += moveC;
  fill(col + 50, 20, 20);
    if (col >= 100 || col < 0) {
      moveC = moveC * -1;
  }

  //rotate around the center
  translate(width/2, height/2);
  //rotation increments
  rotate(x);
  x+=1;
  //draws ellipse
  for (i = 0; i < 360; i += 13) {
  ellipse(-mouseX + cos(i++) * width / (400 / 72), width / 20 + sin(i++) * width / (400 / 72), width / 20 + mouseX, width / 20 -mouseY);
  }



}

I was not a fan of this project, the curves were all so daunting and cos/sin is really something that confuses me. I’m satisfied with the spiral the circles rotate around according to your mouse, but this was not a great project for me. Hopefully next week I can produce something more aesthetically pleasing.

I liked this project a lot because it began to delve into more abstract realms. While the execution was difficult, I had a lot of fun in the process exploring various types of graphing functions and applications. In trying to determine how to build my proposed idea, I was able to rekindle a long held interest in computational art as well as explore the mathematical side of computing. I believe this project has a host of potential applications that will bode well for me in future projects and courses.

sketch

/* Jason Zhu
jlzhu@andrew.cmu.edu
Section E
Project 07-Curves
*/

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

function draw() {
	// define constrain variables
	var cx = constrain(mouseX, 0, 480);
	var cy = constrain(mouseY, 0, 480);
	// define color variables
  	var red = cx * .3
  	var green = cy * .3
  	var blue = 100
  	// define additional variables and draw shapes
	background(red * .3 - 15, green * .3 - 15, blue * .3 - 15);
	drawhypotrochoid();
	drawhypotrochoid2();
	drawflowerellipse();
	drawflowerellipse2();
	frameRate(999);
}

function drawhypotrochoid() {
	push();
	translate(width / 2, height / 2);
	noFill();
	// define constraint function
    var cy = constrain(mouseY, 0, 480);
	var cx = constrain(mouseX, 0, 480);
	// define draw variables
	var r1 = 360;
    var a1;
    var b1;
	// define color variables
  	var red = cx * .25
  	var green = cy * .25
  	var blue = 100
  	// define stroke
    strokeWeight(10);
	stroke(red, green, blue);
  	// define shape parameters
    // define alternation parameters
    var a1 = map(cx, 0, width, 0, 25);
    var b1 = map(cy, 0, height, 0, 1);
    // define shape parameters
    beginShape();
    rotate(radians(angle));
		for(var t = 0; t < 360; t += 2) {
			var angle = map(t, 0, 360, 0, 360);
        // equation
			var x = (a1 - b1) * cos(angle) + r1 * cos((a1 - b1) * angle);
			var y = (a1 - b1) * sin(angle) - r1 * sin((a1 - b1) * angle);
			curveVertex(x, y);
			}
		endShape();
    pop();
}

function drawflowerellipse(){
	translate(width / 2, height / 2);
	noFill();
  	// define constrain variables
	var cx = constrain(mouseX, 0, 480);
	var cy = constrain(mouseY, 0, 480);
	// define draw variables
  	var angle = map(cx, 0, width, 0, 360);
  	var a2 = 100 + (.2 * cx);
  	var b2 = 100 + (.2 * cx);
  	// define color variables
  	var red = cx * .6
  	var green = cy * .6
  	var blue = 100
  	// define stroke
    strokeWeight(1);
	stroke(red, green, blue);
  	// define shape parameters
  	beginShape();
	rotate(radians(angle));
  	for (var t = 0; t < 160; t +=2.8){
	    var x = a2 * (cos(t));
	    var y = b2 * (sin(t));
	    curveVertex(x,y);
		}
	endShape();
}

function drawflowerellipse2(){
	noFill();
  	// define constrain variables
	var cx = constrain(mouseX, 0, 480);
	var cy = constrain(mouseY, 0, 480);
	// define draw variables
  	var angle = map(cx, 0, width, 0, 360);
  	var a2 = 30 + (.2 * cx);
  	var b2 = 30 + (.2 * cx);
  	// define color variables
  	var red = cx * .6
  	var green = cy * .6
  	var blue = 100
  	// define stroke
    strokeWeight(1);
	stroke(red, green, blue);
  	// define shape parameters
  	beginShape();
	rotate(radians(angle));
  	for (var t = 0; t < 160; t +=3.8){
	    var x = a2 * (cos(t));
	    var y = b2 * (sin(t));
	    curveVertex(x,y);
		}
	endShape();
}

function drawhypotrochoid2(){
	push();
	translate(width / 2, height / 2);
	noFill();
	// define constraint function
    var cy = constrain(mouseY, 0, 480);
	var cx = constrain(mouseX, 0, 480);
	// define draw variables
	var r1 = 360;
    var a1;
    var b1;
	// define color variables
  	var red = cx * .3
  	var green = cy * .3
  	var blue = 100
  	// define stroke
    strokeWeight(5);
	stroke(red * .3 - 15, green * .3 - 15, blue * .3 - 15);
  	// define shape parameters
    // define alternation parameters
    var a1 = map(cx, 0, width, 0, 25);
    var b1 = map(cy, 0, height, 0, 1);
    // define shape parameters
    beginShape();
    rotate(radians(angle));
		for(var t = 0; t < 360; t += 2) {
			var angle = map(t, 0, 360, 0, 360);
        // equation
			var x = (a1 - b1) * cos(angle) + r1 * cos((a1 - b1) * angle);
			var y = (a1 - b1) * sin(angle) - r1 * sin((a1 - b1) * angle);
			curveVertex(x, y);
			}
		endShape();
    pop();
}

screenshot at the maximum width and minimum height of the canvas.

mouse X and mouse Y at the minimum width and height of the canvas.

mouse X and mouse Y at the maximum width and height of the canvas.

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-07
*/


var nPoints = 100;


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


function draw() {
    background(255);
    
    // draw the frame
    fill(0); 
    noStroke();

    stroke(0);
    noFill(); 
    rect(0, 0, width-1, height-1); 
    
    translate(width / 2, height / 2);
    drawEpicycloidCurve();
}

//--------------------------------------------------
function drawEpicycloidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    
    var x;
    var y;
    
    var a = 80.0;
    var b = a / 2.0;

    //Uses mouseX and mouse Y to define the number of petals and overall scale of curve
    var n = round(dist(mouseX,mouseY,width/2,height/2)/5);
    
    fill(255, 200, 200);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (n + 2) * (cos(t) - cos((n + 1) * t));
        y = (n + 2) * (sin(t) - sin((n + 1) * t));

        vertex(x, y);
    }
    endShape(CLOSE);    
}

This was a really hard project to complete. It was hard translating the functions into code, seeing as I don’t really know much math anymore. It took lots of trial and error trying to navigate which variables controlled what in my function. I’m quite happy with the results though, I think it is a very pretty display.