Your browser does not support HTML5 Canvas

Notes:

Many students often put a 'sun' in their compositions. Why not make one from software? Check out the variations! This is an object engine worth checking out carefully! It helps if you know a bit about a TNTSinusoid.

TNTSun Features and Usage:
Primary Attributes:

11 Parameters:

  • center: TNTPoint
  • diskRadius: a decimal (known as a 'double' in code)
  • largeRadius: a decimal (known as a 'double' in code)
  • gap: positive real, distance from disk to rays
  • fillColor: TNTColor as fcolr
  • sunStroke: a TNTStroke that provides the border of the sun disk
  • sampleWavelet: a TNTSinusoid that provides the amplitude and period of the sun's rays
  • numWaves: the number of rays of the sun
  • colorStrokes: an array of TNTStrokes that provides the sun ray color(s)
  • startAngle: start angle in degrees - a real number
  • endAngle: end angle in degrees - a real number
To Create:

The examples above were created by:

var skyBlue = new TNTColor(143, 222, 255, "skyBlue");
var skyBlueStroke = new TNTStroke(skyBlue, .3);

var myRayStrokes = Array(yellowStroke, orangeStroke, goldStroke);
var center = new TNTPoint(-5, 10);
var r1 = 4;
var r2 = 8;
var gap = 1;
var fcolr = yellow;
var sunStroke = orangeStroke;
var numRays = 24;
var startTheta = 0;
var endTheta = 360;
var amplitude = .5; //0: a straight line
var period = 2; //larger period, the less 'jiggley'
var vertShift = 0;
var horizShift = 0;
var x0 = 0;
var xf = 0;
var stroke = blackStroke;
var rotn = 0;
//most of the parameters of 'wavelet' 
//will be set during the loop; 
//amplitude and period are 'fixed'
var wavelet = new TNTSinusoid(amplitude, period, 
    vertShift, horizShift, x0, xf, stroke, rotn);
var mySun = new TNTSun(center, r1, r2, gap, 
    fcolr, sunStroke, wavelet, numRays,
    myRayStrokes, startTheta, endTheta);
mySun.drawTNTSun(context);

center = center.translate(20, -10);
var wavelet2 = new TNTSinusoid(1, 8, 0, 0, 0, 0, null, 0);
colorStrokes = Array(brownStroke, blackStroke, darkGrayStroke);
var partialSun = new TNTSun(center, 4, 6, -2, 
    lightFlesh, null, wavelet2, 60, 
    colorStrokes, 60, 120);
partialSun.drawTNTSun(context);

center = center.translate(-10, -10);
var wavelet3 = new TNTSinusoid(-1, .5, 0, 0, 0, 0, null, 0);
colorStrokes = Array(yellowStroke, goldStroke, 
    yellowStroke, null, orangeStroke, null);
var ringOfWaves = new TNTSun(center, 5, 8, 
    1, null, goldStroke, wavelet3, 
    24, colorStrokes, 0, 360);
ringOfWaves.drawTNTSun(context);

center = center.translate(-17, 2);
r1 = 2;
r2 = 7;
gap = -2;
colorStrokes = Array(blueStroke, medGreenStroke);
var numWaves = 12;
var circum = 2 * r2 * Math.PI;
var amplitude = circum / numWaves;
amplitude /= 2;
var wavelet4 = new TNTSinusoid(amplitude, 3, 0, 
    0, 0, 0, null, 0);
var radialSun = new TNTSun(center, r1, r2, 
    gap, null, null, wavelet4, 
    numWaves, colorStrokes, 0, 360);
radialSun.drawTNTSun(context);

center = new TNTPoint(10, 13);
r1 = 2;
r2 = 7;
gap = 1;
colorStrokes = Array(redStroke);
var numWaves = 72;
amplitude = 0;
var wavelet5 = new TNTSinusoid(amplitude, 3, 
    0, 0, 0, 0, null, 0);
var radialSun = new TNTSun(center, r1, r2, 
    gap, red, null, wavelet5, 
    numWaves, colorStrokes, 0, 360);
radialSun.drawTNTSun(context);
                                    
To Draw: mySun.drawTNTSun(context);