Canvas Project

 


For my canvas project, I went with the design concept of life under the sea. I designed the original idea sketch on my iPad with my apple pencil, and then I brought it to life by using codes on Adobe Dreamweaver. What I really enjoyed about my concept was the curves on the image that created waves in the water. To be blunt, I struggled a lot throughout the course of creating my project. My biggest struggle was manipulating the Bezier and Quadratic curves. My favorite part of creating the image was playing around with the different colors and allowing the colors to complement each other in the image.


I feel that there are some aspects about my project that I could have enhanced like the seaweed and coral at the bottom of the ocean, but again I was struggling to create that perfect curve to give off the seaweed look. I completed this project over the course of 3-4 days at about 2-3 hours each day. I feel that it was beneficial that I did it in small increments over the course of a few days rather than just cramming it into one day to complete the project.


Original Sketch

CODE FOR FINAL PROJECT


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

 

 

 

<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </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.00);

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 HERE

var gradient2 = context.createLinearGradient(50, 15, 0, 350);

gradient2.addColorStop(0, '#79D3F7');

gradient2.addColorStop(1, 'rgba(0,27,144,1.00)'); //'rgba(0,27,144,1.00)'

context.fillStyle = gradient2;

context.fillRect(0, 0, 800, 800);

// starting point coordinates

var x7 = 0;

var y7 = 40;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 3;

var cpointY8 = canvas.height / 18 + 109;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.50 - 405; 

 

// ending point coordinates 

var x8 = 800;

var y8 = 75;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();


// starting point coordinates

var x7 = 0;

var y7 = 100;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 3;

var cpointY8 = canvas.height / 15 + 232;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.50 - 365; 

 

// ending point coordinates 

var x8 = 800;

var y8 = 148;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 0;

var y7 = 200;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 3;

var cpointY8 = canvas.height / 10 + 315;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.45 - 345; 

 

// ending point coordinates 

var x8 = 800;

var y8 = 236;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x = 0;

var y = 300;

 

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 2;

var cpointY1 = canvas.height / 7 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 3.5;

var cpointY2 = canvas.height / 1.3 - 300; 

 

// ending point coordinates 

var x1 = 800;

var y1 = 300;

 

 

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();


// starting point coordinates

var x7 = 0;

var y7 = 400;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 3;

var cpointY8 = canvas.height / 3 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.25 - 300; 

 

// ending point coordinates 

var x8 = 800;

var y8 = 400;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();

 

// starting point coordinates

var x = 0;

var y = 500;

 

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 2;

var cpointY1 = canvas.height / 3 + 400;

 

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 3.5;

var cpointY2 = canvas.height / 1 - 400; 

 

// ending point coordinates 

var x1 = 800;

var y1 = 500;

 

 

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();

 

// starting point coordinates

var x4 = 0;

var y4 = 600;

 

// control point 1 coordinates ( magnet )

var cpointX5 = canvas.width / 1.5;

var cpointY5 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX6 = canvas.width / 2.5;

var cpointY6 = canvas.height / 1 - 300; 

 

// ending point coordinates 

var x5 = 800;

var y5 = 600;

 

 

context.beginPath();

context.moveTo(x4, y4);

context.bezierCurveTo(cpointX5, cpointY5, cpointX6, cpointY6, x5, y5);

 

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round' 

context.stroke();

//bubble 1

var centerX = 175;

        var centerY = 119

        var radius = 45;

        var startangle = 1.01* Math.PI;;

        var endangle =  1* Math.PI;

 

        context.beginPath();

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

        context.fillStyle = "#9CD1E1";

context.fill();

       context.lineWidth = 6;

        context.strokeStyle = "#B9E7FB";

        context.stroke()


//Bubble 1 cont

var centerX = 175;

var centerY = 119;

var radius = 60;


var startX = 80;

var startY = 150;

var startRadius = 50;

var endX = 100;

var endY = 155;

var endRadius = 132;


context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(177,226,243,0.83)');

grd.addColorStop(1, 'rgba(114,185,226,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Circle size and placement

var centerX = 550;

var centerY = 390;

var radius = 100;

//Circle gradient size and placement

var startX = 100;

var startY = 150;

var startRadius = 50;

var endX = 120;

var endY = 155;

var endRadius = 125;


//Bubble 2

var centerX = 305;

var centerY = 165;

var radius = 34;


var startX = 80;

var startY = 150;

var startRadius = 50;

var endX = 100;

var endY = 155;

var endRadius = 132;


context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(177,226,243,0.83)');

grd.addColorStop(1, 'rgba(142,204,239,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//Circle size and placement

var centerX = 550;

var centerY = 390;

var radius = 100;

//Circle gradient size and placement

var startX = 310;

var startY = 150;

var startRadius = 10;

var endX = 120;

var endY = 155;

var endRadius = 125;


//Bubble 3

var centerX = 234;

var centerY = 212;

var radius = 15;


var startX = 80;

var startY = 150;

var startRadius = 50;

var endX = 100;

var endY = 155;

var endRadius = 132;


context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(177,226,243,0.83)');

grd.addColorStop(1, 'rgba(142,204,239,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//Circle size and placement

var centerX = 550;

var centerY = 390;

var radius = 100;

//Circle gradient size and placement

var startX = 310;

var startY = 150;

var startRadius = 10;

var endX = 120;

var endY = 155;

var endRadius = 125;


//Bubble 4

var centerX = 576;

var centerY = 67;

var radius = 28;


var startX = 80;

var startY = 150;

var startRadius = 50;

var endX = 100;

var endY = 155;

var endRadius = 132;


context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(177,226,243,0.83)');

grd.addColorStop(1, 'rgba(142,204,239,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//Circle size and placement

var centerX = 550;

var centerY = 390;

var radius = 100;

//Circle gradient size and placement

var startX = 310;

var startY = 150;

var startRadius = 10;

var endX = 120;

var endY = 155;

var endRadius = 125;

//Bubble 5

var centerX = 600;

var centerY = 267;

var radius = 60;


var startX = 80;

var startY = 150;

var startRadius = 50;

var endX = 100;

var endY = 155;

var endRadius = 132;


context.beginPath();

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

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(177,226,243,0.83)');

grd.addColorStop(1, 'rgba(142,204,239,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();


//Circle size and placement

var centerX = 550;

var centerY = 390;

var radius = 100;

//Circle gradient size and placement

var startX = 310;

var startY = 150;

var startRadius = 10;

var endX = 120;

var endY = 155;

var endRadius = 125;


// Quad curve for bubble 1


// starting point coordinates

var x = 189;

var y = 173;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2.30 - 175;

var cpointY = canvas.height / 2.25 - 190;


// ending point coordinates

var x1 = 156;

var y1 = 93;


context.beginPath();

context.moveTo(208, 96);

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


context.lineWidth = 8;

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

context.stroke();

// Quad curve for bubble 2


// starting point coordinates

var x = 189;

var y = 173;


// control point coordinates ( magnet )

var cpointX = canvas.width / 1.10 - 150;

var cpointY = canvas.height / 4.95 - 70;


// ending point coordinates

var x1 = 590;

var y1 = 58;


context.beginPath();

context.moveTo(567, 58);

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


context.lineWidth = 8;

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

context.stroke();

// Quad curve for bubble 3


// starting point coordinates

var x = 183;

var y = 173;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2.40 - 20;

var cpointY = canvas.height / 2.65 - 90;


// ending point coordinates

var x1 = 320;

var y1 = 155;


context.beginPath();

context.moveTo(290, 155);

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


context.lineWidth = 8;

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

context.stroke();

// Quad curve for bubble 4


// starting point coordinates

var x = 183;

var y = 173;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2.95 - 20;

var cpointY = canvas.height / 2.05 - 90;


// ending point coordinates

var x1 = 226;

var y1 = 209;


context.beginPath();

context.moveTo(230, 205);

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


context.lineWidth = 2;

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

context.stroke();

// Quad curve for bubble 5


// starting point coordinates

var x = 250;

var y = 173;


// control point coordinates ( magnet )

var cpointX = canvas.width / 1.30 - 14;

var cpointY = canvas.height / 2.40 - 40;


// ending point coordinates

var x1 = 580;

var y1 = 224;


context.beginPath();

context.moveTo(625, 228);

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


context.lineWidth = 8;

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

context.stroke();

// Quad curve for extra bubble 6


// starting point coordinates

var x = 280;

var y = 210;


// control point coordinates ( magnet )

var cpointX = canvas.width / 1.0 - 110;

var cpointY = canvas.height / 3.95 - 40;


// ending point coordinates

var x1 = 675;

var y1 = 125;


context.beginPath();

context.moveTo(700, 125);

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


context.lineWidth = 8;

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

context.stroke();

// Goldfish Tail

context.beginPath(); // begin a shape

 

context.moveTo(580,365); // point A coordinates

context.lineTo(580, 450); // point B coords

context.lineTo(530,410); // point C coords

context.closePath(); // close the shape

context.lineWidth = 3.5; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(230,103,0,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(247,132,0,1.00)";

context.fill();

//Goldfish Head

context.beginPath();

context.arc(490, 405, 55, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(247,132,0,1.00)' ;

context.fill();

context.lineWidth =3.5;

context.strokeStyle = 'rgba(230,103,0,1.00)';

context.stroke();

//Goldfish Eye

context.beginPath();

context.arc(465, 390, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,0,0,1.00)' ;

context.fill();

context.lineWidth =20;

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

context.stroke();

// Goldfish smile

// starting point coordinates

var x = 500;

var y = 365;


// control point coordinates ( magnet )

var cpointX = canvas.width / 1.90 - 3;

var cpointY = canvas.height / 1.25 - 2;


// ending point coordinates

var x1 = 485;

var y1 = 420;


context.beginPath();

context.moveTo(485, 420);

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


context.lineWidth = 8;

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

context.stroke();


// Coral Reef

// starting point coordinates

var x7 = 175;

var y7 = 615;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 2.32;

var cpointY8 = canvas.height / 3 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.25 - 300; 

 

// ending point coordinates 

var x8 = 250;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

 

// starting point coordinates

var x7 = 175;

var y7 = 586;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 2.32;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 240;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 175;

var y7 = 566;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 2.12;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.10 - 300; 

 

// ending point coordinates 

var x8 = 230;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 150;

var y7 = 570;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 2.32;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 200;

var y8 = 610;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 152;

var y7 = 600;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 5.02;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 10.5;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 220;

var y8 = 587;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 165;

var y7 = 586;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 1.92;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 4.75;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 230;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 130;

var y7 = 600;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 1.52;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.15 - 300; 

 

// ending point coordinates 

var x8 = 200;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(240,139,126,1.00)";

context.lineCap = 'round' 

context.stroke();

// Seaweed

// starting point coordinates

var x7 = 575;

var y7 = 615;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / .75;

var cpointY8 = canvas.height / 2 + 600;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.25 - 300; 

 

// ending point coordinates 

var x8 = 595;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

 

// starting point coordinates

var x7 = 555;

var y7 = 600;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / .76;

var cpointY8 = canvas.height / 2.75 + 200;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / .75 - 300; 

 

// ending point coordinates 

var x8 = 560;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 480;

var y7 = 566;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 1.12;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 1.5;

var cpointY9 = canvas.height / 1.05 - 300; 

 

// ending point coordinates 

var x8 = 530;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 530;

var y7 = 570;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 1.32;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 2.5;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 520;

var y8 = 610;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 562;

var y7 = 600;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 2.02;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 1.5;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 540;

var y8 = 587;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 525;

var y7 = 586;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 1.4;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 1.85;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 598;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x7 = 578;

var y7 = 600;

 

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 1.22;

var cpointY8 = canvas.height / 2 + 300;

 

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 1.24;

var cpointY9 = canvas.height / 1.00 - 300; 

 

// ending point coordinates 

var x8 = 529;

var y8 = 600;

 

 

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

 

context.lineWidth = 8;

context.strokeStyle = "rgba(2,117,24,1.00)";

context.lineCap = 'round' 

context.stroke();

// Extra bubble 6

var centerX1 = 680;

        var centerY1 = 140

        var radius1 = 38;

        var startangle1 = .01* Math.PI;;

        var endangle1 =  0* Math.PI;

 

        context.beginPath();

        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);

        context.fillStyle = "rgba(142,204,239,0.39)";

context.fill();

       context.lineWidth = 8;

        context.strokeStyle = "rgba(177,226,243,0.83)";

        context.stroke();

// Turtle Tail

context.beginPath(); // begin a shape

 

context.moveTo(235,380); // point A coordinates

context.lineTo(280, 350); // point B coords

context.lineTo(245,300); // point C coords


context.closePath(); // close the shape

context.lineWidth = 2; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(2,85,0,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(9,107,0,1.00)";

context.fill();

//Turtle Head

context.beginPath();

context.arc(330, 275, 20, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(1,151,14,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(2,98,20,1.00)';

context.stroke();

//Turtle Eye

context.beginPath();

context.arc(340, 270, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,0,0,1.00)' ;

context.fill();

context.lineWidth =2;

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

context.stroke();

//Turtle Eye

context.beginPath();

context.arc(330, 263, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,0,0,1.00)' ;

context.fill();

context.lineWidth =2;

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

context.stroke();

var centerX = 240;

        var centerY = 280

        var radius = 35;

        var startangle = 1.4* Math.PI;;

        var endangle =  0* Math.PI;

 

        context.beginPath();

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

        context.fillStyle = "#065A02";

context.fill();

       context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

var centerX = 330;

        var centerY = 345

        var radius = 35;

        var startangle = 1.4* Math.PI;;

        var endangle =  0* Math.PI;

 

        context.beginPath();

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

        context.fillStyle = "#045B00";

context.fill();

       context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

var centerX = 305;

        var centerY = 385

        var radius = 35;

        var startangle = 1.4* Math.PI;;

        var endangle =  0* Math.PI;

 

        context.beginPath();

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

        context.fillStyle = "#055C00";

context.fill();

       context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

var centerX = 207.5;

        var centerY = 315

        var radius = 35;

        var startangle = 1.4* Math.PI;;

        var endangle =  0* Math.PI;

 

        context.beginPath();

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

        context.fillStyle = "#045E00";

context.fill();

       context.lineWidth = 2;

        context.strokeStyle = "#015A01";

        context.stroke();

 

//Turtle Body & Shell

context.beginPath();

context.arc(280, 312, 50, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(1,151,14,1.00)' ;

context.fill();

context.lineWidth =4;

context.strokeStyle = 'rgba(2,98,20,1.00)';

context.stroke();

// starting point coordinates

var x = 320;

var y = 289;

 

// control point coordinates ( magnet )

var cpointX = canvas.width / 5.25 - 2;

var cpointY = canvas.height / 1.75 - 1;

 

// ending point coordinates

var x1 = 325;

var y1 = 315;

 

 

context.beginPath();

context.moveTo(x, y);

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

 

context.lineWidth = 9;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 300;

var y = 269;

 

// control point coordinates ( magnet )

var cpointX = canvas.width / 5.25 - 2;

var cpointY = canvas.height / 1.75 - 1;

 

// ending point coordinates

var x1 = 325;

var y1 = 315;

 

 

context.beginPath();

context.moveTo(x, y);

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

 

context.lineWidth = 9;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 319;

var y = 289;

 

// control point coordinates ( magnet )

var cpointX = canvas.width / 5.25 - 2;

var cpointY = canvas.height / 1.75 - 1;

 

// ending point coordinates

var x1 = 313;

var y1 = 345;

 

 

context.beginPath();

context.moveTo(x, y);

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

 

context.lineWidth = 9;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

 

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

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

 

// CREDITS

 

context.save();

var credits = "Dylan Krapf, Aquarium, FMX 210, FA 2022";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(255,255,255,1.00)"; // change the color here

context.shadowColor = "rgba(0,0,0,1.00)"; // 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

Introduction Blog Post

Image
Hi, my name is Dylan Krapf and I'm from Long Island, New York. I'm a sophomore here at UT and I'm majoring in Marketing with a minor in Advertising. I started as a Biology major on the pre-dental track, but quickly realized it wasn't for me during my second semester of school. This past summer, my aunt started up a macaron business and needed someone to run her marketing and social media platforms, so I chose to do it for her since I've always had a slight passion for social media. Over time, I grew to love creating graphics for her posts and using my mind to find strategies for growing the account. So, I made the bold decision to switch my major and start a new educational career in marketing and advertising. I'm very excited to begin this class because I feel that it will allow me to dive more into designing and using my mind to create. It will also teach me tactics that I didn't know previously and will help me in my future career endeavors.
Read more

BW -> Color

Image
  For my Black & White to Color project, I had to select an image of myself to completely transform and re-design. First, we had to grey out the image and remove all of the color that was previously there. For my image selection, I chose a selfie that had some neutral tones, and pops of color throughout. I did this for a reason because I knew that when I added color to the images, it was going to bring it more to life! These are the final products of my Black & White to Color project. I have to say, while it was a difficult project in the beginning, it became much more enjoyable and playful once you got the hang of it. Photoshop is not an easy platform to learn, which was understood and accepted before completing this project! Overall, I feel that the best outcome was the Square image. It has the most pops of color and is very vibrant.
Read more

Business Cards

Image
For my first business card, I took inspiration from one of my favorite artists, Olivia Rodrigo. The business card is based off of her first studio album, "SOUR". On a personal level, the album has impacted my life in a variety of ways. The business card is mostly based off of her album cover. It seems to be a trend that I find my favorite musical artists and their work to have a rather large impact over my work in this class. Moving onto the process of using Indesign, it was definitely a little difficult at first, especially trying to space out each number and letter. In comparison to other Adobe platforms, I wouldn't say it was interesting because tools from Illustrator were also incorporated into the platform as well. Overall, I am pretty proud of how this came out, and if you're a fan of Olivia Rodrigo you would understand the general concept of the business card. In my next business card, I put together my hometown (Long Island, NY) and a candy store and made it i...
Read more