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.
sketchvar nPoints = 100; var q = 10; var p = 0;
function setup() {
createCanvas(400, 400);
background(0,0,0)
frameRate(10);
}
function draw() {
background(0); noStroke();
rectMode(CENTER);
fill(255,0,0) rect(width/2,height/2,30,50) 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) p=p+5 }else{
p=0 }
push();
translate(mouseX,mouseY-20)
drawQuad7Curve(); q=q+1 if(q>60){
q=10 }
pop();
push();
fill(255,0,0); rect(mouseX,mouseY,10,20); pop();
push()
if(mouseX>25 & mouseX<75){
translate(20,50);
drawQuadCurve(); }
if(mouseX<25){
fill(0,255,0); rect(20,height-mouseX*12,2,20) }
pop();
push();
if(mouseX>50 & mouseX<100){
translate(100,100);
drawQuad2Curve(); }
pop();
push();
if(mouseX>10 & mouseX<60){
fill(255,0,0) rect(100,height-mouseX*4.5,2,20); }
pop();
push();
if(mouseX>100 & mouseX<150){
translate(200,300);
drawQuad3Curve(); }
pop();
push();
if(mouseX>60 & mouseX<110){
fill(0,0,255); rect(200,height-mouseX/2,2,20); }
pop();
push();
if(mouseX>150 & mouseX<200){
push();
translate(300,200);
drawQuad4Curve(); }
pop();
push();
if(mouseX>100 & mouseX<150){
fill(255,255,0); rect(300,height-mouseX,2,20); }
pop();
push();
if(mouseY>200 & mouseY<250){
translate(350,100)
drawQuad8Curve() }
pop();
push();
if(mouseY>100 & mouseY<200){
translate(150,50)
drawQuad9Curve() }
pop();
push();
translate(200,200)
drawQuad5Curve(); drawQuad6Curve();
pop();
function drawQuadCurve() {
var x;
var y;
var r;
var a = map(mouseX,0,50,0,width/5); var n = constrain(mouseX, 0, height/2);
fill(0,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 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);
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);
}