Coding is definitely a difficult skill to learn and it takes patience and determination. Considering this was my first time creating an art piece using code, this project took a lot of time to complete. Originally, I planned on creating a cartoon character using code but I was unable to figure out how to complete that goal. Instead, I decided to create an abstract piece of art that allowed me to express my preferred artistic style. To be completely honest, I completed this project with the trial and error strategy and eventually all of the shapes morphed into a cohesive piece. After I placed the first three shapes on the grid I was able to better understand how to manipulate the shapes to fall where I wanted on the x and y axis.
Fluidity is what makes my piece the most successful. There is an elegance to the way the arcs flow together while there are other shapes surrounding them from all angles.
I spent a total of thirty- two hours on this piece. Most of my time went towards figuring out the placement of the shapes as mentioned before. Choosing the colors and theme also took me awhile to figure out because constantly had new ideas. I hope anyone who views this enjoys it as much as I do.
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this lineˇˇˇˇˇˇˇˇˇˇ
// gradient background
for (var yay=-1500; yay<canvas.height; yay+=7) {
var startX = 1000;
var startY = yay-2000;
var endX = canvas.width;
var endY = canvas.height;
var cpointX = yay+200;
var cpointY = -yay;
context.beginPath();
context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
//context.closePath();
context.strokeStyle = "rgb(238,69,36)";
context.fillStyle = "rgb(0,0,255)";
context.fill();
context.lineWidth = 2;
context.stroke();
}
/////BEZIER CURVE #1
for (var i=0; i<canvas.height; i+=5) {
var startX = 100; ////canvas.height/ 10;
var startY = 200;
// starting point coordinates
var endX = 700; ////canvas.width;
var endY = 250;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*.1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i+","+i/2+",125)";
context.stroke();
}
/////// BEZIER CURVE - 2
for (var i=0; i<canvas.height; i+=10) {
var startX = -3;
var startY = 600;
// starting point coordinates
var endX = -800;
var endY = -i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 375;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(223,127,71)";
context.stroke();
}
/////// BEZIER CURVE - 2
for (var i=0; i<canvas.height; i+=10) {
var startX = 6;
var startY = 950;
// starting point coordinates
var endX = 300;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 300;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(85,24,126)";
context.stroke();
}
/////// BEZIER CURVE 3
for (var i=0; i<canvas.height; i+=10) {
var startX = 3;
var startY = 200;
// starting point coordinates
var endX = 600;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 75;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(255,225,0)";
context.stroke();
}
// straight yellow lines in the center
for (var i=0; i<canvas.height; i+=35) {
var startX = -900;
var startY = i;
var endX = i;
var endY = 300;
var r = 2;
var g = 2;
var b = 2;
context.beginPath();
context.strokeStyle = "rgb(255,255,0)";
context.lineCap = 'round'; // "butt" "square"
context.lineWidth = i/400;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
}
// starting point coordinates
var startX = 70;
var startY = canvas.height/90;
// control point coordinates ( magnet )
var cpointX = canvas.width / 100;
var cpointY = canvas.height / 80 + 700;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(243,158,47)";
context.stroke();
//Biggest black dot on top
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 5;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 40, centerX, centerY, 80);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//middle black dot on top
var centerX = canvas.width / 2.5;
var centerY = canvas.height / 3;
var radius = 7;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 40, centerX, centerY, 80);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//smallest black dot on top
var centerX = canvas.width / 2.3;
var centerY = canvas.height / 2.3;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 40, centerX, centerY, 80);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//bottom center black dot
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 1.35;
var radius = 7;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 40, centerX, centerY, 80);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
// small black dot on the bottom
var centerX = canvas.width / 1.65;
var centerY = canvas.height / 1.45;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 40, centerX, centerY, 80);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//large black dot on bottom
var centerX = canvas.width / 1.40;
var centerY = canvas.height / 1.22;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 40, centerX, centerY, 80);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
