How would I make the path of ellipses left behind the cursor stay there?

edited October 2017 in Questions about Code
int num=60; //declare "num" variable 
float mx[]=new float[num];
float my[]=new float[num];

void setup()  //set up the drawing environment
{
  size(700, 700);
  smooth();
  noStroke();
  frameRate(80);
  background(51); 
  fill(255, 153); 
}


void draw() //draw with a finger
{
background(141);
{
for(int i=1; i<num; i++) {
    mx[i-1] = mx[i];
    my[i-1] = my[i];
  } 
  for(int i=0; i<num; i++) {
    fill(255, 153); 
    ellipse(mx[i], my[i], 10, 10);
  }
}
drawStuff();
// Stores previous value as first value in new array
  for(int i=1; i<num; i++) {
    mx[i-1]=mx[i];
    my[i-1]=my[i];
}
  mx[num-1]=mouseX;
  my[num-1]=mouseY;
// Drag the finger cursor to a new spot in environment 
  for(int i=0; i<num; i++){
   fill(252,207,161);
   rect(mouseX, mouseY, 25, 100);
   arc((mouseX+12.5),mouseY,25,45,PI,(PI+PI));


  }
}

void drawStuff(){
  fill (60);    // draws top dark border
  rect(0, 0, 700, 40);

  fill(60); // draws middle and bottom dark borders
  rect(25, 340, 650, 20);
  rect(25, 680, 650, 20);

  fill(255, 248, 56); //this draws the yellow sides 
  rect(0, 40, 25, 640); //left side
  rect(675, 40, 25, 640); //right side 
}

Answers

  • edited October 2017

    Don't call background? This clears the screen.

    The alternative is to remember everything so far and redraw it every frame.

    Btw, line 19 looks a bit odd. It would help if your code was properly indented. Ctrl-t in the pde editor will do this for you.

  • And please don't post duplicates.

  • Deleting background() on line 18 makes it so the cursor permanently leaves its mark in the window, and the white ellipses drawn by the cursor too. I just want the ellipses to stay.

  • Sorry about the duplicates

  • use arrays like each 15 frames push mouse location in array. Then each frame iterate over array to draw ellipses at saved mouse location. easy. making a vid for you ^^

  • you are already storing the previous ellipse positions, but not all of them.

    you need to remember ALL the previous positions and redraw them ALL every frame. this has obvious problems.

    the problem is that you are drawing both things you want to keep and things you don't want to keep.

    you could draw the ellipses to a PGraphics instance the size of the screen and then copy that to the screen every frame and then draw the rest over the top of it. https://processing.org/reference/PGraphics.html

    also, there's this (which i've not used): https://processing.org/reference/cursor_.html

  • Answer ✓

    here it is : have a look !

  • Hey man, I'm trying to implement your code, but it's not letting me. I'm not sure what's wrong.

  • I think the problem is using "position". It says that's not a class

  • Answer ✓

    I'm not sure what's wrong.

    it's python, not java.

  • Thank you for your help, man. What would I use instead of "position"? What should I look at?

  • edited October 2017

    oh just instead of position iterate over an array int i =0; for(i;i<positions.length;i++){ float[] elem = positions[i]; float x = elem[0]; float y = elem[1]; ... }

  • or for(float[] elem:positions){ float x= elem[0]; float y= elem[1]; ... }

  • Saving the positions isn't going to work - you'll end up with an enormous list that takes an age to redraw. Use a pgraphic layer.

  • Answer ✓

    an example of writing to the background

    PGraphics pg;
    
    void setup() {
      size(640, 480);
      pg = createGraphics(width, height);
    }
    
    void draw() {
      background(0);
      // draw to background
      pg.beginDraw();
      pg.noStroke();
      pg.fill(255, 255, 255, 128);
      pg.ellipse((1 + sin(14 * frameCount * .01)) * width / 2,
        (1 + cos(11 * frameCount * .01)) * height / 2,
        10, 10);
      pg.endDraw();
      // copy to foreground
      image(pg, 0, 0);
      // draw on foreground
      noStroke();
      fill(255, 0, 0);
      ellipse(mouseX, mouseY, 30, 30);
    }
    
  • I've tried the pgraphic layer in many locations in the code, and it's actually covering up all of the white dots from the finger cursor. I don't know what to do. It seems like I've tried everything.

  • Answer ✓

    ditch the array stuff.

    // forum.processing.org/two/discussion/24701/how-would-i-make-the-path-of-ellipses-left-behind-the-cursor-stay-there
    int num=60; //declare "num" variable 
    PGraphics pg;
    
    void setup()  //set up the drawing environment
    {
      size(700, 700);
      smooth();
      noStroke();
      frameRate(80);
      background(51); 
      fill(255, 153);
      // initialise pgraphics
      pg = createGraphics(width, height);
      pg.beginDraw();
      pg.background(141);
      pg.endDraw();
    }
    
    
    void draw() //draw with a finger
    {
      background(141);
      // draw ellipse to background at mouse pos
      pg.beginDraw();
      pg.stroke(255);
      pg.ellipse(mouseX, mouseY, 10, 10);
      pg.endDraw();
      // copy to screen
      image(pg, 0, 0);
      // border
      drawStuff();
      // draw finger
      fill(252, 207, 161);
      rect(mouseX, mouseY, 25, 100);
      arc((mouseX+12.5), mouseY, 25, 45, PI, (PI+PI));
    }
    
    void drawStuff() {
      fill (60);    // draws top dark border
      rect(0, 0, 700, 40);
    
      fill(60); // draws middle and bottom dark borders
      rect(25, 340, 650, 20);
      rect(25, 680, 650, 20);
    
      fill(255, 248, 56); //this draws the yellow sides 
      rect(0, 40, 25, 640); //left side
      rect(675, 40, 25, 640); //right side
    }
    
  • edited October 2017 Answer ✓

    Edit: these are examples of fading-type mouse trails. For a more permanent etch-a-sketch type, use PGraphics as above -- a pixel buffer works far better than a potentially infinite position array.

    The arrays tutorial gives a simple example of mousetrail ellipses stored in an array.

    The tutorial is here:

    The example is here:

    int num = 50;
    int[] x = new int[num];
    int[] y = new int[num];
    
    void setup() { 
      size(100, 100);
      noStroke();
      fill(255, 102);
    }
    
    void draw() {
      background(0);
      // Shift the values to the right
      for (int i = num-1; i > 0; i--) {
        x[i] = x[i-1];
        y[i] = y[i-1];
      }
      // Add the new values to the beginning of the array
      x[0] = mouseX;
      y[0] = mouseY;
      // Draw the circles
      for (int i = 0; i < num; i++) {
        ellipse(x[i], y[i], i/2.0, i/2.0);
      }
    }
    

    See also:

  • How would I make the path of ellipses left behind the cursor stay there?

    STAY THERE

    STAY, NOT FADE.

  • Thanks for your help everyone

Sign In or Register to comment.