Thursday, September 28, 2017

If it wasn't for those meddling kids...

Mystery Machine Canvas Final Project
Hour Count: 18.5
Cry Count: 22.5



Code:
 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>

<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

 ///background
    var bkgdgrd = context.createLinearGradient(0,0,0,800);
   
    bkgdgrd.addColorStop(0,"rgba(0, 204, 255,1)");
    bkgdgrd.addColorStop(.15, "rgba(244, 175, 216, 1)");
    bkgdgrd.addColorStop(.50,"rgba(201, 88, 19, 1)");
    bkgdgrd.addColorStop(.75,"rgba(204, 0, 255,1)");
    bkgdgrd.addColorStop(1, "rgba(255,255,255,1)");
       
// BACKGROUND
   
    context.beginPath();

         context.rect(0,0,800,600);
   
    context.closePath();
   
    context.fillStyle = bkgdgrd;
   
    context.fill();
   
    //background flower
    var flower = context.createLinearGradient(0,100,200,400);
    flower.addColorStop(0,"rgba(230,0,0,1)");
    flower.addColorStop(.25,"rgba(200,190,0,1)");
    flower.addColorStop(1,"rgba(201,88,19,1)");
        context.beginPath();
    context.moveTo(150,100);
    context.bezierCurveTo(-100,-200,-100,100,140,110);
    context.bezierCurveTo(-100,70,-50,300,145,115);
    context.bezierCurveTo(40,180,80,500,170,115);
    context.bezierCurveTo(300,380,330,150,170,100);
    context.bezierCurveTo(330,-50,150,-100,150,100);
    context.closePath();
    context.fillStyle=flower;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //Background flower 2
    var flower2 = context.createLinearGradient(650,500,700,700);
    flower2.addColorStop(0,"rgba(255,0,0,1)");
    flower2.addColorStop(.25,"rgba(200,130,0,1)");
    flower2.addColorStop(1,"rgba(201,88,19,1)");
   
   
    context.beginPath();
    context.moveTo(550,500);
    context.bezierCurveTo(300,200,300,500,540,510);
    context.bezierCurveTo(300,470,350,700,545,515);
    context.bezierCurveTo(440,580,430,900,560,530);
    context.bezierCurveTo(640,800,690,550,570,515);
    context.bezierCurveTo(810,575,770,400,565,500);
    context.bezierCurveTo(730,350,550,200,550,500);
    context.closePath();
    context.fillStyle=flower2;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //flower 2.5
        var flower3 = context.createLinearGradient(650,100,500,100);
    flower3.addColorStop(0,"rgba(255,0,0,1)");
    flower3.addColorStop(.25,"rgba(255,130,0,1)");
    flower3.addColorStop(1,"rgba(201,88,0,1)");
   
   
    context.beginPath();
    context.moveTo(550,100);
    context.bezierCurveTo(300,-200,300,100,540,110);
    context.bezierCurveTo(300,70,350,300,545,115);
    context.bezierCurveTo(440,180,430,500,560,130);
    context.bezierCurveTo(640,400,690,150,570,115);
    context.bezierCurveTo(810,175,770,0,565,100);
    context.bezierCurveTo(730,-150,550,-200,550,100);
    context.closePath();
    context.fillStyle=flower3;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 //background flower 4

    context.beginPath();
    context.moveTo(687,435);
    context.bezierCurveTo(615,390,640,440,680,445);
    context.bezierCurveTo(610,440,635,475,685,452);
    context.bezierCurveTo(645,505,690,490,695,453);
    context.bezierCurveTo(700,510,740,500,700,450);
    context.bezierCurveTo(750,455,750,425, 700, 440);
    context.bezierCurveTo(700,390,685,390,687,435);
    context.closePath();
    context.fillStyle="rgba(204,0, 204,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    context.beginPath();
      context.arc(690, 445, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();

    //background flower 5
        context.beginPath();
    context.moveTo(687,135);
    context.bezierCurveTo(615,90,640,140,680,145);
    context.bezierCurveTo(610,140,635,175,685,152);
    context.bezierCurveTo(645,205,690,190,695,153);
    context.bezierCurveTo(700,210,740,200,700,150);
    context.bezierCurveTo(750,155,750,125, 700, 140);
    context.bezierCurveTo(700,90,685,90,687,135);
    context.closePath();
    context.fillStyle="rgba(255, 153, 115,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    context.beginPath();
      context.arc(690, 145, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
     /// background flower 3
        context.beginPath();
    context.moveTo(87,495);
    context.bezierCurveTo(15,450,40,500,80,505);
    context.bezierCurveTo(10,500,35,535,85,512);
    context.bezierCurveTo(45,565,90,550,95,513);
    context.bezierCurveTo(100,570,140,560,100,510);
    context.bezierCurveTo(150,515,150,485, 100, 500);
    context.bezierCurveTo(100,450,85,450,87,495);
    context.closePath();
    context.fillStyle="rgba(255, 0, 0,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    context.beginPath();
      context.arc(90, 505, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   
    //back bumper
   
    context.beginPath();
    context.moveTo(150,405);//BottomRight
    context.lineTo(150,380);//Top Right
    context.lineTo(130,380);//TopLeft
    context.lineTo(130,405); //bottom Left
    context.lineTo(150,405);
    context.closePath();
    context.fillStyle= "grey";
    context.fill();
    context.stroke();
   
//Car Body
    var van= context.createLinearGradient(100,200,700,500);
    van.addColorStop(0,"rgba(51, 153, 255,1)");
    van.addColorStop(.5,"rgba(128, 229, 255,1)");
    van.addColorStop(1,"rgba(51,153,255,1)");
   
    context.beginPath();
    context.moveTo(145,105); //Left top
    context.quadraticCurveTo(80,250,145,400); //Left side
    context.lineTo(700,400); //right bottom
    context.lineTo(740,285); //right side
    context.lineTo(650,105); //right top
    context.lineTo(145,105); //finish at start
    context.closePath();
    context.fillStyle=van
    context.fill();
    context.stroke();
   
    //left tire opening
   
    context.beginPath();
    context.moveTo(210,350); //top corner L
    context.lineTo(200,400); //bottom L
    context.lineTo(315,400); //bottom R
    context.lineTo(305,350); //top R
    context.lineTo(210,350); //close at start
    context.closePath();
    context.fillStyle= "rgba(0,0,0,1)";
    context.fill();
   
    //right tire opening
   
    context.beginPath();
    context.moveTo(525,350);
    context.lineTo(525,400);
    context.lineTo(640,400);
    context.lineTo(615,350);
    context.lineTo(525,350);
    context.closePath();
    context.fillStyle="rgba(0,0,0,1)";
    context.fill();

    //left tire


      context.beginPath();
      context.arc(260, 400, 40, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(171, 240, 102, 1)";
      context.fill();
      context.lineWidth = 20;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
   
   
    //right tire
   
     context.beginPath();
      context.arc(575, 400, 40, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(171, 240, 102, 1)";
      context.fill();
      context.lineWidth = 20;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
   
   

    //window
   
    context.beginPath();
    context.moveTo(535,115); //top left
    context.lineTo(535,240); //bottom left
    context.lineTo(660,240); //bottom right
    context.lineTo(640,115); //top right
    context.lineTo(550,115); //close
    context.closePath();
    context.fillStyle= bkgdgrd;
    context.fill();
    context.lineWidth=3;
    context.strokeStyle= "rgba(0,0,0,1)"
    context.stroke();
   
    //bottom panel decoration
   
    var body= context.createLinearGradient(150,400,550,400);
    body.addColorStop(0,"rgba(171, 240, 102, 1)");
    body.addColorStop(.75,"rgba(0,250,90,1)");
    body.addColorStop(1,"rgba(171, 240, 102, 1)");
   
    context.beginPath();
    context.moveTo(113,250);
    context.quadraticCurveTo(110,280,120,325);
    context.quadraticCurveTo(140,300,150,330);
    context.bezierCurveTo(150,300,170,300,160,330);
    context.bezierCurveTo(170,300,180,300,170,340);
    context.bezierCurveTo(260,225,402,410,500,325);
    context.bezierCurveTo(470,300,500,290,505,320);
    context.bezierCurveTo(505,280,510,270, 520,330);
    context.bezierCurveTo(580,250,620,400,678,360);
    context.bezierCurveTo(650,360,660,340,680,350);
    context.bezierCurveTo(665,320,675,320,685,340);
    context.bezierCurveTo(670,310,695,310,700,330);
    context.lineTo(723,330);
    context.lineTo(740,285);
    context.lineTo(720,247);
    context.lineTo(690,250);
    context.lineTo(115,250);
    context.fillStyle=body
    context.fill();
   
   
    context.strokeStyle="rgba(0,0,0,1)"
    context.stroke();
   
    //top panel decoration
   
    context.beginPath();
    context.moveTo(200,105);
    context.quadraticCurveTo(180,110,200,130);
    context.quadraticCurveTo(165,140,190,210);
    context.bezierCurveTo(210,170,210,210,200,210);
    context.bezierCurveTo(230,170,220,210,210,220);
    context.lineTo(480,220);
    context.bezierCurveTo(440,210,485,205,485,210);
    context.bezierCurveTo(465,190,490,185,500,215);
    context.bezierCurveTo(540,190,470,150,500,105);
    context.lineTo(200,105);
    context.fillStyle=body;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
   
    //vertical panelling
    context.beginPath();
    context.moveTo(525,400); // bottom of car
    context.lineTo(525,105); //top of car
    context.closePath();
    context.lineCap="butt";
    context.lineWidth=1;
    context.stroke();
   
    //horizontal panelling
    context.beginPath();
    context.moveTo(112,250); //left edge
    context.lineTo(690,250); //right edge
    context.closePath();
    context.lineWidth=1;
    context.stroke();
   
    //hood panelling
    context.beginPath();
    context.moveTo(645,105); //top
    context.lineTo(690,250);//center
    context.lineTo(660,400);//bottom
    context.lineWidth=1;
    context.stroke();
    context.beginPath();
    context.moveTo(690,250); //left
    context.lineTo(720,247); //right
    context.lineWidth=1;
    context.stroke();
   
   
    //windshield
   
    context.beginPath();
    context.moveTo(655,115);
    context.quadraticCurveTo(670,200,717,240);
    context.closePath();
    context.fillStyle=bkgdgrd;
    context.fill();
    context.stroke();
   
    //top of car
   
    context.beginPath();
    context.moveTo(145,105);
    context.quadraticCurveTo(400,75,650,105);
    context.closePath();
    context.fillStyle="rgba(135, 224, 238, 1)";
    context.fill();
    context.stroke();
   
    //spare tire
   
    context.beginPath();
    context.moveTo(740,285);//LT
    context.lineTo(760,290);//RT
    context.lineTo(735,360); //RB
    context.lineTo(715,355);//LB
    context.lineTo(740,285);
    context.closePath();
    context.fillStyle="rgba(171, 240, 102, 1)";
    context.fill();
    context.stroke();
   
   
    //front bumper
   
    context.beginPath();
    context.moveTo(700,405); //bottomL
    context.lineTo(710,405); //bottomR
    context.lineTo(715,385); //topR
    context.lineTo(705,385); //topL
    context.lineTo(700,405);
    context.closePath();
    context.fillStyle="grey";
    context.fill();
    context.stroke();
   
   
    //headlight
   
     context.beginPath();
      context.arc(695, 380, 5, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(171, 240, 102, 1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
     context.beginPath();
      context.arc(695, 350, 12, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255,255,255, 1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
   
    //text
    context.beginPath();
    context.font='italic 20pt Comic Sans MS';
    context.fillStyle="rgba(255, 153, 0,1)";
    context.fillText("THE",210,145);
    context.beginPath();
     context.font = 'italic 25pt Comic Sans MS';
      context.fillText('MYSTERY', 250, 170);
    context.beginPath();
    context.font= 'italic 25pt Comic Sans MS';
    context.fillText('MACHINE',280,210);
    context.closePath();
   
    //right flower moving counter clockwise starting NW
   
    context.beginPath();
    context.moveTo(645,290);
    context.bezierCurveTo(610,240,615,290,635,300);//NW
    context.bezierCurveTo(590,295,590,325,640,310);
    context.bezierCurveTo(630,350,660,350,650,315);
    context.bezierCurveTo(680,345,680,320,657,308);
    context.bezierCurveTo(685,310,685,280,655,295);
    context.bezierCurveTo(670,250,650,250,645,290);
    context.closePath();
    context.fillStyle="rgba(255, 153, 0,1)";
    context.fill();
    context.lineWidth=1;
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    // center of right flower
    context.beginPath();
      context.arc(645, 300, 4, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   
   
    //left flower
   
    context.beginPath();
    context.moveTo(287,295);
    context.bezierCurveTo(215,250,240,300,280,305);
    context.bezierCurveTo(210,300,235,335,285,312);
    context.bezierCurveTo(245,365,290,350,295,313);
    context.bezierCurveTo(300,370,340,360,300,310);
    context.bezierCurveTo(350,315,350,285, 300, 300);
    context.bezierCurveTo(300,250,285,250,287,295);
    context.closePath();
    context.fillStyle="rgba(255, 153, 0,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    //center of left flower
    context.beginPath();
      context.arc(290, 305, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
//left tire flower moving clockwise starting in SE
   
    context.beginPath();
      context.moveTo(260,400);
      context.bezierCurveTo(275,450,245,420,260,400);//SE
    context.bezierCurveTo(230,430,225,400,260,400);
    context.bezierCurveTo(228,400,224,365,260,400);
    context.bezierCurveTo(240,370,270,360,260,400);
    context.bezierCurveTo(280,365,295,390,260,400);
    context.bezierCurveTo(295,405,290,435,260,400);
    context.fillStyle="rgba(255, 153, 0,1)"
    context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'rgba(0,0,0,1)';
      context.stroke();
    //center
    context.beginPath();
      context.arc(260,400, 4, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   
   
    //right tire flower
    context.beginPath();
      context.moveTo(575,400);
      context.bezierCurveTo(590,450,560,420,575,400);//SE
    context.bezierCurveTo(545,430,540,400,575,400);
    context.bezierCurveTo(543,400,539,365,575,400);
    context.bezierCurveTo(555,370,585,360,575,400);
    context.bezierCurveTo(595,365,610,390,575,400);
    context.bezierCurveTo(610,405,605,435,575,400);
    context.fillStyle="rgba(255, 153, 0,1)"
    context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'rgba(0,0,0,1)';
      context.stroke();
    //center
        context.beginPath();
      context.arc(575,400, 4, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   

   
   
   
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(255,255,255,1)";
context.fillText('TSahli-Canvas Final Project', 20, 550);
context.closePath();

</script


></body>
</html>
at No comments:

Thursday, September 21, 2017

An Apple a Day...

Is it an apple or a tomato? We'll never know.

at No comments:
This is my first attempt at drawing in the canvas object!

at No comments:
Subscribe to: Posts (Atom)

Portfolio

  • History of Magnetic Recording Reading
    The progress of sound and it's different component was highly influenced by research in the 18 and 19 century, including techniques such...
  • Poster Project
    Here is my poster project, The original photo is at the bottom, the final version is at the top. Santiago wanted me to...
  • Autoscopy
    My autoscopy is a reflection of my struggles with my eating disorder and how a good day feels compared to a bad day. On the left is a bad da...