In this article I am going explain how to create Shapes using Trigonometry with jQuery. JavaScript supports 3 trigonometric functions. This idea might help you if you want place elements on particular shape.
Math.sin(angle)
Math.cos(angle)
Math.tan(angle)

We need CSS and jQuery function to create pixels.

CSS :

#circle b {
  position:absolute;
  color:rgb(91,111,135);
}

#circle {
  position:relative;
  margin:auto;
  width:400px;
  height:400px;
  vertical-align:center;
}

putpixel function :

function putpixel(mx,my) {
$("#circle").append("<b style='left:"+mx+"px;top:"+my+"px'>.</b>");
}

Circle :

X = X -coordinate
Y = Y -coordinate
R = Radius of the Circle
X = R cosθ
Y = R sinθ

jQuery :

xc, yc : Center of the Cicle
i : Angle
r : Radius
var xc=200,yc=200;
var i=360,r=200;
while(i>0)
{
    putpixel(xc + r*Math.cos(i),yc+ r*Math.sin(i));
    i = i - 0.1;
}

Ellipse :

X = X -coordinate
Y = Y -coordinate
Ra, Rb = One-half of the Ellipse's major and minor axes 
X = Ra cosθ
Y = Rb sinθ

jQuery :

xc, yc : Center of the Cicle
i : Angle
ra, rb : One-half of the Ellipse's major and minor axes 
var xc=200,yc=200;
var i=360,ra=200, rb=100;
while(i>0)
{
      putpixel(xc + ra*Math.cos(i),yc+ rb*Math.sin(i));
      i = i - 0.1;
}

Random shape :

X = X -coordinate
Y = Y -coordinate
a, b  = Random variables
X = a ( 1 / cosθ )
Y = b ( 1 / sinθ )

jQuery :

xc, yc : Center
i : Angle
a = Random variables
var xc=200,yc=200;
var i=360,a=200, b=100;
while(i>0)
{
      putpixel(xc + a*(1/Math.cos(i)),yc+ b*(1/Math.sin(i)));
      i = i - 0.1;
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts