Saturday, September 28, 2019

Calligram


This calligram shows the well-known quote "reach for the stars." The hand says "reach for," and the stars writing says stars. My inspiration for this calligram came from hearing this quote from my mother. This quote is infinitely meaningful to me, considering that it reminds me of my mother and to try to be the best version of myself continuously. I have a tattoo of stars from this. My vision for this piece was executed of what people think about when they see it. The colors are vital to the piece because I wanted to depict it at night (dark) and then have the stars be the brightest yellow so they can be the first thing you look at when you see it.
Posted by at No comments:

Tuesday, September 24, 2019

Three links for Illustrator

https://www.youtube.com/watch?v=Tw2qUdfvbEQ

https://www.youtube.com/watch?v=RbbQl2sU-ag

https://www.youtube.com/watch?v=tXpnKlUMZQA
Posted by at No comments:

Monday, September 16, 2019

Canvas Project

















This project depicts an Alien who's spaceship is now made into a car type mobile. There are flowers and hearts and a little tiny palm tree in the background. These represent the happiness of the Alien while floating around in space. There is a little gradient background to show that the Alien is moving forward and away more from that background. I took codes from any different places and was inspired by the bright colors that each code was allowed to create. It took me about 10 hours to create i spent all weekend playing with the codes and colors, and where to put certain shapes and what sizes would match everything. The hardest part was the spaceship due to trying to make it smaller in the back than in the front. I think that this piece is successful because it got inspiration from many different places and it all came together as one to create a new art piece.


<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>

<body>

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

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
///background
    var bkgdgrd = context.createLinearGradient(0,0,0,800);
 
    bkgdgrd.addColorStop(0,"rgba(173,255,47,1)");
    bkgdgrd.addColorStop(.15, "rgba(244, 175, 216, 1)");
    bkgdgrd.addColorStop(.50,"rgba(201, 88, 19, 1)");
    bkgdgrd.addColorStop(.75,"rgba(204, 0, 255,1)");
    bkgdgrd.addColorStop(1, "rgba(255,255,255,1)");
     
// BACKGROUND
 
    context.beginPath();

         context.rect(0,0,400,400);
 
    context.closePath();
 
    context.fillStyle = bkgdgrd;
 
    context.fill();

context.beginPath();

         context.rect(0,0,600,200);
 
    context.closePath();
 
    context.fillStyle = bkgdgrd;
 
    context.fill();
//PALM TREE-right
 context.beginPath();
  context.moveTo(150,350);
  context.quadraticCurveTo(100,300,110,300);
  context.lineTo(115,300);
  context.quadraticCurveTo(100,305,112,350);
 context.closePath();
 context.strokeStyle= "rgba(245,203,111,1)";
 context.fillStyle= 'rgba(245,203,111,1)';
 context.fill();
 context.stroke();

//PALM TREE LEAVES-right
 context.beginPath();
  context.moveTo(112,300);
  context.quadraticCurveTo(90,290,80,290);
  context.quadraticCurveTo(90,270,112,300);

  context.quadraticCurveTo(110,280,95,270);
  context.quadraticCurveTo(125,270,112,300);

  context.quadraticCurveTo(120,276,140,280);
  context.quadraticCurveTo(120,295,112,300);

  context.quadraticCurveTo(140,280,150,300);
  context.quadraticCurveTo(140,300,112,300);
 context.closePath();
 context.strokeStyle='rgba(88,191,47,1)';
 context.fillStyle ='rgba(88,191,47,1)';
 context.fill();
 context.stroke();


 
 
    //background flower
    var flower = context.createLinearGradient(0,50,100,200);
    flower.addColorStop(0,"rgba(230,0,0,1)");
    flower.addColorStop(.25,"rgba(000,000,0,1)");
    flower.addColorStop(1,"rgba(000,000,000,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(0,255,255,1)");
    flower2.addColorStop(.25,"rgba(0,255,255,1)");
    flower2.addColorStop(1,"rgba(201,88,19,1)");
 
 
    context.beginPath();
    context.moveTo(550,500);
    context.bezierCurveTo(300,200,300,500,540,510);
    context.bezierCurveTo(300,470,350,700,545,515);
    context.bezierCurveTo(440,580,430,900,560,530);
    context.bezierCurveTo(640,800,690,550,570,515);
    context.bezierCurveTo(810,575,770,400,565,500);
    context.bezierCurveTo(730,350,550,200,550,500);
    context.closePath();
    context.fillStyle=flower2;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //flower 2.5
        var flower3 = context.createLinearGradient(650,100,500,100);
    flower3.addColorStop(0,"rgba(138,43,226,1)");
    flower3.addColorStop(.25,"rgba(255,130,0,1)");
    flower3.addColorStop(1,"rgba(201,88,0,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();
 //background flower 4

    context.beginPath();
    context.moveTo(687,435);
    context.bezierCurveTo(615,390,640,440,680,445);
    context.bezierCurveTo(610,440,635,475,685,452);
    context.bezierCurveTo(645,505,690,490,695,453);
    context.bezierCurveTo(700,510,740,500,700,450);
    context.bezierCurveTo(750,455,750,425, 700, 440);
    context.bezierCurveTo(700,390,685,390,687,435);
    context.closePath();
    context.fillStyle="rgba(204,0, 204,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 
    context.beginPath();
      context.arc(690, 445, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();

    //background flower 5
        context.beginPath();
    context.moveTo(687,135);
    context.bezierCurveTo(240,255,255,140,680,145);
    context.bezierCurveTo(610,140,635,175,685,152);
    context.bezierCurveTo(645,205,690,190,695,153);
    context.bezierCurveTo(700,210,740,200,700,150);
    context.bezierCurveTo(750,155,750,125, 700, 140);
    context.bezierCurveTo(700,90,685,90,687,135);
    context.closePath();
    context.fillStyle="rgba(255, 153, 115,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 
    context.beginPath();
      context.arc(690, 145, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
     /// background flower 3
        context.beginPath();
    context.moveTo(87,495);
    context.bezierCurveTo(15,450,40,500,80,505);
    context.bezierCurveTo(10,500,35,535,85,512);
    context.bezierCurveTo(45,565,90,550,95,513);
    context.bezierCurveTo(100,570,140,560,100,510);
    context.bezierCurveTo(150,515,150,485, 100, 500);
    context.bezierCurveTo(100,450,85,450,87,495);
    context.closePath();
    context.fillStyle="rgba(255, 0, 0,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 
    context.beginPath();
      context.arc(90, 505, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
 
//Heart

//Bezier Curve Variables



var Ax = 200;
var Ay = 100;
var Bx = 200;
var By = 200;
var control1x = 50;
var control1y = -50;
var control2x = 75;
var control2y = 100;
var control3x = 330;
var control3y = 100;
var control4x = 330;
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 = 30;
        // line color
        context.strokeStyle = 'rgb(75, 0, 130)';
        context.lineCap = 'round';
        context.stroke();
        context.fillStyle   = 'rgb(173, 216, 230)';
        context.fill();






//saucer of ship
  context.beginPath();

      var x = canvas.width / 2;
      var y = canvas.height / 1.2;
      var radius = 330;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;


      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 2;

context.bezierCurveTo( 175, 410, 05, 275, 85, 200 );

 context.strokeStyle = 'grey';
 context.lineCap = 'round'
    context.stroke();

context.fillStyle = 'rgb(192, 199, 204)'
context.fill();

context.closePath();

//glass of the ship
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 200;
      var startAngle = 1 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 5;

      // line color
      context.strokeStyle = 'lightblue';
      context.stroke();
context.moveTo(199, 300);
context.bezierCurveTo(190, 285, 350, 455, 600, 300);
context.strokeStyle = 'rgb(132, 202, 245)';
context.lineCap = 'round'
context.stroke();

context.fillStyle = 'rgb(212, 238, 255)'
context.fill();




//spaceship light 6

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.3;
      var centerY = canvas.height / 1.58;
      var radius = 24;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'grey';
      context.stroke();

//left int
 context.beginPath();
      context.moveTo(345, 130);
      context.lineTo(388, 180);
    context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//right int

  context.beginPath();
      context.moveTo(420, 165);
      context.lineTo(445, 135);
    context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//left alien int ball
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.3;
      var centerY = canvas.height / 4.5;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(36, 255, 178)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//right alien int ball
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.8;
      var centerY = canvas.height / 4.5;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(36, 255, 178)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//alien body
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2.1;
      var radius = 65;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(36, 255, 178)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();


//alien head
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2.9;
      var radius = 45;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgb(255, 255, 0)';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//mouth
  context.beginPath();
      context.arc(400, 215, 20, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 3;
      context.fillStyle = 'rgb(26, 196, 176)';
      context.fill();
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//nose
  context.beginPath();
      context.rect(398, 202, 3, 3);
      context.fillStyle = 'rgb(0, 207, 134)';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//left eye
 context.beginPath();
      context.arc(385, 190, 10, 0, Math.PI, true);
      context.closePath();
      context.lineWidth = 6;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();
//right eye
 context.beginPath();
      context.arc(413, 190, 10, 0, Math.PI, true);
      context.closePath();
      context.lineWidth = 6;
      context.fillStyle = 'white';
      context.fill();
      context.strokeStyle = 'rgb(0, 207, 134)';
      context.stroke();

//right pupil
    var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.94;
      var centerY = canvas.height / 3.24;
      var radius = 1;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = 'black';
      context.stroke();

//left pupil
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.08;
      var centerY = canvas.height / 3.24;
      var radius = 1;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = 'black';
      context.stroke();




//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>
</body>
</html>

i used both of these images as inspiration of the alien, and the flowers from the Scooby Doo photo. 




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