Animating sprites at random rates - animation

I have a program that displays 5 explosions in a line at the same time. I would like to know how to get each explosion to animate at different rates. Here is the code that actually animates the sprites:
//=========================================================================
//
// Helper functions
//
//========================================================================
void Sprite_Draw_Frame(LPDIRECT3DTEXTURE9 texture, int destx, int desty, int framenum, int framew, int frameh, int columns)
{
D3DXVECTOR3 position( (float)destx, (float)desty, 0);
D3DCOLOR white = D3DCOLOR_XRGB(255, 255, 255);`
RECT rect;
rect.left = (framenum % columns) * framew;
rect.top = (framenum / columns) * frameh;
rect.right = rect.left + framew;
rect.bottom = rect.top + frameh;
spriteobj->Draw(texture, &rect, NULL, &position, white);
}
void Sprite_Animate(int &frame, int startframe, int endframe, int direction, int &starttime, int delay)
{
if((int)GetTickCount() > starttime + delay)
{
starttime = GetTickCount();
frame += direction;
if(frame > endframe) frame = startframe;
if(frame < startframe) frame = endframe;
}
}
//============================================================================
//
// Function calls
//
//==============================================================================
Tried to use random numbers for the delay variable in Sprite_Animate so that the frames would be delayed at different rates. However, the explosions continued to animate in sync.
The Sprite_Animate function just updates the global variables frame and starttime to continue drawing each new frame with the Sprite_Draw_Frame function.
//animate and draw the sprite
for(int i = 0; i < 5; i++)
{
Sprite_Animate(frame, 0, 29, 1, starttime, rand() %100);
Sprite_Draw_Frame(explosion, (i * 100), 100, frame, 128, 128, 6);
}
There is a simple solution to this, and if anyone wants the full code I can send it to you by request.

SO i figured it out. The reason why they were all in sync even with random delay values is because they were all sharing the same global variables frame and starttime.
So instead, creating a structure of EXPLOSION with the member variables frame and starttime and than using a vector to contain them all. After it just had to be iterated through.
The new code is here in case someone else comes along this problem.
//The structue to contain each explosions own frame and starttime variables
struct EXPLOSION
{
int frame;
int starttime;
};
//============================================================================
//
// Function calls
//
//==============================================================================
//animate and draw the sprite
for(int i = 0; i < 5; i++)
{
Sprite_Animate(explosions[i].frame, 0, 29, 1, explosions[i].starttime, rand() % 100);
Sprite_Draw_Frame(explosion, i * 100, 100, explosions[i].frame, 128, 128, 6);
}

Related

Processing: Increment a counter when midpoint of ellipses are passed

I've got some code that displays 10 ellipses in random locations on the screen, and a square that descends from the top of the screen to the bottom, at which point it resets back at the top. What I'm trying to do is get a counter to increment when that square passes any of the ellipses (by comparing their y-positions). However, the counter increases rapidly instead of steadily and just doesn't behave desirably in general.
Here's my draw() function. barriers[i][0] stores the x-pos, barriers[i][1] the y-pos obviously.
void draw()
{
background(255);
fill(0);
for(int i = 0; i < barriers.length; i++) {
// Draw barriers
ellipse(barriers[i][0], barriers[i][1], 50, 50);
// Did we pass a barrier? (doesn't work!)
if(y >= barriers[i][0] - 1 && y <= barriers[i][1] + 1) {
counter++;
}
}
// Draw the square
rect(x, y, 25, 25);
// Draw counter alongside square
fill(255, 0, 0);
text(counter, x + 25, y - 5);
// Reset
if(y < height) {
y+=5;
} else {
y = -25;
counter = 0;
}
}
Apologies if the solution is blindingly obvious, but I'm just not seeing the problem here...
Looking forward to some assistance.
Look at this section of code:
if(y >= barriers[i][0] - 1 && y <= barriers[i][1] + 1) {
counter++;
}
The draw() function fires 60 times a second, so this code will be fired 60 times per second. That means that while you're passing a barrier, the counter variable will increment 60 times per second!
Presumably you only want the counter to increase once for each barrier. There are a number of ways to do this. You could have another data structure that keeps track of whether each barrier has already been passed, and then only check barriers that haven't been passed yet. Or you could keep track of the previous positions of the square, and then use that to determine when the square starts passing a barrier.
Think about how you would do this in your head, without a computer. How do you know when the square is passing a circle? How do you, in your head, only count one for each barrier?
Following Kevin's advice, I was able to get it working using an array of booleans which I used to ensure I wasn't incrementing counter more than once:
Full code:
float barriers[][] = new float[10][2];
float x = 400;
float y = -25;
int counter = 0;
boolean barriersChecked[] = {false, false, false, false, false, false, false, false, false, false};
void setup()
{
size(800, 600);
genBarriers();
}
void genBarriers()
{
for (int i = 0; i < barriers.length; i++) {
barriers[i][0] = random(width);
barriers[i][1] = random(height);
}
}
void draw()
{
background(255);
fill(0);
for (int i = 0; i < barriers.length; i++) {
// Draw barriers
ellipse(barriers[i][0], barriers[i][1], 50, 50);
// Did we pass a barrier?
if (barriers[i][1] < y && !barriersChecked[i]) {
counter++;
barriersChecked[i] = true;
}
}
// Draw the square
rect(x, y, 25, 25);
// Draw counter alongside square
fill(255, 0, 0);
text(counter, x + 25, y - 5);
// Reset
if (y < height) {
y+=2;
} else {
y = -25;
genBarriers();
// Reset barriersChecked
for(int i = 0; i < barriersChecked.length; i++) {
barriersChecked[i] = false;
}
}
}
Out of curiosity, is there a more elegant (loopless) way of resetting every element in barriersChecked back to false?
Suggestions of additional improvements would also be greatly appreciated.

modification in the animation of vertical lines with processing

i have modified the code for the animation of vertical lines which was given by . In the recent code I need to change the value between the two arrays of lines which are generated by the code and also make the disappearing of lines gradual. All the lines leaving or coming should have the same spacing between them. Below is the code.
//float[] linePositions = new float[10];
ArrayList<Integer> linePositions = new ArrayList<Integer>();
int lineWidth = 50;
int lineSpacing = 25;
int lineSpeed = 1;
int totalwidth;
int pixelperframe = 0;
int arraySize = 0;
void setup() {
size(640, 360);
println("Setup");
totalwidth = lineWidth+lineSpacing;
for (int i = 0; i < width; i=i +totalwidth) {
//Float value = 0 + (lineWidth+lineSpacing)*i;
linePositions.add(i);
}
arraySize = linePositions.size();
}
Boolean drawn = false;
void draw() {
println("Draw");
background(51);
//loop through the lines
//println("before Draw ka forloop"+linePositions.size());\
pixelperframe = ((lineSpeed - 10) > 1) ? (lineSpeed-10) : 1;
for (int i = 0; i < arraySize; i++) {
//println("Draw ka forloop");
rect(linePositions.get(i), 0, lineWidth, width);
int newPosition = linePositions.get(i) - pixelperframe ;
linePositions.set(i, newPosition);
//linePositions[i] -= lineSpeed;
//wrap the line
if ( linePositions.get(i) < 0) {
println("Wrapping the line");
linePositions.set(i, width);
// drawn = true;
}
}
//int temp = (width - linePositions.get(arraySize - 1)) - totalwidth;
//println(temp);
}
For the spacing between the lines to always be the same, you have to make sure that the total line spacing adds up to the total width of your screen. Right now each line takes up 75 pixels (50 for the line itself and 25 for the space after it), but your width is 640. That will always leave you with extra space, which will mess up your spacing after the lines start over.
So the easiest thing to do is to simply make your window a multiple of the line spacing. Let's go with 600, which is enough room for exactly 8 lines.
However, since you want your lines to slide off the screen, you actually need 9 lines, since you'll often see half of one line going off the screen while half of another line enters the screen. Draw some pictures to see exactly what I'm talking about
If I understand what you mean by making the lines "gradually" restart, you just have to restart them when their right side goes off the screen. In other words, when their x position is negative enough to be off the screen.
Putting it all together, it looks like this:
float[] linePositions = new float[9];
float lineWidth = 50;
float lineSpacing = 25;
float lineSpeed = 1;
void setup() {
size(600, 360);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] = (lineWidth+lineSpacing)*i;
}
}
void draw() {
background(51);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] -= lineSpeed;
rect(linePositions[i], 0, lineWidth, height);
if ( linePositions[i] < -(lineWidth+lineSpacing)) {
linePositions[i] = width;
}
}
}

animation of vertical bars using processing

I am basically trying to make a animation of vertical bars across the screen which should be equally spaced and continue until some key is pressed etc.. in the processing.org tool for animation.
I was able to get a kind of animation, but with hard coded values and had to write the same code again and again to generate the animation of bars for the whole frame/screen. I need to make it generic, so that changing the screen width or the size of the bars would not make me change the whole code but just the variables which control the parameters. Below is my code. I have written the code for three vertical bars but that needs to be done for the whole screen..
int a;
int i;
int j;
void setup() {
size(640, 360);
a = width/2;
i = 0;
}
void draw() {
background(51);
//need to avoid these repetitions each time for each bar
rect(a , 0, 25, width);
a = a - 1;
if (a < 0) {
a = width;
}
rect(i= a+50, 0, 25, width);
i = i - 1;
if (i < 0) {
i = width + a;
}
rect(j = i + 50, 0, 25, width);
j = j - 1;
if (a < 0) {
j = width + i;
}
}
It sounds like you're looking for an array.
An array is like a variable, only it can hold multiple values in its indexes. You can then use a for loop to iterate over the array and do stuff based on the values in the array.
Here's an example that uses an array to keep track of the line positions:
float[] linePositions = new float[10];
float lineWidth = 25;
float lineSpacing = 25;
float lineSpeed = 1;
void setup() {
size(640, 360);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] = width/2 + (lineWidth+lineSpacing)*i;
}
}
void draw() {
background(51);
//loop through the lines
for (int i = 0; i < linePositions.length; i++) {
//draw the line
rect(linePositions[i], 0, lineWidth, width);
//move the line
linePositions[i] -= lineSpeed;
//wrap the line
if ( linePositions[i] < 0) {
linePositions[i] = width;
}
}
}
More info on arrays can be found in the Processing reference.

saveFrame can't keep up with frameRate in processing

I am using saveFrame to create an image sequence to bring into after effects. At each loop, I'm upping the frameRate - which I'm sure is not the best way to go about thing. At the end of each loop, I'm saving the frame, but saveFrame can't keep up with the progressively higher frameRate I'm trying to save at. Anyone have an idea how to achieve the effect I'm going for without upping the frameRate, so that saveFrame can keep up? Here's my code:
```
int w = 640; // canvas size
int h = 480;
int n = 10; // number of grid cells
int d = w/n; // diameter of a grid cell
float depth = 0.5; // relative cell depth
int fr = 100;
int iterator = 0;
boolean doSaveFrames = false;
void setup() {
size(w, h, P3D);
rectMode(CENTER);
background(0);
fill(51, 255, 0);
noStroke();
frameRate(fr);
}
void draw() {
// get coordinates
int xy = frameCount % (n*n);
// shift image in z-direction
if (xy == 0) {
PImage img = get();
background(0);
pushMatrix();
translate(0, 0, -d * depth);
tint(255, 127);
image(img, 0, 0);
popMatrix();
// fr+=iterator*10;
// frameRate(fr); //MH - really cool but I can't export fast enough
iterator++;
}
// scale and rotate the square
scale(d);
translate(xy%n + .5, xy/n + .5, -depth * .5 );
rotate(QUARTER_PI - HALF_PI *int(random(2)));
rotateX(HALF_PI);
// draw the square
rect(0, 0, sqrt(2), depth);
if (doSaveFrames) {
saveFrame("frames/line-######.tga");
}
}
```
Instead of basing your animation off of the frameCount variable, create your own variable that you increment at your own speed, and then increase that speed over time. Keep your framerate the same, but increase your animation speed.

Any idea why this Processing sketch runs so slow?

I'm using processing 2.1.
Any idea why my simple sketch is running slow on my (powerful) machine?
I'm simply drawing some quads in a grid, and when pressing the mouse I was trying to animate them (via Ani library), but the animation is sloppy and superslow....Any hint?
import de.looksgood.ani.*;
import de.looksgood.ani.easing.*;
int quadSize = 30;
int spacing = 10;
int numRows = 11;
int numColumns = 22;
float angleRotationIncrease = 3;
void setup () {
size (900, 600, P3D);
background (0);
fill (255);
stroke (255);
Ani.init(this);
frameRate (60);
}
void draw () {
text(frameRate,20,20);
// println (angleRotationIncrease);
background (0);
int posX = 0;
int posY = 0;
int angleRotation = 0;
float scaleFactor = 1;
float scaleFactorIncrease = -0.045;
for (int i=0; i<numRows; i++) {
for (int j=0; j<numColumns; j++) {
pushMatrix();
translate (posX + quadSize/2, posY + quadSize/2);
// println (radians(angleRotation));
rotate(radians(angleRotation));
if (scaleFactor > 0) {
rect (-quadSize/2 * scaleFactor, -quadSize/2* scaleFactor, quadSize* scaleFactor, quadSize* scaleFactor);
}
popMatrix ();
posX += (quadSize + spacing);
angleRotation += angleRotationIncrease;
scaleFactor += scaleFactorIncrease;
}
// for each new line, reset or change params
scaleFactorIncrease -= 0.002;
scaleFactor = 1;
angleRotation = 0;
posX = 0;
posY += (quadSize + spacing);
}
}
void mousePressed() {
Ani.to(this, 20, "angleRotationIncrease", -3);
}
Solved. it was a casting problem. Anglerotation is an int, so when subtracting the value I'm animating via Ani, it gets rounded
Because you are animating low range of values over very long period of time
Ani.to(this, 20, "angleRotationIncrease", -3);
Your range is [3,-3] and time is 20 seconds. Just try to decrease time and increase range an you will see more fluent animation on your powerful machine :) like this:
Ani.to(this, 2, "angleRotationIncrease", -30);
But at the end of animation is some kind of slowing what should be specified by default by Ani library so for more information read documentation here

Resources