## atraylor – Project 07 – Section B

``````// atraylor@andrew.cmu.edu
//Project 07
// Section B

var a = 0;

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

function draw() {
background(171, 163, 247);
scribble();
}

function scribble(i, a, rad2, x, y) { // make the curve
a = map(mouseX, 0, width, 10, 110); // number of lines in curve by mouse position

beginShape();
fill(203, 90, 243, 10);
stroke(151, 227, 245);
translate(width/2, height/2); //center
for(var i = 0; i < a; i++) {
var theta = map(i, 0, a/80, 0, TWO_PI); // apply values of i to radians in circle
var x = rad2 * cos(theta); // x position of vertex
var y = rad2 * sin(theta); // y position of vertex
vertex(x, y);
rad2 *= 1.02; // this makes it a spiral rather than a circle.
endShape();
}
}
``````

For this project I used a parametric version of the logarithmic spiral to draw my curves. I played with it so the function would draw various shapes rather than simply growing a spiral when segments were added. There are several areas where you can see the near perfect spiral, and others where it’s simply a mess of lines. Its interesting to see the shapes that are spirals but have clear sides so they form stars, triangles, or pentagons. I added a fill to the curve with an alpha channel to emphasize the growth and change of the shape.    ## Jihee Kim_SectionD_Project-07-Curves

``````//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project 7 Curves
//section D

var backgroundRed;// Red value of background
var backgroundGreen = 245; // Green value of background
var backgroundBlue = 252;// Blue value of backgound

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

}

function draw(){
background(backgroundRed, backgroundGreen, backgroundBlue);
//The background color changes from light blue to light pink
//when mouseY moves from top to bottom of canvas
backgroundRed = map(mouseY, 0, height, 219, 255); //R value changes

push();
translate(width/4, height/3); //push over the generating point of curves
for (var i = 1; i < 16; i++) { //loop from first to sixteenth value
//show depth through color and lineweight
stroke(map(i, 1, 5, 30, 120)); //the stroke turns from grey to lighter
//grey as the curve moves away from
//the focal point of curves
strokeWeight(map(i, 1, 5, 0.3, 2)); //strokeWeight increases as curves
//get further away from focal point
//call the drawCurve function to draw curves
drawCurve(i*2); //use 'i' as scale factor for spacing between curves
rotate(PI/3); //rotate each time a curve is drawn
}
pop();
}

function drawCurve(scaleF) { //using 'i' as the scale factor (scaleF)
var a = 15;
var b = (map(mouseX, 0, width, -1, 1)); //the curves form a hypocycloid
//is negative, and a epicycloid
//when the value is positive
noFill();
//start shape
beginShape();

for (var i = 0; i < 200; i++) { //a bigger max gives you a smoother curve
var t = map(i, 0, 200, 0, 2*PI); //map 't' so that it only rotates
//full circle once (2PI)
var x = (a + b) * cos(t) - b * cos((a/b + 1) * t);
var y = (a + b) * sin(t) - b * sin((a/b + 1) * t);
vertex(scaleF*x, scaleF*y);
}
//end shape
endShape(CLOSE); //this caps the beginning and the end
}
``````

For this project, I created an interactive set of curves that were generated though a mathematical equation. I made it so that the shape that the curves form morphs from a hypocycloid to an epicycloid (left to right) depending on the position of the mouse.

Some other aspects that I manipulated so that the main theme, which is depth, is clear are lineweights, color, and spacing. Using for loops and mapping, I made it so that the stroke turns from grey to a lighter color on the greyscale as the curves move away from the focal point of curves. Moreover, the lineweight of these curves also increases as the curves get further away from the focal point.

The curves are supposed to look like a sky full of clouds when they are forming a hypocycloid, and a flower when they are forming a epicycloid. The background color varies with the y position of the mouse, adding to the intention behind incorporating both cyclodal curves, as well.

math equation source

## Project-07 Composition with Curves

``````//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 07
var npoints =100; //points for generating curve
function setup() {
createCanvas(480,480); //canvas size of 480 by 480

}

function draw() {
background(0);//set background to black
stroke(255); //curve colro tobe white
var mx = constrain(mouseX,30,width-30); // return mousex value within constrain
var my = constrain(mouseY,30,height-30); //return mousey value within constrain
noFill(); //no fill on geometry
heart(mx,my); // execute heart function wiggly heart
heart2(mx,my); //execute heart2 function line following mouse
nails(mx,my);
}
function heart(rn1,rn2){ //for getting parameter for x,y mouse
strokeWeight(0.5); //set stroke size to 0.5
push()
beginShape();
translate(width/2,height/2) // make it center at middle
for (var i =0; i <npoints;i++) { // for loop for creating geometry
var t = map (i,0,npoints,0,360); // map t value to degree
var x = 16*sin(t)*sin(t)*sin(t); // x function from the mathworld wolf cam
var y = 13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t); //y function from mathworld wolf cam
vertex(x*rn1/40+(rn1/50*random(-0.5,0.5)),-y*rn2/40+(rn2/50*random(-0.5,0.5))); //create heart shape with wiggle
//as mouse move wiggle gets small or big
}
endShape(CLOSE); //end the geomtry
pop();
}
function heart2(rn1,rn2){
strokeWeight(0.5);//set stroke size to 0.5
push();

for (var i =0; i <npoints;i++) { // for generating geometry
var t = map (i,0,npoints,0,360); // t value to degree
var c = color (150,0,0); // color to red
stroke(c); // set stroke color to red
var x = 16*sin(t)*sin(t)*sin(t); // heart x
var y = 13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t);//heart y
line(rn1,rn2,x*rn1/60+width/2,-y*rn2/60+height/2); //create line from heart to mouse position
}
pop();
}
function nails(rn1,rn2){
stroke(255,81,51,500-(rn1+rn2)/2) //color alpha change based on the mosue
strokeWeight(0.4);  //stroke weight

push();
beginShape();
translate(width/2,height/2);
for (var i =0; i <npoints; i++){
var t = map (i,0,npoints,0,360); //mapping to dgrees
var r = map((rn2+rn1),0,(height+width),0,100); // mapping radius to max 100 based on mouse
var x = r*cos(t); // circle x
var y = r*sin(t); //circle y
vertex(x*rn1/200,y*rn2/200);//outer line for the vertex
vertex(x*rn1/150,y*rn2/150);//inner circle for connecting
}
endShape(CLOSE); //close the geometry
pop();
}``````

While I was searching for which curve to play with, I found heart shaped curve. I wanted to express emotion that I was having when the idea came up. I wanted the heart to give unstable look with directional element. At the same time, I look for other curve that could be used to show nail. I wanted to illustrate nails in the heart when heart is small but as it grow, nail starts to disappear. I have used r cos(theta) and r sin(theta) to generate the circular curve that will be used to represent the nail. To show the instability of the heart I used the wiggling motion, and I have used line to move along with the mouse coordinate to show dynamic direction that heart can point to.

## alchan-Project 07-curves

``````// attributes of shape
var points;
var angle;

function setup() {
createCanvas(480, 480);
angleMode(DEGREES);
frameRate(30);
}

function draw() {
background(200);
// set attributes to change with mouse position
points = map(mouseX, 0, width, 0, 300);
angle = map((mouseX + mouseY / 2), 0, width, 0, 360);
// draw "main" curve
stroke(209, 122, 110);
drawCurve(width/2, height/2);

// draw "background" curves, setting each to a random color
// and a randomized position
stroke(random(200, 255), random(200, 255), random(200, 255));
drawCurve(width/2 + random(-10, 10), height/2 + random(-10, 10));
stroke(random(200, 255), random(200, 255), random(200, 255));
drawCurve(width/2 + random(-20, 20), height/2 + random(-20, 20));
stroke(random(200, 255), random(200, 255), random(200, 255));
drawCurve(width/2 + random(-30, 30), height/2 + random(-30, 30));
stroke(random(200, 255), random(200, 255), random(200, 255));
drawCurve(width/2 + random(-40, 40), height/2 + random(-40, 40));
}

function drawCurve(posX, posY) {
var x;
var y;
//var a = 400;
var b = map(mouseY, 0, 480, 20, 80);

strokeWeight(1);
noFill();

push();
translate(posX, posY);
rotate(angle);
// astroid curve (http://mathworld.wolfram.com/Astroid.html)t
beginShape();
for (var i = 0; i < points; i++) {
x = 3 * b * cos(i) + b * cos(3* i);
y = 3 * b * sin(i) - b * sin(3 * i);
vertex(x + random(0,2), y + random(0,2));
}
endShape(CLOSE);
pop();
}
``````

Since I was a little overwhelmed with the idea of creating a project based on mathematical curves, I decided to approach the project by “sketching” in the browser and figuring out how the code/ curve would render as I modified different variables. I chose an astroid for my curve. I also hadn’t originally set the angle mode of the drawing to degrees, and ended up with a spirograph-like drawing at first which was visually interesting, but not quite what I was going for. Once I had figured out how to make the curve actually a curve, I added in variables to make the size, number of points drawn, and rotation of the curve interactive. I also added elements of randomization to try to achieve a flickering/ glitching effect to add more interest.

## mecha-project07-curves

``````//maddy cha
//section e
//mecha@andrew.cmu.edu

var nPoints = 100;

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

function draw() {
//background g value is increased with mouseX
background(255,constrain(map(mouseX,0,width,0,255),210,240),200);
frame();
//location of curve depends on mouse (but is constrained 60 pixels around center in x and y directions)
translate(constrain(mouseX,width/2-30,width/2+30),constrain(mouseY,height/2-30,height/2+30));
hypocycloid();
}

//draws outside black rectangle
function frame(){
noFill();
stroke(0);
rect(0,0,width-1,height-1);
}

function hypocycloid(){
var x;
var y;
var r;
var a = map(mouseX,0,width,0,150);
//increases amount of points on hypocycloid
//makes it so that points are increasing by whole numbers
var b = nf(map(mouseX,0,width,0,6),2,0);

push();
//rotates based on mouseX location
rotate(mouseX);
//opacity of shape is dependant on mouseX
fill(256,256,256,map(mouseX,0,width,0,100));
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);

x = (a/b)*((b-1)*cos(t)-cos((b-1)*t))
y = (a/b)*((b-1)*sin(t)+sin((b-1)*t));
//draws points at x and y values (with some randomness)
//nPoints dictates how many points are drawn between lines
vertex(x+random(-2,2), y+random(-2,2));
}
endShape(CLOSE);
pop();
}
``````

For this project, I started with creating a deltoid by implementing the formula into my code. Once I was able to understand how to do this, I wanted to expand my scope by looking at the overarching hypocycloid. I decided that I wanted my mouseX and mouseY interactions to increase the amount of cusps that would appear on my shape. In order to do this, I had to alter my original deltoid formula to take in a greater amount of variables. Once I figured that out, I implemented more ways in which the user could interact with my code using their mouse. I relied on the constrain() and map() functions in order to make sure the shape stayed in the canvas. While mouseY was used to change the location of my shape, mouseX dictated the amount of cusps, the color of the background color, the size, fill opacity, and the rotation of the hypocycloid. Additionally I experimented with adding randomness so that my project would be more visually entertaining.   ## jiaxinw-Project-07-Curves

``````var mouse_x;

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

function draw() {
background(50);
var x;
var y;

// limit the mouseX only works in canvas
if(mouseX<width & mouseX >0){
mouse_x = mouseX;
} else if (mouseX<=0){
mouse_x = 0;
} else{
mouse_x = width;
}

// http://mathworld.wolfram.com/Deltoid.html
// mapping the b from 0 to 480 into from 0 to 30,
// and since b is the radius of the small circle, make it relate to
//mouse X can change the scale of the curves.
var b = map(mouse_x, 0, width, 0, 30);

for (var i = 1; i <= 20; i++) {
push();
//put the whole thing in the center of the canvas and make it shake
translate(width/2+random(-5,5), height/2+random(-5,5));
//change mouseX also affect the rotation of the shapes
var rotateAng = map(mouse_x, 0, width, 0, TWO_PI)
//make the rotation more obvious
rotate(rotateAng + i*3);
//make the stroke weight become less according to the number of shape
strokeWeight(8/i);
noFill();
//make the stroke color of circles randomlmy change
stroke(random(20,100),random(10,130),random(50,100)
,400/i);
ellipse(0,0,6*i*b,6*i*b);
//call the function to draw curves
DrawCurves(i * b);
pop();
}
}

function DrawCurves(R) {
//map the color change into a range as the mouseX is changing
var red = map(mouse_x, 0, width, 10, 20);
var green = map(mouse_x, 0, width, 10, 15);
var blue = map(mouse_x, 0, width, 10, 20);

fill(red*random(4, 7), green*random(11,12),blue*random(6,15));
//draw curves according to the parametric equations
for (var i = 0; i < 360; i++) {
x = 2 * R * cos(t) + R * cos(2 * t);
y = 2 * R * sin(t) - R * sin(2 * t);
beginShape(POINTS);
vertex(x, y);
endShape();
}
}
``````

First, I went through the curves and picked out Deltoid (http://mathworld.wolfram.com/Deltoid.html) one to play around.

After I successfully drew our the curve in a static way, I thought about how to make it look more interesting. I tried to draw multiple curves in different scales but found that if they are in the same direction, it looked boring. So I tried to make them rotate and point to different directions. Next step, I used mouseX to control the rotation. And I thought if the scale of the curves can also be changed, it would be interesting! After this was done, I figured out I could also play around with the stroke weight to make curves look different and also colours!

I am glad that I finally got an interesting interactive result 🙂    