Wednesday, December 4, 2019

Final Blog Post

















As the semester comes to an end, we were asked to create a portfolio for our final project. After a semester of using the different Adobe systems, I thought that I’d have these amazing projects to show off. This semester was by far the most challenging semester that I’ve had thus far. Given I’m a senior, I’d expect nothing less. After working with Adobe I’ve recognized where my strengths and weaknesses are. I’m not the most creative person, I have a hard time expressing myself through design and color. I certainty can’t draw. Over the course we were asked to do a variety of projects that combined all of those things and I often got discouraged. I can look at a painting or poster and see why it’s good or bad, but creating an image is not one of my strengths. Maybe had this class been longer (maybe two semesters) and we were forced to dive deeper into the programs, then maybe I would’ve liked it more. I feel like I’ve learned the surface of what Adobe has to offer and the programs are something that I would like to learn more about as I grow and start my career after college. I’m proud of the work that I created, even if it’s not the best work I know at the end of the day that it’s the best I could do. 

at No comments:

Monday, December 2, 2019

Coding Assignment


This was by far the hardest project that we did. Learning how to use code so early on in the semester without prior knowledge of Adobe was a struggle. Once I got the hang out of using the X and Y coordinates, it ended up going smoother than I thought. I created an ocean scene because I love spending time at the ocean. I really liked the way the colors turned out and I could draw circles all day long. The most challenging part about this assignment was how time consuming it was, I spent about an hour on one starfish alone. Being a perfectionist it was frustrating when I couldn't get a point quite right. Overall, I'm happy with the way my final product turned out. Here is a sample of what my code ended up looking like!

 This is the code I used:

 UNDERWATER
<html>
<head>
<meta charset="UTF-8">
<title> Dream Big </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}

</style>
</head>

<body>

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

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

//DEEP SEA BACKGROUND
      context.beginPath();
      context.rect(0, 0, 600, 600);
      var grd = context.createLinearGradient(300, 0, 300, 500);
      grd.addColorStop(0, "rgb(156,205,210)"); 
      grd.addColorStop(.85, "rgb(18,75,100)");
   grd.addColorStop(1, "rgb(20,48,90)");

      context.fillStyle = grd;
      context.fill();

 //SAND

 var quad = context.createLinearGradient(100,100,400,600);
         
 quad.addColorStop(0, "rgb(210, 180, 140)");

 quad.addColorStop(1, "rgb(265, 230, 179)");

 context.beginPath();
 context.moveTo(0,448);
 context.quadraticCurveTo(15,444,65,445);
 context.quadraticCurveTo(67,420,97,420);
 context.quadraticCurveTo(125,380,155,420);
 context.quadraticCurveTo(205,425,209,452);
 context.quadraticCurveTo(225,469,450,455);
 context.quadraticCurveTo(530,440,800,455);
 context.lineTo(795,795);
 context.lineTo(0,600);
 context.lineTo(0,448);
 context.closePath();
 context.fillStyle = quad;
 context.fill();
 
//STARFISH ONE
      context.beginPath();
      context.moveTo(307, 360);
 
      context.quadraticCurveTo(300,300,330,360);
   context.quadraticCurveTo(385,352,339,378);
   context.quadraticCurveTo(385,435,320,390);
      context.quadraticCurveTo(230,425,295,370);
   context.quadraticCurveTo(230,335,307,360);

      var grd = context.createRadialGradient(307, 435, 20, 390, 50, 310);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(0,203,0)");

      context.fillStyle = grd;
      context.fill();

      context.lineWidth = 2.5;
      context.strokeStyle = "rgb(147,223,35)";
      context.stroke();
 
//STARFISH TWO
      context.beginPath();
      context.moveTo(207, 260);
 
      context.quadraticCurveTo(215,200,230,260);
   context.quadraticCurveTo(290,252,240,278);
   context.quadraticCurveTo(280,332,220,283);
      context.quadraticCurveTo(170,343,200,278);
   context.quadraticCurveTo(140,240,210,260);

      var grd = context.createRadialGradient(210, 100, 5, 190, 40, 100);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,159)");

      context.fillStyle = grd;
      context.fill();

      context.lineWidth = 2.5;
      context.strokeStyle = "rgb(247,123,35)";
      context.stroke();

//// TREE TRUNK
 context.beginPath();
 context.moveTo(30,550);
 context.lineTo(30,535);
 context.lineTo(38,535);
 context.lineTo(38,560);
 context.quadraticCurveTo(34,563,30,560);
 context.fillStyle = "rgb(79,42,2)"
 context.fill();
 context.closePath();

//// TREE
 context.beginPath();
 context.arc(36,510,25,0,Math.PI*2,true);
 context.fillStyle = "rgb(255,127,80)";
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(36,478,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(36,450,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

//// TREE TWO
 context.beginPath();
 context.arc(400,510,25,0,Math.PI*2,true);
 context.fillStyle = "rgb(0,127,0)";
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,478,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,450,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,545,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,570,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,590,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,430,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();


//// TREE THREE
 context.beginPath();
 context.arc(450,510,25,0,Math.PI*2,true);
 context.fillStyle = "rgb(0,207,0)";
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,478,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,450,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,545,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,570,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,590,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,430,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 
//BUBBLE
   var centerX = canvas.width / 1.1;
   var centerY = canvas.height / 1.5;
     var radius = 13;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE  HIGHLIGHT
   var x = canvas.width / 1.1;
   var y = canvas.height / 1.5;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
 
//BUBBLE THREE
   var centerX = canvas.width / 1.15;
   var centerY = canvas.height / 1.6;
     var radius = 10;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE THREE HIGHLIGHT
   var x = canvas.width / 1.15;
   var y = canvas.height / 1.6;
   var radius = 7;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
 
//BUBBLE FOUR
   var centerX = canvas.width / 25;
   var centerY = canvas.height / 8;
     var radius = 11;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE FOUR HIGHLIGHT
   var x = canvas.width / 25;
   var y = canvas.height / 8;
   var radius = 8;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
     
//BUBBLE FIVE
   var centerX = canvas.width / 20;
   var centerY = canvas.height / 11;
     var radius = 8;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE FIVE HIGHLIGHT
   var x = canvas.width / 20;
   var y = canvas.height / 11;
   var radius = 5;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
   
//BUBBLE SIX
   var centerX = canvas.width / 2.5;
   var centerY = canvas.height / 4;
     var radius = 5;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE SIX HIGHLIGHT
   var x = canvas.width / 2.5;
   var y = canvas.height / 4;
   var radius = 2;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
     

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

//// FLOWER
  // STEM
   context.beginPath();
   context.moveTo(242,578);
   context.bezierCurveTo(225,567,260,550,240,535);
   context.strokeStyle = "rgb(58,92,3)";
   context.stroke();
   context.closePath();
 
  // PETALS
   context.beginPath();
   context.moveTo(240,525);
   context.bezierCurveTo(237,500,260,500,250,525);
   context.bezierCurveTo(270,515,263,537,250,530);
   context.bezierCurveTo(260,540,250,550,240,537);
   context.bezierCurveTo(237,550,225,510,240,530);
   context.quadraticCurveTo(220,500,250,525);
   context.fillStyle = "rgb(268,44,245)"
   context.fill();
   context.closePath();


 //STARFISH THREE

 var quad = context.createLinearGradient(0,100,240,800);
         
 quad.addColorStop(0, "red");

 quad.addColorStop(1, "pink");

 context.beginPath();
 context.moveTo(135,400);
 context.quadraticCurveTo(130,370,120,400); //top fin
 context.quadraticCurveTo(85,390,115,408); //left fin
 context.quadraticCurveTo(95,435,125,415); //bottom left fin
 context.quadraticCurveTo(145,435,140,410); //bottom right fin
 context.quadraticCurveTo(155,388,135,400); //top right fin
 context.closePath();
 context.fillStyle = quad;
 context.fill();
     


</script>



at No comments:
Subscribe to: Posts (Atom)

Final Blog Post

As the semester comes to an end, we were asked to create a portfolio for our final project. After a semest...

  • Logo
    When creating this logo, I had to go back to my roots. I wanted something with meaning, without being too obvious. I chose...
  • Self Portrait
    For this assignment we were asked to create a poster that represents who we are. We used gradient mesh to recreate a picture of ourselves. T...
  • First Blog Post
    Hi, my name is Kat. I transferred to UT this past January 2019 and I’m hoping to graduate in December 2020. I’m really exc...