## Project-07-Curves

sketch
``````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

``````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));
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);
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);
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);
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
``````//Isabel Xu
//yuexu@andrew.cmu.edu
//Section A
//Project-07
var yoff = 0;
var angle_incr = 0.1;
var max_noise = 100;

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

}

function draw() {

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

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 x = r * cos(a);
let y = r * sin(a);

curveVertex(x,y);
}

}
endShape(CLOSE);

yoff += 0.06

}
``````

## Project 7: Curves

sketch
``````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
``````
//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() {
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.

``````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
}
``````