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

edited March 9 in Library Questions

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();
}

Answers

  • Answer ✓

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

  • thanks koogs

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

  • 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

  • this is for my midterm project.. plz help!

  • edited March 9 Answer ✓

    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.

Sign In or Register to comment.