Alien Landscape

This is my alien landscape project from the canvas folder I worked on in Dreamweaver. I really enjoyed this project because I liked learning how to work with Dreamweaver and create things by code, but this took me days to complete this project. I learned how to create a gradient in Dreamweaver and I also learned how to create distinctive shapes.



//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE   // BACKGROUND   var myGradient0 = context.createRadialGradient(0,0,50,100,100,300);      myGradient0.addColorStop(0,"rgba(174,160,217,1)");      myGradient0.addColorStop(0.25,"rgba(102,122,230,1)");      myGradient0.addColorStop(0.5,"rgba(144,116,153,1)");      myGradient0.addColorStop(0.75,"rgba(123,47,211,1)");      myGradient0.addColorStop(1,"rgba(92,30,157,1)");            context.beginPath();       context.rect(0,0,800,600);       context.closePath();           context.fillStyle = myGradient0;      context.fill();   ///// BIG CIRCLE 3           var grdBigCircle3 =      context.createRadialGradient(550,125,25,550,125,200);      grdBigCircle3.addColorStop(0, "rgba(202,252,254,1)");      grdBigCircle3.addColorStop(0.25, "rgba(167,254,248,1)");      grdBigCircle3.addColorStop(0.5, "rgba(0,254,227,1)");      grdBigCircle3.addColorStop(0.75, "rgba(7,187,240,1)");      grdBigCircle3.addColorStop(1, "rgba(15,121,254,1)");           context.beginPath();               context.arc(550,125,200,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdBigCircle3;      context.fill();           context.stroke();                  /// TRIANGLE   var myGradient1 = context.createRadialGradient(500,100,50,500,100,400);      myGradient1.addColorStop(0, "rgba(174,160,217,1)");      myGradient1.addColorStop(0.25, "rgba(102,122,230,1)");      myGradient1.addColorStop(0.5, "rgba(144,116,153,1)");      myGradient1.addColorStop(0.75, "rgba(123,47,211,1)");      myGradient1.addColorStop(1, "rgba(92,30,157,1)");       context.beginPath();           context.moveTo(500,100);      context.lineTo(300,500);      context.lineTo(700,500);       context.closePath();       context.fillStyle = myGradient1;  context.fill();        ///// BIG CIRCLE           context.beginPath();               context.arc(450,220,190,0,Math.PI*2,true);           context.closePath();           // DRAW AT LEAST 4 ADDITIONAL CIRCLES           // CHANGE THE fillStyle TO 4 DIFFERENT RADIAL GRADIENTS           context.fillStyle = "rgba(0,64,255,0.5)";      context.fill();           context.stroke();       ///// BIG CIRCLE 2           var grdBigCircle2 =      context.createRadialGradient(100,500,15,100,500,140);      grdBigCircle2.addColorStop(0, "rgba(255,64,20,1)");      grdBigCircle2.addColorStop(0.25, "rgba(255,82,82,1)");      grdBigCircle2.addColorStop(0.5, "rgba(1,255,0,1)");      grdBigCircle2.addColorStop(0.75, "rgba(136,0,255,1)");      grdBigCircle2.addColorStop(1, "rgba(253,253,253,1)");           context.beginPath();               context.arc(100,500,140,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdBigCircle2;      context.fill();           context.stroke();           ///// CIRCLE 1           var grdCircle1 =      context.createRadialGradient(700,500,5,700,500,150);      grdCircle1.addColorStop(0, "rgba(243,0,85,1)");      grdCircle1.addColorStop(0.25, "rgba(211,0,230,1)");      grdCircle1.addColorStop(0.5, "rgba(178,0,255,1)");      grdCircle1.addColorStop(0.75, "rgba(253,0,190,1)");      grdCircle1.addColorStop(1, "rgba(123,12,243,1)");        context.beginPath();               context.arc(700,500,150,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdCircle1;      context.fill();           context.stroke();           ///// SMALL CIRCLE 1           var grdSmallCircle =      context.createRadialGradient(88,130,5,88,130,10);      grdSmallCircle.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(88,130,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle;      context.fill();           context.stroke();       ///// SMALL CIRCLE 8           var grdSmallCircle8 =      context.createRadialGradient(264,147,5,264,147,10);      grdSmallCircle8.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle8.addColorStop(1, "rgba(53,255,169,1)");                context.beginPath();               context.arc(264,147,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle8;      context.fill();           context.stroke();           ///// SMALL CIRCLE 9           var grdSmallCircle9 =      context.createRadialGradient(231,130,2,231,130,10);      grdSmallCircle9.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle9.addColorStop(1, "rgba(53,255,169,1)");                context.beginPath();               context.arc(231,130,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle9;      context.fill();           context.stroke();                ///// CIRCLE 2           var grdCircle2 = context.createRadialGradient(160,170,15,160,170,75);      grdCircle2.addColorStop(0, "rgba(71,243,222,1)");      grdCircle2.addColorStop(0.25, "rgba(79,217,207,1)");      grdCircle2.addColorStop(0.5, "rgba(122,183,230,1)");           grdCircle2.addColorStop(0.75, "rgba(74,116,240,1)");           grdCircle2.addColorStop(1, "rgba(24,210,253,1)");           context.beginPath();               context.arc(160,170,75,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdCircle2;      context.fill();           context.stroke();           context.fillStyle             ///// SMALL CIRCLE 2           var grdSmallCircle2 =      context.createRadialGradient(54,147,3,54,147,10);      grdSmallCircle2.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle2.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(54,147,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle2;      context.fill();           context.stroke();       ///// SMALL CIRCLE 3           var grdSmallCircle3 =      context.createRadialGradient(85,167,2,85,167,10);      grdSmallCircle3.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle3.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(85,167,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle3;      context.fill();           context.stroke();       ///// SMALL CIRCLE 4           var grdSmallCircle4 =      context.createRadialGradient(123,181,2,123,181,10);      grdSmallCircle4.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle4.addColorStop(1, "rgba(53,255,169,1)");       context.beginPath();               context.arc(123,181,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle4;      context.fill();           context.stroke();       ///// SMALL CIRCLE 5           var grdSmallCircle5 =      context.createRadialGradient(163,185,2,163,185,10);      grdSmallCircle5.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle5.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(163,185,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle5;      context.fill();           context.stroke();       ///// SMALL CIRCLE 6           var grdSmallCircle6 =      context.createRadialGradient(203,181,2,203,181,10);           grdSmallCircle6.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle6.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(203,181,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle6;      context.fill();           context.stroke();       ///// SMALL CIRCLE 7           var grdSmallCircle7 =      context.createRadialGradient(237,167,2,237,167,10);      grdSmallCircle7.addColorStop(0, "rgba(129,232,213,1)");      grdSmallCircle7.addColorStop(1, "rgba(53,255,169,1)");           context.beginPath();               context.arc(237,167,10,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdSmallCircle7;      context.fill();           context.stroke();             ///// CIRCLE 3           var grdCircle3 =      context.createRadialGradient(47,65,10,47,65,25);      grdCircle3.addColorStop(0, "rgba(54,47,68,1)");      grdCircle3.addColorStop(0.25, "rgba(0,208,178,1)");      grdCircle3.addColorStop(0.5, "rgba(16,103,132,1)");      grdCircle3.addColorStop(0.75, "rgba(70,77,145,1)");      grdCircle3.addColorStop(1, "rgba(106,65,84,1)");                context.beginPath();               context.arc(47,65,25,0,Math.PI*2,true);           context.closePath();           context.fillStyle = grdCircle3;      context.fill();           context.stroke();       ///// BIG CIRCLE 4       var grdBigCircle4 =      context.createRadialGradient(550,750,25,550,750,300);      grdBigCircle4.addColorStop(0, "rgba(1,9,183,1)");      grdBigCircle4.addColorStop(0.25, "rgba(118,123,234,1)");      grdBigCircle4.addColorStop(0.5, "rgba(14,81,132,1)");      grdBigCircle4.addColorStop(0.75, "rgba(108,201,234,1)");      grdBigCircle4.addColorStop(1, "rgba(29,142,182,1)");       context.beginPath();               context.arc(550,750,300,0,Math.PI*2,true);       context.closePath();           context.fillStyle = grdBigCircle4;      context.fill();           context.stroke();       ///// ALIEN BODY       var grdAlienBody = context.createLinearGradient(400,350,450,600);      grdAlienBody.addColorStop(0, "rgba(7,133,145,1)");      grdAlienBody.addColorStop(0.25, "rgba(8,155,125,1)");      grdAlienBody.addColorStop(0.5, "rgba(0,132,68,1)");      grdAlienBody.addColorStop(0.75, "rgba(65,143,80,1)");      grdAlienBody.addColorStop(1, "rgba(132,145,129,1)");           context.beginPath();           context.moveTo(400,350);      context.lineTo(350,600);      context.lineTo(450,600);       context.closePath();       context.fillStyle = grdAlienBody;  context.fill();       ///// ALIEN HEAD       var grdAlienHead = context.createLinearGradient(325,275,325,400);      grdAlienHead.addColorStop(0, "rgba(7,133,145,1)");      grdAlienHead.addColorStop(0.25, "rgba(8,155,125,1)");      grdAlienHead.addColorStop(0.5, "rgba(0,132,68,1)");      grdAlienHead.addColorStop(0.75, "rgba(65,143,80,1)");      grdAlienHead.addColorStop(1, "rgba(132,145,129,1)");       context.beginPath();      // STARTING POINT COORDINATES Ax, Ay  context.moveTo(325,275);      // BEIZER CURVE      // CP1x, CP1y, CP2x, CP2y, Bx, By  context.bezierCurveTo(325,400,475,400,475,275);  context.bezierCurveTo(475,175,325,175,325,275);       context.closePath();       context.fillStyle = grdAlienHead;  context.fill();   context.stroke();          ///// RIGHT EYE       context.beginPath();       var grdRightEye =  context.createRadialGradient(450,225,10,450,225,50);      grdRightEye.addColorStop(0, "rgba(255,255,255,1)");      grdRightEye.addColorStop(0.5, "rgba(122,7,0,1)");      grdRightEye.addColorStop(1, "rgba(0,0,0,1)");           context.moveTo(450,225); // C      context.quadraticCurveTo(475,275,425,275); // CP5, D      context.quadraticCurveTo(415,225,450,225); // CP6, C            context.closePath();      context.fillStyle = grdRightEye;      context.fill();           context.stroke();   ///// LEFT EYE       var grdLeftEye =  context.createRadialGradient(350,225,10,350,225,50);      grdLeftEye.addColorStop(0, "rgba(255,255,255,1)");      grdLeftEye.addColorStop(0.5, "rgba(122,7,0,1)");      grdLeftEye.addColorStop(1, "rgba(0,0,0,1)");          context.beginPath();           context.moveTo(350,225); // E      context.quadraticCurveTo(325,275,375,275); // CP7, F      context.quadraticCurveTo(387,225,350,225); // CP8, E                context.closePath();      context.fillStyle =      context.fill();           context.stroke();                                       //// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

Comments

Post a Comment

Popular posts from this blog

autoscopy

Image
This is my autoscopy project. I chose this photo because during this race I had a lot of confidence. The rainbow represents hope. The lightening represents the mental and physical struggle. The clock represents the time ticking away during the race.
Read more

Animation

This is my animation, it took me several days to animate the scenes and it was very hard to tie the videos together. I learned how to animate using Photoshop and I also learned how to work on garage band which has my audio. The audio wasn't too difficult, but it took me a while to decide on the music I was going to use. I am very pleased with the outcome.
Read more