Canvas Project

-

    Let's get straight to the point, I almost ripped my hair out doing this image on Dreamweaver. I know it does not look like much but I spent about 8 hours on it. My computer became a little slow, so I had to keep redoing my project, which drove me crazy. I would also have to come back the next day because the laptop would freeze up and not let me finish. 

    I have definitely learned a lot from using Dreamweaver in this project. The examples, and other student's projects helped me figure out mine as well. I took different ideas from other examples and made the project my own. I even added the gradient in the water to show the light from the sun shining off of it. I kind of got my inspiration from going to the beach to see the beautiful sunset and pink take over the sky. Overall, I am very proud of the outcome and that I did not get a concussion from banging my head against the wall. I think it looks exactly how I imagined it would look.



////////////////////////////////////////////////////////////////////
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

 //background
     
    var bkgdgrd = context.createLinearGradient(0,0,0,600);
 
    bkgdgrd.addColorStop(.60,"rgba(255,0,0,0.4)");
    bkgdgrd.addColorStop(.10, "rgba(162,94,247,1.00)");
    bkgdgrd.addColorStop(.70,"rgba(41,0,237,1.00)");
    bkgdgrd.addColorStop(1,"rgba(41,0,237,1.00)");

     
// BACKGROUND
 
    context.beginPath();

         context.rect(0,0,800,600);
 
    context.closePath();
 
    context.fillStyle = bkgdgrd;
 
    context.fill();


 //Star 1
 context.beginPath();
      context.moveTo(107, 170);
   
      context.quadraticCurveTo(112,135,115,170);
   context.quadraticCurveTo(145,162,119,178);
   context.quadraticCurveTo(120,210,110,183);
      context.quadraticCurveTo(90,205,105,178);
   context.quadraticCurveTo(80,155,107,170);

      var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,59)");

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

      context.lineWidth = 2.5;
      context.strokeStyle = "lightsalmon";
      context.stroke();
  context.fillStyle = '#FFAFF1';
      context.fill();

//Star 2
 context.beginPath();
      context.moveTo(157, 370);
   
      context.quadraticCurveTo(162,335,170,370);
   context.quadraticCurveTo(195,362,169,378);
   context.quadraticCurveTo(170,410,160,383);
      context.quadraticCurveTo(140,405,155,378);
   context.quadraticCurveTo(130,355,157,370);

      var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,59)");

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

      context.lineWidth = 2.5;
      context.strokeStyle = "lightsalmon";
      context.stroke();
 context.fillStyle = '#FFAFF1';
      context.fill();
//Star 3
 context.beginPath();
      context.moveTo(657, 90);
   
      context.quadraticCurveTo(662,55,670,90);
   context.quadraticCurveTo(695,82,669,98);
   context.quadraticCurveTo(670,130,660,103);
      context.quadraticCurveTo(640,125,655,98);
   context.quadraticCurveTo(630,75,657,85);

      var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,59)");

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

      context.lineWidth = 2.5;
      context.strokeStyle = "lightsalmon";
      context.stroke();
 context.fillStyle = '#FFAFF1';
      context.fill();
//Star 4
 context.beginPath();
      context.moveTo(757, 70);
   
      context.quadraticCurveTo(762,35,770,70);
   context.quadraticCurveTo(795,62,769,78);
   context.quadraticCurveTo(770,110,760,83);
      context.quadraticCurveTo(740,105,755,78);
   context.quadraticCurveTo(730,55,757,70);

      var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,59)");

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

      context.lineWidth = 2.5;
      context.strokeStyle = "lightsalmon";
      context.stroke();
 context.fillStyle = '#FFAFF1';
      context.fill();
//Star 6
 context.beginPath();
      context.moveTo(457, 500);
   
      context.quadraticCurveTo(462,465,475,500);
   context.quadraticCurveTo(495,492,469,508);
   context.quadraticCurveTo(470,540,460,513);
      context.quadraticCurveTo(440,535,455,508);
   context.quadraticCurveTo(430,485,457,500);

      var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,59)");

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

      context.lineWidth = 2.5;
      context.strokeStyle = "lightsalmon";
      context.stroke();
 context.fillStyle = '#FFAFF1';
      context.fill();
//Sun 
 
var centerX = canvas.width / 1.5;

var centerY = canvas.height / 1.5;

var radius = 125;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 125);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(250,250,128)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();
// bird
// starting point coordinates
var x = 200;
var y = 200;

// control point coordinates ( magnet )
var cpointX = canvas.width / 3 - 50;
var cpointY = canvas.height / 3 - 15;

// ending point coordinates
var x1 = 250;
var y1 = 225;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

// starting point coordinates
var x = 300;
var y = 200;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2.5 - 50;
var cpointY = canvas.height / 3 - 15;

// ending point coordinates
var x1 = 250;
var y1 = 225;



context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
 
// bird 2
// starting point coordinates
var x = 600;
var y = 50;

// control point coordinates ( magnet )
var cpointX = canvas.width / 1.2 - 10;
var cpointY = canvas.height / 10 - 15;

// ending point coordinates
var x1 = 650;
var y1 = 75;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

// starting point coordinates
var x = 700;
var y = 50;

// control point coordinates ( magnet )
var cpointX = canvas.width / 1.2 - 10;
var cpointY = canvas.height / 10 - 15;

// ending point coordinates
var x1 = 650;
var y1 = 75;



context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
 
 
context.stroke();

  //sea

 var quad = context.createLinearGradient(200,500,400,400);
         
 quad.addColorStop(0, "rgb(1, 1, 100)");
 quad.addColorStop(1, "rgb(0,0,235)");

      context.beginPath();
      context.moveTo(0, 375);
      context.quadraticCurveTo(208, 350, 220, 375);
   context.quadraticCurveTo(280, 400, 400, 375);
   context.quadraticCurveTo(568, 350, 700, 375);
   context.quadraticCurveTo(808, 400, 820, 375);
   context.lineTo(850,680);
   context.lineTo(0,600);
   context.lineTo(0,575);
   context.closePath();
   context.fillStyle = quad;
   context.fill();
  //sea lines

  context.beginPath();
 context.moveTo(700,390);
 context.quadraticCurveTo(450,360,390,400);  //middle right
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 257, 255)";
 context.stroke();

 context.beginPath();
 context.moveTo(890,490);
 context.quadraticCurveTo(650,410,550,420);  //right
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 257, 255)";
 context.stroke();
 
  context.beginPath();
 context.moveTo(10,390);
 context.quadraticCurveTo(170,360,260,390);  //left
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 237, 255)";
 context.stroke();


 context.beginPath();
 context.moveTo(200,400);
 context.quadraticCurveTo(350,450,410,410);  //middle left
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 237, 255)";
 context.stroke();


 // draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 1.5;
context.fillStyle = 'rgba(255, 255, 255, .5  )';
context.fill();
context.strokeStyle = ' rgba(255, 255, 255, .5  ) ';
context.stroke();

 

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////


Comments

Post a Comment

Popular posts from this blog

Protect Black Women Poster

-
Image
I have created a self portrait of me, while making a poster in the process. This poster reads “Protect Black Women” because we are not protected enough. Black women are the most disrespected people on the planet. Most people could care less about black women and we are often looked over. In healthcare, a Black woman is way more likely to die from ignored problems than any other woman. I chose to erase my mouth in the poster to show that Black women are often silenced. I think the font was a good choice to show how bold the statement should be. This poster brings awareness to how Black women need to be protected and listened to, because we are dying with no way to be heard.   
Read more

Autoscopy

-
Image
  In this project, it represents how I feel about myself. Throughout my life, I have tried to look like other people in order to be accepted in society. I never accepted my curly hair. As you can see, these flowers represent my curly hair, symbolizing the beauty it holds. I've recently come to realize that my curly afro is beautiful just the way it is. The flowers represent me as a person, because they bloom. I am beautiful no matter how my hair is and I've learned to live by that. The plants overall adds an earthy feeling to this piece. I also added a tiara because I believe that I am worthy of any and everything. I've grown to know my worth. 
Read more

My Personal Logo

-
Image
       Above I have placed my final logo in different colors. The second picture are the logos that I drew on paper to have ideas in the beginning. Originally, I made the boombox as my logo with footprints to show that I am a dancer. The end result was overall a mess, with too much going on, so I switched it to my final one.     This logo means a lot to me because many people may not know this but it is the chemical compound for serotonin. My main objective in life is to be happy, whether it is dance, giving back, or creating a life for myself. The color purple in the first logo means royalty and I would like to think highly of myself. The second logo contains a sunflower, which is often associated with happiness. Lastly, the third logo looks very elegant and blue associates itself with peace. In order to be happy, you have to have peace.
Read more