Skip to main content

Sunset Canvas Project #1

This was my first time coding with Adobe Dreamweaver! It was really interesting to learn all the aspects behind making this image and how long it took to create. I spent about 12 hours overall,  I did a little every day so it wouldn't be too overwhelmed but it was definitely fun to make. I decided to do this because I love the sunsets in Tampa and this color scheme is my favorite in the evenings. 


Code below!


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title> Sunset </title>

<!-- import external .js scripts here -->

<!-- <script type="text/javascript" src="#" ></script> -->

<!-- modify CSS properties here -->

<style type="text/css">

body,td,th {

font-family: Monaco, "Courier New", "monospace";

font-size: 14px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#container {

position: relative;

text-align: left;

width: 95%;

height: 800px;

}

#fmxCanvas {

position: relative;

background-color:rgba(255,255,255,1);

border: rgba(255,255,255,1) thin dashed;

cursor: crosshair;

display: inline-block;

}

</style>

</head>

<body>

<div id="container">

<!-- START HTML CODE HERE -->

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

<div id="display"></div>

<!-- FINISH HTML CODE HERE -->

</div>

<script>

///////////////////////////////////////////////////////////////////////

// DECLARE requestAnimFrame

var rAF = window.requestAnimFrame ||

window.mozRequestAnimFrame ||

window.webkitRequestAnimFrame ||

window.msRequestAnimFrame;

var fps = 30;

window.requestAnimFrame = (

function(callback) {

return rAF ||

function(callback) {

window.setTimeout(callback, 1000 / fps);

};

})();

///////////////////////////////////////////////////////////////////////

// DEFINE GLOBAL VARIABLES HERE

var canvas;

var context;

canvas = document.getElementById("fmxCanvas");

context = canvas.getContext("2d");

var canvas1;

var context1;

canvas1 = document.createElement("canvas");

context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;

canvas1.height = canvas.height;

var display;

display = document.getElementById('display');

var counter;

///////////////////////////////////////////////////////////////////////

// DEFINE YOUR GLOBAL VARIABLES HERE

///////////////////////////////////////////////////////////////////////

// CALL THE EVENT LISTENERS

window.addEventListener("load", setup, false);

//////////////////////////////////////////////////////////////////////

// ADD EVENT LISTENERS

canvas.addEventListener("mousemove", mousePos, false);

//////////////////////////////////////////////////////////////////////

// MOUSE COORDINATES

var stage, mouseX, mouseY;

function mousePos(event) {

stage = canvas.getBoundingClientRect();

mouseX = event.clientX - stage.left;

mouseY = event.clientY - stage.top;

}

/////////////////////////////////////////////////////////////////////

// INITIALIZE THE STARTING FUNCTION

function setup() {

/////////////////////////////////////////////////////////////////////

// DECLARE STARTING VALUES OF GLOBAL VARIABLES

counter = 0;

mouseX = canvas.width/2;

mouseY = canvas.height/2;

/////////////////////////////////////////////////////////////////////

// CALL SUBSEQUENT FUNCTIONS, as many as you need

clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS

draw(); // THIS IS WHERE EVERYTHING HAPPENS

}

////////////////////////////////////////////////////////////////////

// CLEAR THE CANVAS FOR ANIMATION

// USE THIS AREA TO MODIFY BKGD

function clear() {

context.clearRect(0,0,canvas.width, canvas.height);

context1.clearRect(0,0,canvas.width, canvas.height);

// clear additional contexts here if you have more than canvas1

}

////////////////////////////////////////////////////////////////////

// THIS IS WHERE EVERYTHING HAPPENS

function draw() {

counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS

if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER

clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS

////////////////////////////////////////////////////////////////////

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

//background gradient

var mygrad = context.createLinearGradient (385,0, 385, 600);

    mygrad.addColorStop(0,"rgba(176,68,213,1.00)");

mygrad.addColorStop(0.125,"rgba(221,93,225,1.00)");

mygrad.addColorStop(0.25,"rgba(238,122,237,1.00)");

mygrad.addColorStop(0.35,"rgba(235,135,232,1.00)");

mygrad.addColorStop(0.50,"rgba(255,186,73,1.00)");

mygrad.addColorStop(0.65,"rgba(235,221,117,1.00)");

mygrad.addColorStop(0.75,"rgba(235,74,255,1.00)");

mygrad.addColorStop(1,"rgba(31,28,32,1.00)");

/// backgroung 

context.beginPath();

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

context.closePath();

context.fillStyle = mygrad;

context.fill();


//water move

var mygrad6 = context.createRadialGradient(mouseX,480, 0,465, 400,600);

//mygrad6.addColorStop(0,"rgba(235,221,117,1.00)");

mygrad6.addColorStop(0.25,"rgba(238,122,237,1.00)");

mygrad6.addColorStop(0.45,"rgba(235,74,255,1.00)");

mygrad6.addColorStop(0.65,"rgba(176,68,213,1.00)");

mygrad6.addColorStop(1,"rgba(176,68,213,1.00)");

context.beginPath();

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

context.closePath();

context.fillStyle = mygrad6;

context.fill();

//sun

context.beginPath();

context.arc(195,390,125, 0*Math.PI, 3.1416,true);

    context.closePath();

context.fillStyle = "rgba(220,220,220,1.00)";

context.fill();


//cloud 1 gradient

var mygrad2 = context.createLinearGradient (530, 0,440,324);

    mygrad2.addColorStop(0.25,"rgba(90,13,117,1.00)");

mygrad2.addColorStop(0.65,"rgba(155,10,164,1.00)");

mygrad2.addColorStop(1,"rgba(142,13,13,1.00)");

//cloud 1

context.beginPath();

context.moveTo(545,300);

context.quadraticCurveTo(480,279,618,271);

context.quadraticCurveTo(570,250,682,255);

context.quadraticCurveTo(700,240,735,250);

context.quadraticCurveTo(800,185,800,245);

context.quadraticCurveTo(795,310,775,305);

context.quadraticCurveTo(724,322,690,305);

context.quadraticCurveTo(686,326,666,320);

context.quadraticCurveTo(575,325,546,300);

context.closePath();

context.fillStyle = mygrad2;

context.fill();

context.strokeStyle= "rgba(238,233,229,1.00)"

context.lineWidth = 2

context.stroke();

//cloud 2 gradient 

var mygrad3 = context.createLinearGradient (530, 0,440,324);

    mygrad3.addColorStop(0.25,"rgba(90,13,117,1.00)");

mygrad3.addColorStop(0.65,"rgba(155,10,164,1.00)");

mygrad3.addColorStop(1,"rgba(142,13,13,1.00)");

//cloud 2

context.beginPath();

context.moveTo(346,220);

context.quadraticCurveTo(350,187,415,200);

context.quadraticCurveTo(403,147,480,200);

context.quadraticCurveTo(390,150,734,88);

context.quadraticCurveTo(800,100,760,115);

context.quadraticCurveTo(800,114,787,152);

context.quadraticCurveTo(800,230,737,215);

context.quadraticCurveTo(700,250,665,225);

context.quadraticCurveTo(510,240,560,222);

context.quadraticCurveTo(350,265,346,220);

context.closePath();

context.fillStyle = mygrad3;

context.fill();

context.strokeStyle= "rgba(238,233,229,1.00)"

context.lineWidth = 2

context.stroke();

//cloud 3 gradient

var mygrad4 = context.createLinearGradient (530, 0,440,324);

    mygrad4.addColorStop(0.25,"rgba(90,13,117,1.00)");

mygrad4.addColorStop(0.65,"rgba(155,10,164,1.00)");

mygrad4.addColorStop(1,"rgba(142,13,13,1.00)");

//cloud 3

context.beginPath();

context.moveTo(337,130);

context.quadraticCurveTo(280,97,271,105);

context.quadraticCurveTo(264,97,230,85);

context.quadraticCurveTo(202,78,140,84);

context.quadraticCurveTo(33,50,0,102);

context.quadraticCurveTo(0,160,6,180);

context.quadraticCurveTo(14,200,60,177);

context.quadraticCurveTo(110,190,125,170);

context.quadraticCurveTo(240,175,230,150);

context.quadraticCurveTo(360,160,337,130);

context.closePath();

context.fillStyle = mygrad4;

context.fill();

context.strokeStyle= "rgba(238,233,229,1.00)"

context.lineWidth = 2

context.stroke();

//cloud 4 gradient 

var mygrad5 = context.createLinearGradient (0,355,440,324);

    mygrad5.addColorStop(0.25,"rgba(90,13,117,1.00)");

mygrad5.addColorStop(0.65,"rgba(155,10,164,1.00)");

mygrad5.addColorStop(1,"rgba(142,13,13,1.00)");

//cloud 4

context.beginPath();

context.moveTo(305,0);

context.quadraticCurveTo(285,25,245,15);

context.quadraticCurveTo(220,35,175,25);

context.quadraticCurveTo(180,60,130,35);

context.quadraticCurveTo(150,63,105,43);

context.quadraticCurveTo(50,85,0,45);

context.quadraticCurveTo(0,12,0,0);

context.closePath();

context.fillStyle = mygrad5;

context.fill();

context.strokeStyle= "rgba(238,233,229,1.00)"

context.lineWidth = 2

context.stroke();

//sun line 1

context.beginPath();

context.moveTo(105,410);

context.lineTo(173,410);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 2

context.beginPath();

context.moveTo(190,410);

context.lineTo(230,410);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 3

context.beginPath();

context.moveTo(250,410);

context.lineTo(305,410);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 4

context.beginPath();

context.moveTo(130,425);

context.lineTo(185,425);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 5

context.beginPath();

context.moveTo(210,425);

context.lineTo(260,425);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 6

context.beginPath();

context.moveTo(165,440);

context.lineTo(205,440);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 7

context.beginPath();

context.moveTo(220,440);

context.lineTo(250,440);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//sun line 8

context.beginPath();

context.moveTo(190,460);

context.lineTo(215,460);

context.closePath();

context.fillStyle = "rgba(225,196,197,0.17)";

context.fill();

context.lineWidth = 2 

context.stroke();

//lines 1 in water

context.beginPath();

context.moveTo(43,480);

context.bezierCurveTo(90,460, 100,500, 145,475);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();

//lines 2 in water

context.beginPath();

context.moveTo(220,495);

context.bezierCurveTo(260,475, 300,500, 310,480);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();

//lines 3 in water

context.beginPath();

context.moveTo(340,430);

context.bezierCurveTo(360,440, 400,400, 430,430);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();

//lines 4 in water

context.beginPath();

context.moveTo(488,484);

context.bezierCurveTo(540,473, 500,500, 565,488);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();

//lines 5 in water

context.beginPath();

context.moveTo(600,433);

context.bezierCurveTo(665,450, 600,400, 700,435);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();

//lines 6 in water

context.beginPath();

context.moveTo(720,478);

context.bezierCurveTo(755,483, 700,450, 780,473);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();

/*//lines 7 in water

context.beginPath();

context.moveTo(145,425);

context.bezierCurveTo(215,430, 150,410, 213,425);

context.strokeStyle = "rgba(172,23,227,1.00)";

context.stroke();*/

//land gradient

var mygrad8 = context.createLinearGradient (400,500, 500,600);

    mygrad8.addColorStop(0,"rgba(62,36,25,1.00)");

mygrad8.addColorStop(0.5,"rgba(47,23,13,1.00)");

mygrad8.addColorStop(1,"rgba(35,19,12,1.00)"); 

//land 1

context.beginPath();

context.moveTo(0,560);

context.bezierCurveTo (0,546,38,515,280,560);

    context.bezierCurveTo (307,557,320,502,580,560);

context.bezierCurveTo (640,550,800,506,800,560);

context.bezierCurveTo (800,600,800,500,800,600);

context.bezierCurveTo (500,600,120,600,0,600);

context.closePath();

context.fillStyle = mygrad8;

context.fill();

context.strokeStyle = "rgba(33,20,5,1.00)";

context.stroke();

//lines 1

context.beginPath();

context.moveTo(20,545);

context.lineTo(20,525);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 2

context.beginPath();

context.moveTo(45,540);

context.lineTo(40,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 3

context.beginPath();

context.moveTo(70,540);

context.lineTo(70,521);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 4

context.beginPath();

context.moveTo(95,540);

context.lineTo(105,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 5

context.beginPath();

context.moveTo(116,537);

context.lineTo(120,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 6

context.beginPath();

context.moveTo(145,538);

context.lineTo(140,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 7

context.beginPath();

context.moveTo(175,545);

context.lineTo(178,526);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 8

context.beginPath();

context.moveTo(205,548);

context.lineTo(202,530);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 9

context.beginPath();

context.moveTo(235,550);

context.lineTo(233,533);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 10

context.beginPath();

context.moveTo(260,556);

context.lineTo(260,540);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 11

context.beginPath();

context.moveTo(280,560);

context.lineTo(280,545);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 12

context.beginPath();

context.moveTo(310,545);

context.lineTo(305,532);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 13

context.beginPath();

context.moveTo(335,540);

context.lineTo(333,523);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 14

context.beginPath();

context.moveTo(365,540);

context.lineTo(365,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 15

context.beginPath();

context.moveTo(390,535);

context.lineTo(390,515);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 16

context.beginPath();

context.moveTo(420,535);

context.lineTo(415,515);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 17

context.beginPath();

context.moveTo(445,537);

context.lineTo(453,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 18

context.beginPath();

context.moveTo(473,540);

context.lineTo(473,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 19

context.beginPath();

context.moveTo(500,545);

context.lineTo(505,525);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 20

context.beginPath();

context.moveTo(525,550);

context.lineTo(522,530);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 21

context.beginPath();

context.moveTo(553,553);

context.lineTo(546,535);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 22

context.beginPath();

context.moveTo(585,560);

context.lineTo(580,535);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 23

context.beginPath();

context.moveTo(700,540);

context.lineTo(685,518);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 24

context.beginPath();

context.moveTo(725,535);

context.lineTo(722,515);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//lines 25

context.beginPath();

context.moveTo(760,534);

context.lineTo(748,515);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();


//lines 26

context.beginPath();

context.moveTo(785,540);

context.lineTo(788,520);

context.closePath();

context.strokeStyle = "rgba(42,24,4,1.00)";

context.stroke();

//tree stand gradient

var mygrad7 = context.createLinearGradient (400,600, 400,300);

    mygrad7.addColorStop(0,"rgba(70,37,23,1.00)");

mygrad7.addColorStop(0.5,"rgba(61,28,15,1.00)");

mygrad7.addColorStop(1,"rgba(35,19,12,1.00)"); 

//tree stand 

context.beginPath();

context.moveTo(643,563);

context.quadraticCurveTo(745,430,576,118);

    // context.quadraticCurveTo(mouseX, mouseY,576,118);

    context.quadraticCurveTo(558, 103,562,133);

//    context.quadraticCurveTo(mouseX, mouseY,562,133);

context.quadraticCurveTo(711, 493,582,558); 

    // context.quadraticCurveTo(mouseX, mouseY,582,558);

    context.closePath();

context.fillStyle = mygrad7

context.fill();


//leaf 1

context.beginPath();

context.moveTo(568,120);

context.quadraticCurveTo(370,173,433,302,445,225);

context.quadraticCurveTo(440,325,474,238,568,120);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();


//line

context.beginPath();

context.moveTo(568,120);

context.quadraticCurveTo(418,205,440,255,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();


//leaf 2

context.beginPath();

context.moveTo(576,121);

context.quadraticCurveTo(424,63,290,150,308,150);

context.quadraticCurveTo(360,170,446,153,576,121);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(576,121);

context.quadraticCurveTo(427,113,340,140,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

// leaf 3

context.beginPath();

context.moveTo(584,117);

context.quadraticCurveTo(567,-1,383,30,383,30);

context.quadraticCurveTo(374,52,450,76,584,117);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(584,117);

context.quadraticCurveTo(473,50,340,74,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();


//leaf 4

context.beginPath();

context.moveTo(580,118);

context.quadraticCurveTo(502,12,301,67,303,72);

context.quadraticCurveTo(290,97,420,90,580,118);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(580,118);

context.quadraticCurveTo(508,26,400,40,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//leaf5

context.beginPath();

context.moveTo(580,120);

context.quadraticCurveTo(540,28,660,-1,660,-1);

context.quadraticCurveTo(668,-1,645,31,580,120);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(580,120);

context.quadraticCurveTo(595,35,635,22,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//leaf6

context.beginPath();

context.moveTo(581,117);

context.quadraticCurveTo(621,27,795,45,795,45);

context.quadraticCurveTo(799,75,690,100,581,117);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(581,117);

context.quadraticCurveTo(655,70,738,58,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//leaf 7

context.beginPath();

context.moveTo(582,124);

context.quadraticCurveTo(780,78,800,205,800,205);

context.quadraticCurveTo(799,226,641,131,582,124);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(582,124);

context.quadraticCurveTo(730,105,790,200,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//leaf8 small right

context.beginPath();

context.moveTo(580,121);

context.quadraticCurveTo(698,145,693,230,693,230);

context.quadraticCurveTo(698,247,620,178,580,121);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(580,121);

context.quadraticCurveTo(677,171,680,210,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//leaf9 small left

    context.beginPath();

context.moveTo(576,121);

context.quadraticCurveTo(512,194,548,221,548,221);

context.quadraticCurveTo(558,226,577,173,576,121);

context.closePath();

context.fillStyle = "rgba(31,23,17,0.90)"

context.fill();

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//line

context.beginPath();

context.moveTo(576,121);

context.quadraticCurveTo(552,182,550,210,440,255);

context.strokeStyle = "rgba(31,23,17,1.00)"

context.lineWidth = 5

context.stroke();

//bird 1

context.beginPath();

context.moveTo(326,304);

context.quadraticCurveTo(340,290,345,300);

context.quadraticCurveTo(350,290,370,300);

context.stroke ();

//bird 2

context.beginPath();

context.moveTo(685,21);

context.quadraticCurveTo(723,5,725,20);

context.quadraticCurveTo(733,0,768,3);

context.stroke ();


//bird 3

context.beginPath();

context.moveTo(474,335);

context.quadraticCurveTo(500,322,510,330);

context.quadraticCurveTo(515,320,545,325);

context.stroke ();

//bird 4

context.beginPath();

context.moveTo(110,40);

context.quadraticCurveTo(133,27,143,40);

context.quadraticCurveTo(150,20,186,35);

context.stroke ();

//bird 5 

context.beginPath();

context.moveTo(285,40);

context.quadraticCurveTo(300,25,315,30);

context.quadraticCurveTo(330,15,350,30);

context.stroke ();

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

///////////////////////////////////////////////////////////////////

// CREDITS

context.save();

var credits = "Noemi Lopez, Sunset, FMX 210, FA 2020";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();

//////////////////////////////////////////////////////////////////

// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

/////////////////////////////////////////////////////////////////

// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Belly Dancing Animation!

  💙Youtube Link:   https://youtu.be/AndSQFLcUKI 💙 The animation project was honestly the assignment that took up a lot of my time! Only because I had to draw 220 frames and color it all based on the details. I lost count of how many hours I spent with this assignment but I am definitely happy on the end result. It is crazy to think how long it took for just a 25 second video! I can only imagine how much work and effort it takes animators to do an entire film and now it makes sense why they take years doing it. I had doing this project and my tablet helped me out a lot when I had to trace myself out!
Post a Comment
Read more

BW to Color!

  BW to Color assignment was fun to do and made it funny because of the selection of color palette. I have never seen myself in these funky colors so it was fun to make. I had some trouble at the beginning when I needed to mask and outline all the different areas but once I got the hang of it, everything else was pretty easy to do. I was focusing more on the minor details making sure all the lines were even and blended in correctly so it can have a natural look. It took me a while to make the first color but after that I made the remaining pretty quickly. I had fun with these, makes me think of an art gallery exhibition!
Post a Comment
Read more

Mean Girls Special Guest!

This assignment was really fun to do! I have no idea why Mean Girls came into my mind when brainstorming which film to do but I really think the outcome was clean. I had to search up various images from the scenes that was large enough for me to edit and for me to have space to include myself. The one I found above was the best choice out of all of them and it had enough space for me to insert myself there. I dressed up like them and got a purse and masked myself out from the original image and copy and pasted myself to the film scene. It took a lot of blending and changing the light to match the scene but it was so fun to make!
Post a Comment
Read more