Skip to main content

Canvas project - happy day


    This assignment was definitely tough, and incredibly time consuming, but I had so much fun doing it. I came up with the design off the top of my head and completed a sketch, planned out all of the coordinates, and then went for it. Somehow, many people have said that the girl in my project almost looks like a self portrait which I think is pretty funny, but I guess this demonstrates my sense of style, and mood at the time. Clearly I was in a happy stage of my life, as portrayed in my project. I enjoyed playing with all the bright colors, gradients, layers, and shapes associated with Dreamweaver!

/// BACKGROUND RECTANGLE (SUN GRADIENT)
var myGradient0=context.createRadialGradient(0,0,50,100,100,300);
myGradient0.addColorStop(0,"rgba(255,255,255,1)"); //white
myGradient0.addColorStop(0.25,"rgba(247,234,54,1)"); // yellow
myGradient0.addColorStop(0.5,"rgba(255,174,37,1)"); // light orange
myGradient0.addColorStop(1,"rgba(123,255,232,1)"); // dark grey blue

context.beginPath();
context.rect(0,0,800,600);
context.closePath();

context.fillStyle= myGradient0;
context.fill();

///GRASS
var quad = context.createLinearGradient(200,500,400,400);
         
 quad.addColorStop(0, "rgb(48,186, 24)");
 quad.addColorStop(1, "rgb(15,56, 7)");

      context.beginPath();
      context.moveTo(0, 500);
      context.quadraticCurveTo(110, 500, 235, 565);
   context.quadraticCurveTo(330,500, 450, 555);
   context.quadraticCurveTo(530, 500, 700, 475);

   context.lineTo(805,600);
   context.lineTo(0,600);
   context.lineTo(0,675);
   context.closePath();
   context.fillStyle = quad;
   context.fill();

/// LINE umbrella 1

context.beginPath();
context.lineWidth=10;
context.moveTo(175,460);
context.lineTo(175,600);
   context.strokeStyle=("rgba(22,26,64,1)");
context.stroke();


/// LINE umbrella 2

context.beginPath();
context.lineWidth=10;
context.moveTo(270,550);
context.lineTo(270,600);
   context.strokeStyle=("rgba(22,26,64,1)");
context.stroke();



/// LINE flower

context.beginPath();
context.lineWidth=5;
context.moveTo(400,390);
context.lineTo(400,600);
   context.strokeStyle=("rgba(30,56,10,1)");
context.stroke();

/// TRIANGLE rain drop 2
var myGradient1 = context.createRadialGradient(300,260,20,300,270,100);
myGradient1.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient1.addColorStop(0.2,"rgba(151,246,255,.70)"); //light blue
myGradient1.addColorStop(.68,"rgba(255,255,255,.85)"); //white
myGradient1.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(300,260)
context.lineTo(250,390)
    context.lineTo(350,390)
context.closePath();

context.fillStyle= myGradient1;
context.fill();


/// TRIANGLE rain drop 3
var myGradient2 = context.createRadialGradient(420,40,3,420,30,78);
myGradient2.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient2.addColorStop(.2,"rgba(151,246,255,.70)"); //light blue
myGradient2.addColorStop(.6,"rgba(255,255,255,.85)"); //white
myGradient2.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(420,30)
context.lineTo(390,120)
    context.lineTo(450,120)
context.closePath();

context.fillStyle= myGradient2;
context.fill();

/// TRIANGLE rain drop 4
var myGradient3 = context.createRadialGradient(520,150,30,520,150,100);
myGradient3.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient3.addColorStop(.3,"rgba(151,246,255,.70)"); //light blue
myGradient3.addColorStop(.5,"rgba(255,255,255,.85)"); //white
myGradient3.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(520,150)
context.lineTo(475,300)
    context.lineTo(565,300)
context.closePath();

context.fillStyle= myGradient3;
context.fill();

/// TRIANGLE rain drop 5
var myGradient12 = context.createRadialGradient(650,50,30,650,50,100);
myGradient12.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient12.addColorStop(.3,"rgba(151,246,255,.70)"); //light blue
myGradient12.addColorStop(.5,"rgba(255,255,255,.85)"); //white
myGradient12.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(650,70)
context.lineTo(600,200)
    context.lineTo(700,200)
context.closePath();

context.fillStyle= myGradient12;
context.fill();

/// TRIANGLE rain drop 1
var myGradient4 = context.createRadialGradient(80,340,30,80,340,90);
myGradient4.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient4.addColorStop(.3,"rgba(151,246,255,.70)"); //light blue
myGradient4.addColorStop(.5,"rgba(255,255,255,.85)"); //white
myGradient4.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(80,340)
context.lineTo(10,500)
    context.lineTo(150,500)
context.closePath();

context.fillStyle= myGradient4;
context.fill();

/// QUADRATIC CURVE umbrella 1

var myGradient6=context.createRadialGradient(175,400,5,175,400,150);
myGradient6.addColorStop(0,"rgba(255,250,134,1)");
 myGradient6.addColorStop(.2,"rgba(242,72,255,1)");
myGradient6.addColorStop(0.4,"rgba(201,255,188,1)");
myGradient6.addColorStop(.68,"rgba(121,36,127,1)");
myGradient6.addColorStop(.8,"rgba(255,255,255,1)");
  myGradient6.addColorStop(1,"rgba(49,64,22,.8)");

context.beginPath();
context.moveTo(90,470);
context.quadraticCurveTo(175,300,260,470)
context.closePath();
context.fillStyle = myGradient6
context.fill();

/// QUADRATIC CURVE umbrella 2

var myGradient7=context.createRadialGradient(270,490,5,270,490,150);
myGradient7.addColorStop(0,"rgba(255,250,134,1)");
myGradient7.addColorStop(.2,"rgba(242,72,255,1)");
myGradient7.addColorStop(0.4,"rgba(201,255,188,1)");
myGradient7.addColorStop(.68,"rgba(121,36,127,1)");
myGradient7.addColorStop(.8,"rgba(255,255,255,1)");
myGradient7.addColorStop(1,"rgba(49,64,22,.8)");

context.beginPath();
context.moveTo(200,550);
context.quadraticCurveTo(270,420,340,550)
context.closePath();
context.fillStyle = myGradient7
context.fill();



/// BEZIER CURVE FLOWER

var myGradient5=context.createRadialGradient(400,370,10,400,350,250);
myGradient5.addColorStop(0,"rgba(255,255,255,1)");
 myGradient5.addColorStop(.2,"rgba(255,252,108,1)");
myGradient5.addColorStop(0.4,"rgba(201,255,188,1)");
myGradient5.addColorStop(.68,"rgba(122,178,196,1)");
myGradient5.addColorStop(.75,"rgba(255,255,255,1)");
  myGradient5.addColorStop(1,"rgba(22,26,64,1)");

context.beginPath();
//starting coordinates
context.moveTo(400,320);

//bezier curve
//cp1x, cp1y, cp2x, cp2y, bx, by
context.bezierCurveTo(440,230,490,200,430,350);
context.bezierCurveTo(600,270,600,330,450,370);
context.bezierCurveTo(610,360,550,430,400,400)
context.bezierCurveTo(250,430,190,360,350,370)
context.bezierCurveTo(200,330,200,270,370,350)
context.bezierCurveTo(310,200,360,230,400,320)
context.closePath();

context.fillStyle = myGradient5
context.fill();


///QUADRATIC CURVE back hair

var myGradient10=context.createLinearGradient(650,400,770,600);
myGradient10.addColorStop(0,"rgba(51,16,0,1)");
myGradient10.addColorStop(1,"rgba(28,24,17,1)");

context.beginPath();
context.moveTo(655,300)
context.quadraticCurveTo(700,400,630,600)
context.quadraticCurveTo(800,800,860,500)
context.closePath();
context.fillStyle = myGradient10
context.fill();
context.strokeStyle= ("rgba(28,24,17,1)")
context.stroke();

/// GUADRATIC CURVE neck
var myGradient9=context.createRadialGradient(800,500,20,800,500,100);
myGradient9.addColorStop(0,"tan");
myGradient9.addColorStop(1,"rgba(140,102,68,1)");

context.beginPath();
context.moveTo(750,400)
context.quadraticCurveTo(780,450,760,600)
context.quadraticCurveTo(880,850,900,500)
context.closePath();
context.fillStyle = myGradient9
context.fill();
context.strokeStyle= ("rgba(140,118,87,1)")
context.stroke();


/// BEZIER CURVE head
var myGradient8=context.createRadialGradient(800,350,90,800,350,200);
myGradient8.addColorStop(0,"tan");
myGradient8.addColorStop(1,"rgba(140,102,68,1)");

context.beginPath();
context.moveTo(800,450)
context.bezierCurveTo(600,320,600,185,800,70)
context.closePath();
context.fillStyle = myGradient8
context.fill();
context.strokeStyle= ("rgba(140,118,87,1)")
context.stroke();

/// QUADRATIC CURVE front bangs of hair
var myGradient11=context.createLinearGradient(770,50,600,150);
myGradient11.addColorStop(0,"rgba(51,16,0,1)");
myGradient11.addColorStop(1,"rgba(28,24,17,1)");

context.beginPath();
context.moveTo(800,70);
context.quadraticCurveTo(640,50,650,300)
context.quadraticCurveTo(750,200,800,70)
context.closePath();
context.fillStyle = myGradient11
context.fill();
context.strokeStyle= ("rgba(28,24,17,1)")
context.stroke();

/// QUADRATIC CURVE eye

var myGradient8=context.createRadialGradient(744,260,1.5,750,263,36);
myGradient8.addColorStop(0,"rgba(0,0,0,1)");
myGradient8.addColorStop(.1,"rgba(28,76,79,1)");
myGradient8.addColorStop(.35,"rgba(89,246,255,1)");
myGradient8.addColorStop(.45,"rgba(255,255,255,1)");
myGradient8.addColorStop(1,"rgba(131,131,140,1)");

context.beginPath();
context.moveTo(710,260);
context.quadraticCurveTo(750,220,780,260)
context.quadraticCurveTo(750,300,710,260)
context.closePath();
context.fillStyle = myGradient8
context.fill();


/// QUADRATIC CURVE eye lashes

context.beginPath();
context.moveTo(700,265);
context.quadraticCurveTo(750,200,785,260)
context.quadraticCurveTo(750,215,700,265)
context.closePath();
context.fillStyle = "black"
context.fill();

/// nose bottom
var x = canvas.width / 2.17;
      var y = canvas.height / 4.5;
      var radius = 35;
      var startAngle = .88 * Math.PI;
      var endAngle = 2.2 * Math.PI;
      var counterClockwise = true;

      context.beginPath();
      context.arc(810,320, 20, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;

      // line color
      context.strokeStyle =  ("rgba(140,118,87,1)");
      context.stroke();
   
/// nose side
context.beginPath();
context.moveTo(792,331);
context.quadraticCurveTo(760,340,785,300)

context.strokeStyle= ("rgba(140,118,87,1)");
context.stroke();

/// smile
context.beginPath();
context.moveTo(760,370);
context.quadraticCurveTo(800,400,820,370)

context.closePath();
context.fillStyle = ("rgba(194,38,79,1)");
context.fill();
context.strokeStyle= ("rgba(127,25,52,1)");
context.stroke();

Comments

Post a Comment

Popular posts from this blog

This series consists of five photos that I have personally colorized from a black and white photo. First is the realistic one, where I colorized the photo with it's original colors. Next, is the compound color palette, analogous, free, and shades. This assignment was incredibly time consuming, and I found myself restarting plenty of times. It was also really fun experimenting with different color palettes, and seeing what I can turn myself into!
Post a Comment
Read more

CALLIGRAM ~Stoneman Douglas~

         On February 14, 2018, a mass shooting occurred at Majory Stoneman Douglas High School in Parkland, Florida. A day that is supposed to be filled with an abundance of love, and warmth was quickly altered, and brought nothing but tragedy and heartbreak to those affected by this shocking event.         I have been born and raised in South Florida not far from Douglas High School and hearing this news was incredibly sad and devastating. Seventeen lives were taken away way too quickly, and I was one that worried if anyone I knew had been involved in the shooting. This is extremely terrifying, and is something that no one should ever have to experience.         I was pleased when I received this assignment because I was happy to see that professors at The University of Tampa were showing awareness to the occurrence. However, I do have to admit it was extremely hard to complete. The pain I felt continuously writing ...
1 comment
Read more

FMX210 Journey

    Many things have changed from the first day of class to now. First off, I was very nervous to take this course because I have never taken any sort of digital art class prior. I wanted to give each assignment my all, but was scared that it still wouldn't be enough. I never thought I would enjoy taking this class as much as I did. Each assignment took a lot of effort, but I always enjoyed the process. I'm extremely happy with everything that I have learned in this class, considering it has only been just a few months. The grading criteria, and high expectations of this course definitely pushed me to try my hardest and shoot for the 100%. I became more confident with my work and the critique process after each assignment, even though they would continuously get harder. I now have experience with so many different Adobe applications and look forward to using them in the future, because I know I have benefited from this class!
Post a Comment
Read more