My canvas experiment project depicts an asymmetric cubic queen drawn with triangles, rectangles, straight lines, bezier curves, quadratic curves, and other geometric shapes. I made the canvas size portrait to reduce the background area and make the subject the focal point. My piece is inspired by a cubic painting I found online that I used as the foundation while taking my own spin on it. The main theme of my work is the use of warm and cool toned colors. My theme was inspired by the artist Henri Matisse because I find his use of vibrant colors to be very intriguing and wanted to incorporate it into my work.
I colored the face of the queen with cool tones while making her chest area warm-toned. I did this to create contrast and vibrancy due to the complementary nature of the colors. I also used similar colors to create a linear gradient on the background that transitions from warm to cool tones and contrasts against the different colored sections of the queen. I also added a horizontal line to the background to represent the line at which a wall and floor meet, giving the piece a sense of depth. My favorite part of the background is how the yellow section of the gradient makes it seem as though there is a leak of light coming from underneath the wall. I made the hair of the queen black so that the canvas was not overwhelmed with color and then made the stroke of the outline white so that the shape/form was highlighted from the background. The asymmetry of the piece is seen in the different shapes and positions of the eyes, the one ear, and the general shape of the face.
I think what makes my piece successful is how I was able to use different lines and curves to create the many irregular shapes found in the piece and how I was able to create different values of color using the color wheel in Dreamweaver. I think my piece would have been very dull if I had only used one shade of a warm and cool color. The different shades of colors add variety and interest to the piece. My overall vision was to create a cubic inspired piece that played with complementary colors and I think I achieved that. I really enjoy cubism art, so I am happy I was able to create something in that style. I also enjoyed learning about coding, and I hope I can use my newly learned knowledge in the future.
Estimated work time: 10 hours
Inspiration:
*ignore the lines and dots on the sides I was marking things for refrence
Code:
<!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);
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="400" height="550"></canvas>
<div></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
//background
var mygrad = context.createLinearGradient (200,0,200,550);
mygrad.addColorStop (0, "#D00000");
mygrad.addColorStop (0.7, "#FF9826");
mygrad.addColorStop (0.7, "#FFFF58");
mygrad.addColorStop (0.8, "#33A62F");
mygrad.addColorStop (1, "#00009B");
context.rect (0,0,400,550);
context.fillStyle = mygrad;
context.fill();
context.strokeStyle = "black"
context.stroke();
//horizone
context.beginPath ();
context.moveTo (0,385);
context.lineTo (400,385);
context.lineWidth = 2;
context.strokeStyle = "black"
context.stroke();
//left side of the hair
context.beginPath ();
context.moveTo (70,90);
context.quadraticCurveTo (20,165,40,200);
context.quadraticCurveTo (20,225,40,250);
context.quadraticCurveTo (20,275,40,300);
context.quadraticCurveTo (20,325,40,350);
context.quadraticCurveTo (20,375,40,400);
context.quadraticCurveTo (20,425,50,450);
context.lineTo (145,380);
context.lineTo (230,380);
context.lineJoin = "round"
context.closePath ();
context.lineWidth = 5;
context.fillStyle = "rgba(0,0,0,1.00)"
context.fill();
context.strokeStyle = "white"
context.stroke();
// right side of the hair
context.beginPath ();
context.moveTo (327,90);
context.quadraticCurveTo (360,115,335,150);
context.quadraticCurveTo (360,180,335,210);
context.quadraticCurveTo (360,235,335,265);
context.quadraticCurveTo (360,290,335,320);
context.quadraticCurveTo (360,345,335,375);
context.quadraticCurveTo (360,400,335,440);
context.lineTo (230,380);
context.lineTo (230,90);
context.lineWidth = 5;
context.fillStyle = "rgba(0,0,0,1.00)"
context.fill();
context.strokeStyle = "white"
context.stroke();
// right side of face color
context.beginPath ();
context.moveTo (280,90);
context.bezierCurveTo (300,230,280,350,230,380);
context.lineTo (190,270);
context.lineTo (170,90);
context.closePath ();
context.fillStyle = "rgba(3,208,128,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
//lips
context.beginPath ();
context.moveTo (200,270);
context.lineTo (145,380);
context.lineTo (235,380);
context.lineTo (220,355);
context.lineTo (240,330);
context.lineTo (220,315);
context.lineTo (245,300);
context.lineJoin = "round"
context.closePath ();
context.lineWidth = 5;
context.fillStyle = "rgba(23,21,223,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
//left side of the neck
context.beginPath();
context.moveTo (120,260);
context.quadraticCurveTo (168,320,145,380);
//context.lineTo (160,320);
context.lineTo (200,270);
context.lineJoin = "round"
context.closePath ();
context.lineWidth = 5;
context.fillStyle = "rgba(53,163,79,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// triangle right of the nose
context.beginPath ();
context.moveTo (200,270);
context.lineTo (285,215);
context.lineTo (170,155);
context.lineJoin = "round"
context.closePath ();
context.lineWidth = 5;
context.fillStyle = "rgba(24,172,196,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// right eye
context.beginPath ();
context.rect (218,155,55,25);
context.closePath ();
context.fillStyle = "rgba(249,239,239,1.00)"
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black"
context.stroke();
// right eye iris
context.beginPath ();
context.rect (236,155,18,25);
context.closePath ();
context.fillStyle = "rgba(40,78,114,1.00)"
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black"
context.stroke();
//right pupil
context.beginPath ();
context.rect (243,162,5,10);
context.closePath ();
context.fillStyle = "rgba(0,0,0,1.00)"
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black"
context.stroke();
// ear outside
context.beginPath ();
context.moveTo (288,150);
context.bezierCurveTo (325,160,325,225,286,250);
context.fillStyle = "rgba(4,29,110,1.00)"
context.fill();
context.lineWidth = 6;
context.strokeStyle = "black"
context.stroke();
// inside of ear
context.beginPath ();
context.moveTo (285,170);
context.bezierCurveTo (305,160,305,225,285,230);
context.lineWidth = 6;
context.fillStyle = "rgba(143,212,227,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// right side of face outline
context.beginPath ();
context.moveTo (280,90);
context.bezierCurveTo (300,230,280,350,230,380);
context.lineWidth = 6;
context.strokeStyle = "black"
context.stroke();
//left side of face outline
context.beginPath ();
context.bezierCurveTo (148,270,10,250,60,90); // curve of cheek
context.lineTo (150,150);
context.lineWidth = 6;
context.fillStyle = "rgba(93,188,210,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// nose and forehead
context.beginPath ();
context.moveTo (282,115);
context.lineTo (190,115);
context.lineTo (200,270);
context.lineTo (145,270);
context.lineTo (150,150);
context.lineTo (60,90);
context.lineJoin = "round"
context.lineTo (278,90);
context.lineWidth = 5;
context.fillStyle = "rgba(0,47,132,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// left eye outline
context.beginPath ();
context.moveTo (110,115);
context.quadraticCurveTo (145,90,175,115);
context.quadraticCurveTo (150,140,110,115);
context.lineWidth = 4;
context.fillStyle = "rgba(249,239,239,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
//left eye iris
context.beginPath ();
context.arc (144,115,10,0,2*Math.PI,false);
context.lineWidth = 3;
context.fillStyle = "rgba(134,221,98,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
//left eye pupil
context.beginPath ();
context.arc (144,115,2,0,2*Math.PI,false);
context.lineWidth = 4;
context.strokeStyle = "black"
context.stroke();
//crown
context.beginPath ();
context.moveTo (60,90);
context.lineTo (327,90);
context.lineTo (327,25);
context.lineTo (300,50);
context.lineTo (250, 25);
context.lineTo (200, 50);
context.lineTo (150,25);
context.lineTo (100,50);
context.lineTo (60,25);
context.closePath ();
context.lineWidth = 6;
context.fillStyle = "rgba(22,51,93,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// crown line
context.beginPath ();
context.rect (60,65,267,12);
context.lineWidth = 4;
context.closePath();
context.fillStyle = "rgba(148,189,215,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// dark red shoulder
context.beginPath();
context.moveTo (260,378);
context.lineTo (339, 425);
context.lineJoin = "round"
context.lineTo (180,433);
context.closePath();
context.lineWidth = 6;
context.fillStyle = "rgba(166,2,3,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// trapezoid under the red triangle
context.beginPath();
context.moveTo (339, 425);
context.lineTo (450,560);
context.lineTo (320,560);
context.lineTo (219,427);
context.closePath ();
context.lineWidth = 6;
context.fillStyle = "rgba(216,153,7,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// peach triangle next to the red triangle
context.beginPath();
context.moveTo (219,429); // top of traingle
context.lineJoin = "round"
context.lineTo (219, 560); // left side of triangle
context.lineTo(320,560); // hypothanous of triangle
context.closePath();
context.lineWidth = 6;
context.fillStyle = "rgba(223,89,27,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// light yellow triangle
context.beginPath();
context.moveTo (180,433);
context.lineTo (260,378);
context.lineTo (115,378);
context.closePath();
context.lineWidth = 6;
context.fillStyle = "rgba(225,202,58,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// orangish shape next to semi-circle
context.beginPath();
context.moveTo (180,433);
context.lineTo (115,378);
context.bezierCurveTo (20,430,10,550,110,600); // curve of circle
context.closePath();
context.lineWidth = 7;
context.fillStyle = "rgba(219,112,12,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// light brown small triangle
context.beginPath();
context.moveTo (126,600); //begining of triangle
context.lineTo (215,600);
context.lineTo (125,511);
context.closePath();
context.lineWidth = 4;
context.fillStyle = "rgba(170,121,42,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// yellowish semi-circle
context.beginPath();
context.moveTo (218,427);
context.bezierCurveTo (150,425,50,525,218,600); // curve of circle
context.closePath();
context.lineWidth = 6;
context.fillStyle = "rgba(233,173,5,1.00)"
context.fill();
context.strokeStyle = "black"
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Redieat Abebe, Cubic Queen, FMX 210-1, FA 2020";
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