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

About Me!

 Hello,  My name is Noemi Lopez and I am a senior at the University of Tampa pursuing a BFA in Film and Media Arts! I am a Mexican American producer, director, and cinematographer and my first language is Spanish. I am a fun, upbeat, lovable person, who is always down for a good adventure.  I am very excited about this course because I love doing creative assignments and I cannot wait to see the fun material that I will be learning to use in my future work. I expect to master the programs we will be using in class to become the professional that I want to be in my career path. 
2 comments
Read more

Portfolio!

  This assignment was extremely awesome to make. I never had the chance to work with indesign but because of this course I have been seeing the same tools all the time and so it was easier for me to work with! I watched the tutorial video and it was pretty much a one, two, three process. I selected this color palette for the design because these are colors that represent me as a person. I enjoy these colors the best and it makes me be in a happy mood! After laying out all of my assignments of what I have done this semester it is crazy to think about how much time and effort have been placed in each one. The grids I ended up working with was the 10 rows and columns because it helped me guide my work to stay within the margin and helped me keep all the images stay the same size so I wouldn't have any funky sizes on each page. Overall, this was fun to make and the design came out delicious!
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