Canvas Project









For my project, I decided to create an eye with a heart as the pupil. The background is a gradient that matches the eye color, with lines and rays of various colors. This project took me about 4 hours. The most time consuming portion of the project was adding the individual eyelashes. At first, it was very hard to find the exact location of where the eyelashes needed to be, but by the first few eyelashes I became familiar with placing lines at exact points. Another time-consuming portion of this project was adding the heart pupil. I had to get the coordinates right to fit in the eyeball.

Overall, I learned a lot from this project. This was my first time using Dreamweaver and I am excited to learn more about the software and what I can create on it. This project was a good precursor to creating more complex designs and codes on the program.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

<style type="text/css">

body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(255,255,255,1);
}

body {
background-color: rgba(0,0,0,1);
}

#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1); }

</style>

</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');




//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE


/// background filled with BW vertical gradient

var grd = context.createLinearGradient(0, 0, 0, 350);
grd.addColorStop(0, "green");
grd.addColorStop(1, "white");


context.fillStyle = grd;
context.fillRect(0, 0, 800, 600);


///////REPEATING LINES
// this needs to be included with the repeat once in a document
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');

canvas2.width = canvas.width;
canvas2.height = canvas.height;

///////repeat

context2.beginPath();
context2.moveTo(canvas.width/3, canvas.height/3);
context2.lineTo(canvas.width*3/4, canvas.height*3/4);
///context2.rect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
context2.strokeStyle = "white";
context2.lineWidth = 2;
context2.stroke();
context2.closePath();




for (var x=0; x<canvas.width; x+=20) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(x/100);
context.drawImage(canvas2,-canvas.width/2, -canvas.height/2);
context.restore();
}



for (var x=0; x<canvas.width; x+=10) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*x/canvas.width);
//context.drawImage(canvas2,-canvas.width/2, -canvas.height/2);
// context.drawImage(canvas2,-canvas.width/4, -canvas.height/4);
context.drawImage(canvas2,0, 0);
context.restore();
}


//Simple lines

context.moveTo(240,240); // COORDINATES OF STARTING POINT
context.lineTo(200,190); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(186,275); // COORDINATES OF STARTING POINT
context.lineTo(135,225); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(305,210); // COORDINATES OF STARTING POINT
context.lineTo(275,165); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(400,210); // COORDINATES OF STARTING POINT
context.lineTo(399,150); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(490,220); // COORDINATES OF STARTING POINT
context.lineTo(540,180); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(600,285); // COORDINATES OF STARTING POINT
context.lineTo(655,227); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(551,250); // COORDINATES OF STARTING POINT
context.lineTo(600,210); // COORDS OF ENDING POINT 1
context.lineWidth = 8; // STROKE WIDTH
context.stroke(); // STROKE


 

 /////////////PUPIL
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;

var centerX = 400;
var centerY = 290;
var radius = 88;

var startX = 300;
var startY = 200;
var startRadius = 50;
var endX = 400;
var endY = 300;
var endRadius = 200;



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, 'rgb(0, 250, 255)');
grd.addColorStop(0.5, 'rgb(0, 90, 0)');
grd.addColorStop(1, 'rgb(95, 95, 90)');
context.fillStyle = grd;
context.fill();

/////////

//Heart

//Bezier Curve Variables



var Ax = 395;
var Ay = 280;
var Bx = 400;
var By = 350;
var control1x = 350;
var control1y = 190;
var control2x = 300;
var control2y = 300;
var control3x = 460;
var control3y = 300;
var control4x = 500;
var control4y = 190;

        context.beginPath();
        context.moveTo(Ax, Ay);
        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
        context.lineWidth = 3;
        // line color
        context.strokeStyle = 'rgb(0, 0, 0)';
        context.lineCap = 'round';
        context.stroke();
        context.fillStyle   = 'rgb(0, 0, 0)';
        context.fill();


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

// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 400;
var cpointY = canvas.height / 1 - 500;

// ending point coordinates
var x1 = 620;
var y1 = 300;


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

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

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

// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 400;
var cpointY = canvas.height / 1 - 150;

// ending point coordinates
var x1 = 620;
var y1 = 300;


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

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


 // rays green bottom left
for (var i=0; i<canvas.height; i+=30) {
var startX = -50;
var startY = i;
var endX = i;
var endY = 600;
var r = 2;
var g = 2;
var b = 2;
context.beginPath();
context.strokeStyle = "green";
context.lineCap = 'round'; // "butt" "square"
context.lineWidth = i/400;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
}
 
 
// repeat green lines or rays green bottom right
 
for (var i=400; i<canvas.height; i+=15) {
var startX = 800;
var startY = i;
var endX = i;
var endY = 600;
var r = 2;
var g = 2;
var b = 2;
context.beginPath();
context.strokeStyle = "black";
context.lineCap = 'round'; // "butt" "square"
context.lineWidth = i/400;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
} 


//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE




// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "Chris Young, FMX 210, spring 2020";
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "black";
context.fillText(credits, 10, 590);
context.closePath();

</script>
</body>
</html>



Comments

Post a Comment

Popular posts from this blog

"Somewhere" Project

Image
 For my project, I decided to place myself in the promotional poster for the film Parasite. This is one of my favorite movies because it has multiple layers and meanings, and it was my first choice for this project. I chose this poster specifically because it gives a brief teaser of the movie without spoiling the whole film. For this project, I took a picture of myself in front of a solid color wall, and used both the magic wand and the selection tool in Photoshop to create the illusion that I was actually in the poster. This project took me about 3 hours total and I am very proud of the result. 
Read more

Self-portrait poster

Image
This project took me about 5 hours to do. The majority of the time was spent tracing the original imagine and getting the curves and outline precise. Afterwards, I used the gradient mesh tool to color most of the shapes. I tried to use a lot of gradient colors to create a slightly 3d feel.  The text behind me is a quote from Doctor Seuss: "Be who you are and say what you feel because in the end those who matter don't mind and those who mind don't matter." This is an inspirational quote for me because it inspires me to share my opinions regardless of what others think. I enjoy using text as art and had a lot of fun with this project.
Read more

Autoscopy

Image
For my autoscopy project, I decided to use overlay scenes of paint, the ocean, and plants on my face.. Playing and experimenting with the numerous effects in Photoshop was very fun and I used layers to create the desired effect. I think that the various colors on top of a black and white image effect gives my photo a professional feel, and the different images of nature give it a calming feel. I look forward to experimenting with Photoshop more in the future. Autoscopy Original
Read more