Gradient Project

Artist Statement:

I was inspired by my cat, Fury, so I choose to recreate a picture of him. I didn’t realize how hard it would be to try and recreate his fur pattern. I originally thought it would be a good “object” to recreate because of the natural gradients his fur has. This project took me about 3 hours to complete. It was very frustrating to try and recreate the lines to certain colors and even trying to find similar colors to his fur. I found that even using the eyedropper tool, the color wasn’t as vibrant or true as I would’ve liked it. I originally choose my cat with one eye since I thought he would be an easier choice. Although it turned out that the eye was the easiest part. I enjoyed making the ears, the gradient mesh seemed to work better in my favor for that part as well. I liked how using the gradient mesh tool looked on the ears, mouth, and nose. However, I would’ve liked to use a different tool may be the “traditional” gradient tool to better emulate the fur patterns and for a less stressful process. I believe it would’ve made the picture look smoother and more cohesive as well.

Calligram Project

It Get's Wild

Concept Statment:

It Gets Wild is inspired by the words of “Wild  Nights - Wild Nights!” by Emily Dickinson and by the famous painting The Storm on the Sea of Galilee by Rembrandt van Rijn and also The Starry Night by Vincent van Gogh.

Inspiration:

Artist Statment:

The inspiration for It Gets Wild came originally from the words of “Wild Nights - Wild Nights!” by Dickinson which is viewed as a “romantic and permissions” poem, I did not want to take the obvious appearance of doing a heart. When I read the poem I imagine that two lovers are on a boat from the content of words and phrases like, “port”, “compass”, “rowing”, and “Ah- the- sea!” The poem is titled “Wild Nights”, and a wild night at sea immediately makes me think of The Storm on the Sea of Galilee by van Rijn. It was from there that I decided to use the words of Dickinson in collaboration with attempting to recreate van Rijn’s painting but I wanted to involve an aspect that made it seem that the picture was "alive”. I attempted to recreate the technique Vincent van Gogh used in The Starry Night to have peace become vibrant and to life. It Gets Wild took about five hours to create. In my original design, I  wanted the background and certain aspects to resemble the style of van Gogh’s Starry Night. I wanted to emulate the brush stroke through words to create the appearance of multiple layered strokes. However, I was only able to achieve that in the section that represents light. When I attempted to manipulate that technique when building the ship, the overall product wasn’t as sharp, crisp, and precise looking as I would’ve liked it. For the ship, I decided to use a variety of large and small font sizes depending on the amount of detail I wanted in that specific area. It was important for me to involve and encourage some type of movement within the piece which I was able to do through the same of the sails and the wave. I want the piece to feel as lively as the original.

Illustrator CC Tutorials

1. https://www.youtube.com/watch?v=RKBRTRPT25c
2. https://www.youtube.com/watch?v=b7O-dp0L_Qo
3. https://www.youtube.com/watch?v=UqjZR_v37K8

Canvas Project

"On Your Journey"

Concept Statment:

 “On Your Journey” is a piece inspired by cubism. The idea of the piece is to be “simplistic” yet meaningful and complex. “On Your Journey” represent one’s feelings as they journey through the struggles, good times, and depths of life. There is a representation of both smooth and appealing lines and curved “jumbled” lines as they symbolize the easy and the chaotic areas of one’s life. All of the lines are representative of the different paths one will take during their life.

                               Inspiration: "Rhythm” by Sonia Delaunay

                              Planning:

 Artist Statment:

 “On Your Journey” was created using a combination of rectangles, circles, circle fragments, quadratic curves, and bezier curves. The inspiration for the piece came from a sample of cubism art called “Rhythm” by Sonia Delaunay. “Rhythm” is simplistic yet complex and that was my take away from the piece. I wanted to create something that was impactful in the simplest way. “On Your Journey” took me over five hours to complete. Surprising the most difficult part was the circles, as my original design consisted of mainly circle fragments, I faced challenges of still having my background show through or having different components be seen or be hidden using circle fragments. Another unexpected challenge was the quadratic curves, I had originally planned for them to be very rounded, very similar to circle fragments but I had difficulty achieving that, that is when I had the new idea of the quadratic curves crossing paths. The quadratic curves crossing paths represent life as it contains many obstacles and challenges causing people to at times to feel like that are in a ball of chaos. I am very pleased with the way that this piece turned out. I personally enjoy more “simpler” yet extremely powerful art. If it were up to me, I would have this painted and hung in my room. In addition to that, I love the style and emphasis that a paintbrush has on a canvas, I am glad that I got to somewhat recreate that effect through using curves/ “the swoosh” to emulate that weight that of a brushstroke might have. I choose to use cool earth tone colors as I personally find them very appealing and the colors help capture what I was trying to symbolize in the piece. The colors I choose are” dull” earthy tones, I choose them as they are to represent the reality of life since life is not all about the vibrancy of “glitz and glamour” but can be full of hardships and struggles and to overcome one must work hard and persevere.

Hours Worked: 5

Full Code:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start here

////// Bezier Curve background 

for (var yay=-1800; yay<canvas.height; yay+=8) {

var startX = 1500;

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(131,103,133)";

context.fillStyle = "rgb(227,197,89)";

context.fill();

context.lineWidth =   2;

context.stroke();

}

//rectangle left 1

var x=25;

var y=240;

var width = 275

var height= 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(42,123,181)';

// add linear gradient

        

       

        context.fill();

context.fill();

context.stroke();

 var rectWidth = 150

var rectHeight = 75

////rectangle left 2

var x1=112.5;

var y1=365;

var width = 187.5

var height= 60;

context.beginPath();

context.rect(x1, y1, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(42,123,181)';

// add linear gradient

        

       

        context.fill();

context.fill();

context.stroke();

 var rectWidth = 150

var rectHeight = 75

//rectangle left 3

var x=175;

var y=380;

var width = 100

var height= 30;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(42,123,181)';

// add linear gradient

        

       

        context.fill();

context.fill();

context.stroke();

 var rectWidth = 150

var rectHeight = 75

//rectangle right 1

var x=490;

var y=260;

var width = 210

var height= 220;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(145, 117,99)';

// add linear gradient

        

       

        context.fill();

context.fill();

context.stroke();

 var rectWidth = 150

var rectHeight = 75

//rectangle right 2

var x=510;

var y=300;

var width = 170

var height= 160;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(145, 117,99)';

// add linear gradient

        

       

        context.fill();

context.fill();

context.stroke();

 var rectWidth = 150

var rectHeight = 75

  

//rectangle right 3

var x=550;

var y=340;

var width = 100

var height= 60;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(145, 117,99)';

// add linear gradient

        

       

        context.fill();

context.fill();

context.stroke();

 var rectWidth = 150

var rectHeight = 75

//circle  top 1

var centerX = 275;

        var centerY = 180;

        var radius = 160;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

    

        context.lineWidth = 15;

    

     context.fillStyle = 'rgb(109,135,128)';    

context.fill();

//circle frag top 2

 var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 275;

var centerY = 180;

var radius = 125;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 12;

context.strokeStyle = 'rgb(99,126,145)';

context.stroke();

context.beginPath();

context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);

context.stroke();

//circle frag top 3

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 275;

var centerY = 180;

var radius = 68;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 23;

context.strokeStyle = 'rgb(217,186,50)';

context.stroke();

context.beginPath();

context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);

context.stroke();

//circle bottom 1

var centerX = 500;

        var centerY = 420;

        var radius = 125;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

    

        context.lineWidth = 15;

    

     context.fillStyle = 'rgb(176,124,91)';    

context.fill();

//circle  bottom 2

 var centerX = 500;

        var centerY = 420;

        var radius = 100;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

    

        context.lineWidth = 15;

    

     context.fillStyle = 'rgb(27,144,150)';    

context.fill();

//circle  bottom 3

 var centerX = 500;

        var centerY = 420;

        var radius = 50;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

    

        context.lineWidth = 5;

    

     context.strokeStyle = 'rgb(199,109,0)';    

context.stroke();

//middle circle 1

 var centerX = 400;

        var centerY = 320;

        var radius = 154;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, true);

    

        context.lineWidth = 15;

    

     context.fillStyle = 'rgb(99,63,41)';    

context.fill();

//quad line 1

// starting point coordinates

var x = 498;

var y = 202;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 770;

var cpointY = canvas.height / 1 - 230;

// ending point coordinates

var x1 = 462;

var y1 = 458;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 13;

context.strokeStyle = "rgb(110, 110, 110)";

context.stroke();

//swoosh back 1

var x = 271;

var y = 400;

var controlX = 500;

var controlY = 400;

var x1 = 535;

var y1 = 250;

var controlX1 = 450;

var controlY1 = 400;

var x2 = 249;

var y2 = 350;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(167,204,194,.75)';

context.fill();

///quad line 2 

  // starting point coordinates

var x = 314;

var y = 194;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 200;

var cpointY = canvas.height / 1 - 230;

// ending point coordinates

var x1 = 314;

var y1 = 448;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 4;

context.strokeStyle = "rgb(145,99,99)";

context.stroke();

///quad line 3

  // starting point coordinates

var x = 546;

var y = 275;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 752;

var cpointY = canvas.height / 1 - 425;

// ending point coordinates

var x1 = 514;

var y1 = 422;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 7;

context.strokeStyle = "rgb(168,157,50)";

context.stroke();

//swoosh back 2

var x = 310;

var y = 400;

var controlX = 150;

var controlY = 400;

var x1 = 450;

var y1 = 172;

var controlX1 = 200;

var controlY1 = 420;

var x2 = 320;

var y2 = 400;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgba(156,56,151,.5)';

context.fill();

///quad line 4

  // starting point coordinates

var x = 253;

var y = 275;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 45;

var cpointY = canvas.height / 1 - 270;

// ending point coordinates

var x1 = 260;

var y1 = 381;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 9;

context.strokeStyle = "rgb(131,117,99)";

context.stroke();

//walk text

var canvas = "walk";

context.beginPath();

context.font = 'bold 20px Gerogia';

context.fillStyle = "rgba(255,255,255,1)";

context.shadowColor = "rgba(110,25,25,1)";

context.shadowBlur = 15;

context.shadowOffsetX = 15;

context.shadowOffsetY = 10;

context.fill();

context.fillText(canvas, 125, 362);

context.closePath();

//by text

var canvas = "by";

context.beginPath();

context.font = 'bold 20px Gerogia';

context.fillStyle = "rgba(255,255,255,1)";

context.fillText(canvas, 365, 427);

context.closePath();

//faith text

var canvas = "faith";

context.beginPath();

context.font = 'bold 20px Gerogia';

context.fillStyle = "rgba(255,255,255,1)";

context.fillText(canvas, 624, 457);

context.closePath();

//credits

var canvas = "Leah Cordier, FMX 210, Spring 2019";

context.beginPath();

context.font = '10px Arial';

context.fillStyle = "rgba(0,0,0,1)";

context.fillText(canvas, 10, 597);

context.closePath();

     

////////////////////////////////////// end here

};

</script>

<link href="canvas.css" rel="stylesheet" type="text/css">

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>