Line bending?

1

Heres an easy one I hope.

How do draw a vertical line and make it bend into a curve as the mouse hits it.

or better yet,

a box that traps the mouse in it and stretches out when mouse hits the side.

hope I explained well.

2

:)… good luck

It would be very difficult to do, if you wanted the sides to be truely responsive to the location of the mouse. I’ve seen some things that do a poor job of simulating the effect… but they never looked right.

3

Wow, that would be a challenge indeed. You’d have to use the drawing API for sure, with a bit of curveTos here and there. I’ll try to give it a go if I manage to put my dirty hands on Flash.

pom :slight_smile:

4

You could imagine something based on Robert Penner’s code:

/* Credits: Robert Penner */
  // Extreme points of the curve
  x1=100;
  y1=200;
  x2=400;
  y2=200;
  this.onEnterFrame=function(){
	// control points
	controlX=_xmouse*2-(x1+x2)/2;
	controlY=_ymouse*2-(y1+y2)/2;
	// draw the curve
	this.clear();
	this.lineStyle(1,0,100);
	this.moveTo(x1,y1);
	this.curveTo(controlX,controlY,x2,y2);
  }
5

Or something inspired from Jean-Louis Gaujal’s submission to the Bit contest a long time ago if you replace the dot with the position of the mouse:

/* Author: JL Gaujal */
_root.createEmptyMovieClip("b", 1); 
b.lineStyle(30, 0xff0000); 
b.lineTo(1, 1); 
b._x = 275; 
b._y = 100; 
_root.onEnterFrame = function() { 
   ax = -30+50*Math.sin(_root._xmouse/200); 
   ay = 250+50*Math.cos(_root._xmouse/200); 
   dx = 530+50*Math.sin(_root._xmouse/200); 
   dy = 250-50*Math.cos(_root._xmouse/200); 
   _root.clear(); 
   _root.lineStyle(10); 
   vby += (b._y-Math.abs(ay+dy)/2)/25; 
   b._y -= vby; 
   b._x -= vbx; 
   _root.moveTo(ax, ay); 
   if (b._y<Math.abs(ay+dy)/2) { 
      _root.lineTo(dx, dy); 
   } else { 
      vbx += (ay-dy)/100+(b._x-(ax+dx)/2)/20; 
      _root.curveTo(b._x, Math.abs(ay+dy)/2, b._x, b._y); 
      _root.moveTo(dx, dy); 
      _root.curveTo(b._x, Math.abs(ay+dy)/2, b._x, b._y); 
   } 
};