sketch curveDownload
/*
Sandy Youssef;
section D;
syoussef@andrew.cmu.edu;
Project-07;
*/
function setup() {
createCanvas(480, 480);
frameRate(6);
}
function draw() {
// Epicloid Curve
//https://mathworld.wolfram.com/Epicycloid.html
background(255);
drawEpicloid1();
drawEpicloid2();
drawEpicloid3();
drawEpicloid4();
drawEpicloid5();
drawEpicloid6();
drawEpicloid7();
drawEpicloid8();
}
function drawEpicloid1() {
//curve located at the top right that moves according to mouse Y
push();
translate( width/2-100, height/2-100);
var x;
var y;
var a = 20;; // radius of smaller circle that moves around bigger circle to create points
var b = a * 3; // radius
var theta = 30;
var move = mouseY/50
fill(255, 0, 0, 50); // transparent pink
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid2() {
// same curve as drawEpicloid1 but moves in opposite direction
push();
translate( width/2-100, height/2-100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseY/50
fill(200, 210, 0,50); //transparent yellow
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid3() {
// curve located at top right that moves according to mouse X
push();
translate( width/2+100, height/2-100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseX/50
fill(200, 210, 0,50); // transparent yellow
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid4() {
// same curve as drawEpicloid3 but moves in opposite direction according to mouse X
push();
translate( width/2+100, height/2-100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseX/50
fill(200, 0, 0,100); // brighter pink
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid5() {
// curve located in bottom right corner that moves according to mouse Y
push();
translate( width/2+100, height/2+100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseY/50
fill(200, 210, 0,50); // transparent yellow
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid6() {
// same curve as drawEpicloid5 but moves in opposite direction according to mouse Y
push();
translate( width/2+100, height/2+100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseY/50
fill(0, 210, 0,50); // transparent green
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid7() {
// curve located in bottom left corner that moves according to mouse X
push();
translate( width/2-100, height/2+100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseX/50
fill(0, 250, 0,130); // brighter transparent green
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}
function drawEpicloid8() {
// same curve as drawEpicloid7 but moves in opposite direction according to mouse X
push();
translate( width/2-100, height/2+100);
var x;
var y;
var a = 20;; // radius of smaller circle
var b = a * 3; // radius
var theta = 30;
var move = mouseX/50
fill(200, 210, 0,50); //transparent yellow
beginShape();
for (var i = 0; i < 100; i ++) {
var theta = map ( i , 0, 100, 0, TWO_PI);
x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move); // mathematical formula for the curve
y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
vertex(x,y);
}
endShape(CLOSE);
pop();
}