Wednesday, December 16, 2015

Portfolio




 

 

 

I found InDesign very easy to use for the final portfolio. I enjoyed formatting all the images and creating a theme for the whole thing. The theme i stuck with were boxes all the same 5 colors and different variations of those boxes and rectangles. I only used two types of fonts, one for the titles and another for the descriptions. I think the final project came out very good and had no trouble at all getting it printed out at Staples.

Posted by at No comments:

Wednesday, December 9, 2015

HTML





I had a very hard time with this project, as I chose to create a character not realizing the depth and length of time required it would take to create it. My attempt consists of about 15 different shapes and was very tedious to figure out where each shape needed to be. Again, I found that creating a character made the process all the more harder due to the fact that everything had to be, for the most part, precisely placed and this is something I found very difficult and time consuming. I ended up not being able to finish the entire character, because it got to a point of frustration and desperation that I needed  to stop, but I thought that for what I was able to complete I had done a good job.


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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 190;

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

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.4;
      var centerY = canvas.height / 5.8;
      var radius = 120;

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

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 3.7;
      var centerY = canvas.height / 5.8;
      var radius = 120;

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

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2.34;
      var y = canvas.height / 2.8;
      var radius = 59;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;

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

      // line color
      context.strokeStyle = 'tan';
      context.stroke();
     
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 1.8;
      var y = canvas.height / 2.8;
      var radius = 60;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;
      context.fillStyle = 'tan';
      context.fill();

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

      // line color
      context.strokeStyle = 'tan';
      context.stroke();
     
     
        var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2.8;
      var y = canvas.height / 1.65;
      var radius = 75;
      var startAngle = .4 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;
      context.fillStyle = 'tan';
      context.fill();

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

      // line color
      context.strokeStyle = 'tan';
      context.stroke();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 1.54;
      var y = canvas.height / 1.65;
      var radius = 75;
      var startAngle = .5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = true;
      context.fillStyle = 'tan';
      context.fill();

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

      // line color
      context.strokeStyle = 'tan';
      context.stroke();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 1.6721;
      var y = canvas.height / 2.4;
      var radius = 200;
      var startAngle = .9 * Math.PI;
      var endAngle = 1.1 * Math.PI;
      var counterClockwise = false;
      context.fillStyle = 'tan';
      context.fill();

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

      // line color
      context.strokeStyle = 'tan';
      context.stroke();
     
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(400, 400, 160, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'tan';
      context.fill();
      context.stroke();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2.2;
      var y = canvas.height / 2.4;
      var radius = 150;
      var startAngle = .5 * Math.PI;
      var endAngle = 3.8 * Math.PI;
      var counterClockwise = true;

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

      // line color
      context.strokeStyle = 'tan';
      context.stroke();
     
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

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

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'tan';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'tan';
      context.stroke();
     
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.2;
      var centerY = canvas.height / 2.4;
      var radius = 85;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'tan';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'tan';
      context.stroke();
     
        var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.9;
      var centerY = canvas.height / 2.4;
      var radius = 90;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'tan';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'tan';
      context.stroke();
     
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.8;
      var centerY = canvas.height / 2.9;
      var radius = 20;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'tan';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'tan';
      context.stroke();
     
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = 10;
      var centerY = 0;
      var radius = 40;

      // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2.1, canvas.height / 1.7);

      // scale context horizontally
      context.scale(1.8, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 1.55;
      var radius = 100;
      var startAngle = 1.2 * Math.PI;
      var endAngle = 1.8 * Math.PI;
      var counterClockwise = false;

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

      // line color
      context.strokeStyle = 'black';
      context.stroke();
     
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2.4;
      var centerY = canvas.height / 2.4;
      var radius = 20;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
     
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.8;
      var centerY = canvas.height / 2.4;
      var radius = 20;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
     
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(400, 475, 90, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'red';
      context.fill();
      context.strokeStyle();
      context.stroke();

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

};

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

Magazine

For the magazine, I chose to make a tabloid magazine and used photos of well known celebrities and ridiculous headlines. I wanted to use different shaped pictures so not to make it too blocky. I also used a picture of myself from one of my vacations. I tried to use a variety of fonts too for each different aspect of it, using different fonts for the name of the magazine and the cover stories. I had a little trouble making space and avoiding clutter but I think I managed to space it out well.
Posted by at No comments:

Lyrical Collage

For the lyrical collage, I chose the song "We Didn't Start the Fire" by Billy Joel. In the song he sings a list of historical events, so I chose to include actual headlines from these events soaring behind the earth. I distorted the headlines to make it seem as though they are soaring in and out and across the image at fast speeds, because the pace in which he sings the song is very quick. I left some of the black background behind the fire to make it seem like it was charring behind and burning the newspapers whizzing by. I put the earth in it too because the song is about the earth's history and how time keeps turning.
Posted by at No comments:
Subscribe to: Posts (Atom)