Month: October 2018

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.