|
// draw the 1938 Auto-Union Grand Prix car
// set dimensions
var w = 587;
var h = 500;
// create raster to use
var RC = new RasterCanvas(w, h, Units.PIXELS)
//===========================================
//draw the complex and slow background pattern
//0,0 for sky gradiend
var xtrav=0;
//incr the color for each horiz shift
var xtravv = 0;
// mimic sunset gradient
for (var ytrav = 0; ytrav < h; ytrav++) {
// make a very VERY subtle ramp gradient toward red
var ramp = range(xtravv,ytrav, w,h);
RC.setPenColor(ramp/2, ramp/3, ramp/3);
RC.drawLine(xtrav, ytrav, w, ytrav);
xtravv=xtravv+1;
}
var xtrav = 0;
var ytrav = 0;
//===========================================
//===========================================
// set up some oft used globals
// set color + opacity
RC.setPenColor(0, 0, 0);
var opacity = 1;
// we're using many circles, need a reference centerpoint
var centerX = 100;
var centerY = 400;
//want to draw back cone, front cone, a body, and wheels
//===========================================
//back cone
var smW = 100; // units
var smH = 70;
// define radius of circle to plot
var radius = Math.min(smW, smH) / 2.0;
//draw back of car
// doing cirlces, switch from cartesian to polor -> cartesian from 0-> 2pi
RC.setPenColor(0.62, 0.62, 0.62);
//set up loop for circle invoking helper functions
for (var radianAngle = 0.5*Math.PI; radianAngle < 1.5*Math.PI; radianAngle += .02) {
// go back to raster pixel locations
var cartesianPoint = polarToCartesian(radius, radianAngle);
// plot (x,y) in a radius multiple times for thickness
RC.setPixel(centerX+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-1+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-2+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-3+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-4+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-5+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-6+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-7+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-8+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-9+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
RC.setPixel(centerX-10+cartesianPoint[0], centerY+cartesianPoint[1],opacity);
}
//======================================
//filler polys for the cirlces
//make a bunch of polygons to help fill in the circular area
var radshift = (smH/2.0);
var edge0 = new Array(centerX-30, centerY-29);
var edge1 = new Array(centerX+20, centerY-29);
var edge2 = new Array(centerX+20, centerY+32);
var edge3 = new Array(centerX-30, centerY+32);
var fillback = new Array (edge0, edge1, edge2, edge3, edge0);
var edge4= new Array(centerX-20, centerY-radshift-1);
var edge5= new Array(centerX, centerY-radshift-1);
var edge6= new Array(centerX, centerY+radshift-1);
var edge7= new Array(centerX-20, centerY+radshift-1);
var fillmore = new Array (edge4, edge5, edge6, edge7, edge4);
var edge8= new Array(centerX-29, centerY-radshift+20);
var edge9= new Array(centerX-36, centerY-radshift+20);
var edge10= new Array(centerX-36, centerY+radshift-18);
var edge11= new Array(centerX-29, centerY+radshift-18);
var fillrest = new Array (edge8, edge9, edge10, edge11, edge8);
RC.setPenColor(.62, .62, .62);
RC.fillPoly(fillback);
RC.fillPoly(fillmore);
RC.fillPoly(fillrest);
//===========================================
//===========================================
//draw front of car
RC.setPenColor(0.62, 0.62, 0.62);
for (var radianAngle = 1.5*Math.PI; radianAngle < 2.5*Math.PI; radianAngle += .02) {
//same as before except shifted horizontally
var cartesianPoint = polarToCartesian(radius, radianAngle);
RC.setPixel(centerX+381+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+380+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+379+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+378+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+377+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+376+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+375+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+374+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+373+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+372+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+371+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+370+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+379+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+378+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
RC.setPixel(centerX+377+cartesianPoint[0], centerY-1+cartesianPoint[1],1);
}
//filler polys for the cirlces
//same as before except shifted horizontally
var radshift = (smH/2.0);
var idge0 = new Array(centerX+402, centerY-30);
var idge1 = new Array(centerX+360, centerY-30);
var idge2 = new Array(centerX+360, centerY+30);
var idge3 = new Array(centerX+402, centerY+30);
var fellback = new Array (idge0, idge1, idge2, idge3, idge0);
var idge4= new Array(centerX+360, centerY-radshift);
var idge5= new Array(centerX+385, centerY-radshift);
var idge6= new Array(centerX+385, centerY+radshift);
var idge7= new Array(centerX+360, centerY+radshift);
var fellmore = new Array (idge4, idge5, idge6, idge7, idge4);
RC.setPenColor(.62, .62, .62);
RC.fillPoly(fellback);
RC.fillPoly(fellmore);
//===========================================
//===========================================
//for drawing the body of the car, make a bunch of polygons and fill them
//draw rear body panels
var radshift = (smH/2.0);
//do them all as polys
//close back panel
var b0 = new Array(centerX, centerY+radshift);
//top back drop
var b1 = new Array(centerX, centerY-radshift);
//top of slant
var b2 = new Array(320, centerY-radshift-18);
var b3 = new Array(320, centerY+radshift);
var backpanel = new Array(b0, b1, b2, b3, b0);
//primer silver
RC.setPenColor(.62, .62, .62);
RC.fillPoly(backpanel);
//draw middle panels
//do them all as polys from mid -> front
//mid -> front
var m0 = new Array(centerX+325, centerY-radshift);
var m1 = new Array(centerX+375, centerY-radshift);
//drop down front
var m2 = new Array(centerX+375, centerY+radshift);
//bottom left boundary
var m3 = new Array(320, centerY+radshift);
//up to middle
var m4 = new Array(320, centerY-radshift);
//cockpit start
var m5 = new Array(335, centerY-radshift+20);
var m6 = new Array(350, centerY-radshift+30);
var m7 = new Array(406, centerY-radshift+30);
var m8 = new Array(centerX+322, centerY-radshift+20);
var middle = new Array(m0, m1, m2, m3, m4, m5, m6, m7, m8, m0);
//primer silver
RC.setPenColor(.62, .62, .62);
RC.fillPoly(middle);
//===========================================
//===========================================
// look good list
// again various loops and polygon fills for detail
//draw windshield and seat
var s0 = new Array(centerX+328, centerY-radshift);
var s1 = new Array(centerX+328, centerY-radshift-25);
var s2 = new Array(centerX+336, centerY-radshift);
var windshield = new Array(s0, s1, s2, s0);
//blue
RC.setPenColor(0.7, 0.7, .8);
RC.fillPoly(windshield);
RC.setPenColor(1, 0, 0);
RC.drawLine(336, centerY-radshift+20, 351, centerY-radshift+30);
RC.drawLine(321, centerY-radshift-18, 321, centerY-radshift);
RC.drawLine(321, centerY-radshift, 334, centerY-radshift+18);
//body lines
RC.setPenColor(0.5, 0.5, 0.5);
RC.drawLine(centerX+radshift, centerY-radshift, 320, centerY-radshift);
RC.drawLine(280, centerY-radshift-14, 280, centerY+30);
RC.drawLine(335, centerY-radshift+20, 335, centerY+30);
//mid in back
RC.drawLine(centerX, centerY, 280, centerY);
//drop from middle of window
RC.drawLine(centerX+332, centerY-radshift+1, centerX+332, centerY+30);
RC.drawLine(centerX+1, centerY+radshift-5, centerX+374, centerY+radshift-5);
//draw exhaust
//mid -> front
var i = 8;
while(i < 48) {
var e0 = new Array(200+i, centerY-20);
var e1 = new Array(200+i, centerY-30);
var e2 = new Array(205+i, centerY-30);
var e3 = new Array(205+i, centerY-20);
var exhaust = new Array(e0, e1, e2, e3);
RC.setPenColor(.32, .32, .32);
RC.fillPoly(exhaust);
i=i+8;
}
// draw a bunch of rivets
for (var o = 2; o < centerX+270; o += 8) {
RC.setPenColor(.42, .42, .42);
RC.setPixel(centerX+o, centerY+radshift-8, 1);
for (var m = 2; m < 72; m += 8){
RC.setPixel(centerX+334, centerY-radshift+1+m, 1);
}
}
//===========================================
//===========================================
// wheels
//==========
//draw two wheels at the same time
var smW = 100; // units
var smH = 70;
// define radius of circle to plot
var radius = Math.min(smW, smH) / 2.2;
// plot two circles horizontally shifted
for (var radianAngle = 0; radianAngle < 2*Math.PI; radianAngle += .02) {
// convert polar point (radius, angle) to cartesian for plotting
var cartesianPoint = polarToCartesian(radius, radianAngle);
// plot cartesian point (x,y)
// result of polarToCartesian function is two-element array-- [x,y]
RC.setPixel(centerX-15+cartesianPoint[0], centerY+cartesianPoint[1]+25,opacity);
RC.setPixel(centerX-15+cartesianPoint[0], centerY+cartesianPoint[1]+24,opacity);
RC.setPixel(centerX-15+cartesianPoint[0], centerY+cartesianPoint[1]+23,opacity);
RC.setPixel(centerX+367+cartesianPoint[0], centerY+cartesianPoint[1]+25, opacity);
RC.setPixel(centerX+367+cartesianPoint[0], centerY+cartesianPoint[1]+24, opacity);
RC.setPixel(centerX+367+cartesianPoint[0], centerY+cartesianPoint[1]+23, opacity);
}
// release object referencess
RC = null;
// helper functions ---------------------------------
// first two needed for circular plotting
function polarToCartesian(distance, radianAngle) {
var x = distance * Math.cos(radianAngle);
var y = distance * Math.sin(radianAngle);
return new Array(x, y);
}
function cartesianToPolar(x, y) {
var distance = Math.sqrt(x*x + y*y);
var radianAngle;
if (x == 0) {
if (y >= 0) { radianAngle = Math.PI * .5; }
else { radianAngle = 3*Math.PI * .5; }
}
else if (x > 0) { radianAngle = Math.atan(y / x); }
else { radianAngle = Math.PI - Math.atan(y / -x); }
return new Array(distance, radianAngle);
}
//normalizes the scare of colors for my pattern
function range(xtrav,ytrav, maxX,maxY) {
return (xtrav * ytrav) / (maxX * maxY);
}
|
|
|