Task 5

martin voshell

// 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);
}