Redraw background with images

Ardacris

Hey guys :) I could use some help with the following code. It's basically a music visualizer. I want it to be on top of a background picture. The problem I have is, that if I want to "erase" the previous drawings by setting the background again, i have to use the loadImage function inside of the draw function, which completely screws the entire sketch. For some reason I cant access the picture inside draw if i load it inside setup..

So right now I only have a little workaround by drawing an ellipse before the visualisation, but this is really sub-optimal..

Is there any way to "reset" the drawing after each iteration of draw? Or is there a way to make the workaround-ellipse transparent? Or is there a way that I can simply use an image function without problems?

Thank you so much in advance!!! :)

(I know there is a lot of useless stuff in there)

https://workupload.com/file/zeqfbYS

Sorry, I don't know how to properly post code here, the "code" buttom doesnt seem to work >____>

    import ddf.minim.*;
    import ddf.minim.analysis.*;

    Minim minim;
    AudioPlayer player;
    AudioMetaData meta;
    BeatDetect beat;
    int  r = 200; 
    float rad = 70;
    int fag = 1;

    PGraphics pg;

    void setup()
    {
      size(displayWidth, displayHeight);
      minim = new Minim(this);
      player = minim.loadFile("Massengrab Demo 7.mp3");
      meta = player.getMetaData();
      beat = new BeatDetect();
      player.loop();
      //background(-1);
      //PImage img;
      //img = loadImage("Girl.jpg");
      //background(img);
      //image(img, width/2, height/2);
      noCursor();
      PImage img = loadImage("Girl.jpg");
      background(img);
      frameRate(60);
      pg = createGraphics(1000, 1000);

    }



    void draw()
    { 

      //if (fag > 80) {
      //PImage img = loadImage("Girl.jpg");
      //background(img);
      //fag = 1;
      //}

      pg.beginDraw();
      float t = map(mouseX, 0, width, 0, 1);
      beat.detect(player.mix);
      noStroke();
      fill(#1A1F18, 8);
      //tint(255, 128);
      ellipseMode(CENTER);
      ellipse(width/2, height/2+height/4, width/3.5, width/3.5);
      translate(width/2, height/2+height/4);
      noFill();
      fill(-1, 10);
      if (beat.isOnset()) rad = rad*0.9;
      else rad = 70;
      ellipse(0, 0, 2*rad, 2*rad);
      stroke(-1, 50);
      int bsize = player.bufferSize();
      for (int i = 0; i < bsize - 1; i+=5)
      {
        float x = (r)*cos(i*2*PI/bsize);
        float y = (r)*sin(i*2*PI/bsize);
        float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize);
        float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize);
        line(x, y, x2, y2);
      }
      beginShape();
      noFill();
      stroke(-1, 50);
      for (int i = 0; i < bsize; i+=30)
      {
        float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize);
        float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize);
        vertex(x2, y2);
        pushStyle();
        stroke(-1);
        strokeWeight(2);
        point(x2, y2);
        popStyle();
      }
      endShape();
     // if (flag)
     // showMeta();

     //pg.clear();
     pg.endDraw();

     fag++;

    }

    /*void showMeta() {
      int time =  meta.length();
      textSize(50);
      textAlign(CENTER);
      text( (int)(time/1000-millis()/1000)/60 + ":"+ (time/1000-millis()/1000)%60, -7, 21);
    }

    boolean flag =false;
    void mousePressed() {
      if (dist(mouseX, mouseY, width/2, height/2)<150) flag =!flag;
    }

    //
    /*boolean sketchFullScreen() {
      return true;
    }*/

    void keyPressed() {
      if(key==' ')exit();
      if(key=='s')saveFrame("###.jpeg");
    }

koogs

That's a scope problem. Move the definition of img outside of setup making it global, load it inside setup, then you can access it in draw.

Look at how minim is defined, instantiated and used. Do the same thing with img.