Double buffering?? But how do I do this!? - Programmers please assist!

rpinkall

Working in Processing, I have a generative program that creates a random colorful image.

An ellipse randomizes its direction each frame and draws on the canvas, leaving it's trail, creating the art canvas. furthermore, everytime the ellipse hits the edge of the screen, it returns to the middle, with a new color, and begins again.

I want to have this giphy of bob ross follow the same location of the randomized x and y, of the ellipse that draws. yet, I don't want bobross also to leave a trail on the screen, for it ruins the art.

this is my code:

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

PImage[] bobross = new PImage[78];
int counter = 0;

Minim minim;
AudioSample boop;
AudioSample boopp;
AudioPlayer bg;


float ex = 0;
float ey = 0;
float direction = random(-3, 3);
float ddirection = random(-3, 3);
String str = "01234";
int p0 = str.indexOf("0");
int p1 = str.indexOf("1");
int p2 = str.indexOf("2");
int p3 = str.indexOf("3");
int p4 = str.indexOf("4");



void setup() {
  size(1200, 600);
  ex = width/2;
  ey = height/2;
  background(255);

  imageMode(CENTER);
  for (int i = 0; i < bobross.length; i++) {
    bobross[i]= loadImage("data/bobross" + nf(i, 1) + ".png");
  }

  frameRate(140);
  minim  = new Minim(this);
  boop = minim.loadSample("boop.mp3", 512);
  bg = minim.loadFile("bach.mp3", 1024);
  bg.loop();
}

void draw() {
    if (frameCount % 6 == 0) {
    if (counter >= 77) {
      counter = 0;
    } else {
      counter++;
    }
  }


  image(bobross[counter], ex, ey);


  ellipse(ex, ey, 12, 12);
  ex += direction;
  ey += ddirection;
  direction = random(-10, 10);
  ddirection = random(-10, 10);

  if ( ex > width || ex < 0) {

    textSize(32);
    text(p0++, random(100,1100), random(100,500));
    fill(0, 102, 153);
    ex = 600;
    ey = 300;
    ex += direction;
    ey += ddirection;
    boop.trigger();
    stroke(random(0,255),random(0,255),random(0,255));

  }

  if (ey > height || ey < 0) {

    textSize(32);
    text(p0++, random(100,1100), random(100,500));
    fill(0, 102, 153);

    ex = 600;
    ey = 300;
    ex += direction;
    ey += ddirection;
    direction = random(-10, 10);
    ddirection = random(-10, 10);
    boop.trigger();
    stroke(random(0,255),random(0,255),random(0,255));



    fill(random(0, 255), random(0, 255), random(0, 255));
  }
}

void keyPressed() {
  if (key=='s')
    saveFrame();
}

koogs

Edit post, highlight code, press ctrl-o to format

rpinkall

thanks koogs

koogs

We are missing 78 images, can't run the code without them.

rpinkall

rpinkall

I plan to photoshop these images, removing the background and painting, where he will just be painting, i need to know how to layer this giphy on top, without leaving trails

rpinkall

this is for my midterm project.. plz help!

KevinWorkman

I honestly appreciate the amount of time you spent uploading 78 images, but please note that you should really create a MCVE that only requires 1 or 2 images. Or better yet, zero images! (Use a PGraphics instead.)

Also note that what you're describing is not the same thing as double buffering. Double buffering is a specific feature of a drawing library, which Processing automatically handles.

Now, to your actual question: you can create your own drawing buffer using the createGraphics() function. You can then draw the ball to that buffer. Finally, draw the buffer to the screen, and then draw the Bob Ross image to the screen.

If you still can't get it figured out, please post a MCVE that demonstrates the problem in as few lines of code as possible. For example, you aren't asking about playing sounds at all, right? So get rid of all of the code related to playing sounds, so we can focus on the actual problem. Good luck.