rgriswol_project-07

``````/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 07
*
*/

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

function draw(){
background(0);
stroke(255, 0, 0);
strokeWeight(3);
fill(255);
drawScarabaeusCurve();
}

function drawScarabaeusCurve(){
// Scarabaeus:
// http://mathworld.wolfram.com/Scarabaeus.html

var x;
var y;
var nPoints = 500;
var a = mouseX;
var b = mouseY;

beginShape();
for(var i = 0; i < nPoints; i++){
var th = map(i, 0, nPoints, 0, TWO_PI);
var r = b * cos(2 * th) - a * cos(th);
x = r * cos(th) / 2 + width/2;
y = r * sin(th) / 2 + height/2;
vertex(x , y);
}
endShape(CLOSE);
}``````

For this project I decided to go with the “scarabaeus” curve, mostly because it had a cool name. I ended up liking the shape (reminded me of the suit of clubs) and originally I wanted to make nPoints = 5, because it made the shape turn into a star if you moved the mouse the right way, but I figured that kind of defeated the purpose of the whole “curve” bit.
I considered changing the colors too, but I liked the simple black-white-red look. I also find it interesting how you can end up making it just a circle.

Isabella Hong – Project 07

``````// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-07

//taken from example code
var nPoints = 100;

function setup() {
createCanvas(600, 600);
noStroke();
frameRate(15);
}

function draw() {
background(0, 0, 77);
//draw evolutes in multiple spots on canvas
push();
translate(width / 8, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 3.25, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 2, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 1.45, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 1.15, height / 2);
drawEllipseEvolute();
pop();

}

function drawEllipseEvolute() {
//http://mathworld.wolfram.com/EllipseEvolute.html
//will be used for evolute drawing equations
var x;
var y;
//keep within canvas
var a = constrain((mouseX / width), 0.5, 1);
var b = constrain((mouseY / height), 0.5, 1);
//taken from example code
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
//fill evolute
var colorR = map(mouseY, 0, height, 255, 192);
var colorG = map(mouseY, 0, height, 215, 192);
var colorB = map(mouseY, 0, height, 0, 192);
fill(colorR, colorG, colorB);
//equation to draw evolute
x = ((Math.pow(a + (mouseX / 100), 2) - Math.pow(b, 2)) / a * (Math.pow(cos(t), 3)));
y = ((Math.pow(b + (mouseY / 100), 2) - Math.pow(a, 2)) / b * (Math.pow(sin(t), 3)));
vertex(x, y);
}
endShape(CLOSE);
}

``````

For this project, the most difficult thing was getting the curve to draw properly and figuring out how to code the curve properly. The ellipse evolute curve was the only one that I could get to work and appear in the correct manner.

My inspiration for this project were stars and the night sky. As the mouse is moved, the “stars” enlarge or shrink and change from a gold to silver color. When the mouse is moved all the way to the far left, the stars almost “disappear”, representing an ultra dark night sky.

Sadie Johnson – Project 07 – Composition With Curves

``````//Sadie Johnson
//section C
//sajohnso@andrew.cmu.edu
//project 07

var nPoints = 100;

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

function draw() {
background(255);
push();
//centers design
translate(width / 2, height / 2);
drawCurve();
pop();
}

function drawCurve() {
var x;
var y;
//size is linked to mouse's distance from center
var a = int((dist(width/2,height/2,mouseX,mouseY))/2);
var h = mouseY/50;
var ph = constrain(mouseX / width, 30, 400);

fill('#98ddde'); //light blue
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
//equation of the curve
x	= a*(h*cos(t)-cos(h*t*ph))
y	= a*(h*sin(t)-sin(h*t*ph))
vertex(x, y);
}
endShape(CLOSE);

}

``````

The hardest part of this assignment was finding a function that made sense to me and looked interesting. After I found the correct function, I had a pretty tough time scaling it appropriately so the user could see all the complex designs that were formed when the X position and Y position of the mouse changed. In the first picture, my design was far too small. In the second, it looked bland because the image was so large it enveloped the whole screen. However, I think I have found a happy medium between the two extremes.

``````
//Section D
//Project-07

var Y_AXIS = 1;
var X_AXIS = 2;
var Xpos;
var Ypos;
var r;
var t;
var b1, b2, c1, c2; //p5js
var rColor = 255;
var gColor = 255;
var bColor = 255;

function setup() {
createCanvas(600, 600);
//Defines the colors, p5js
b1 = color(255);
b2 = color(0);
c1 = color(204, 102, 0);
c2 = color(0, 102, 153);
}

function draw() {
background(150);
setGradient(0, 0, width/2, height, b1, b2, X_AXIS);       //sets background color p5js
setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);      //sets background color p5js
if(mouseX<width/3){
rColor = map(random(0,255),mouseX,0,width/3,0);        //makes it flash if mouseX in first third
}
if(mouseX>2*width/3){
gColor = map(random(0,255),mouseX,0,width/3,0);      //makes it flash if mouseX in last third
}
if(mouseIsPressed){
rColor = random(0,255);
gColor = random(0,255);       //changes the color randomly when the mouse is clicked
bColor = random(0,255);
}
stroke(rColor,gColor,bColor);
drawcurve(width/2, height/2);
}

function drawcurve(x, y) {
push()
translate(x, y);    //centers

beginShape();
for (var i = 0; i < 600; i++) {           //creates the number of verticies
t = map(i, 0, mouseX, 0, PI);            //creates theta

r = 150 * mouseY * tan(t*100) ;        //the equation and makes r

Xpos = r * sin(t);      //the equation to define the x position
Ypos = r * cos(t);      //the equation to define the y position

vertex(Xpos,Ypos); //center of the shape
}
endShape();
pop();
}

function setGradient(x, y, w, h, c1, c2, axis) {      //from p5js

noFill();

if (axis == Y_AXIS) {  // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x+w, i);
}
}
else if (axis == X_AXIS) {  // Left to right gradient
for (var i = x; i <= x+w; i++) {
var inter = map(i, x, x+w, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(i, y, i, y+h);
}
}
}

``````

I started browsing the Mathworlds curve site to start my program.  Most of them were too complicated for me to understand but I finally found one and then asked a math major to explain it to me and two fellow programmers to help me so I would know how to incorporate the equation into my code.  After that I just added in some constants,had the mouseX position dictate whether or not the colors flashed, made the color change if the mouse is pressed, and mapped different parameters to the mouseX and mouseY positions.

zhuoyinl-project07

sketch
I tried to use curve to depict a flower shapes with the change of color gradients.I used the curve equation from the site below.

``````//zhuoying Lin
//section a
//zhuoyinl
//Project 07-composition with curves

var nPoint = 100;

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

function draw() {
var colG = map(mouseX, 0, height, 180,140);
background(255, colG, colG+mouseY*0.1);//make background change with curve

for (var i= 0; i<10; i++) {
var col = map(i, 0, 10, 100,200);//chaneg curve color
stroke(col);
strokeWeight(1);
noFill();
drawFourarcs(i*30, mouseY,i);
}
}

function drawFourarcs (x,y,r) {//draw curve

push();
translate(width/2, height/2);
var x;
var y;
var r;
var a = map(mouseY, 0, width, 1, 20);// size of pattern
var n = map(mouseX, 0, height, 1,15)//division

beginShape();
for (var i = 0; i<nPoint; i++) {
var t = map (i, 0, nPoint, 0, TWO_PI);
x = (a/r)*(n*cos(t)-cos(n*t));
y = (a/r)*(n*sin(t)-sin(n*t));
vertex(x,y);
}
endShape(CLOSE);
pop();

}``````

Rnayyar curve composition

Uhh, so I tried to pore over all the curves available on mathworlds and kept on getting frustrated over my lack of understanding (math is, unsurprisingly, my weakest subject… especially when there are letters involved). I ended up modifying the example Epitrochoid code displayed in the deliverables section for week 7 to turn it into something completely unusual and unique compared to its original form. I named the function ‘Spanish Dancer’ because it reminds me of the wiggling, gyrating movements of fabric that are signature aspects of the revered Spanish Dance technique. My final product looks vaguely like the result of the sun reflecting light in a swimming pool, I suppose. I think that the final product was enhanced greatly by the inclusion of the ghosting effect, varying levels of opacity, and the rotation of one of the curves.

``````/* Rhea Nayyar
rnayyar@andrew.cmu.edu
Section C
Project 07-3; Curve Composition
*/

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

function draw() {
background(20,20,20, 30); //background with the ghosting command

push();
translate(width/2 - 30, height/2 - 30); //first curve shifted
fill(70, 10, 200, 30); //Fluorescent Indigo-ish
spanishDancer(); // my curve function name
pop();

push();
translate(width/2, height/2); //Second Curve Shifted
rotate(20); //Tilt!
fill(50, 160, 220, 20); //Somewhat greenish. Like a transluscent teal.
spanishDancer(); //Second curve function called
pop();

push();
translate(width/2 + 30, height/2 + 30); //Third curve shifted
fill(100, 100, 220, 60); //It's kind of like a more intense version of periwinkle?
spanishDancer(); //third curve function called
pop();

}

function spanishDancer(a, x, y) { //my curve
var x;
var y;

var a = 80.0; //starts off with the same parameters as that example epitrochoid function on the deliverables page
var b = a / 2.0;
var h = constrain(mouseY / 15.0, 0, b);
var ph = mouseX / 20.0;

noStroke();
beginShape(); //but then it gets wacked out by me playing with the parameters
for (var i = 0; i < 100; i++) {
var t = map(i, 0, 100, 0, TWO_PI);

x = (a + b) * cos(t/2) - h * cos(ph + t*2 * (a + b) / b);
y = (a + b) * sin(t*2) - h * sin(ph + t/2 * (a + b) / b);
vertex(x,y);

//lots of guessing and checking led to this happy, aesthetic accident. :)
}
endShape(CLOSE);

}``````

Jinhee Lee; Project 07

``````//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-07

var nPoints = 100;
var angle = 0; //start angle for rotating (out of canvas)

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

function draw() {
background(250);

translate(width / 2, height / 2);
if (mouseX > width) { //this one's for you, Anirudh
rotate(angle); //shape rotates in place
}

drawDeltoidCurve(); //calling helper function

angle += 0.05; //increment for rotation
}

function drawDeltoidCurve() {
// Deltoid
// http://mathworld.wolfram.com/Deltoid.html

var x; //curve in parametric form
var y;

var minSize = 80; //min size of shape
var maxSize = 160; //max size of shape
var mapA = map(mouseY, 0, width, minSize, maxSize); //maps size between minSize and maxSize
var a = constrain(mapA, minSize, maxSize); //so that shape doesn't grow when mouseX beyond canvas
var b = a / 3; //variable for curve equations
var rot = constrain(mouseX / 30, 0, width / 30); //rotate according to mouseX

fill("red"); //larger red circle
ellipse(0, 0, 2 * a, 2 * a);

fill(0);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);

x = 2 * b * cos(theta) + b * cos(2 * theta - rot); //parametric equations of curve
y = 2 * b * sin(theta) - b * sin(2 * theta - rot);
vertex(x, y);
}
endShape(CLOSE);

fill("red"); //smaller red circle
ellipse(0, 0, b, b);
}``````

Having to implement parametric equations felt daunting at first, but in a broader look, it was mostly plugging in the deltoid curve’s equation with the templates given in the prompt. The two red circles I made separately fairly easily, but I made them share variables with the deltoid curve that governed its size, so they would all grow proportionally.

P.S.,

Fun fact, if you spin the deltoid to the right past the canvas, then you get-
YOU ARE NOW UNDER MY GENJUTSU

project 7

``````var x = [];
var y = [];
var con = 0;
var mult = 1;
var col = [];
var rectX = 0;
var rectY = 25;
var rpY;

function setup() {
createCanvas(400, 425);
rpY = height - rectY;
}

function draw() {
background("lightPink");
strokeWeight(.5);
for (var i = 0; i < width; i ++) {
var term = 12 * con * cos(i) * sin(i);
x[i] = term * cos(i);
y[i] = term * sin(i);
line(x[i] + width/2,y[i] + height/2,x[i+1] + width/2,y[i+1] + height/2);
}
con = mult * con + 1;
if (con > 500) {
con = mult * con + 2;
}
if(con > 1000) {
con = mult * con + 3;
}
if (con > 6000) {
con = mult * con + 50;
}
if (con > 10000) {
con = 0;
}
println(con);
fill("black")

rect(rectX,rpY,10,25);
}

function mouseDragged() {
rectX = mouseX;
if (rectX > width - 10) {
rectX = width - 10;
}
if (rectX < 0) {
rectX = 0;
}
mult = rectX/50;

}
``````

structured around an astroid radial curve

move slider to adjust speed (epilepsy warning for higher settings, imo)

ShanWang-Project-07-Curves

``````//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-07

var nPoints = 300;
var a;
var x;
var y;
var posX;
var posY;
var color = 0;
var numLayer = 3;
var numCurve = 6;

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

function draw(){
background(0);
//constrain the x, y position of mouse;
posX = constrain(mouseX, 0, width);
posY = constrain(mouseY, 0, height);

//control the amount that shift in x and in y direction with the position of mouse;
var shiftY = map(posY, 0, height,1,5);
var shiftX = map(posX, 0, width,1,5);

//define unit of offsets;
var intervX = width/10;
var intervY = height/10;

//generate three layer of multiple curves;
for (var j = 0; j<numLayer; j++){
for (var i = 0; i<numCurve; i++) {
//cotrol the degree of curvatures with the change in mouse X;
a = map(mouseX, 0, width, -width/3, width/2);
//control the factor of scaling with the change of shift;
var scaleX = shiftX/(3-j)*(i+1);
var scaleY = shiftY/(3-j)*(i+1);
color = (i+1)*10*(j+3);
drawConchoid(shiftX+i*intervX, shiftY+i*intervY,a,scaleX,scaleY,color);
}
}
}

// draw Conchoid of De Sluze Curve
function drawConchoid(sX, sY, a, scaleX, scaleY,color){
push();
stroke(color);
//move the curvatures with the mouse;
translate(posX,posY);
beginShape(POINTS);
for (var i = 0; i < nPoints; i++){
var t =  map(i, 0, nPoints, 0, TWO_PI);
x = (1/cos(t)+ a* cos(t))* cos(t);
y = (1/cos(t)+ a* cos(t))* sin(t);
x *= scaleX;
y *= scaleY;
vertex(x+sX,y+sY);
}
endShape();
pop();
}
``````

In this project I experimented with a lot of functions that create different curvatures, and I was mainly exploring the dynamic movement of the curves associating with the mouse.

I also tried to create black background in contrast with points of different gradient for a sense of space and depth.

Hannah K-Project-07

``````var c1nPoints = 10; // Number of points for curve 1
var c2nPoints = 7; // Number of points for curve 2

function setup() {
createCanvas(500, 500);
frameRate(15);
}

function draw() {
// Draw the frame
fill(255, mouseX, mouseY);
rect(0, 0, width-1, height-1);

// Draw the curve
push();
translate(width / 2, height / 2);
drawCurve1();
drawCurve2();
pop();
}

// Relying on class notes for drawCranioidCurve() for Week 7 Deliverables
// Drawing this curve:
// http://mathworld.wolfsram.com/Scarabaeus.html - Sextic curve

function drawCurve1() {
strokeWeight(1.2);
fill(mouseX, mouseY, 255);
var x;
var y;
var r;

var a = constrain((mouseX / width), 0.0, 1.0);
var b = constrain((mouseY / height), 0.0, 1.0);
// Color depends on x and y movements of mouse
fill(mouseY, mouseX, 255);
beginShape();
for (var i = 0; i < c1nPoints; i++) {
var t = map(i, 0, c1nPoints, 0, TWO_PI);

// Curve 1 - Used equation from mathworld.com
r = (b + mouseY) * cos(2*t) -
(a + mouseX) * cos(t);

// Using code from class notes under "Deliverables Week 7"
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}

function drawCurve2() {
strokeWeight(0.5);
var x;
var y;
var r;

var a = constrain((mouseX / width), 0.0, 1.0);
var b = constrain((mouseY / height), 0.0, 1.0);
// Color depends on x and y movements of mouse
fill(mouseX, mouseY, 255);
beginShape();
for (var i = 0; i < c2nPoints; i++) {
var t = map(i, 0, c2nPoints, 0, TWO_PI);

// Curve 2 - Used equation from mathworld.com
r = (b + mouseX) * cos(2*t) -
(a + mouseY) * cos(t);

// Using code from class notes under "Deliverables Week 7"
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
``````

The process for creating the project this week was different from what I usually do.
Because it was difficult to visualize how changing certain elements of my code would change what I saw, I could not really draw a sketch to plan what I wanted to created.

I went on the website provided to us and just picked a curve and to be honest, I relied pretty heavily on the template code that was provided to us. The end result of this project far exceeded my expectations, and I am super happy with the final result!

I especially really like that at one point when you are moving your mouse (move your mouse to the far left near the middle of the canvas!), the curves create a star.