Project-07-Curves

var x ;
var y ;

function setup() {
    createCanvas(480, 480);
    strokeWeight(0.7);
    frameRate(5);

}

function draw() {
    background(10, 20, 60);
    translate(89,89);
    for (var j = 1; j <=2 ; j++ ){ //setting up 2x2 grid for circles 
        for (var k = 1; k <=2 ; k++){
            push();
            translate (j*100,k*100); //moving the grid to the center
            drawpattern();
            pop();
        }
    }

}

function drawpattern() {
    var a = map(mouseX, 0, height, 10, 80); //establishing variables that lead the cruves to vary
    var b = map(mouseX, 0, width, 10, 20);
    var h = map(mouseX, 0, width, 0, 100);

    noFill();
    stroke(mouseY, mouseX, 200);
    beginShape(); //drawing geometry
    for (var n=0; n <=800; n++) {
        var Deg = map(n, 0, 100, 0, TWO_PI); 
        x = (a-b)*cos(Deg) + h*cos(((a-b)/b)*Deg);
        y = (a-b)*sin(Deg) - h*sin(((a-b)/b)*Deg);
        vertex(x, y);
    }
    endShape();


}

I wanted to give this piece as much variation in structural form as I could.

Project – 07

sketch

//Shaun Murray, 
//shaunmur - Section B

var nPoints = 2500
var R, G, B;
var mX, mY



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

function draw() {
    mX = mouseX
    mY = mouseY

	background(mX - 75, mY - 50, mX - 150);
	push();
	translate(mX, mY);
	epi(0, 0);
	pop();

	push();
	translate(mX - 100, mY - 100);
	epi(0, 0);
	pop();

	push();
	translate(mX + 100, mY + 100);
	epi(0, 0);
	pop();

	push();
	translate(mX + 100, mY - 100);
	epi(0, 0);
	pop();

	push();
	translate(mX - 100, mY +100);
	epi(0, 0);
	pop();

	push();
	translate(mX - 200, mY);
	epi(0, 0);
	pop();

	push();
	translate(mX, mY + 200);
	epi(0, 0);
	pop();

	push();
	translate(mX + 200, mY);
	epi(0, 0);
	pop();

	push();
	translate(mX - 200, mY + 200);
	epi(0, 0);
	pop();

	push();
	translate(mX + 200, mY + 200);
	epi(0, 0);
	pop();
}

function epi(x, y) {
	var a = map(mouseX, 0, 400, 0, 50);
	var b = map(mouseY, 0, 400, 10, 90);
	R = mouseX
	G = mouseY + 50
	B = mouseY

    stroke(R, G, B);
    noFill();
    beginShape();
    for (let i = 0; i < nPoints; i++) {
        var theta = map(i, 0, 100, 0, TWO_PI);
        var x = (a + b) * cos(theta) - b*cos(((a + b) / b) * theta);
        var y = (a + b) * sin(theta) - b*sin(((a + b) / b) * theta);
        vertex(x, y);
    }
    endShape();

}

A visual representation of what you might see when you rub your eyes with your fists.

Project-07

Heying Wang

heyingw@andrew.cmu.edu

sketch

var nPoints=100;
function setup() {
    createCanvas(480, 480);
    background(220);
    frameRate(5);
   
}

function draw() {
    var x;
    var y;
    
    //constrain mouseX and mouseY
    constrain(mouseX,0,width);
    constrain(mouseX,0,height);

    //limite the size of the astroid with map method
    //sets up a constantly chaging background
    var a = map(mouseX,0,width,20,100);
    var b=  map(mouseY,0,height,20,100);

    background(100+a,150-b,100+b-a);
    for(i=0;i<=200;i++){
        fill('yellow');
        circle(random(width),random(height),1,1)
    }


    //draw one large astroid at the center 
    fill(a,b,50);
    translate(width/2+random(-2,2),height/2+random(-2,2)); 
    astroid(a,b); 
     
    fill(random(250),random(250),random(250));
    heart(a);
   
    push();
    //the one on the bottom right
    translate(width/4+random(-2,2),height/4+random(-2,2)); 
    rotate(radians(mouseX));  
    fill(a,b,160);
    astroid(a,b);
    
    fill(random(250),random(250),random(250));
    heart(a);
    
    //the one on the top left
    pop();
    push();
    translate(-width/4+random(-2,2),-height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b);
 
    fill(random(250),random(250),random(250));
    heart(a);
    //the one on the top right 
    pop();
    pop();
    push();
    translate(width/4+random(-2,2),-height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b); 
    fill(random(250),random(250),random(250));
    heart(a);
 
    //the one on the bottom left
    pop();
    pop();
    translate(-width/4+random(-2,2),height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b); 
    fill(random(250),random(250),random(250));
    heart(a);
       

}

//draw astroid and the lines
function astroid(a,b){
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a*pow(cos(t),3);
        y = b*pow(sin(t),3);
        vertex(x, y);
    }
    endShape(CLOSE);
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a*pow(cos(t),3);
        y = b*pow(sin(t),3);
        strokeWeight(0.2);
        stroke('wight');
        line(x,y,0,0);
    }
   
}
//draw heart
function heart(a){
    k=map(a,0,100,0.5,1.2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x =k*16*pow(sin(t),3);
        y = k*13/16*13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

I made this constantly changing pattern with hearts curve and astroid curve. The background color corresponds to the position of mouse x and mouse y.

The size of the astroid curve and the heart curve also depends on where the user places he mouse. They can become as narrow as a pointer or as wide as a square. They will also be rotating around the center as the mouse move clockwise or anti-clockwise.

Thus, the user can interact with the page by moving their mouse around to create their unique, desired pattern.

Project-07-Curves

The project is based on the idea of using movement to capture the growing motion of a natural organism such as a sea creature or a human body part. Each of the new shape are overlap over the previous shape which show a processional motif on the canvas. I also add noise value into the function to allow the curves to offset and performing in a flowing state.

sketch Download

//Isabel Xu
//yuexu@andrew.cmu.edu
//Section A
//Project-07
var yoff = 0;
var max_radius = 100;
var angle_incr = 0.1;
var max_noise = 100;

function setup() {
    createCanvas(480, 480);
    background(0);
    frameRate(20);

}

function draw() {
	let max_radius = dist(mouseX,mouseY,width/2,height/2);
	let max_noise = max_radius;

	noiseDetail(1, 0.8);
	fill(253,242,220);
	translate(width/2, height/2);

	for (let radius = 0; radius < max_radius; radius += 1){
		beginShape();
		stroke(244,109,41);
		for (let a = 0; a < TWO_PI; a += angle_incr){
			//Use mouseX and mouseY to define offset value
			let xoff = cos(a) + 1;
			let offset = map(noise(xoff, sin(a) + 1 + yoff), 0 , 1,-max_noise, max_noise);
		
		
			let r = radius + (offset * map(radius,0,max_radius, 0.1, 1));
			let x = r * cos(a);
			let y = r * sin(a);


			curveVertex(x,y);
	}


	}
	endShape(CLOSE);

	yoff += 0.06

}

Project 7: Curves

sketch Download

var a = 0; //radius of exterior circle
var b = 0; //radius of interior circle
var h = 0; //distance from center of interior circle

var r;
var g;
var b;

var theta = 0; //angle


function setup() {
    createCanvas(500, 500);
    background(220);

}

function draw() {
    r = map(mouseX, 0, width, 45, 191);
    g = map(mouseX, 0, width, 16, 175);
    b = map(mouseY, 0, height, 105, 225);
    background(r, g, b);
    for (var x = 0; x <= width; x += 70) {
        for (var y = 0; y <= height; y += height/5) {
            push();
            translate(x, y);
            drawHypotrochoid();
            pop(); 
        }
    }
}


function drawHypotrochoid() {
    noFill();
    r = map(-mouseX, 0, width, 107, 24);
    g = map(-mouseX, 0, width, 67, 162);
    b = map(-mouseY, 0, height, 67, 162);
    stroke(r, g, b);
    
    a = map(mouseX, 0, width, 1, width/10);
    b = 20;
    h = map(mouseY, 0, height, 1, height/5);
    
    beginShape();
    for (var i = 0; i < 1000; i++) {
        var x = ((a-b) * cos(theta)) + (h * cos((a-b)/b * theta));
        var y = ((a-b) * sin(theta)) - (h * sin((a-b)/b * theta));
        var theta = map(i, 0, 100, 0, TWO_PI);
        vertex(x, y);
    }
    endShape();

}

I chose the hypotrochoid curve because when I was experimenting with it, so many different patterns came out of it and I wanted the result to have as many variations as possible. So as you move your mouse up, down, or diagonal, the curve patterns would change every few movements.

Project-07-Curves

For this project, I was interested in the different depictions that were shown in the example for how to generate a circle curve. I thought it would be fun to try and draw a circle, but with a specific math curve. I chose the petal curve, and created a code that allowed you to manipulate the shape and frequency of the curve based on the position of the mouse. At first, it looks like a relatively pattern, with the petal curve rotating in the center, and its shape becoming skewed the greater the mouseX position it. However, if the mouse is pressed, then the pattern becomes more intricate, with the curves increasing in frequency to create a void, or circle, in the center. I had difficulty being able to take the curve a step further to make it more dynamic to look at. At first I chose a much more complicated curve, but I could not get the parentheses right while typing it in and it never looked correct!

peachsketch

var nPoints = 100
var angle = 0
var m;
var n;

function setup() {
  
  createCanvas(400, 400);
  m = width/2
  n = height/2
}

function draw() {
  background(0);
  frameRate(20)
  drawPetalCurve(m,n);
  if (mouseIsPressed){ // if mouseIsPressed, draws higher frequency of rotating petal curves
    for (j= 0; j<10;j++){
    drawPetalCurve(m,n);
  }
}
 
}

function drawPetalCurve (m,n){
  var x; 
  var y;
  var a = 100
  var b = 100
  var p = (constrain(mouseX, 50, 300))/50 //change dimensions of curve based on mouse location
push();
stroke(255)
noFill();
  translate(width/2, height/2) // curve drawn at center
beginShape();
  for (var i = 0; i < nPoints; i++) {
    rotate(angle)
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = p*a*cos(t)*(sin(t)*sin(t))	
        y = a*(cos(t)*cos(t))*sin(t) 
          vertex(m/2+x, n/2+y)
    angle+=0.1
       }
    endShape(CLOSE); 

pop();
   
}

Project 07: Composition with Curves

Curvehc

var nPoints = 600;

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

}

function draw(){
    background(0);
    //calling functions
    hypotrochoid();
    epicycloid();
}

function hypotrochoid(){
    //drawing hypotrochoid
    //https://mathworld.wolfram.com/Hypotrochoid.html
    push();
    noFill();
    stroke(57, 139, 173)
    translate(width / 2, height / 2);
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 70, 150);
    var b = map(y, 0, height, 0.5, 4);
    var h = constrain(a/2, 100, 200);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        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();
    pop();
}

function epicycloid(){
    //drawing epicycloid
    //https://mathworld.wolfram.com/Epicycloid.html
    push();
    translate(width / 2, height / 2)
    var x = constrain(mouseX, 0, width);
    var y; 
    var a = map(x, 0, width, 10, 20);
    var b = a / 30;
    var h = constrain(mouseY / 9, 0, 0.7 * height);
    var ph = mouseX / 25;
    fill(202, 223, 232, 70);
    stroke(90 + 98 * sin(millis() / 500), 174, 200); //making the color change smoothly
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
}

At first, I wasn’t really sure how I was supposed to do the project since it looked complex. I also didn’t know what type of shapes I should create either. However, using the mathematical formula turned out to be not as overwhelming as I thought it would be since they created the shapes for me. I tried doing this project by exploring different types of curves and ended up choosing hypotrochoid and epicycloid. I began by drawing the hypotrochoid first by plugging in different numbers. Once I got that in place, I thought it looked empty in the middle so I then added an epicycloid curve. Although it was challenging to figure out which variable controls what, it was satisfying to see the end result.

Project 07- Curves

sketch Download

//Shruti Prasanth
//Section C
//Project 07 Curves


var numPoints = 400;
function setup() {
    createCanvas(480, 480);
}


function draw() {
    background(105,179,183); //BLUE background
    
    for (var x = 80; x <= 460; x += 80) {   //number of elements in the grid
        for (var y = 80; y <= 460; y += 80) {
            push();
            translate(x, y);
            HypocycloidPedal();
            pop();
        }
    }

}

function HypocycloidPedal() {
    //radius
    var a = map(mouseX, 0, 480, 0, 120); 
    var b = map(mouseX, 0, 480, 0, 120);

    strokeWeight(mouseY/50, mouseX/50); //change in stroke thickness
    stroke(255); //WHITE 
    noFill();

  
    beginShape();
    for (var i=0; i<numPoints; i++) {
        var angle = map(i, 0, 100, 0, TWO_PI);
        var n = 8; //number of petals

        x = a * (((n-1) * cos(angle)) + (cos((n-1) * angle)) );
        y = a * (((n-1) * sin(angle)) - (sin((n-1) * angle)) );

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

For my project I was inspired by ornate printed patterns and mosaics. I wanted to make something that formed interesting shapes when the curves intersected and dynamically changed. Here are some of the screenshots of the different patterns that are created when you move your mouse around the canvas:

Project 07 – Curves

sketch

//TERESA LOURIE
//SECTION D
//PROJECT: INTERACTIVE CURVES
var x = 2;
var y = 2;

function setup() {
    createCanvas(480, 480);
    background(255);
    

}


function draw() {
    background(255);
	
	//figureeight();
	push();
	//for (i=0; i<500; i++){
		
		devilscurve();
	//}
	devilscurve2(); //draw both curves at once on white background
}

function figureeight(){
	push();
	translate(width/2, height/2);

	background(255);
	beginShape();
	stroke(0); 
	strokeWeight(1);
	noFill();

	//loop for curves 
	for(var i =0; i < 750; i++){
		
		stroke(map(mouseY, 0, 480, 0, 255), 0 ,0);
		var t = map(i, 0, 750, 0, 2*PI);
		var a = mouseX;
		var b = 1;
		
		

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


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

function devilscurve () { //devils curve function
	push();
	translate(width/2, height/2); //put it in the center
	
	beginShape();     //beginshape, using vertices along the equation
	strokeWeight(3);
	noFill();

	//loop for curves 
	for(var i =0; i < 3000; i++){
		
		stroke(0, 255, map(mouseY, 0, 480, 0, 255));
		var t = map(i, 0, width, -50, 100);
		var a = map(mouseX, 0, width, -50, 10);
		var b = map(mouseY, 0, height, -50, 50);
		
		

		x = cos(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));

		y = sin(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));
		


		vertex(x, y);
	}
	endShape();
	pop();
}
function devilscurve2 () { //devils curve function
	push();
	translate(width/2, height/2); //put it in the center
	
	beginShape();     //beginshape, using vertices along the equation
	strokeWeight(3);
	noFill();

	//loop for curves 
	for(var i =0; i < 3000; i++){
		
		stroke(255, map(mouseY, 0, 480, 0, 255), 0);
		var t = i
		var a = map(mouseX, 0, width, -50, 100);
		var b = map(mouseY, 0, height, -50, 50);
		
		

		x = cos(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));

		y = sin(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));
		


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

Project 07 – Curves

The inspiration behind this project was Viviani’s Curve, which is normally contained in 3D space, but can be represented from its front view on the 2D plane as a parabolic curve. I also animated a few circles moving along the curve to give it a bit more life. You can make some pretty interesting shapes, one of which is pictured below.

AAAAAAAAAAAAAAAAAAAAAAAA

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);

    // want to animate circles along curves
    circlePos = 0; // this follows the angle and is a global
}

function draw() {
    background(0);
    var angleIncr = 0.01; // hopefully leads to high definition curve
    var angle = 0;
    var dx, dy;
    var hw = width / 2; // "half width"
    var hh = height / 2;


    beginShape();
    fill(128, 128, 128, 128); // using RGBA
    stroke(128, 128, 128, 128);
    strokeWeight(1);
    // more understandable than using a for loop
    while (angle < 2*PI) {
        // aiming to use Viviani's Curve
        dx = sin(angle);
        dy = 2 * sin(0.5 * angle);

        // want to scale values based on mousePos
        dx *= mouseX - hw;
        dy *= mouseY - hh;

        vertex(dx + hw, dy + hh); // beginShape() doesn't work with translate()
        vertex(-dx + hw, -dy + hh);
        vertex(dy + hw, dx + hh);
        vertex(-dy + hw, -dx + hh);

        // increment angle
        angle += angleIncr;
    }
    endShape();

    angle = 0;
    // second while outside of beginShape()
    while (angle < 2*PI) {
        // aiming to use Viviani's Curve
        dx = sin(angle);
        dy = 2 * sin(0.5 * angle);

        // want to scale values based on mousePos
        dx *= mouseX - hw;
        dy *= mouseY - hh;

        // draw circle
        if (circlePos == angle) {
            fill(mouseX % 255, mouseY % 255, (mouseX + mouseY) % 255);
            circle(dx + hw, dy + hh, 15);
            circle(-dx + hw, -dy + hh, 15);
            circle(dy + hw, dx + hh, 15);
            circle(-dy + hw, -dx + hh, 15);
        }

        angle += angleIncr;
    }

    circlePos = circlePos + angleIncr;
    if (circlePos > 2*PI) circlePos = 0; // can't modulo properly with PI
}