Skip to main content

Final Canvas Project


The UT Chaos: Emma Lynch 


ARTIST STATEMENT:

         My final canvas project is a piece that encompasses different aspects of coding as well as my school logo compiled into one composition. I based my work around The University of Tampa symbol and used an overall color scheme that represented my school's colors while branching out into pinks and oranges. As my school colors are black and red, often incorporating white, I attempted to create a piece that reflected that theme. The black and white gradient background poses as a basis for the pop of color of the other elements. I strayed from my school's colors by including different yet visually appealing flowers to tie the piece together yet create a successful overall composition. Using techniques and styles such as these help to support the main idea of the piece to create a fluid composition.
        The piece I have created is influenced by the countless canvas techniques we have learned including bezier and quadratic curves, lines, circles, gradients, RGB colors, and more. My aim was to use the different techniques to create a visually appealing fluid composition, hence my use of a specific color scheme. While searching for inspiration for my final project, I saw works that were abstract including lines and circles, animals, beach compositions, but there weren't many similar to what I was aiming to do. I wanted my piece to show how different aspects of coding in Dreamweaver can work together simultaneously to represent one final image. It is important to recognize the symmetry at the top of the image with the logo and the two flowers, and the color consistency along with the gradient. Although this is where one's eye might be initially drawn, it is also important to focus on the technique of the layered squares and block color semicircle to gain the full effect of the composition as a whole.
        Overall, with my final piece I aim to intrigue viewers visually. I want to convey a sense of chaos yet unity in creating a successful composition on the basis of The University of Tampa logo. I want the viewers of my art to realize how a piece can convey separate messages while coming together as one through a common theme such as the color scheme. In viewing my work, I hope one can grasp the different techniques used to display a collective entity of all that canvas entails through the use of lines, shapes, gradients, curves, and more.

Hours Worked: 7

 MY CODE:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//background grd

context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
var grd = context.createLinearGradient(200, 50, canvas.width, canvas.height);
      // light green
      grd.addColorStop(0, '#000000'); 
      // dark green
      grd.addColorStop(1, '#FFFFFF');
      context.fillStyle = grd;
      context.fill();
var x = 0;
var y = 400;
var controlX = 900;
var controlY = 900;
var x1 = 700;
var y1 = 10;
var controlX1 = 700;
var controlY1 = 400;
var x2 = 0;
var y2 = 900;


    //background flower
    var flower = context.createLinearGradient(0,100,200,400);
    flower.addColorStop(0,"rgba(230,0,0,1)");
    flower.addColorStop(.25,"rgba(255,245,135,1)");
    flower.addColorStop(1,"rgba(255,245,135,1)");
        context.beginPath();
    context.moveTo(150,100);
    context.bezierCurveTo(-100,-200,-100,100,140,110);
    context.bezierCurveTo(-100,70,-50,300,145,115);
    context.bezierCurveTo(40,180,80,500,170,115);
    context.bezierCurveTo(300,380,330,150,170,100);
    context.bezierCurveTo(330,-50,150,-100,150,100);
    context.closePath();
    context.fillStyle=flower;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //Background flower 2
    var flower2 = context.createLinearGradient(650,500,700,700);
    flower2.addColorStop(0,"rgba(255,0,0,1)");
    flower2.addColorStop(.25,"rgba(200,130,0,1)");
    flower2.addColorStop(1,"rgba(201,88,19,1)");
var flower3 = context.createLinearGradient(250,100,500,100);
    flower3.addColorStop(0,"rgba(255,0,0,1)");
    flower3.addColorStop(.25,"rgba(255,245,135,1)");
    flower3.addColorStop(1,"rgba(237,106,62,1)");
 
 
    context.beginPath();
    context.moveTo(550,100);
    context.bezierCurveTo(300,-200,300,100,540,110);
    context.bezierCurveTo(300,70,350,300,545,115);
    context.bezierCurveTo(440,180,430,500,560,130);
    context.bezierCurveTo(640,400,690,150,570,115);
    context.bezierCurveTo(810,175,770,0,565,100);
    context.bezierCurveTo(730,-150,550,-200,550,100);
    context.closePath();
    context.fillStyle=flower3;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();

context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255, 229, 5204)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,210,220)";
context.stroke();

// 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;

// arcks creating circle with alpha channel for color
context.beginPath();
context.arc(50,380,240,0*Math.PI, 0.2857142857*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(255,0,0,1)"
context.stroke();

context.beginPath();
context.arc(50,380,240,0.2857142857*Math.PI, 0.5714285714*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(255,127,0,1)"
context.stroke();

context.beginPath();
context.arc(50,380,240,0.5714285714*Math.PI, 0.8571428571*Math.PI,false);
context.lineWidth=30
context.strokeStyle="rgba(255,255,0,1)"
context.stroke();

context.beginPath();
context.arc(50,380,240,0.8571428571*Math.PI, 1.142857143*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(0,255,0,1)"
context.stroke();

context.beginPath();
context.arc(50,380,240,1.142857143*Math.PI, 1.428571428*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(0,0,255,1)"
context.stroke();

context.beginPath();
context.arc(50,380,240,1.428571428*Math.PI, 1.714285714*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(245,173,66,1)"
context.stroke();

context.beginPath();
context.arc(50,380,240,1.714285714*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(252,209,255,1)"
context.stroke();
// DRAW THE CANVAS2

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

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


for (var x=10; 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();
}
 // U
  context.beginPath(100, 100);
  context.moveTo(200,50);
  context.lineTo(300,50);
  context.lineTo(300,67);
  context.lineTo(275,67);
  context.quadraticCurveTo(270,67,275,100);
  context.lineTo(275,175);
  context.quadraticCurveTo(270,230,300,225)
  context.quadraticCurveTo(360,230,360,215)
  context.lineTo(360,100);
  context.quadraticCurveTo(365,60,325,67)
  context.lineTo(325,50);
  context.lineTo(425,50);
  context.lineTo(425,67);
  context.quadraticCurveTo(400,67,400,100);
  context.lineTo(400,200);
  context.bezierCurveTo(390,275,260,275,235,200);
  context.lineTo(235,67);
  context.lineTo(200,67);
  context.lineTo(200,50);
  context.fillStyle = "rgb(227,0,11)"
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = "rgb(255,255,255)"
  context.stroke();
  context.closePath(300.300);

//// T
 context.beginPath();
 context.moveTo(275,275);
 context.lineTo(385,275);
 context.quadraticCurveTo(360,260,342.5,200);
 context.lineTo(342.5,150);
 context.quadraticCurveTo(335,115,360,122);
 context.lineTo(360,100);
 context.lineTo(225,100);
 context.bezierCurveTo(150,90,175,150,207,150);
 context.quadraticCurveTo(200,110,275,125);
 context.lineTo(292.5,125);
 context.quadraticCurveTo(312,115,292.5,200);
 context.quadraticCurveTo(286,270,275,275);
 context.fill();
 context.stroke();
 context.closePath();


  // BORDER + BKGD
/*context2.beginPath();

context2.rect(0,0,canvas.width,canvas.height);
context2.strokeStyle = "green";
context2.lineWidth = 10;
context2.stroke();

context2.closePath();
*/
// SMALLER SQUARE

for (var x=-10; x<canvas.width/2; x+=30) {

context2.beginPath();

context2.rect(x,x,x*2,x*2);
context2.strokeStyle = "red";
context2.lineWidth = x/50;
context2.stroke();

context2.closePath();

}


var mx = 15;
var inc = 50;

for (var i=0; i<mx; i+=inc) {
context.save();
context.translate(canvas.width/2,canvas.height/2);
//context.translate(i,i);
context.rotate(Math.PI*2 *i/mx);
context.drawImage(canvas2,0,0);
context.restore();
}
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};


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

Comments

Post a Comment

Popular posts from this blog

Three Favorite Photoshop CC Tutorials

3 RELEVANT PHOTOSHOP TUTORIALS 1) Get to know photoshop: https://helpx.adobe.com/photoshop/how-to/ps-basics-fundamentals.html?playlist=/services/playlist.helpx/products:SG_PHOTOSHOP_1_1/learn-path:get-started/set-header:ccx-designer/playlist:ccl-get-started-1/en_us.json&ref=helpx.adobe.com 2) How to use the clone tool: https://helpx.adobe.com/photoshop/how-to/clone-stamp-remove-object.html?playlist=/services/playlist.helpx/products:SG_PHOTOSHOP_1_1/learn-path:key-techniques/playlist:topic/set-header:remove-objects-from-photos/en_us.json&ref=helpx.adobe.com 3) Use layer masks to combine images: https://helpx.adobe.com/photoshop/how-to/combine-image-layer-mask.html?playlist=/services/playlist.helpx/products:SG_PHOTOSHOP_1_1/learn-path:key-techniques/set-header:layer-masking-projects/playlist:topic/en_us.json&ref=helpx.adobe.com
Post a Comment
Read more

FINAL PORTFOLIO

FMX210 FINAL PORTFOLIO ARTIST STATEMENT:         FMX210 has been a complex yet rewarding class over this past fall semester. This course has taught me the logistics of countless Adobe programs which have bettered my digital media skills. Attached is my portfolio which includes each final project from each program we worked with. My portfolio is themed as red and black with the font Mercurius MT std bold to better the overall composition. Each page is a different project and is done in chronological order from the first unit through the last. I aimed to use InDesign to successfully create a visually appealing portfolio while displaying each of my projects on the consecutive pages, along with a table of contents and an about me page.          My portfolio is crafted in such a way that is visually appealing through the use of color choices, creative fonts, and a simple approach to highlight each project. The theme I chose to create wa...
Post a Comment
Read more

Second Homework Heart

MY CODE:  <!DOCTYPE HTML> <html> <head> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); ////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ //Heart //Bezier Curve Variables var Ax = 375; var Ay = 200; var Bx = 375; var By = 500; var control1x = 170; var control1y = -80; var control2x = 100; var control2y = 350; var control3x = 710; var control3y = 350; var control4x = 570; var control4y = -80;         context.beginPath();         context.moveTo(Ax, Ay);         context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);         context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);         context.lineWidth = 10;         // line color         contex...
Post a Comment
Read more