Trying to get animation to stop


#1

have two tabs here, one is the sketch and the other is Star. I’m trying to have the starfield in the background to only be there half way into the song. After the songs are played halfway, I want to have a different animation of fireworks in the background. I know that I can probably use a timer for this but I’m not sure where to put it and how to write the code for that. Any suggestions? Here is the code that I have so far for both the sketch tab and the star tab:

SKETCH TAB:

I//minim is the audio library allowing for us to play and pull the music in
import ddf.minim.*;
Minim minim;

//all of the songs that we have
AudioPlayer song1;
AudioPlayer song2;
AudioPlayer song3;
AudioInput in;

//number of stars & speed is declaring the varible for the speed of the stars
Star[] stars = new Star[100];
float speed;


// number of lines in x & y direction, float magitude is the wave,boolean is declaring the variable for the if statement involving line, line 21 are the parameteres for the line movement
int linesX = 40; 
int linesY = 26; 
float magnitude;
boolean voice = false;
float stepsX, stepsY, radius, intensity, movement, last_sum, scale, factor, wave, sum;


//only runs once, full screen makes the screen full screen, noSmooth is for making the lines of the wave jagged
void setup() {
  fullScreen();
  noSmooth();
  
//once the stars position is equal to >0 it is reset randomly back to the top of the screen, the for loop takes into account the full length of 
//the star rather than resetting it as soon as it hits the bottom
  for (int i = 0; i < stars.length; i++) {
     stars[i] = new Star(); 
}  
 
  
//tells minim to locate the song file and play it, then song1,2,3 play each of the mp3 files, .play plays the whole song, .rewind rewinds current song and plays the new song
//keep the wavelength within the screen 
  minim = new Minim(this);
  song1 = minim.loadFile("Shawn James- Aint No Sunshine - Bill Withers Cover.mp3");
  song1.play();
  song1.rewind();
  factor = float(width)/song1.bufferSize();
  
  minim = new Minim(this);
  song2 = minim.loadFile("Jack Garratt - The Love Youre Given.mp3");
  song2.play();
  song2.rewind();
  factor = float(width)/song2.bufferSize();
 
  
  minim = new Minim(this);
  song3 = minim.loadFile("Tobu - Higher.mp3");
  song3.play();
  song3.rewind();
  factor = float(width)/song3.bufferSize();  
}

//continuously executes the line of the code contained in its block unit the program is stopped, noCursor just makes the cursor diappeared
void draw(){ 
  noCursor();
 
//link the value of the speed variable to the mouse position
{ 
  speed = map(mouseX, 0, width, 0, 20);
  background(0);
  
//moving the center of the screen from the top left corner to the center of the canvas
  translate(width/2, height/2);
  
//draw each star, running the update method to its position and show method to show it on the canvas
 for (int i = 0; i < stars.length; i++) {
   stars[i].update();
   stars[i].show();
}
}
 
 {

//moving the center of the screen from the top left corner to the center of the canvas
   translate(-width /2, -height /2); 
   sum = 0; 
   
// creates sound waves that change in frequency and amplitude, initially makes it so the array "i" is less than that of the songs buffer size or its bass. The "if" and "else" statements 
//lock the line on the left and right side of the screen at exactly the middle y value of the entire screen. It brings in factor just putting all of the parameters of the line in one place
  for (int i = 0; i < song1.bufferSize() - 1; i++)
  {
    if (voice) {
      line(i*factor, height/2 + in.left.get(i)*last_sum + 1, i*factor+1, height/2 + in.left.get(i+1)*last_sum + 2);
      sum += abs(in.left.get(i));
    } else {
     line(i*factor, height/2 + song1.left.get(i)*last_sum + 1, i*factor+1, height/2 + song1.left.get(i+1)*last_sum + .05);
     sum += abs(song1.left.get(i));
    }
  }
}

//makes both wavelength equal 
  last_sum = sum;
    {
     
//randomizes the color for the moon
  fill(random(0,255), random(0,255), random(0,255));

//draws the moon shape, and noStroke gives it no outline
  ellipse(width /2, height /2, 500, 500);
  noStroke();
}

 {
//puts the moon the in the center, and fills it the color white, and noStroke makes it have no outline, the next ellipse statement is for the black circle on top of the white
// that makes the cresent shape
  ellipseMode(CENTER);
  fill (0);
  ellipse(width /2 -50,height /2 -50, 460, 450);
  noStroke();
 }
{
//makes the thickness of all lines to 2
   strokeWeight(2); 
}
}

STAR TAB

//create a "Star" class
class Star {
  
// variables specify the x and y of each star,z variable wil be used in a formula to modify the stars position
  float x;
  float y;
  float z;

// avariable to store the previous value of the z variable
// (the value of the z variable at the previous frame).
  float pz;

  Star() {
//x&y places values in the variables, note: height and width are the same: the canvas is a square,note: the z value can't exceed the width/2 (and height/2) value, 
//because use "z" as divisor of the "x" and "y", whose values are also between "0" and "width/2"
//pz=z : set the previous position of "z" in the same position of "z", stars are not moving during the first frame.
    x = random(-width/2, width/2);
    y = random(-height/2, height/2);
    z = random(width/2);
    pz = z;
  }

  void update() {
    
// here you take the variable z and divide it to get the new x,y coordinates of the star, the speed value is bigger= z decreses
// when the "z" value equals to 1, the star have passed the
// you can place it on more time in the canvas, with new x, y and z values.
// this way we also avoid a potential division by 0.
   
    z = z - speed;
    
  if (z < 1) {
      z = width/2;
      x = random(-width/2, width/2);
      y = random(-height/2, height/2);
      pz = z;
    }
}

  void show() {
    
     float temp= random(0, 100);
   
//if the speed of the stars is less than 50 then we display random colors for the stars with no outline which is the noStroke
   if (temp > 50 )
       
    fill(random(0,255), random(0,255), random(0,255));
   else 
     
      fill(random(0,255), random(0,255), random(0,255));
      noStroke();

// map will give new star positions
// the division x / z get a number between 0 and a very high number,
// map this number (proportionally to a range of 0 - 1), inside a range of 0 - width/2.
//this makes sure the new coordinates "sx" and "sy" move faster at each frame
// and which they finish their travel outside of the canvas (they finish when "z" is less than a).

    float sx = map(x / z, 0, 1, 0, width/2);
    float sy = map(y / z, 0, 1, 0, height/2);

//the z value to increase the star size between a range from 0 to 16.
    float r = map(z, 0, width/2, 16, 0);
    ellipse(sx, sy, r, r);

//use the "pz" valute to get the previous position of the stars,
//to draw a line from the previous position to the new (current) one.
    float px = map(x / pz, 0, 1, 0, width/2);
    float py = map(y / pz, 0, 1, 0, height/2);

    pz = z;

    stroke(255);
    line(px, py, sx, sy);

  }
}

#2

I made a video showing one way to have different segments in your sketch: https://funprogramming.org/91-Timelines-tell-a-story.html


#3

I have actually seen this video before and that it what gave me the idea to do what I posted about the starfield going away and turning into fireworks. I’m still not able to get it, any other suggestions? I already have the firework part coded, but when I add it to this cod I’m having trouble getting it to to work.


#4

I tried running your code but it doesn’t work because some of the characters are being used for formatting. Could you please edit your post, select all the code, and press the </> button above the text editor, so it is correctly displayed in the forum?

This is a minimal example of drawing a white background for 50 seconds, then a black one after that.

void draw() {
  if(millis() < 50000) {
    background(255);
  } else {
    background(0);
  }
}

Could this not be applied in your case by replacing background(255) for the stars, and background(0) for the fireworks? And don’t dispair :slight_smile: All programmers have to go through this difficulty when programs start to grow larger and they become hard to manage, specially when trying to combine multiple programs in one.


#6

I’m not which tab I can edit my post on this is my first time using this to ask a question


#7

1

  1. Click edit post below your first post

2
2. Select all the code in that post

3
3. Click </> to mark the selected text as code


#9

please let me know if it is correctly edited now


#10

Pretty good :slight_smile: You didn’t need to select the first two lines (they are not code) nor the “STAR TAB” line, but it’s ok. I guess you see it looks better now :slight_smile:

I suggest you create two functions below draw, maybe called drawStars and drawFireworks, and move the code from draw into one or the other. This will allow you to keep draw simple, and avoid mixing fireworks with stars inside the same function.

Then you could do what I suggested:

void draw() {
  if(millis() < 50000) {
    drawStars();
  } else {
    drawFireworks();
  }
}

so it does one or the other depending on the time.

There are some other issues with your code though. You are initializing minim 3 times with minim = new Minim(this);. You should do that only one time (just delete the second and third ones). Otherwise is like trying to start a vehicle that is already running.

Then, the program is setting the value of factor 3 times, so the first and second times are overwritten by the third one. What do you want to do with this factor variable?


#11

I have those 3 songs because I’m playing 3 different songs at once. Thats meant to be there because when one plays the other rewinds kind of like how DJ’s plays different mixes. Also I’m not sure what to do and how to put all of the code together. This is the code that I have for the fireworks:

var particles = []

var gravity = (acc,pos,vel,type,size) => acc.add(createVector(0,0.1))

var paused = false;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function addParticle(x,y,vx,vy,col,type,life,size) {
	particles.push(new Particle(x,y,vx,vy,size,col,type,life,particles.length))
}

function clearDeadParticles() {
	for (var i = particles.length; i >= 0; i--) {
		if (particles[i] && particles[i].done) {
			particles[i].deathSequence()
			particles.splice(i,1)
		}
	}
}

function draw() {
	background(0,60)
	clearDeadParticles()
	for (var i = particles.length-1; i >= 0; i--) {
		particles[i].show()
		particles[i].applyForce(gravity)
		particles[i].update()
	}
}

function mousePressed() {
	colorMode(HSB)
	addParticle(mouseX,height,0,random(-10,-15),color(random(360),255,255),"firework",50,2)
	colorMode(RGB)
}
function mouseDragged() {
	colorMode(HSB)
	if (frameCount%10==0 && !paused)
		addParticle(mouseX,height,0,random(-10,-15),color(random(360),255,255),"firework",50,2)
	colorMode(RGB)
}

function keyPressed() {
	if (paused) {
		paused = false;
		loop()
	} else {
		paused = true;
		noLoop()
	}
}

function Particle(x,y,vx,vy,size,col,type,life) {
	this.pos = createVector(x,y)
	this.vel = createVector(vx,vy)
	this.acc = createVector(0,0)
	this.color = col
	this.size = size
	this.type = type
	this.life = life
	this.done = false;
	this.applyForce = function(force) {
		this.acc = force(this.acc,this.pos,this.vel,this.type,this.size)
	}
	this.update = function() {
		//drag
		this.vel.mult(this.type=="spark"?0.95:0.99)
		
		this.pos.add(this.vel)
		this.vel.add(this.acc)
		this.acc.mult(0)
		this.life--
		if (this.life <= 0) {
			this.done = true;
		}
	}
	this.show = function() {
		noStroke()
		switch (type) {
			case "firework": 
				fill(250,200,150)
				ellipse(this.pos.x,this.pos.y,this.size)
				addParticle(this.pos.x,this.pos.y,this.vel.x+random(-1,1),this.vel.y+random(-1,1),color(250,150,50),"spark",50,1)
			break;
			case "spark":
				fill(red(this.color),green(this.color),blue(this.color),(this.life/life)*255)
				ellipse(this.pos.x,this.pos.y,this.size*(this.life/life))
			break;
			default:
				fill(this.color)
				ellipse(this.pos.x,this.pos.y,this.size*(this.life/life))
			break;
		}
	}
	this.deathSequence = function() {
		switch (this.type) {
			case "firework": 
				for (var i = 0; i < 100; i++) {
					fill(red(this.color),green(this.color),blue(this.color),1)
					ellipse(this.pos.x,this.pos.y,i)
					var nextVel = p5.Vector.random2D().mult(random(1,5))
					addParticle(this.pos.x,this.pos.y,this.vel.x+nextVel.x,this.vel.y+nextVel.y,this.color,"spark",50,2)
				}
			break;
			case "spark":
			break;
			default:
			break;
		}
	}
}

And I’m trying to put it so the starfield stops halfway through the songs and then these fireworks show up. I’m still having trouble adding this to make it do that.Preformatted text


#12

It’s ok to have 3 songs, but one should not initialize minim 3 times. It’s two different things. So you should only keep the first minim = new Minim(this);.

I think you are being “slightly” too ambitious :slight_smile: This second program (the fireworks) is not in the same language as the first! :slight_smile: The first one is Processing/Java and the second one is p5.js/JavaScript.

Maybe someone in the forum has time to help you convert this p5.js program to Processing?

Update: I wanted to mention that being ambitious and trying to do things you’ve never done before is great :slight_smile: But it may be a good idea to take one step at a time. For instance, make the stars work on their own, then make the fireworks on their own, then maybe try combining two simpler programs into one and figure out what to do about having two setup() and two draw() functions, etc. Basically to avoid the frustration of going from something very simple to something that becomes hard to understand.


#13

ok thanks! :slight_smile: if you dont mind can i email you for help on other questions relating to processing if i have any? i need to present my project tomorrow and make some last minute touch ups and sometimes it takes a while for someone to respond on here if i ask a question. it would really help me out if i got help/feedback right away if i have questions today


#14

(unrelated to the original question)

When people volunteer to help in online communities they choose whatever topics they find interesting and they do it whenever they feel like.

When those same people are asked to use their professional expertise to help on a project it’s probably no longer volunteering, but a commercial transaction. In such cases they charge money, and the amount of money is larger if a deadline is close.

:slight_smile: