Tuesday, October 17, 2017

Business Card

Using the logos I've created I made a business card to illustrate myself. Using the aspect of me being surrounded by the world, similar to how the sun is the center of our solar system.

at No comments:

Thursday, October 12, 2017

5 Logos Finished Final Versions

These are final versions of my logo, that I created for myself based on different aspects of my personality including my love for nature, fishing, sports especially baseball, being an American, and my how we are just one planet in our solar system and that we can be the center of the people around us.

at No comments:

Tuesday, October 10, 2017

Logo Sketches and Final Versions

Using different aspects of my personality I sketched different ways to create my nickname from childhood, Wowie, to create a logo to express and symbolize myself so I can use the different versions towards my future career. My interests include sports, a republican, travel, nature, fishing, and space. These are the sketches I created to reach my final versions.










at No comments:

Wednesday, October 4, 2017

Image with Song and Words


I used the song Everyday People by Sly & The Family Stone because it tells how everyone is the same no matter what race or skin color, or where your from. Everyone is a human and everyone deserves equal rights and freedom. I chose BB-8 to illustrate how in Star Wars he is a droid but the people around him like Poe, Rey, and Finn treat him as a friend. (The song is the outline and black figure, the grey coloring is R2-D2, the dark grey is Star Wars, and the orange is BB-8. The background is from the original image with slight alterations around BB-8.
at No comments:

Sunday, October 1, 2017

Final Canvas Project

This assignment was to illustrate our knowledge of coding to create a picture. With my fascination of space I created the rocket ship flying away from earth. ART 210 - CANVAS PROJECT
at No comments:

Canvas Final Project Code

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}
body {
background-color: rgba(255,255,255,1);
}
#myCanvas { border: rgba(102,0,255,1) medium solid;}
</style>
</head>

 <body>

 <canvas id="myCanvas" width="1000" height="750"></canvas>

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

 //// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

       // create radial gradient
      var grd = context.createRadialGradient(650, 70, 50, 800, 150, 500);
      // light blue
      grd.addColorStop(0, '#2549B8');
      // dark blue
      grd.addColorStop(1, '#0B1639');

       context.fillStyle = grd;
      context.fill();
/// Background ^

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(50,50,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(300,400,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(150,150,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(250,450,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
///
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(550,300,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(300,400,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(40,230,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(350,220,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
///

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(700,600,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(600,10,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(700,870,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(30,600,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(700,150,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(500,600,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(440,650,2,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(750,250,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
///
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(820,230,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(6340,330,3,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(400,750,2,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

 context.strokeStyle = "#000000";
context.fillStyle = "#FFFF99";
context.beginPath();
context.arc(750,250,4,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
/// Stars ^
var context = canvas.getContext('2d');
      var centerX = 0;
      var centerY = 0;
      var radius = 6;
      context.save();
      context.translate(canvas.width / 2, canvas.height / 2);
      context.scale(4, 2);

       context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.restore();

    
      context.fillStyle = "FF7F50";
      context.fill();
 
context.closePath();
//
/// Earth Imahe

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

       imageObj.onload = function() {
        context.drawImage(imageObj, 585, -145);
      };
      imageObj.src = 'http://images.clipartpanda.com/earth-clipart-Earth-clip-art-8.png';

/// ^ Earth Image

/// Rocket Ship v

 var context = canvas.getContext('2d');
      var centerX = 1;
      var centerY = 135;
      var radius = 55;
      context.save();
      context.translate(canvas.width / 4, canvas.height / 4);
      context.scale(4, 2);

       context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.restore();

    
      context.fillStyle = "black";
      context.fill();
      context.lineWidth = 0;

   
context.closePath();





var context = canvas.getContext('2d');
      var centerX = 1;
      var centerY = 135;
      var radius = 50;
      context.save();
      context.translate(canvas.width / 4, canvas.height / 4);
      context.scale(4, 2);

       context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.restore();

    
      context.fillStyle = "grey";
      context.fill();
      context.lineWidth = 0;

   
context.closePath();


  context.beginPath();
 context.moveTo(360,400);
 context.lineTo(530,350);
 context.lineTo(530,450)
 context.lineWidth = 0

  context.fillStyle = "black"
 context.fill();
 context.closePath();


 context.beginPath();
 context.moveTo(320,400);
 context.lineTo(500,350);
 context.lineTo(500,450)
 context.lineWidth = 0

  context.fillStyle = "grey"
 context.fill();
 context.closePath();

context.beginPath();
 context.moveTo(360,520);
 context.lineTo(530,470);
 context.lineTo(530,570)
 context.lineWidth = 0

  context.fillStyle = "black"
 context.fill();
 context.closePath();

context.beginPath();
 context.moveTo(320,520);
 context.lineTo(500,470);
 context.lineTo(500,570)
 context.lineWidth = 0

  context.fillStyle = "grey";
 context.fill();
 context.closePath();

 context.beginPath();
 context.moveTo(5,460);
 context.lineTo(70,400);
 context.lineTo(70,520)
 context.fillStyle = "black";
 context.fill();
context.closePath



context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,400,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,430,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,460,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,490,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#F6F876";
context.beginPath();
context.arc(140,520,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 8;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();
context.beginPath();
      context.arc(120, 460, 73, 4.7, Math.PI*.5, true);

      context.closePath();
      context.lineWidth = 8;
      context.fillStyle = '#3D3D3D';
      context.fill();
      context.strokeStyle = 'black';
      context.stroke();
     



context.beginPath();
 context.moveTo(170,450);
 context.lineTo(350,400);
 context.lineTo(350,500)
 context.lineTo(450,450)
 context.lineWidth = 0

context.fillStyle = "3D3D3D";
 context.fill();
context.closePath

context.fill();
context.beginPath();
context.arc(280,455,40,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 18;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

context.fillStyle = "#127EBC";
context.beginPath();
context.arc(280,455,20,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.lineWidth = 18;
    context.strokeStyle = 'black';
    context.stroke();
context.fill();

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

       context.beginPath();
      context.arc(530, 100, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

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

       context.beginPath();
      context.arc(530, 100, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath



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

       context.beginPath();
      context.arc(530, 80, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

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

       context.beginPath();
      context.arc(530, 60, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

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

       context.beginPath();
      context.arc(530, 140, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

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

       context.beginPath();
      context.arc(530, 160, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath

  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 = 2.3 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;

       context.beginPath();
      context.arc(530, 190, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;


    
      context.strokeStyle = 'red';
      context.stroke();
 context.closePath



/// Rocket Ship ^

   
     

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS

 context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "white";
context.fillText('Ben Bohenick', 20, 720);
context.closePath();

 </script>
</body>
</html>
at No comments:
Subscribe to: Posts (Atom)