It's quite a long set of code, actually, but I'll still paste it in, because someone might need it later. It also requires an additional "palette" file, so I'll link that too:

https://www.dropbox.com/s/r3u1gb8cm234qc4/palette?dl=0

byte[] byte2(int a){        //Converts an int into 4 bytes packed into an array
    byte[] ret = new byte[4];
    ret[0]=(byte)((a)&0xFF);
    ret[1]=(byte)((a>>8)&0xFF);
    ret[2]=(byte)((a>>16)&0xFF);
    ret[3]=(byte)(a>>24&0xFF);
    return ret;
}

byte[] append(byte[] in,byte[] more){ //Allows appending an array of bytes to another array of bytes
 for(int i=0;i<more.length;i++){
   in=append(in,more[i]);
 }
  return in;
}
int bitpos(int x,int y,int width){ //Converts input X Y coordinates into a byte number
  return x+y*(bitoffset(width));
}
int bitx(int in,int width){ //Converts a byte number into an X coordinate
  return in%(bitoffset(width));
//return 0;
}
int bity(int in,int width){ //Converts a byte number into an Y coordinate
  return floor(in/(bitoffset(width)));
}
boolean bitgood(int in,int width){ //Can I write in this byte, or it's one of those 4 spacing bytes at the end of each horisontal line?
  return in%(bitoffset(width))<width;
}

int bitoffset(int width){ //To account for these 4 additional spacing bytes at the end of each horisontal line.
return (((width - 1) / 4) + 1) * 4;
}

int unsignbyte(byte in){ //Converts a byte into int as if it were unsigned
 return (int)in&0x7F+(in<0?128:0); 
}

void MakeBMP(String path,PImage img){  ///Grabs a path and an image, and saves it as an 8-bit BMP file with palette from dataPath("palette") file.

  int width=img.width;
  int height=img.height;
  //This is based on this: http://www.dragonwins.com/domains/getteched/bmp/bmpfileformat.htm
  byte[] test={66,77}; //                     0 "BM" header.
  test=append(test,byte2(0)); //              2 File size.  We are going to fill this later.
  test=append(test,byte2(0)); //              6 Reserved.          
  test=append(test,byte2(1024+54)); //10 Pixel data start offset. ok.

  test=append(test,byte2(40)); //            14 Header size.
  test=append(test,byte2(width)); //         18 Width.
  test=append(test,byte2(height)); //        22 Height.
  test=append(test,byte(1)); //              26 Amount of images in this image.  ._.
  test=append(test,byte(0)); //              27 2 bytes for amount of images here. ._.
  test=append(test,byte(8)); //              28 Bits per pixel. This is 8 bit bmp generator code thing, so not much to say here.
  test=append(test,byte(0)); //              29 Bits per pixel. Needs 2 bytes.
  test=append(test,byte2(0)); //             30 Compression type. I don't like compression.
  test=append(test,byte2(0)); //             34 Image size. Really matters only if compressed, so I'll just 0 here.
  test=append(test,byte2(0));//              38 Preferred X printing resolution. We aren't going to print sprites!
  test=append(test,byte2(0));//              42 Preferred Y printing resolution. We aren't going to print sprites!
  test=append(test,byte2(0));//              46 Number of used Color Map entries.
  test=append(test,byte2(0));//              50 Number of significant Color Map entries.

  //54 Color table now? Oh snap...
  byte[] Palette=loadBytes(dataPath("palette"));
  for(int i=54;i<54+1024;i++){          //Loop to iterate through the whole palette
  //test=append(test,byte(i-54)); //blue
  //test=append(test,byte(0)); //green
  //test=append(test,byte(0)); //red
  //test=append(test,byte(0)); //zero
    test=append(test,Palette[i]); //Just grab everything from the palette file
  }

  //1078 AND EVEN COLOR DATA?! OHH SNAAAAP!!
  for(int i=0;i<(width+4)*height;i++){ // Loop to iterate for every input image pixel  (+4 is because every horisontal line has 4 additional bytes at the end, which are usually all 0, I guess spacing different lines out.
  //This next bit of code grabs the color from the input image and compares it to all colors in the palette until it finds the one that is closest, and assigns that.
 color pixel=img.get(bitx(i,width),height-bity(i,width)-1); //Grab matching image pixel
 if(alpha(pixel)==255&bitgood(i,width)){ //If it's transparent just use first color in the palette (which is R G B 255 0 255 in the included palette). Or if it's a spacing byte then also don't bother.
     float diffbest=99999999; //How different is the best matching color in the palette from the current image pixel?
    int best=0;  //What color in the palette is the best matching to the current image pixel?
  for(int u=0;u<255;u++){ //Iterate through all palette colors
    float diff=abs(unsignbyte(test[56+u*4])-red(pixel))+abs(unsignbyte(test[55+u*4])-green(pixel))+abs(unsignbyte(test[54+u*4])-blue(pixel)); //Difference between current img pixel and current pal color
    if(diff<diffbest){ //If this palette color's better
     diffbest=diff; best=u;  //Remember it
    }
    if(diff==0){u=255;} //If it matches perfectly to the input image color, why bother with all of the other colors in the palette?
  }
  test=append(test,byte(best));
  }else{test=append(test, byte(0));} //Just 0.
}

  test[2]=byte2(test.length-54)[0]; //       2 File size
  test[3]=byte2(test.length-54)[1]; //       2 File size
  test[4]=byte2(test.length-54)[2]; //       2 File size
  test[5]=byte2(test.length-54)[3]; //       2 File size
  saveBytes(path,test); //Allright, work's done! Everyone go home!
}

Glad you worked out a solution!

I ended up just copying the first 1078 bytes(54 for header, 1024 for palette) from one of the sprites and pasting that at the beginning of every file my code outputs, with needed changes like file size and width/height of the image.

Is this something simple enough that you could share it as a few lines of example code, in case someone else does have a similar problem?

Yes, it's most definitely the palette. I figured that out too when working on custom code to make it work. Apparently the game uses its own palette for every image file it uses. I ended up just copying the first 1078 bytes(54 for header, 1024 for palette) from one of the sprites and pasting that at the beginning of every file my code outputs, with needed changes like file size and width/height of the image.

I managed to accomplish my goal with saveBytes() already, just saying. I don't think that I should mark any replies as answers since that would confuse people with the same question. (forgive my possible dorkiness, not an often forum dweller .-.)

Sorry I didn't make it clear - S4P does not support separate files for sprite positioning, as I said before -

S4P expects all the sprites on a particular sheet to be have width and height with no gaps between them.

So I am trying to implement jumping using the Sprites library I can see all the functions to implement them but cannot use it. ( I cannot even get a working example ) Anyone can put me on track on how to get started ?

S4P expects all the sprites on a particular sheet to be have width and height with no gaps between them.

If the sprites are of irregular size and not in a grid pattern then you would need a second file detailing the [x, y, w, h] for each sprite on the sheet.

I'm fairly new to processing but I've been progressing well with learning how to use it. I've been working on a simple flappy bird esque game and what I want to do is to have the bird and "pipes" collisions be recognized on a pixel-level, ive seen Peter Lagers code for pp_collision but i can't seem to get it to work for the obstacles. can someone tell me how to incorporate the classes into pp_collision(PImage imgA, float aix, float aiy, PImage imgB, float bix, float biy)

for souls https://i.imgur.com/PZm7ivN.png and https://i.imgur.com/wvOkeEZ.png . I would love to know how to get collisions on a pixel level for animated sprites (ie. the souls array) as well but its secondary which is why i commented its code out.

//int numFrames = 2;  // The number of frames in the animation
//int currentFrame = 0;
//PImage[] souls = new PImage[numFrames];


int gameState; //0 = startscreen, 1 = in-game, 2 = game over, 3 = restart-screen
int o = 240;


Ghost ghost;
Obstacle[] obstacles = new Obstacle[2];
Score score;
// Game states
boolean gameStarted = false;
boolean gameOver = false;
boolean gameRestart = false;


void setup() {
  //frameRate(30);
  fullScreen(FX2D);
  //size(1280, 720, FX2D);

  ghost = new Ghost(width/2, height/2);
  obstacles[0] = new Obstacle(width, random(100, height-100));
  obstacles[1] = new Obstacle(width*1.5+25, random(100, height-100));
  score = new Score();

  //startTimer = new Timer (0);

  //for (int k = 0; k < numFrames; k++) {
   // String imageName = "Soul_" + nf(k, 2) + ".png";
   // souls[k] = loadImage(imageName);
  //}
}


void draw() {
  background(175); 

  if (gameState==0) {
    gameRestart = true;
    drawMenuScreen();
    score.highscores();
    //startTimer.countUp();
    //fill (255);
    //text (startTimer.getTime(), 60, 60);
  } 
  if (gameState==0 && mousePressed) {
    if (gameRestart == true)
      //timerReset();
    score.reset();
    gameState = 1;
  }


  if (gameState==1) { 
    gameStarted = true;
    gameRestart = false;
    ghost.draw();
    for (Obstacle o : obstacles) { 
      o.draw();
      //Souls();
    }
    score.draw();
    detectCollision();

    if (gameState==1 && mousePressed) {
      //startTimer.countUp();
      //fill (255);
      //text (startTimer.getTime(), 60, 60);
    }
    if (gameState==1 && mousePressed) {
      ghost.jump();
    }
  }


  if (gameState==2) {
    //startTimer.countUp();
    //fill (255);
    //text (startTimer.getTime(), 60, 60);
    gameStarted = false;
    gameRestart = false;
    drawGameOver();
    ghost.reset();
    for (Obstacle obs : obstacles) { 
      obs.reset();
    }
  }
  //if (gameState==2 && startTimer.getTime()>=3.5) {
  if (gameState==2 && mousePressed) {
    if (gameStarted == false && gameRestart == false);
    //timerReset();
    gameState=3;
  }


  if (gameState==3) {
    gameRestart = true;
    drawMenuScreen();
    score.highscores();
  } 
  if (gameState==3 && mousePressed) {  
    if (gameRestart == true)
      score.reset();
    gameState = 1;
  }
}






 class Score {
  private int score = 0;
  private int highscore;
  private boolean scoreIncreased = false;

// Methods for increasing scores. If score is NOT increased

  void highscores(){
    if (score>highscore)
      highscore=score;
      else if (gameState==0 || gameState==3) {
      textAlign(CENTER);
      fill(255);
      textSize(width/60);
      text("HIGHSCORE: " + highscore, width/2, height/2 + height/8.25);
    }  
  }

  void increase() {
    if (!scoreIncreased) {
      score += 1;
      scoreIncreased = true;
    }
  }

  void reset() {
    score = 0;
    scoreIncreased = false;
  }

  void allowScoreIncrease() {
    scoreIncreased = false;
  }


  void draw() {
    pushStyle();
    if (gameState==2) {
      textAlign(CENTER);
      fill(0);
      textSize(width/60);
      text("SCORE: " + score, width/2, height/2 + 65);
    } 
      else if (gameState==1) {
      //rectMode(CORNER);
      textAlign(CENTER);
      fill(255);
      textSize(width/60);
      text("Score: " + score, width/2, 40);
    }
    popStyle();
  }
}



 class Obstacle {
  float initX;
  float topX;
  float topY;
  float w = 120; // original was 50
  PImage obstacle1, obstacle2;

  Obstacle(float initialTopX, float initialTopY) {
    initX = initialTopX;
    topX = initialTopX;
    topY = initialTopY;
    obstacle1 = loadImage("https://" + "i.imgur.com/9Dnn4sI.png");
    obstacle2 = loadImage("https://" + "i.imgur.com/d83OfMi.png");
  }


  void draw() {
    pushStyle();
    imageMode(CORNERS);
    image(obstacle1, topX, topY, topX+w, height-1);
    image(obstacle2, topX, 0, topX+w, topY - 180);
    popStyle();

     // Controls speed of object x movements (namely for obstacles)
    // topX -= 4.25;
    topX -= 9.5;
  }

  void reset() {
    topX = initX;
    topY = random(100, height-100);
  }

  void reposition() {
    topX = width;
    topY = random(100, height-100);
  }
 } 




class Ghost {
  float x;
  float y;
  float size = 85;
  float vy = 0;
  float ay = 0.63;
  PImage ghost;

  Ghost(float initialX, float initialY) {
    x = initialX;
    y = initialY;
    ghost = loadImage("https://" + "i.imgur.com/GPRyMO7.png");
  }

  void draw() {
    pushStyle();
    imageMode(CENTER);
    image(ghost, x, y, size, size);
    popStyle();


    y += vy;
    vy += ay;
  }

  void reset() {
    y = 200;
    vy = 0;
  }

  void jump() {
    vy = -9.5;
  }
}






// void Souls(){   
//   currentFrame = (currentFrame+1) % numFrames;  // Use % to cycle through frames
//   image(souls[(currentFrame) % numFrames], width/2, height/2);
//}




void drawGameOver() {
  pushStyle();
  fill(200, 200, 200, 200);
  noStroke();
  rect(-20, -20, width + 40, height + 40);
  score.draw ();
  popStyle();
}

void drawMenuScreen() {
  fill(0);
  noStroke();
  rect(-20, -20, width + 40, height + 40);
  ;
}



void detectCollision() {
  // Did the ghost come out of the screen?
  if (ghost.y > height || ghost.y < 0) {
    gameState=2;
  }

  for (Obstacle obstacle : obstacles) {
    if (ghost.x - ghost.size/2.0 > obstacle.topX + obstacle.w) {
      score.increase();
    }

    if (obstacle.topX + obstacle.w < 0) {
      obstacle.reposition();
      score.allowScoreIncrease();
    }

    //if (obstacle.detectCollision(ghost)) {
      //gameState=2;
    //}
  }
}

Can you help with incorporating the collision detection method below to the work on the ghost class and the obstacles array in my code

  obstacle2 = loadImage("up2.png");
  obstacle1x = (width - obstacle1.width)/2;
  obstacle1y = (height/3 - obstacle1.height)/2;
//  obstacle2x = (width - obstacle2.width)/4;
//  obstacle2y = (height - obstacle2.height)/4;
//    f2x = (width - ghost.width)/2;
//      f2y = (height - ghost.height)/2;
}

void draw(){
  background(0);
  image(obstacle1,obstacle1x,obstacle1y);
  obstacle1x = obstacle1x-2;
  if (obstacle1x <= -150){
    obstacle1x = 900;}
  image(ghost,mouseX,mouseY);
  if(pp_collision(obstacle1,obstacle1x,obstacle1y,ghost,mouseX,mouseY)){
    stroke(255,64,64);
    strokeWeight(1);
    noFill();
    rect(obstacle1x,obstacle1y,obstacle1.width,obstacle1.height);
    rect(mouseX,mouseY,ghost.width,ghost.height);
  }
}

final int ALPHALEVEL = 20;

boolean pp_collision(PImage imgA, float aix, float aiy, PImage imgB, float bix, float biy) {
  int topA, botA, leftA, rightA;
  int topB, botB, leftB, rightB;
  int topO, botO, leftO, rightO;
  int ax, ay;
  int bx, by;
  int APx, APy, ASx, ASy;
  int BPx, BPy; //, BSx, BSy;

  topA   = (int) aiy;
  botA   = (int) aiy + imgA.height;
  leftA  = (int) aix;
  rightA = (int) aix + imgA.width;
  topB   = (int) biy;
  botB   = (int) biy + imgB.height;
  leftB  = (int) bix;
  rightB = (int) bix + imgB.width;

  if (botA <= topB  || botB <= topA || rightA <= leftB || rightB <= leftA)
    return false;

  // If we get here, we know that there is an overlap
  // So we work out where the sides of the overlap are
  leftO = (leftA < leftB) ? leftB : leftA;
  rightO = (rightA > rightB) ? rightB : rightA;
  botO = (botA > botB) ? botB : botA;
  topO = (topA < topB) ? topB : topA;


  // P is the top-left, S is the bottom-right of the overlap
  APx = leftO-leftA;   
  APy = topO-topA;
  ASx = rightO-leftA;  
  ASy = botO-topA-1;
  BPx = leftO-leftB;   
  BPy = topO-topB;

  int widthO = rightO - leftO;
  boolean foundCollision = false;

  // Images to test
  imgA.loadPixels();
  imgB.loadPixels();

  // These are widths in BYTES. They are used inside the loop
  //  to avoid the need to do the slow multiplications
  int surfaceWidthA = imgA.width;
  int surfaceWidthB = imgB.width;

  boolean pixelAtransparent = true;
  boolean pixelBtransparent = true;

  // Get start pixel positions
  int pA = (APy * surfaceWidthA) + APx;
  int pB = (BPy * surfaceWidthB) + BPx;

  ax = APx; 
  ay = APy;
  bx = BPx; 
  by = BPy;
  for (ay = APy; ay < ASy; ay++) {
    bx = BPx;
    for (ax = APx; ax < ASx; ax++) {
      pixelAtransparent = alpha(imgA.pixels[pA]) < ALPHALEVEL;
      pixelBtransparent = alpha(imgB.pixels[pB]) < ALPHALEVEL;

      if (!pixelAtransparent && !pixelBtransparent) {
        foundCollision = true;
        break;
      }
      pA ++;
      pB ++;
      bx++;
    }
    if (foundCollision) break;
    pA = pA + surfaceWidthA - widthO;
    pB = pB + surfaceWidthB - widthO;
    by++;
  }
  return foundCollision;
}

Updated! Download: https://github.com/LuislopezMartinez/GameLibZero

the news: Library for Game development in Processing. Based on Div Games Studio Concept.

-CHANGELOG:

2.2.5: ADD: scene sistem.

2.2.6: BUG SOLVED from sprite shape coords in maximized window.

2.2.7 ADD: mouse.onRegion() for check is mouse on screen region & mouse.getBody() yo get fist body collision directly from mouse instance.

2.3.0 ADD: loadScene() for load scenes with collide zones defined. ENJOY!

2.3.1 ADD: desktopProjectSoftware!!!! a JAVA2D Render version of this library for old machines compatibility. ;)

**v2.4.0 march - 2018.

added ExitHandler with onExit() function. added father id for control father sprite of sprite with simple system. added Xmirroring and Ymirroring sprite properties. added cliping for sprites with Region(), simple systen for asign region of screen to viewport of sprite. screenDrawGraphic() now with region capability. added keyboard object for simplest keyboard input. added soundFade() function for fading sounds..**

But the OP wants the ellipses to always face the front, like billboard sprites.

Whenever I've done this I use a 2d renderer and do the 3d rotation calculations myself and just use the X and y coords of the result. You're using ortho so there's no perspective to worry about. You won't be able to use peasycam though.

Hi! I'm extremely new to Processing and wanted to learn how to use it. For a project of mine we were given the choice to use it so I went ahead and started to make a game with it. It's a game where your a spaceship trying to dodge enemy spaceships. Here's the code:

int Screen = 0;
int timersecs;
int milliseconds;
int shipX = 40, shipY = 300;
boolean intersect = false; 
PImage Ship;
PImage Enemy1;
PImage Enemy2;
PImage Enemy3;
PImage Enemy4;
PImage Enemy5;
PImage SpaceWarLoad;
PImage SpaceWarBack;
Ships s[];

void setup ()
{ 
 size(600,600);
 Ship = loadImage("Smallship.png");
 SpaceWarLoad = loadImage("SpaceWarLoad.png");
 SpaceWarBack = loadImage("SpaceWarBack.jpg");
 s = new Ships[5];
for (int z = 0; z < 5; z++)
{ 
  s[z] = new Ships();
}
}

void draw ()
{                                             //Loading screen and Background
  if (Screen == 0)
  {
    imageMode(CENTER);
    image(SpaceWarLoad,width/2,height/2);
  }
else 
{
    imageMode(CENTER);
    image(SpaceWarBack,width/2,height/2);
    image(Ship, shipX, shipY);                        //Ship Sprite
    timer();
}
if (shipY <= 30)        //Border control
{
  shipY=30;
}
else if (shipY >= 560)
{
  shipY = 560;
}
 for (int z = 0; z < 5; z++) //array to create 5 enemy ships
 {
   if (Screen == 1)
   {
       s[z].display();
   }
  }
}

void keyPressed()       //Movement
{ if (key==CODED) 
{
  if(keyCode==UP)
  { 
    shipY=(shipY)-10;
  }
  else if(keyCode==DOWN)
  { 
    shipY=(shipY)+10;
  }
}
}

class Ships
{
  float xposition, yposition, speed;
  int spriteSelector;
  Ships ()
  {
    command();
  }

void command()
{
  yposition = (int) random(30,561);
  xposition = 600; 
  speed = 5;
}

void display()
{  
  spriteSelector = (int) random(1,6);
  if (spriteSelector>0)
  {
    if (spriteSelector<2)
    {
    Enemy1 = loadImage("Smallship2.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>1)
  {
    if (spriteSelector<3)
    {
    Enemy1 = loadImage("Smallship3.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>2)
  {
    if (spriteSelector<4)
    {
    Enemy1 = loadImage("Smallship4.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>3)
  {
    if (spriteSelector<5)
    {
    Enemy1 = loadImage("Smallship5.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>4)
  {
    if (spriteSelector<6)
    {
    Enemy1 = loadImage("Smallship6.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
    if (shipX-xposition > 0 & shipY >= yposition) 
    {
    intersect = true;
    }
    if (intersect == true)
     {
       image(Enemy1, shipX, shipY); 
     }
}
}


void mousePressed()        //Start state detection
{
  Screen=1;
}

void timer()               //Timer for score
{
  milliseconds = millis();
  timersecs = milliseconds/100;       //speed of timer
  textSize(20);
  text(timersecs,540, 600);
  text("Score:",480, 600);
  fill(#FFFFFF);
}

Now I've run into a couple of problems. The game loads in the enemy sprites through an array but I don't want it to be a one and done deal. Instead, I want the array to make 5 ships on the screen consistently, every 5 seconds (lets say). How would I do this?

Also, my hit detection is really bad. I tried treating the sprites like rectangles but it seems it didn't work. How would I go about making the collisions between the player controlled sprite and each of the sprites spawned by the array work?

Thank you both very much!

Sprites are indeed the exact thing I was looking for, I just didn't know it was called a sprite.

As for stealing someone else work, I do not intend on going public with my program. It's a personal project which purpose is to not only keep me occupied, but also a way for me to learn more about coding (I'm still a novice).

You aren't looking for gifs. You're looking for sprites or sprite animations.

Keep in mind that creating sprites is an art in itself, so please don't steal somebody else's work. Either find an open-source sprite sheet, commission an artist to create one for you, or come up with your own.

Your problem may be that you probably need sprite sheets, not gifs. You CAN also load gifs as sprite assets....

• https://processing.org/examples/animatedsprite.html

But for four-direction motion, that may not be what you want. You may want sheets instead.

Look at the processing sprites library.

• http://www.lagers.org.uk/s4p/index.html

Also, look at free online game assets, many of which have categories for sprite sheets.

• https://opengameart.org/
• https://itch.io/game-assets/tag-sprites
• https://www.gameart2d.com/freebies.html
• https://craftpix.net/categorys/sprites/

In the tank demo all the graphics are sprites and all the sprites are the same size (w x h) so the whole game is like a chessboard grid. The tank is prevented from going through boundaries by checking sprite collisions (Sprites supports pixel level collision detection)

The demo also uses a simple image to define the starting positions of the boundaries, targets and sprites but you could use a text file instead.

Hey guys so I play around with coding games but I am wondering what the best way to set boundaries for a player, the way I use now is using co-ordinates points when the player reaches them he can't pass but it becomes excruciating for bigger projects any ideas ? (I was looking at the Sprites library and noticed that the tank demo uses colors then overlaid with the map and I presume when the player interacts with those colors it triggers a certain action but still not sure how to use that).

So I've tried using sprites and seems like it is not behaving better than using movie files. strangely enough, performence using P2D was much worse (attaching the code at the bottom).

a few questions:

(1) if I enter the original height an width of the video to the size value does it still act as if it is resizing it?

(2) Jeremy please tell me if I understand your answer correctly - will using a limited number of "starting points" improve performance?

(3) What if I will change a starting point only for each instance of the letter. let's say we use the word "Massachusetts", the starting points will be 1112211131123 That way, same letter won't have a similar starting point, but new starting points will be limited only to repeating letters. the question here is, should that improve performance?

Thank you for all your help you guys are wonderful :)

String str = "אשגךלגךלגךלגךלגךלגךלגךלגךלגךלגךלבל";

// typographic elements

float hor_margin = 30;
float vert_margin = 30;
float kerning = 50;
float leading = 100;

int[] letter_frame = new int[str.length()];;

String  zeros = "000";
PImage sprite;

void setup(){
  size(800, 600);

  for(int i = 0; i <str.length(); i++){
  letter_frame[i]=int(random(0,300));

  }
}

// increments the letter

void letter(char which_letter, float x_loc, int i){  
    letter_frame[i]++;
    if(letter_frame[i]<10){
     zeros="000"; 
    }
    if (letter_frame[i]  >= 10){
     zeros ="00"; 
    }
    if (letter_frame[i] >= 100){
     zeros = "0"; 
    }
    if (letter_frame[i] >= 1000){
     zeros = ""; 
    }
    if (letter_frame[i] == 3617){
    zeros = "000";
    letter_frame[i] = 1;
    }
    sprite =loadImage(which_letter+zeros+letter_frame[i]+".png");
    image(sprite, x_loc, 0);

    blendMode(MULTIPLY);

}

void draw(){
  background(255);

  // goes through each letter and draws it

  for (int i = 0; i < str.length(); i++){
   letter(str.charAt(i), width-i*kerning, i);
 }

         fill(0);
  textSize(16);
  text("Frame rate: " + int(frameRate), 10, 20);

}

@jeremydouglass, @koogs ok thank you!

FYI I've got a huge improvement in performance once added "P2D" to size value. Still will try the sprites angle.

Hope it is helpful! Let us know here how it goes with sprites.

Please do not post near-duplicates: https://forum.processing.org/two/discussion/25876/frame-rate-multiple-videos-and-recording

If you are working on several closely related issues on a single aspect of a single piece of code (like typing multiple videos, and performance), then post updated code as a new message on your existing thread. That way all the information on what you are doing is in one place, and it is easier for us to help you. Duplicates are hard work for most of the forum moderators and volunteers, and it makes them unhappy.

Thank you for you answer :) The animations are supposed to be **not **synchronized.

I'm still contemplating the fixed width. I'd be happy to make it not-fixed in the future.

I will try to use sprites asap.

copied from another thread

jeremydouglass 9:01AM

What is the video content? You should probably use sprites for this, not movies. I would expect a major performance difference.

You can also optimize lookups by doing only 26 (or however many characters) passes. So, load the current sprite sheet state for the a animation, then draw every a on the screen (they are all synchronized, right?) then b, then c... now no matter how many characters you type, you are only doing 26 lookups. This is particularly easy if you use a fixed-width "font".