Sunday, September 29, 2019

First Illustrator Project


Artist Statement:


This project was really cool and challenged me to do something different. The prompt for this project was to draw a calligram on adobe illustrator, which is an application that I have not used before. I decided to make an elephant as the subject for this project because I could not use an elephant in my other project and it's one of my favorite animals. I was super confused about what to draw for this project, because I tend to overthink things but I'm glad that I drew the elephant.

I had no idea if I was going to fill the elephant with words or if I would put the words on the line path. It ended up looking way better when it was put on the line path, so I decided to go with that. The reason I picked friendship quotes to outline the elephant was because elephants have a wonderful memory and can remember humans they once knew decades ago. Ever since I learned that as a child I have thought it was really sweet and just associate elephants with friendship. Overall, I'm really happy at how this drawing turned out and it's cool to see my skills develop.
 Updated version
Posted by at No comments:

Tuesday, September 17, 2019

HTML5 CANVAS PROJECT

7.5 hours
Concept Statement:
My initial thought when coming up with ideas for this project was to create an elephant. The piece would feature a simple art deco inspired background with neutral colors. However, as I began the project I started with the background and just kept adding more and more to the design. When it became clear to me that the design of rectangles would be the focus, I thought of ways to incorporate the elephant into the project. But somewhere along the line I made the decision that adding the elephant would only take away from this piece.

In this project I used a lot of repetition, which was inspired from the art deco style.
The shapes I used to create my project were rectangles, triangles, circles, quadratic curves, and bezier curves. Think the use of bright colors against the dark background make the design pop and look as if it's glowing.

This piece is successful because I was able to use what I learned in class and apply it in this project. And even though my project looks nothing like what I envisioned, I'm really happy with the end product. After I got to a certain point I was afraid to add more to the design, because the piece is very busy and I didn't want it to be extremely overwhelming.

Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

 /////Background
///Background
var background = context.createRadialGradient(400,300,5,400,300,500);
background.addColorStop(0,"rgb(33, 52, 128)");
background.addColorStop(0.05,"rgb(34, 40, 64)");
background.addColorStop(0.1,"rgb(33, 52, 128)");
background.addColorStop(0.15,"rgb(34, 40, 64)");
background.addColorStop(0.2,"rgb(33, 52, 128)");
background.addColorStop(0.25,"rgb(34, 40, 64)");
background.addColorStop(0.3,"rgb(33, 52, 128)");
background.addColorStop(0.35,"rgb(34, 40, 64)");
background.addColorStop(0.4,"rgb(33, 52, 128)");
background.addColorStop(0.45,"rgb(34, 40, 64)");
background.addColorStop(0.5,"rgb(33, 52, 128)");
background.addColorStop(0.55,"rgb(34, 40, 64)");
background.addColorStop(0.6,"rgb(33, 52, 128)");
background.addColorStop(0.65,"rgb(34, 40, 64)");
background.addColorStop(0.7,"rgb(33, 52, 128)");
background.addColorStop(0.75,"rgb(34, 40, 64)");
background.addColorStop(0.8,"rgb(33, 52, 128)");
background.addColorStop(0.85,"rgb(34, 40, 64)");
background.addColorStop(0.9,"rgb(33, 52, 128)");
background.addColorStop(0.95,"rgb(34, 40, 64)");
background.addColorStop(1,"rgb(33, 52, 128)");
 context.beginPath();
 context.rect(0,0, canvas.width, canvas.height);
 context.fillStyle = background;
 context.fill();
 context.closePath();

 /////Triangle left

var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");

// the triangle
context.beginPath();
context.moveTo(15, 25);
context.lineTo(15, 575);
context.lineTo(380, 300);
context.closePath();

// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();

// the fill color
context.fillStyle = "black";
context.fill();

/////Triangle right

var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");

// the triangle
context.beginPath();
context.moveTo(785, 25);
context.lineTo(785, 575);
context.lineTo(420, 300);
context.closePath();

// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();

// the fill color
context.fillStyle = "black";
context.fill();
/////Triangle top

var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");

// the triangle
context.beginPath();
context.moveTo(50, 20);
context.lineTo(750, 20);
context.lineTo(400, 280);
context.closePath();

// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();

// the fill color
context.fillStyle = "black";
context.fill();
/////Triangle bottom

var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");

// the triangle
context.beginPath();
context.moveTo(50, 580);
context.lineTo(750, 580);
context.lineTo(400, 320);
context.closePath();

// the outline
context.lineWidth = 7;
context.strokeStyle = 'white';
context.stroke();

// the fill color
context.fillStyle = "black";
context.fill();
/////Rectangles

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

 //1st rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "magenta";
ctx.rect(5, 5, 790, 590); 
ctx.stroke();

 //2nd rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "silver";
ctx.rect(30, 30, 740, 540);
ctx.stroke();

 //3rd rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "aqua";
ctx.rect(55, 55, 690, 490);
ctx.stroke();
//4th rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "magenta";
ctx.rect(80, 80, 640, 440); 
ctx.stroke();

 //5th rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "silver";
ctx.rect(105, 105, 590, 390);
ctx.stroke();

 //6th rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "aqua";
ctx.rect(130, 130, 540, 340);
ctx.stroke();
// 7th rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "magenta";
ctx.rect(155, 155, 490, 290); 
ctx.stroke();

 //8th rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "silver";
ctx.rect(180, 180, 440, 240);
ctx.stroke();

 //9th rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "aqua";
ctx.fillRect(205,205,390,190)
ctx.rect(205, 205, 390, 190);
ctx.stroke();

 ///top bezier curve 1

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(210, 212);
ctx.bezierCurveTo(210, 200, 580, 400, 590, 210);
ctx.stroke();

 ///top bezier curve 2

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(245, 212);
ctx.bezierCurveTo(240, 200, 580, 380, 585, 210);
ctx.stroke();

 ///top bezier curve 3

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(280, 212);
ctx.bezierCurveTo(270, 200, 580, 360, 580, 210);
ctx.stroke();

 ///top bezier curve 4

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(315, 212);
ctx.bezierCurveTo(300, 200, 580, 340, 575, 210);
ctx.stroke();
///bottom bezier curve 1

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(210, 390);
ctx.bezierCurveTo(250, 290, 550, 290, 590, 390);
ctx.stroke();

 ///bottom bezier curve 2

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(215, 390);
ctx.bezierCurveTo(270, 290, 540, 310, 570, 390);
ctx.stroke();

 ///bottom bezier curve 3

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "violet";
ctx.moveTo(220, 390);
ctx.bezierCurveTo(290, 290, 530, 330, 550, 390);
ctx.stroke();

 ///bottom bezier curve 4

 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "magenta";
ctx.moveTo(225, 390);
ctx.bezierCurveTo(310, 290, 520, 350, 530, 390);
ctx.stroke();

/////Quadratic curve 1
// starting point coordinates
var x = 225;
var y = 250;

 // control point coordinates ( magnet )
var cpointX = canvas.width / 2 ;
var cpointY = canvas.height / 2 +10;

 // ending point coordinates
var x1 = 225;
var y1 = 320;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

 context.lineWidth = 3;
context.strokeStyle = "silver";
context.stroke();
/////Quadratic curve 2
// starting point coordinates
var x = 225;
var y = 260;

 // control point coordinates ( magnet )
var cpointX = canvas.width / 1-420 ;
var cpointY = canvas.height / 2+10 ;

 // ending point coordinates
var x1 = 225;
var y1 = 310;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

 context.lineWidth = 3;
context.strokeStyle = "aqua";
context.stroke();

//////Quadratic curve 3
// starting point coordinates
var x = 445;
var y = 305;

 // control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 285;

 // ending point coordinates
var x1 = 580;
var y1 = 275;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

 context.lineWidth = 2.5;
context.strokeStyle = "aqua";
context.stroke();
//////Quadratic curve 4
// starting point coordinates
var x = 445;
var y = 305;

 // control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 280;

 // ending point coordinates
var x1 = 580;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

 context.lineWidth = 2.5;
context.strokeStyle = "aqua";
context.stroke();
//////Quadratic curve 5
// starting point coordinates
var x = 520;
var y = 312;

 // control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 280;

 // ending point coordinates
var x1 = 580;
var y1 = 335;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

 context.lineWidth = 2;
context.strokeStyle = "silver";
context.stroke();

 //////Quadratic curve 6
// starting point coordinates
var x = 520;
var y = 312;

 // control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 230;
var cpointY = canvas.height / 1 - 290;

 // ending point coordinates
var x1 = 580;
var y1 = 295;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

 context.lineWidth = 2.5;
context.strokeStyle = "silver";
context.stroke();

 ///////Circle 1

         var centerX = canvas.width / 2.4;
        var centerY = canvas.height / 2.03;
        var radius = 6;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "violet");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();

 ///////Circle 2

         var centerX = canvas.width / 2.25;
        var centerY = canvas.height / 2.02;
        var radius = 5;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "magenta");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();
///////Circle 3

         var centerX = canvas.width / 2.13;
        var centerY = canvas.height / 2.015;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "purple");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();
///////Circle 4

         var centerX = canvas.width / 2.03;
        var centerY = canvas.height / 2.008;
        var radius = 3;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "violet");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();

 ///////Circle 5

         var centerX = canvas.width / 1.94;
        var centerY = canvas.height / 1.995;
        var radius = 2;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "magenta");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();

 ///////Circle 6

         var centerX = canvas.width / 1.871;
        var centerY = canvas.height / 1.985;
        var radius = 1.5;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "purple");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();

 ///////Circle 7

         var centerX = canvas.width / 1.39;
        var centerY = canvas.height / 1.905;
        var radius = 8;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "aqua");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();
///////Circle 8

         var centerX = canvas.width / 3.49;
        var centerY = canvas.height / 2.1;
        var radius = 15;
        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, 20, centerX, centerY, 45);
 grd.addColorStop(1, "rgb(0,0,0)");
 grd.addColorStop(0, "silver");
 context.fillStyle = grd;  
 context.fill();
        
context.lineWidth = .5;
        context.strokeStyle = "violet";
        context.stroke();







////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

 };
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>

</html>

Posted by at No comments:

Tuesday, September 10, 2019

pretty heart


Posted by at No comments:

Thursday, September 5, 2019

links to html5 canvas tutorials

https://www.html5canvastutorials.com/advanced/html5-canvas-blooming-flowers-effect/

https://www.html5canvastutorials.com/tutorials/html5-canvas-exploding-dots/

https://www.html5canvastutorials.com/tutorials/html5-canvas-circles/
Posted by at No comments:

W, LINES, SQUARE, AND RECTANGLE


Posted by at No comments:
Subscribe to: Posts (Atom)