![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
This is my project: the left and right mouse movements change the number of curves and the up and down spins the objects. Clicking the mouse changes the type of circle on the outside of the rose curve.
sketch
//Michael Li
//Section C
//set variables for points
var points = 100;
//set variable for state machine
var type = 0
function setup() {
createCanvas(400, 400);
frameRate(25)
}
function draw() {
background(50);
//add text
text("Click to change shape", 20, 30)
//move to the center of the canvas
translate(width/2, height/2)
//to change the shapes between spiral and flower
if (type == 0){
spiral() //spiral function
} else if(type == 1){
//repeat the function for flower
for(var i = 0; i <5; i++){
//different state
drawEpitrochoid(i)
}
}
//draw center flower
drawRoseCurve();
}
function drawRoseCurve() {
// RoseCurve
//constrain the mouse within the canvas
var conMX = (constrain(mouseX, 0, width))
var conMY = (constrain(mouseY, 0, width))
//map the height of the rosecurve
var h = map(conMY, 0, width, width*1/5, width*2/5)
var x;
var y;
//map the color to the mouse movement
var mapColorX = map(mouseX, 0, width, 100, 255)
var mapColorY = map(mouseY, 0, width, 100, 255)
//the color of the rosecurve changes depending on the outer elements
if(type == 0){
//blue and orange
var c = color(mapColorX, mapColorX/2+mapColorY/2, mapColorY)
} else if (type == 1){
//green and purple
var c = color(mapColorX/2+mapColorY/2, mapColorY, mapColorX)
}
var r;
//have the variable n only store odd numbers for better rose curve
var n = printOdd(int(map(conMX, 0, width, 3, 20)))
noFill()
strokeWeight(1)
stroke(255)
circle(0, 0, h*2)
fill(c)
stroke(c);
//draw rose curve
beginShape();
for (var i = 0; i < points; i++) {
var theta = map(i, 0, points, 0, PI);
r = h*cos(theta*n)
x = r*cos(theta+conMY)
y = r*sin(theta+conMY)
curveVertex(x, y);
}
endShape(CLOSE)
}
//draw spiral
function spiral(){
//constrain mouse within the canvas
var conMY = (constrain(mouseY, 0, width))
//map value to mouseY
var a = map(conMY, 0, width, width*1/5, width*2/5)
var x;
var y;
var r;
noFill()
push()
beginShape()
//map number of points to mouse Y
//spiral grows as mouseY moves
var mapYPoints = map(mouseY, 0, height, 25, 100)
//draw spiral
for (var u = 0; u < mapYPoints; u++) {
//theta depend on mouse Y
//spiral spins
var theta = map(u, 0, mapYPoints/10, 0, TWO_PI);
//circle size depend on mouseY
var mapSize = map(u, 0, mapYPoints, 40, 10)
r = ((theta)**(1/2))*a/4
x = r*cos(theta+10)
y = r*sin(theta+10)
curveVertex(x, y)
stroke(255-u*4)
fill(255-u*4)
//draw circles on the spiral
circle (x, y, mapSize/2)
stroke(200)
noFill()
}
endShape()
}
//draww epitrochoid
function drawEpitrochoid(rot){
push()
//constrain mouseX and mouseY
var conMX = (constrain(mouseX, 0, width))
var conMY = (constrain(mouseY, 0, width))
var a = map(conMY, 0, width, width*1/5, width*2/5)
var b = constrain(a / int(conMX / 30), 0, 20)
print(a)
var x;
var y;
//rotates the shape each loop
rotate(rot+conMY/10)
noFill()
stroke(200)
push()
beginShape()
//fill the shape with lower opacity to create layering effect
fill(200, 200, 200, 50)
var mapYPoints = map(mouseY, 0, height, 0, 25)
//draw epitrochoid
for (var u = 0; u < 100; u++) {
var theta = map(u, 0, 100, 0, TWO_PI);
x = rot/2*(a+b)*cos(theta)-b*cos(((a+b)/b)*theta);
y = rot/2*(a+b)*sin(theta)-b*sin(((a+b)/b)*theta);
curveVertex(x, y)
}
endShape(CLOSE)
pop()
}
//only store odd numbers in a variable
function printOdd(x){
if(x%2 == 0){
return x-1
} else{
return x
}
}
//swtich the type when mouse pressed
function mousePressed() {
type += 1
if(type > 1){
type = 0
}
}