Loading...
Logo
Processing Forum
Programming Questions
karlhungus
karlhungus

easing question

in Programming Questions  •  7 months ago  
hi,
how to put rect to start from the center?
and how to set left and right bounds?
best, k

Copy code
  1. float offset = 0;
    float easing = 0.05;
    void setup(){
      size(400,400);
     
    }


    void draw(){
      background(255);

     
      float dx = (mouseX-20) - offset;
      offset += dx * easing;
      fill(0);
      rect(offset,height/2,20,20);
     
    }

Replies(2)

amnon.owed
amnon.owed

Re: easing question

7 months ago
Voila...

Adapted Code
Copy code
  1. float x = 200;
  2. float easing = 0.05;
  3.  
  4. void setup() { 
  5.   size(400, 400);
  6.   fill(0); 
  7. }
  8.  
  9. void draw() { 
  10.   background(255);
  11.   line(100, 0, 100, height);
  12.   line(300, 0, 300, height);
  13.   float dx = constrain(mouseX-10, 100, 280) - x;
  14.   x += dx * easing;
  15.   rect(x, height/2, 20, 20);
  16. }
GoToLoop
GoToLoop

Re: easing question

7 months ago
Re-adapted code to use rectMode(CENTER) and any canvas' size():  
Copy code
    final static byte  SZ = 30, RAD = SZ >> 1;
final static float EASING = .1;

float x;
int w2, w4;

void setup() {  
  size(800, 400);
  frameRate(60);
  rectMode(CENTER);
  fill(0);

  w2 = width >> 1;
  w4 = width >> 2;
}

void draw() {  
  background(-1);

  line(w4, 0, w4, height);
  line(width - w4, 0, width - w4, height);

  float dx = constrain(mouseX - RAD, w4 + RAD, width - w4 - RAD) - x;
  x += dx * EASING;

  rect(x, height >> 1, SZ, SZ);
}

Top Reply

Statistics

  • 2 Replies
  • 230  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts