Category: Section A

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-07 */

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

function draw() {
    background(255);

/* mapping the colors so that it changes based on mouseX */
    var r = map(mouseX, 0, width, 140, 180);
    var g = map(mouseX, 0, width, 160, 190);

/* printing hypotrochoid */
    push();
    stroke(r, g, 255);
    strokeWeight(0.25);
    translate(width/2, height/2);
    drawHypotrochoid();
    pop();
}

function drawHypotrochoid() {
/* naming variables */
    var hypoX;
    var hypoY;
/* radius of hypotrochoid */
    var hypoRadius = 240;
/* hypotrochoid alteration with cursor */
    var a = map(mouseX, 0, width, 0, 5);
    var b = map(mouseY, 0, height, 0, 3);
    beginShape();
      for(var i = 0; i < 300; i ++) {
        var angle = map(i, 0, 200, 0, 360);
/* equation of hypotrochoid from the link */
        hypoX = (a - b) * cos(angle) + hypoRadius * cos((a - b) * angle);
        hypoY = (a - b) * sin(angle) - hypoRadius * sin((a - b) * angle);
        vertex(hypoX, hypoY);
      }
    endShape();
}

Thinking about the project that we did a couple weeks ago on string art, I focused on curves that bring lightness, tranquility, and balance in regards to symmetry and motion. The purpose of picking a hypotrochoid is the many ways in which the control points of each line or curve responds differently but respects the symmetry in balance.

Looking back at the hypotrochoid chart, that moment of the cursor provides the twelfth iteration, producing a modular set of filleted triangular curves.

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-07-Curves

var a = 40;
var b = 40;

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

function draw() {
    background(255);
    translate(width/2, height/2); // Sets all the curves to the center of the canvas
    drawAstroid1(); // Draws first curve
    drawAstroid2(); // Draws second curve
    drawAstroid3(); // Draws third curve
    drawAstroid4(); // Draws fourth curve
    if (mouseX >= 0 & mouseX <= width/2) { // Makes silver side shrink/appear and red side grow/disappear
        a += -0.1 * mouseY;
        b += 0.1 * mouseY;
    }
    if (mouseX > width/2 & mouseX <= width) { // Makes red side shrink/appear and silver side grow/disappear
        a += 0.1 * mouseY;
        b += -0.1 * mouseY;
    }
}

function drawAstroid1() { // First curve
    beginShape();
    fill('red');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(500 * (cos(i)**a), 500 * (sin(i)**a));
    }
    endShape(); 
}

function drawAstroid2() { // Second curve
    beginShape();
    fill('silver');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(-500 * (cos(i)**b), 500 * (sin(i)**b));
    }
    endShape(); 
}
function drawAstroid3() { // Third curve
    beginShape();
    fill('red');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(500 * (cos(i)**a), -500 * (sin(i)**a));
    }
    endShape(); 
}
function drawAstroid4() { // Fourth curve
    beginShape();
    fill('silver');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(-500 * (cos(i)**b), -500 * (sin(i)**b));
    }
    endShape(); 
}

I found this project to be really interesting because I found myself using functions that I had not used in the past. I decided in this project that I wanted to have contrasting sides where when something was happening to one side, the opposite was happening to the other. This is what ended up happening with the silver and red sides of the canvas. When one side expands, the other shrinks and vice versa. This is due to both mouseX and mouseY however each one has their own distinct properties. MouseX controls how the two sides behave while mouseY controls the speed at which they happen. This project helped me better understand how to have separate entities behave in similar yet contrary ways.

sketch

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

function draw(){
	background(50);
	push();
	translate(width/2,height/2);
		push();
			for (var i = 0; i < width; i+=4) {
			translate(i,i)
			rotate(PI * mouseX/150);
			drawDevilCurve();
		};
		pop();
	pop();
}

function drawDevilCurve(){
	var range = 50;
	var b = map(mouseY, 50, height-50, 0, 50);
	var a = map(mouseX, 50, height-50, 0, 50);

	noFill();
	stroke(200);
	beginShape();
	for (var i = 0; i < range ; i++) {
		var t = map (i, 0, range, 0,  2* PI);
		var SINS = sq(sin(t));
		var COSS = sq(cos(t));
		var x = cos(t) * sqrt(((sq(a) * SINS) - (sq(b)*COSS)) / (SINS - COSS));
		var y = sin(t) * sqrt(((sq(a) * SINS) - (sq(b)*COSS)) / (SINS - COSS));
		vertex(x,y);
	}
	endShape();
}

For this project, I began with a Devil’s Curve. Upon its creation, I began playing around with the different parameters of the curve to find an interesting shape. The two parameters involving the location of the mouse includes the different shape that the function would create and the location in which the curves would spiral.

http://mathworld.wolfram.com/DevilsCurve.html

sketch

// Sara Frankel
// sfrankel
// Project 07
// Section A

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

var perwidth = 480.0; 
var constrainmin = 1.0;
var constrainmax = 1.4;

function draw() {
	
	background('pink');
	var changecenter = width/4 * mouseX / perwidth * constrain(1 - (mouseY / perwidth), constrainmin, constrainmax); // variable to insert into drawDevilsCurve to help assiciate its position from the 
																													// center curbe proportionately in both the x and y direction with the mouse

	//center curve
	drawDevilsCurve(true, width/2, height/2, 180, 150, 100);
	drawDevilsCurve(false, width/2, height/2, 180, 150, 100);
	
	//top left curve
	drawDevilsCurve(true, width/2 - changecenter, height/2 - changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 - changecenter, height/2 - changecenter, 40, 30, 35);
	
	//bottom left curve
	drawDevilsCurve(true, width/2 - changecenter, height/2 + changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 - changecenter, height/2 + changecenter, 40, 30, 35);

	//top right curve
	drawDevilsCurve(true, width/2 + changecenter, height/2 - changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 + changecenter, height/2 - changecenter, 40, 30, 35);

	//bottom right curve
	drawDevilsCurve(true, width/2 + changecenter, height/2 + changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 + changecenter, height/2 + changecenter, 40, 30, 35);
}

//-------------------------------------------------------

function drawDevilsCurve(isSide, centerX, centerY, maxA, maxB, nPoints) {
	
	var x;
	var y;
	var hx = mouseX / perwidth; //puts mouseX on a percent scale
	var hy = mouseY / perwidth; //mouseY on a percent scale
	var a = maxA * hx; //correlates maxA and hx for shape below
	var b = maxB * hy; //correlates maxB and hy for shape below
	var t = radians(2 * a); //angle of shape in relation to a

	beginShape();
	for (var i = 0; i < nPoints; i++) { //for loop to create the devils curve shape

		colorMode(HSB);
		stroke(280 * i, map(100 - i, 100, 0, 60, 0), 100 * i); //maps the color so that each curve corrolates in color (dependant on how many points are on the shape) in terms of pink
		
		var t = map(i, 0, nPoints, 0, TWO_PI); //maps the angle of the curve to corrolate with the number of points and i
		x = cos(t) * sqrt(((a * a) * (sin(t) * sin(t)) - (b * b) * (cos(t) * cos(t)) / (sin(t) * sin(t)) - (cos(t) * cos(t))));
		y = sin(t) * sqrt(((a * a) * (sin(t) * sin(t)) - (b * b) * (cos(t) * cos(t)) / (sin(t) * sin(t)) - (cos(t) * cos(t))));
		
		if(isSide){ //if statement that flips the curve over y=x so that it creates the same curve perpendicular to the original
			var temp = x;
			x = y;
			y = temp;
		}

		vertex(x + centerX, y + centerY); //draws curve
		vertex(-x + centerX, -y + centerY);	//draws inverse of curve (gives it the cool pointy look)

	}

	endShape(CLOSE);
	noFill();

	
	
}

When I was looking through the catalog of curves, there was something that caught my eye about the devils curve. The proportions and visual aspects fascinated me. I decided to make almost these flower shapes in proportion of one another (as well as the mouse) and track along more or less the y = x plane. Screenshots as follow:

Pictured is what to expect when the shape is almost as small as it can go. It is a plus shape surrounded by smaller “+”s.

Pictured is medium size expected when x and y are closer to the center

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Project-07


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

function draw() {
	background(81,60,85);
    push();
    translate(width / 2, height / 3);

	drawHypotrochoid();
	drawHypocycloid();
	drawEpicycloid();

	pop();

	drawFlower(40,20);
    
}

function drawFlower(x,y) {

    translate(x, y);
	drawHypotrochoid();
	drawHypocycloid();
	drawEpicycloid();



}

function drawHypotrochoid() {
	var x;
	var y;

	var a = 100; //radius
	//var a = map(mouseX,0,width, 50,90);
	var b = 20; //spirograph radius

	//var b = map(mouseX,0,width,5,20);
	 //distance pen to center of spirograph

	var h = map(mouseX, 0, width, 40,60);

	
	//var h = map(mouseX, 0, width, 40,60);

	angleMode(DEGREES);
	stroke(189,230,137);
	fill(82,82,115);

	beginShape();


	for (var t = 0; t < 360; t++) {
		x = (a - b) * cos(t) + h * cos(((a - b)/b) * t);
		y = (a - b) * sin(t) - h * sin(((a - b))/b * t);


	
		vertex(x,y);


	}

	endShape(CLOSE);



}

function drawHypocycloid() {
	var x;
	var y;

	var a = 50; //radius
	//var a = map(mouseX,0,width, 50,90);
	var b = 10; //spirograph radius
	var n =  a/b;

	angleMode(DEGREES);

	stroke(98,210,159);
	fill(57,138,166,70);

	beginShape();
	var multiple = map(mouseY,0,height, -1,1)

	for (var phi = 0; phi <360; phi ++) {
		
		x = (a/n) * ((n-1) * cos(phi) - cos((n-1) * phi));

		y = (a/n) * ((n-1) * sin(phi) + sin((n-1) * phi));

		vertex(multiple *x,multiple *y);

	}
	endShape(CLOSE);
}

function drawEpicycloid() {
	var x;
	var y;

	var a = 40; //radius
	//var a = map(mouseX,0,width, 50,90);
	var b = 5; //spirograph radius

	angleMode(DEGREES);


	beginShape();


	var multiple = map(mouseY, 0, height, 1,2);;

	for (var phi = 0; phi <360; phi ++) {
		
		x = (a+ b) * cos(phi) - b * cos(((a + b)/b) * phi);

		y = (a + b) * sin(phi) -  b * sin(((a+b)/b) * phi);

		vertex(multiple *x, multiple *y);




	}
	endShape(CLOSE);

}