![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](../../../../wp-content/uploads/2020/08/stop-banner.png)
Project 07 – Composition with curves
//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-07
var n = 27;
var h = 24;
var a = 120;
var Rad = 500;
var t = 0;
//undulating ground
function Topo(){
fill(200, 100, 0);
beginShape();
vertex(width, height - 60); //first vertex on right canvas edge
for (var i = 0; i < 100; i++){
t = map(i, 0, 100, 0, PI);
var x = 300 + cos (t) * Rad;
var y = sin (t) * Rad - 200;
vertex(x,y); //vertices defined by curve
//println(t);
//println(i);
}
vertex(0, height - 60); //vertex on left canvas edge
vertex(0, height); // lower left vertex
vertex(width, height); // lower right vertex
endShape(CLOSE)
//println(t);
//println(i);
}
function Hypocycloid(){
var b = a / n;
fill(250, 240, 240); //pink
beginShape();
for (var i = 0; i < 4000; i++){
var t = map(i, 0, 4000, 0, TWO_PI*n);
var x = (a - b) * cos (t) + h * cos ((a - b) * t / b);
var y = (a - b) * sin (t) - h * sin ((a - b) * t / b);
vertex(x, y);
}
endShape(CLOSE);
}
function setup(){
createCanvas(600, 400);
}
function draw(){
background(200, 225, 250);//blue background
Topo();//undulating ground function
//mouseX as for canvas translation position
var locX = map(mouseX, 0, width, 120, 480);
//relate y value to x along the circle
var y = sqrt((Rad * Rad) - (locX - 300) * (locX - 300)) - 200;
//Angle R for canvas rotation as function of mouseX
var AngleR = map(mouseX, 0, width, 0, PI);
push();
//translate canvas to mouseX position and topo y position
translate (locX, y - 140);
//rotate canvas relative to mouseX position
rotate(AngleR);
//call wheel - hypocycloid
Hypocycloid();
pop();
}Using a hypocycloid, I made a wheel that rolls across the screen following the mouse but along a path defined by an arc. Working out the control parameters to follow the curved path proved difficult but was eventually resolved using the formula for cartesian coordinates of the points of the circle.
