how to tickle

ysj237

I want to tickle the two colored ellipses when they touch together with the mouse but not sure how, here are my codes

boolean goingHorizontal = false; boolean goingVertical = false; boolean fade; float buffer = 10; float mx; float my; float easing = 0.05; float x = 33; float y = 60; float t, c; // X and Y coordinates of ellipse float hr, vr; // horizontal and vertical radius of the ellipse int radius = 24; int edge = 150; int inner = edge + radius; int alpha = 1, delta = 1; int value = 34;

void setup() { size(600,600);

}

void draw() { background(90); noFill(); fill(value);

fill(204, 120); ellipse(256, mouseX, width, height);

if (abs(mouseX - t) < hr && abs(mouseY - c) < vr) { t += random(-5, 5); c += random(-5, 5); } fill(0); text("tickle", t, c); }

float vert = dist(0, pmouseY, 0, mouseY); float horiz = dist(pmouseX,0,mouseX,0);

if(vert > horiz + buffer){ goingHorizontal = false; goingVertical = true; } else if(horiz > vert + buffer){ goingHorizontal = true; goingVertical = false; } else if(vert == horiz){ goingVertical = false; goingHorizontal = false; }

fill(value); ellipse(mx, 256, radius, radius);

fill(value); ellipse(214, my, radius, radius);

fill(value); ellipse(mx, 144, radius, radius);

fill(value); ellipse(471, my, radius, radius);

fill(204, 120);

rect(0, 0, width, height); fill(0);

// If cursor is over the ellipse change the position if ((mouseX >= x) && (mouseX <= x+55) && (mouseY >= y-24) && (mouseY <= y)) { x += random(-2, 2); y += random(-2, 2);

  fill(40); 

ellipse(my, mx, radius, radius);

}

noFill();

rect(240.33,125.66,203.33,144);

noFill(); rect(127.66,161.61,250,200);

noFill();
rect(256.33,291,214.60,184); strokeWeight(1);

line(445,125.66,376,161); line(377,162,471,291); line(240,125,127,161); line(127,361,240,269); line(377,361,445.67,269.67); line(256,291,127,161); line(377,361,471,475); line(127,361,256,475);

if (abs(mouseX - mx) > 0.1) { mx = mx + (mouseX - mx) * easing; } if (abs(mouseY - my) > 0.1) { my = my + (mouseY- my) * easing; }

fill(214, 252, 46, alpha); ellipse(my, mx, radius, radius); twinkle();

mx = constrain(mx, 256, width - inner); my = constrain(my, 291, height - inner); noFill();

fill(150, 145, 232, alpha); ellipse(mx, my, radius, radius); twinkle(); }

void mouseMoved() { value = value + 1; if (value > 200) { value = 0; } }

void twinkle() { //fade in and out if (alpha == 0 || alpha == 190) { delta= -delta; } alpha += delta; }

Chrisir

what means tickle? vibrate?

ysj237

Chrisir yes! tickle as in vibrate!!

Chrisir

ok, here we go:

do you mean when the two ellipses touch each other

or when one of the touches the mouse?

because the latter would be still possible although you display the ellipse at mouse pos

to vibrate just add a random value to x and y pos of mouse when it's near to mouse

like in

...+random(-5,5) for x and y of the ellipse position

ysj237

Chrisir Yes I meant when the two ellipses touch with each other due to mouse interaction, they vibrate/tickle. Would I need to add a dist( ) function?

koogs

Edit post, highlight code, press Ctrl-o.

Chrisir

yeah, dist( ) function is correct

if( dist (....)  < 22 ) 
       tickleIsOn = true; 
else 
       tickleIsOn = false; 

before setup()

boolean tickleIsOn = false; 

when drawing the ellipse: (replace the dots with your x and y values )

if (tickleIsOn) 
    ellipse ( ...+random(-5,5) , ....+random(-5,5) , width, height); 
    else 
    ellipse ( ..., .... , width, height); 

Chrisir

I am not sure what you code does though, but it looks extremely cool.

When you want to vibrate each ellipse, you need to have a separate tickleIsOn for each ellipse (tickleIsOn1, tickleIsOn2, tickleIsOn3... ). When the dist is small for each pair of ellipses (!!) then set both tickleIsOn to true (for both ellipses that are close).

(This would actually mean it is better to have arrays for the ellipses (or even a class Ellipse and an array of that class)).

jeremydouglass

@ysj237 --

Here is an example tutorial of circle/circle collision detection by Jeffrey Thompson:

• http://www.jeffreythompson.org/collision-detection/circle-circle.php

HOWEVER, you said ellipse/ellipse, not circle/circle. Here's what Thompson says about that:

You may be wondering why we are only talking about circles and not ellipses. It might seem fairly similar, but the math for ellipse collision is actually quite complicated. Consider it a great challenge once you master the other collision examples!

Still, once you work out the collision, adding the vibration behavior to any collision (point/rect, circle/square, etc.) is easy. Below, Thompson's sketch has been modified with a few extra lines so that if(hit) randomizes where the circle is drawn.

// www.jeffreythompson.org/collision-detection/circle-circle.php
// with vibration added -- forum.processing.org/two/discussion/21763/how-to-tickle
float c1x = 0;      // circle 1 position
float c1y = 0;      // (controlled by mouse)
float c1r = 30;     // radius

float c2x = 300;    // circle 2 position
float c2y = 200;
float c2r = 100;

float vib1 = 0;
float vib2 = 0;
int VIBAMOUNT = 10;

void setup() {
  size(600,400);
  noStroke();
}


void draw() {
  background(255);

  // update position to mouse coordinates
  c1x = mouseX;
  c1y = mouseY;

  // check for collision
  // if hit, change color
  boolean hit = circleCircle(c1x,c1y,c1r, c2x,c2y,c2r);
  if (hit) {
    fill(255,150,0);
    vib1 = random(0,VIBAMOUNT);
    vib2 = random(0,VIBAMOUNT);
  }
  else {
    fill(0,150,255);
    vib1 = vib2 = 0;
  }
  ellipse(c2x+vib1,c2y+vib2, c2r*2,c2r*2);

  // other circle, controlled by mouse
  fill(0, 150);
  ellipse(c1x,c1y, c1r*2,c1r*2);
}


// CIRCLE/CIRCLE
boolean circleCircle(float c1x, float c1y, float c1r, float c2x, float c2y, float c2r) {

  // get distance between the circle's centers
  // use the Pythagorean Theorem to compute the distance
  float distX = c1x - c2x;
  float distY = c1y - c2y;
  float distance = sqrt( (distX*distX) + (distY*distY) );

  // if the distance is less than the sum of the circle's
  // radii, the circles are touching!
  if (distance <= c1r+c2r) {
    return true;
  }
  return false;
}

koogs

Lines 53-55 are just dist()

jeremydouglass

@koogs -- True. I think Thompson shows the long form of every single collision detection calculation in his tutorials because he is teaching collision concepts through a geometry primer. You could replace circleCircle with:

if(dist(c1x,c1y,c2x,c2y)<= c1r+c2r){
  return true;
}

If you want to dig deeper into ellipse-ellipse collision -- which is HARD -- see: https://forum.processing.org/two/discussion/19110/calculate-ellipse-intersection