This piece was created with HDML5 canvas on dreamweaver. Although this final piece did not take me overall ten hours to complete, maybe around 5, I definitely worked on this assignment for ten hours or more. I was STRUGGLING with dreamweaver. Being a physical artist (@taylorstrippyart on instagram) made this idea of coding to create especially hard for me. I was trying to think of the piece as art while also trying to solve a puzzle that could mess up the entire piece. It was a nightmare, and I didn't exactly end up liking my final project very much. However, it was when I showed my art to the class, and especially to my roommate, that I was extremely excited and proud of this accomplishment, because I saw this silly piece bring the same amount of joy and excitement into life that my physical art does. I was not only thrilled to be learning a new form of art, but excited to see where it would take me.
I originally wanted to create something akin to the lock-ness monster or something of that nature, but as I continued to code and create this guy, his face was more of a kind creature than a scary monster, so that's what I went with. I think he really goes well with his surroundings and blends in not only with the color scheme, but with the simplicity and kindness of the piece.
My code for this project
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///background
var bkgdgrd = context.createLinearGradient(0,0,0,800);
bkgdgrd.addColorStop(0,"rgba(0, 204, 255,1)");
bkgdgrd.addColorStop(.15, "rgba(59, 209, 151, 1)");
bkgdgrd.addColorStop(.50,"rgba(210,180,140, 1)");
bkgdgrd.addColorStop(.75,"rgba(210,180,140,1)");
bkgdgrd.addColorStop(1, "rgba(255,255,255,1)");
//Ocean
context.beginPath();
context.rect(0,0,800,600);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();
var quad = context.createLinearGradient(200,500,400,400);
quad.addColorStop(0, "rgb(102, 204, 255)");
quad.addColorStop(1, "rgb(0, 204, 255)");
context.beginPath();
context.moveTo(0, 375);
context.quadraticCurveTo(108, 350, 220, 375);
context.quadraticCurveTo(280, 400, 400, 375);
context.quadraticCurveTo(568, 350, 700, 375);
context.quadraticCurveTo(808, 400, 820, 375);
context.lineTo(805,600);
context.lineTo(0,600);
context.lineTo(0,375);
context.closePath();
context.fillStyle = quad;
context.fill();
var quad = context.createLinearGradient(0,100,240,800);
quad.addColorStop(0, "red");
quad.addColorStop(1, "pink");
context.beginPath();
context.moveTo(135,400);
context.quadraticCurveTo(130,370,120,400); //top fin
context.quadraticCurveTo(85,390,115,408); //left fin
context.quadraticCurveTo(95,435,125,415); //bottom left fin
context.quadraticCurveTo(145,435,140,410); //bottom right fin
context.quadraticCurveTo(155,388,135,400); //top right fin
context.closePath();
context.fillStyle = quad;
context.fill();
var centerX = canvas.width / 1.2;
var centerY = canvas.height / 1.3;
var radius = 15;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();
//BUBBLE ONE HIGHLIGHT
var x = canvas.width / 1.2;
var y = canvas.height / 1.3;
var radius = 12;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//BUBBLE TWO
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 1.5;
var radius = 13;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();
//BUBBLE TWO HIGHLIGHT
var x = canvas.width / 1.1;
var y = canvas.height / 1.5;
var radius = 10;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
var centerX = canvas.width / 1.15;
var centerY = canvas.height / 1.6;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();
//BUBBLE THREE HIGHLIGHT
var x = canvas.width / 1.15;
var y = canvas.height / 1.6;
var radius = 7;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//botom arc
var centerX = canvas.width / 2;
var centerY = canvas.height / 1.85;
var radius = 65;
var startangle = 0;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 3;
context.fillStyle = 'rgb(36, 255, 178)';
context.strokeStyle = 'rgb(0, 207, 134)';
context.fill();
context.stroke();
//alien body
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2.1;
var radius = 65;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(36, 255, 178)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 207, 134)';
context.stroke();
//alien head
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2.9;
var radius = 45;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(36, 255, 178)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 207, 134)';
context.stroke();
//mouth
context.beginPath();
context.arc(400, 215, 20, 0, Math.PI, false);
context.closePath();
context.lineWidth = 3;
context.fillStyle = 'rgb(26, 196, 176)';
context.fill();
context.strokeStyle = 'rgb(0, 207, 134)';
context.stroke();
//nose
context.beginPath();
context.rect(398, 202, 3, 3);
context.fillStyle = 'rgb(0, 207, 134)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'rgb(0, 207, 134)';
context.stroke();
//left eye
context.beginPath();
context.arc(385, 190, 10, 0, Math.PI, true);
context.closePath();
context.lineWidth = 3;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'rgb(0, 207, 134)';
context.stroke();
//right eye
context.beginPath();
context.arc(413, 190, 10, 0, Math.PI, true);
context.closePath();
context.lineWidth = 3;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'rgb(0, 207, 134)';
context.stroke();
//right pupil
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.94;
var centerY = canvas.height / 3.24;
var radius = 1;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
//left pupil
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.08;
var centerY = canvas.height / 3.24;
var radius = 1;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment