Thursday, September 19, 2019

HDML5 Canvas Final Project



This piece was created with HDML5 canvas on dreamweaver. Although this final piece did not take me overall ten hours to complete, maybe around 5, I definitely worked on this assignment for ten hours or more. I was STRUGGLING with dreamweaver. Being a physical artist (@taylorstrippyart on instagram) made this idea of coding to create especially hard for me. I was trying to think of the piece as art while also trying to solve a puzzle that could mess up the entire piece. It was a nightmare, and I didn't exactly end up liking my final project very much. However, it was when I showed my art to the class, and especially to my roommate, that I was extremely excited and proud of this accomplishment, because I saw this silly piece bring the same amount of joy and excitement into life that my physical art does. I was not only thrilled to be learning a new form of art, but excited to see where it would take me.
I originally wanted to create something akin to the lock-ness monster or something of that nature, but as I continued to code and create this guy, his face was more of a kind creature than a scary monster, so that's what I went with. I think he really goes well with his surroundings and blends in not only with the color scheme, but with the simplicity and kindness of the piece.

My code for this project


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

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

 ///background
    var bkgdgrd = context.createLinearGradient(0,0,0,800);
   
    bkgdgrd.addColorStop(0,"rgba(0, 204, 255,1)");
    bkgdgrd.addColorStop(.15, "rgba(59, 209, 151, 1)");
    bkgdgrd.addColorStop(.50,"rgba(210,180,140, 1)");
    bkgdgrd.addColorStop(.75,"rgba(210,180,140,1)");
    bkgdgrd.addColorStop(1, "rgba(255,255,255,1)");
       
//Ocean
    context.beginPath();

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

var quad = context.createLinearGradient(200,500,400,400);
         
 quad.addColorStop(0, "rgb(102, 204, 255)");
 quad.addColorStop(1, "rgb(0, 204, 255)");

      context.beginPath();
      context.moveTo(0, 375);
      context.quadraticCurveTo(108, 350, 220, 375);
   context.quadraticCurveTo(280, 400, 400, 375);
   context.quadraticCurveTo(568, 350, 700, 375);
   context.quadraticCurveTo(808, 400, 820, 375);
   context.lineTo(805,600);
   context.lineTo(0,600);
   context.lineTo(0,375);
   context.closePath();
   context.fillStyle = quad;
   context.fill();



 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();

  var centerX = canvas.width / 1.2;
   var centerY = canvas.height / 1.3;
     var radius = 15;

    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 ONE HIGHLIGHT
   var x = canvas.width / 1.2;
   var y = canvas.height / 1.3;
   var radius = 12;
   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 TWO
   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 TWO 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();
 
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();
 
//botom arc
     
var centerX = canvas.width / 2;
        var centerY = canvas.height / 1.85;
        var radius = 65;
        var startangle = 0;
        var endangle =  1* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        //context.fillStyle = "red";
      context.lineWidth = 3;
context.fillStyle = 'rgb(36, 255, 178)';
        context.strokeStyle = 'rgb(0, 207, 134)';
context.fill();
        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(36, 255, 178)';
      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 = 3;
      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 = 3;
      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 above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at No comments:

Sunday, September 8, 2019

Tutorials on Coding, Hmwrk due Sept. 9

https://www.youtube.com/watch?v=a9ShcuQlhNg
https://www.youtube.com/watch?v=VqCgcpAypFQ
https://www.youtube.com/watch?v=X4rU02088Xc

I like these tutorials because they are all clear and concise and help to better understand the confusing thing that is coding.
Posted by at No comments:

Wednesday, August 28, 2019

BLOG POST due 9/2


My first feelings of this class were nothing short of positive. This being the first class I have attended at UT, I was nervous to not only be learning at a higher level but to have the responsibility that comes along with said learning. Upon walking in to the class, I saw my professor and was immediately excited due and her seemingly upbeat personality, her obvious passion for the subject, and the cool way she was dressed. I am already feeling at home, and I am beyond excited to see what knowledge this class brings my way.

My name is Taylor Hendricks, I am a freshman communications and PR major here at the University of Tampa. I am interested in art, singing and music, the environment and its studies, the beach, writing and reading, as well as cooking and spending time with friends. I consider myself peaceful positive person, and strive to make constant happiness and love growing around me. The reason I chose my two majors is my constant interest of many things that fall under the umbrella of communications, as well as the creativity and public speaking skills that it takes to be involved with PR.

I expect nothing from this class besides to give me the opportunities and tools to learn an interesting new form of art and media that is ever so present in the current world. I expect from myself dedication and perseverance as I experience new software and all the hardships that come with it. I only expect my professor to do what she is already doing, teaching us with passion and interest. I sincerely hope this class puts me in a good position to continue to study and understand more about the public relations, marketing, and communications world.
Posted by at No comments:
Subscribe to: Posts (Atom)