Your browser does not support HTML5 Canvas

Notes:

How interesting! a circle with a rippling circumference! Look at all the varying options! Study the examples! Better yet: See the effects of certain parameters on the shape by playing with our TNT Anim-BumpyCircle!

TNTBumpyCircle Features and Usage:
Primary Attributes:

8 Parameters:

  • center: TNTPoint
  • radius: a 'double'
  • b: frequency factor on radius, a 'double'
  • d: amplitude of radius oscillation, a 'double'
  • n: power on radius oscillation: if you use an integer here, you get a more normal shape; use a 'double' and the images get weird!
  • fillColor: TNTColor (can be null for a framework image)
  • borderStroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the image about its center.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The examples above were created by:

var n = 1;
var center = new TNTPoint(-13, 13);
var myBumpyCircle = new TNTBumpyCircle(center, 6, .2, 18, n, orange, blackStroke, 0);
myBumpyCircle.drawTNTBumpyCircle(context);

n = 1;
center = new TNTPoint(10, 11);
var myBumpyCircle2 = new TNTBumpyCircle(center, 7, 2, 6, n, brown, null, 0);
myBumpyCircle2.drawTNTBumpyCircle(context);

n = 3;
var myBumpyCircleA = new TNTBumpyCircle(center, 5, 2, 6, n, medGreen, null, 0);
myBumpyCircleA.drawTNTBumpyCircle(context);

n = 5;
var myBumpyCircleB = new TNTBumpyCircle(center, 3, 2, 6, n, darkGray, null, 0);
myBumpyCircleB.drawTNTBumpyCircle(context);

n = 10;
center = new TNTPoint(11, -11);
var myBumpyCircle3 = new TNTBumpyCircle(center, 7, 2, 10, n, pink, blackStroke, 0);
myBumpyCircle3.drawTNTBumpyCircle(context);

n = 19;
center = new TNTPoint(-10, -8);
brownStroke.lineWidth = .05;
var myBumpyCircle4 = new TNTBumpyCircle(center, 4, -6, 6.125, n, gold, brownStroke, 0);
myBumpyCircle4.drawTNTBumpyCircle(context);

n = 1;
center = new TNTPoint(2,0);
var myBumpyCircle5 = new TNTBumpyCircle(center, 4, 1, 3, n, blue, blackStroke, 0);
myBumpyCircle5.drawTNTBumpyCircle(context);

n = 1;
center = new TNTPoint(-3, 8);
var myBumpyCircle6 = new TNTBumpyCircle(center, 3, 1, 2, n, lightBlue, blackStroke, 45);
myBumpyCircle6.drawTNTBumpyCircle(context);
                                    
To Draw: myBumpyCircle.drawTNTBumpyCircle(context);