Skip to main content

Canvas Project


   

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: 


*Sketch:
*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

Popular posts from this blog

Portfolio

      The final project was to make a portfolio showcasing all the projects I made during the semester. I made this portfolio using InDesign. I had initially sketched a completely different cover, but as I began working I came up with a new cover idea. The idea for the cover was inspired by the Creation of Adam by Michelangelo.  The painting of the Creation of Adam depicts an image of God stretching out his finger to give Adam a spark of life. However, in my version, I am reaching out to touch the mouse I used to make the projects this semester. I made the image using Illustrator. I then added a cloudy background to match the heavenly scene within the original artwork.      The next two pages welcome and introduce me to the reader. I used the colors within the portrait of myself to color the font on the welcome page and the two squares on the corners of my portrait. The index pages utilize the cloudy sky background and layout the sections according to the Adobe software I used.  The co
1 comment
Read more

Somewhere

     The basic idea of this project was to photoshop yourself into a tv or movie scene. I decided to insert myself with the female cast of the tv show Euphoria. This is one of my favorite shows from last year because the characters are so complex and realistic. I think it's quite hard to capture teenage characters, but this show does a good job of accomplishing that. Therefore, I took a picture of myself in a red dress and added myself to the bottom right corner.      The first thing I did was mask myself out and position myself so that my elbow was leaning on the table. I then added a few adjustment layers so that I blended better into the picture. I also put a glow filter on myself to match the bright highlights found on the other people. I then added horns so that I could look like I was wearing a devil costume. I tried to blend the horns by stamping my skin around the edge of where the horn meets my skin. I then added my reflection on the table by creating a duplicate of my mas
3 comments
Read more

BW to Color

Square Analogous Complementary                      I created these images using the polygonal lasso tool and masking on Photoshop. The basic idea of the project was to turn a black and white image of yourself into a colorized version. The three color themes I chose are Analogous, Complementary, and Square. The technique that made these images possible was selecting different parts of the b&w image using the lasso tool and creating a new layer with a layer mask. After creating the layer mask you can create a new layer and color the area using the colors from your color palette.      I chose the warm-toned analogous color palette because my original photo was mostly warm-toned. Therefore, I wanted to see if I could incorporate that into the image but make it more stylistic. I then decided I wanted more contrast for my next one so I chose a complementary color palette. The pink and green really stood out from each other and made my image pop. The last palette was made using square co
Post a Comment
Read more