Canvas Project

 Sunsets In Paradise

        The photo seen above is my finished work of the canvas project. When I first started brainstorming ideas for this assignment, I thought of creating a peace sign using a human with a tree sprouting in the background (as you can see down below). As I started creating this work in Adobe Dreamweaver, I realized that spending hours and hours creating a design that I was not fully invested would not be beneficial for anyone. I decided to scratch that idea, and come up with a new image based on a few things I love in life. The first thing I thought of while brainstorming news ideas was the ocean. I grew in Rhode Island, a place surrounded by beautiful beaches. My love of surfing, the ocean, and sunsets led me to the idea of creating the design you see above. I did not draw inspiration for my final design, I just started creating the piece and went from there. 

    My design consists of more than 10 various shapes, quadratic curves, bezier curves and a gradient background. Starting with the background, I played around with different colors and gradients to find the perfect depiction of a tropical sunset. I added the light blue water, the almost white colored sand, and the beautiful palm tree. When I was thinking about how I wanted the palm tree to look, I grabbed some inspiration from the palm trees on our campus, the University of Tampa. I took a lot of time picking out the colors I wanted to use for the leaves and the tree trunk which was very beneficial for the end result. I chose to use different colors for the outline of the tree and the sand because I wanted the design to resemble a cartoon-like style. I then added the lines in the ocean to signify movement and the red sun just as it is about to set. I went with a darker red for the sun after looking at some images of sunsets online to give it a more natural feel. I finally added the bird as another detail to top the design off. 

    This was my very first time using dreamweaver, or even hearing about dreamweaver. It took me a while to get the hang of it, but I think I managed to create a beautiful design. The part that was most frustrating to me was attempting to manipulate the code in order to create the shapes that I wanted. It took me a while to get the waves of the ocean and the leaves on the palm tree where I wanted (the most time consuming part). My final design is symmetrical (with the sun in the middle), colorful, and pleasing to look at. The design has a proportional feel to it, using the different shapes and lines to create a successful outcome. It took me over 10 extensive hours to complete this design, but the end result made it all worth it. 

Original Inspiration:

Code:

//background

var sky = context.createLinearGradient(0,0,0,600);

sky.addColorStop(0,'rgba(151,156,89,0.60)' );

sky.addColorStop(1, "rgba(225,52,29,1.00)");

 

 

 context.beginPath();

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

 context.closePath();

  

 context.fillStyle= sky;

 context.fill();

//beach 

 context.beginPath();

 context.moveTo(0,350)

 context.quadraticCurveTo(100,350,400,500);

 context.lineTo(0,600);

 context.closePath();

 context.fillStyle= 'rgba(242,216,160,1.00)';

 context.fill();

 context.strokeStyle= "rgba(245,203,111,1)";

 context.stroke();

context.beginPath();

context.moveTo(112,300);

context.quadraticCurveTo(90,290,70,350);

context.quadraticCurveTo(70,280,112,300);

 

context.quadraticCurveTo(110,280,80,270);

context.quadraticCurveTo(125,270,112,300);

context.quadraticCurveTo(120,276,160,280);

context.quadraticCurveTo(120,300,112,300);

 

context.quadraticCurveTo(140,330,140,350);

context.quadraticCurveTo(160,300,100,300);

context.closePath();

context.strokeStyle='rgba(34,100,8,1.00)';

context.fillStyle ='rgba(116,180,8,1.00)';

context.fill();

context.stroke();

context.beginPath();

context.moveTo(100,450);

context.quadraticCurveTo(100,300,110,300);

context.lineTo(115,300);

context.quadraticCurveTo(100,305,112,350);

context.closePath();

context.strokeStyle= "rgba(82,57,4,1.00)";

context.fillStyle= 'rgba(135,102,31,1.00)';

context.fill();

context.stroke();

var centerX = 400;

var centerY = 420;

var radius = 80;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false); 

context.lineWidth = 0;

context.strokeStyle = 'rgba(203,61,8,1.00)';

context.fillStyle ="rgba(203,61,8,1.00)" 

context.fill(); 

context.stroke(); 

var x =540 ;

var y =250;

var cpointX = canvas.width / 2 + 140;

var cpointY = canvas.height / 2 - 110;

var x1 =600 ;

var y1 =250 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1)

context.lineWidth = 2;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke(); 

var x =598 ;

var y =250;

var cpointX = canvas.width / 2 + 205;

var cpointY = canvas.height / 2 - 110;

var x1 =670;

var y1 =250 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 2;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();  

context.beginPath();

context.moveTo(0,380);

context.quadraticCurveTo(55,410,70,390);

context.quadraticCurveTo(120,450,130,390);

context.quadraticCurveTo(200,410,210,380);

context.quadraticCurveTo(250,400,340,375);

context.quadraticCurveTo(325,460,460,405);

context.quadraticCurveTo(540,440,650,430);

context.quadraticCurveTo(760,458,870,400);

context.quadraticCurveTo(780,365,900,400);

context.lineTo(900,600);

context.lineTo(0,700);

context.closePath();

context.strokeStyle= 'rgba(65,204,231,1.00)'

context.fillStyle= 'rgba(60,199,226,1.00)'

context.fill();

context.stroke();

context.beginPath();

context.moveTo(100,490);

context.quadraticCurveTo(360,520,430,490);  //left

context.lineWidth = 3;

context.strokeStyle = "rgb(169, 217, 255)";

context.stroke();

context.beginPath();

context.moveTo(150,450);

context.quadraticCurveTo(440,450,450,470);  //middle left

context.lineWidth = 3;

context.strokeStyle = "rgb(169, 217, 255)";

context.stroke();

 

 

 context.beginPath();

 context.moveTo(780,470);

 context.quadraticCurveTo(450,510,550,520);  //right

 context.lineWidth = 3;

 context.strokeStyle = "rgb(169, 217, 255)";

 context.stroke();