![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
This program was inspired when I was playing around with altering the degree of the function, and noticing that it behaved like a flashing light. I applied this to the mouse, using the mouse to control how the function behaves, and also it’s size, to create “flashes”. I colored them, and they became fireworks. To add another interactive element, I wanted to make something that the user could “explode” themselves, so I added the TNT.
sketch
var nPoints = 100; //used for loops and mapping
var q = 10; //used for changing degree
var p = 0; //used for changing size
function setup() {
createCanvas(400, 400);
background(0,0,0)
frameRate(10);
}
function draw() {
background(0); //black
noStroke();
rectMode(CENTER);
fill(255,0,0) //red
rect(width/2,height/2,30,50) //TNT block
fill(255)
rect(width/2,height/2,30,20)
fill(0)
text('TNT',width/2-12,height/2+5)
if(mouseIsPressed){
if(mouseX<(width/2)+15 & mouseX>(width/2)-15 && mouseY<(height/2)+25 && mouseY>(height/2)-25) //if mouse is inside TNT
p=p+5 //increse size of explosion curve
}else{
p=0 //hide explosion curve
}
push();
translate(mouseX,mouseY-20)
drawQuad7Curve(); //dynamite fuse
q=q+1 //change degree of curve
if(q>60){
q=10 //reset degree of curve after 60 changes
}
pop();
push();
fill(255,0,0); //red
rect(mouseX,mouseY,10,20); //TNT block
pop();
push()
if(mouseX>25 & mouseX<75){
translate(20,50);
drawQuadCurve(); //green firework
}
if(mouseX<25){
fill(0,255,0); //green
rect(20,height-mouseX*12,2,20) //green firework starter
}
pop();
push();
if(mouseX>50 & mouseX<100){
translate(100,100);
drawQuad2Curve(); //red firework
}
pop();
push();
if(mouseX>10 & mouseX<60){
fill(255,0,0) //red
rect(100,height-mouseX*4.5,2,20); //red firework starter
}
pop();
push();
if(mouseX>100 & mouseX<150){
translate(200,300);
drawQuad3Curve(); //blue firework
}
pop();
push();
if(mouseX>60 & mouseX<110){
fill(0,0,255); //blue
rect(200,height-mouseX/2,2,20); //blue firework starter
}
pop();
push();
if(mouseX>150 & mouseX<200){
push();
translate(300,200);
drawQuad4Curve(); //yellow firework
}
pop();
push();
if(mouseX>100 & mouseX<150){
fill(255,255,0); //yellow
rect(300,height-mouseX,2,20); //yellow firework starter
}
pop();
push();
if(mouseY>200 & mouseY<250){
translate(350,100)
drawQuad8Curve() //purple firework
}
pop();
push();
if(mouseY>100 & mouseY<200){
translate(150,50)
drawQuad9Curve() //light blue firework
}
pop();
push();
translate(200,200)
drawQuad5Curve(); //orange explosion curve
drawQuad6Curve(); //white explosion curve
pop();
//--------------------------------------------------
function drawQuadCurve() {
var x;
var y;
var r;
var a = map(mouseX,0,50,0,width/5); //size determined by mouseX within a mapped range
var n = constrain(mouseX, 0, height/2); //degree of curve determined by a constrained mouseX
fill(0,255,0); //green
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI); //determine angle by mapping
r = a * sin(n*t) //radius
x = r * cos(t); //x of function
y = r * sin(t); //y of function
vertex(x, y); //plot function
}
endShape(CLOSE); //close object to fill
}
function drawQuad2Curve(){
var x;
var y;
var r;
var a = map(mouseX,50,100,0,width/9)
var n = constrain(mouseY/2, 0, height);
fill(255,0,0)
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, PI*5);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function drawQuad3Curve(){
var x;
var y;
var r;
var a = map(mouseX,100,150,0,width/7)
var n = constrain(mouseX, 0, height-mouseY);
fill(0,0,255);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, PI*3);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function drawQuad4Curve(){
var x;
var y;
var r;
var a = map(mouseX,150,200,0,width/5)
var n = constrain(mouseX, 0, mouseY);
fill(255,255,0);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function drawQuad5Curve(){
var x;
var y;
var r;
var a = p*20
var n = 60;
fill(247,181,67);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function drawQuad6Curve(){
var x;
var y;
var r;
var a = p*5;
var n = 30;
fill(255);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function drawQuad7Curve(){
var x;
var y;
var r;
var a = 10
var n = constrain(q, 0, height); //degree based on the changingvariable q
fill(255,255,0);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
}
function drawQuad8Curve(){
var x;
var y;
var r;
var a = mouseX/10
var n = constrain(q, 0, height);
fill(182,68,249);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function drawQuad9Curve(){
var x;
var y;
var r;
var a = map(mouseY,100,200,0,height/20)
var n = constrain(q*2, 0, height);
fill(68,237,249);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, PI);
r = a * sin(n*t)
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
