Notes:
A innovative, complicated design by a former novice in 2015-16. A whopping 17 parameters to make a single crab! Enough to make you crabby, eh?
If you try to validate this page using our trusty validation button in the footer area, you will find it does not validate. Egad. We could have fixed it, but in this case we wanted you to see why it didn't, to remind you that you need to be careful when you use HTML-like commands as content in your page. HTML Entities are a solution to the validation problems we see here. See your teacher for details!
TNTSandCrab Features and Usage:
| Primary Attributes: |
17 Parameters: Rather than list them as we normally do, we're just showing you the associated functions to give you an idea of the parameter roles and the shape complexity!
function TNTSandCrab(center, width, dimpleFactor, numSpines, spineScaleFactor, spineScaleFactor2,
legLengthFactor, legWidthFactor, leftLegRotn, rightLegRotn, clawScaleFactor, clawScaleFactor2, leftClawRotn,
rightClawRotn, fcolr, stroke, rotn) {
this.center = center;
this.width = width;
this.dimpleFactor = dimpleFactor;
this.numSpines = numSpines;
this.spineScaleFactor = spineScaleFactor;
this.spineScaleFactor2 = spineScaleFactor2;
this.legLengthFactor = legLengthFactor;
this.legWidthFactor = legWidthFactor;
this.leftLegRotn = leftLegRotn;
this.rightLegRotn = rightLegRotn;
this.clawScaleFactor = clawScaleFactor;
this.clawScaleFactor2 = clawScaleFactor2;
this.leftClawRotn = leftClawRotn;
this.rightClawRotn = rightClawRotn;
this.fcolr = fcolr;
this.stroke = stroke;
this.rotn = rotn;
this.drawTNTSandCrab = drawTNTSandCrab;
}
function drawTNTSandCrab(context) {
//create some 'local' variables that take on the value of 'this' object's properties
//so we don't have to write 'this' keyword each time
var _center = this.center;
var _width = this.width;
var _dimpleFactor = this.dimpleFactor;
var _rotn = this.rotn;
var a = _dimpleFactor * _width / 2;
var b = _width / 2;
//spines
var _numSpines = this.numSpines;
var _spineScaleFactor = this.spineScaleFactor;
var spineRadius = _width * _spineScaleFactor;
var _spineScaleFactor2 = this.spineScaleFactor2;
var spineSmallRadius = _spineScaleFactor2 * spineRadius;
var leftSpineCenter = _center;
leftSpineCenter = leftSpineCenter.translate(-_width * .4, -_width * .3);
leftSpineCenter = rotatePointAboutCenter(leftSpineCenter, _center, _rotn);
var rightSpineCenter = _center;
rightSpineCenter = rightSpineCenter.translate(_width * .4, -_width * .3);
rightSpineCenter = rotatePointAboutCenter(rightSpineCenter, _center, _rotn);
//legs
var _legLengthFactor = this.legLengthFactor;
var _legWidthFactor = this.legWidthFactor;
var legLength = _legLengthFactor * _width;
var legWidth = _legWidthFactor * _width;
var leftLegCenter = _center;
leftLegCenter = leftLegCenter.translate(-_width * .45, _width * .2);
leftLegCenter = rotatePointAboutCenter(leftLegCenter, _center, _rotn);
var leftLegRotn0 = this.leftLegRotn;
var leftLegRotn = leftLegRotn0 + _rotn; //incorporate rotn of the crab body
var rightLegCenter = _center;
rightLegCenter = rightLegCenter.translate(_width * .45, _width * .2);
rightLegCenter = rotatePointAboutCenter(rightLegCenter, _center, _rotn);
var rightLegRotn0 = this.rightLegRotn;
var rightLegRotn = rightLegRotn0 + _rotn; //incorporate rotn of the crab body
//claws
var _clawScaleFactor = this.clawScaleFactor;
var _clawScaleFactor2 = this.clawScaleFactor2;
var clawRadius = _clawScaleFactor * _width;
var clawRadius2 = clawRadius * _clawScaleFactor2;
var leftClawCenter = leftLegCenter;
var leftThetaRad = -(_rotn + leftLegRotn0) * Math.PI / 180;
var delx = (.65 * legLength + clawRadius / 3) * Math.sin(leftThetaRad);
var dely = (.65 * legLength + clawRadius / 3) * Math.cos(leftThetaRad);
leftClawCenter = leftClawCenter.translate(delx, dely);
var leftClawRotn0 = this.leftClawRotn;
var leftClawRotn = leftLegRotn0 + 270 + leftClawRotn0 + _rotn;
var rightClawCenter = rightLegCenter;
var rightThetaRad = -(_rotn + rightLegRotn0) * Math.PI / 180;
delx = (.65 * legLength + clawRadius / 3) * Math.sin(rightThetaRad);
dely = (.65 * legLength + clawRadius / 3) * Math.cos(rightThetaRad);
rightClawCenter = rightClawCenter.translate(delx, dely);
var rightClawRotn0 = this.rightClawRotn;
var rightClawRotn = rightLegRotn0 + 270 + rightClawRotn0 + _rotn;
//eyes
var leftEyeCenter = _center.translate(-_width * .2, -_width * .2);
leftEyeCenter = rotatePointAboutCenter(leftEyeCenter, _center, _rotn);
var eyeRadius = _width * .1;
var rightEyeCenter = _center.translate(_width * .2, -_width * .2);
rightEyeCenter = rotatePointAboutCenter(rightEyeCenter, _center, _rotn);
//TNTGraphic Objects
//leg and spine objects
var theCrabColor = this.fcolr;
var theStroke = this.stroke;
var leftLeg = new TNTDiamond(leftLegCenter, legWidth, legLength, theCrabColor, theStroke, leftLegRotn);
leftLeg.drawTNTDiamond(context);
var rightLeg = new TNTDiamond(rightLegCenter, legWidth, legLength, theCrabColor, theStroke, rightLegRotn);
rightLeg.drawTNTDiamond(context);
var leftSpines = new TNTStar(leftSpineCenter, _numSpines, spineRadius, spineSmallRadius,
theCrabColor, theStroke, _rotn);
leftSpines.drawTNTStar(context);
var rightSpines = new TNTStar(rightSpineCenter, _numSpines, spineRadius, spineSmallRadius,
theCrabColor, theStroke, _rotn);
rightSpines.drawTNTStar(context);
//claw objects
var leftClaw = new TNTLimacon2(leftClawCenter, clawRadius, clawRadius2, theCrabColor, theStroke, leftClawRotn);
leftClaw.drawTNTLimacon2(context);
var rightClaw = new TNTLimacon2(rightClawCenter, clawRadius, clawRadius2, theCrabColor, theStroke, rightClawRotn);
rightClaw.drawTNTLimacon2(context);
//body objects
var body = new TNTLimacon2(_center, a, b, theCrabColor, theStroke, 270 + _rotn);
body.drawTNTLimacon2(context);
//eye objects
var leftEye = new TNTSector(leftEyeCenter, eyeRadius, 0 + _rotn, 180 + _rotn, black, blackStroke);
leftEye.drawTNTSector(context);
var rightEye = new TNTSector(rightEyeCenter, eyeRadius, 0 + _rotn, 180 + _rotn, black, blackStroke);
rightEye.drawTNTSector(context);
}
|
|---|---|
| To Create: |
The examples above were created by:
var crabColor = new TNTColor(255, 50, 50, "crabColor");
var theCrabColor = crabColor;
var theStroke = brownStroke;
//special points/components
speckledSand(200);
var center = origin;
center = center.translate(0, -5);
var mamaCrab = new TNTSandCrab(center, 15, .7, 7, .5, .5, 1.2, .3, 0, -20, .3, .2, 15, 20, theCrabColor,
brownStroke, 10);
mamaCrab.drawTNTSandCrab(context);
var ptA = new TNTPoint(3, 15);
var babyCrab = new TNTSandCrab(ptA, 5, .9, 9, .4, .4, .6, .2, 0, -40, .2, .2, 0, 0,
theCrabColor, redStroke, -200);
babyCrab.drawTNTSandCrab(context);
|
| To Draw: | mamaCrab.drawTNTSandCrab(context); |
| More: |
How did the novice make the sand particles?
function speckledSand(n) {
var sandColors = new Array(black, brown, darkGray, lightGray, gold);
for (var i = 1; i <= n; i++) {
var colrNdx = i % sandColors.length;
var colr = sandColors[colrNdx];
var x = Math.random() * (XMAX - XMIN) + XMIN;
var y = Math.random() * (YMAX - YMIN) + YMIN;
var r = Math.random() * (.2);
var center = new TNTPoint(x, y);
var spec = new TNTDisk(center, r, colr, null);
spec.drawTNTDisk(context);
}//end loop
}//end function
|