Growing Circle on Mouse Move

edited October 2015 in How To...

Hello.

I am new to processing and I need help. I want to make an active processing program that makes a circle grow in size when you move the mouse away from the center of the screen, and shrinks in size when the mouse is moved back towards the center of the screen. Also, i want the circle to gradually get darker in color when moving away from the center of the screen.

Answers

  • edited October 2015
    // forum.Processing.org/two/discussion/12899/growing-circle-on-mouse-move
    // GoToLoop (2015-Oct-08)
    
    void setup() {
      size(800, 800, JAVA2D);
      smooth(4);
      noLoop();
      frameRate(25);
    
      ellipseMode(CENTER);
      stroke(0100);
      strokeWeight(5);
    }
    
    void draw() {
      int diam = abs(2*mouseX - width);
      color c = (color) (norm(diam, width, 0) * 0400);
      frame.setTitle("diam: " + diam + "   color: " + c);
    
      background(-1);
      fill(c);
      ellipse(width>>1, height>>1, diam, diam);
    }
    
    void mouseMoved() {
      redraw();
    }
    
  • Sorry. Let me add something to my question. I want the circle to follow the mouse and leave a trail of circles getting bigger (and gradually darker in colour) as you move the mouse farther away from the center, and smaller (and gradually lighter in colour) as you move back towards the center of the screen. Again, sorry for not clarifying that in my initial question.

  • Not exactly you're asking about. But you can work your way from there:
    http://studio.ProcessingTogether.com/sp/pad/export/ro.9GTDpA6dp4tH1

  • What I'm looking for is sort of like that, but I want the circles to stay on screen. I've attached a picture of what I want the program to look like. The bottom of the hurricane depicts the center of the screen, and as the mouse is moved away from it, the circle leaves a trail that stays on the screen and gets bigger, and gets smaller when moved back towards the center. What I have now is this. int circleSize = 0; float circleW = 50; float circleH = 50;

    void setup() { size(500,500); background(0); }

    void draw() { if (keyPressed) { background(0); } else { ellipse(mouseX, mouseY,circleW, circleH); } } I'm very new to this so I don't know how to continue.

  • Okay so I think i figured it out by modifying the first comment. The only thing I am not sure of is how to make the circles darker the farther away the mouse is from the center.

Sign In or Register to comment.