Using an original painting of a civil war general, I replaced his face with mine by blending and using effects to make my face look like it was painted at the same time, unfortunately the generals skin was much lighter than mine.
Wednesday, November 15, 2017
Monday, November 13, 2017
Where was I when I was younger?
I used an old image when I was much younger when I dressed up as a outlaw and I used an original image from a mine in Nevada to make it look as if I was there right on the mine.
Autoscopy, I'm a Tree?
Using a picture of myself, in Photoshop I put myself onto a tree and blended the texture as if I was part of the tree.
Wednesday, November 1, 2017
Self Portrait
Using a photo of myself when I went fishing, I recreated a majority of my face and for the background I included the major cities that I have lived within driving distance throughout my life. This include Detroit Michigan, Denver Colorado, Brussels, Belgium, Chicago Illinois, and currently Tampa Florida.
Gradient Mesh - Cherry
Using Adobe Photoshop to create an image, I took a picture of a cherry from home and used gradient mesh to recreate the cherry digitally.
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.
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.
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.
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.

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
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>
<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>
Monday, September 18, 2017
Project 1 Canvas Object Code
<html>
<head>
<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 dashed; }
</style>
</head>
<body>
<canvas height="600" id="myCanvas" width="800"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
context.beginPath();
context.moveTo(270,260);
context.lineTo(300,150);
context.lineTo(550,250)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath
context.beginPath();
context.moveTo(470,260);
context.lineTo(400,150);
context.lineTo(550,250)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(300,350);
context.lineTo(200,450);
context.lineTo(575,345)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(300,350);
context.lineTo(500,450);
context.lineTo(310,230)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(100,160);
context.lineTo(290,285);
context.lineTo(95,450)
context.lineWidth = 3
context.stroke();
context.strokeStyle = "blue"
context.fill();
context.closePath();
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
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 = "black";
context.fill();
context.lineWidth = 0;
context.strokeStyle = "white";
context.stroke();
context.closePath();
context.beginPath();
context.arc(520,265,25,0,2*Math.PI);
context.fillStyle = "White"
context.fill();
context.stroke();
context.beginPath();
context.arc(533,265,10,0,2*Math.PI);
context.fillStyle = "black"
context.fill();
context.stroke();
context.beginPath();
context.arc(533,260,4,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(670,150,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(679,138,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(670,275,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(679,264,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(600,205,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(593,193,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.moveTo(580, 600);
context.quadraticCurveTo(450, 400, 560, 410);
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(100, 600);
context.bezierCurveTo(500, 600, 300, 500, 400, 600);
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(650,400);
context.lineTo(700,300);
context.lineTo(500,400);
context.lineTo(600,400);
context.fillStyle = "yellow";
context.fill();
context.closePath();
context.beginPath();
context.moveTo(50,400);
context.lineTo(50,300);
context.lineTo(30,400);
context.lineTo(50,400);
context.fillStyle = "blue";
context.fill();
context.closePath();
context.moveTo(79, 93.5625);
context.bezierCurveTo(20, 16, 26, 14, 17, 240);
context.stroke();
context.beginPath();
context.moveTo(350,250);
context.quadraticCurveTo(50,500,40,690);
context.lineWidth = 7;
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('Ben Bohenick Project 1', 20, 550);
context.closePath();
</script>
</body>
</html>
<head>
<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 dashed; }
</style>
</head>
<body>
<canvas height="600" id="myCanvas" width="800"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
context.beginPath();
context.moveTo(270,260);
context.lineTo(300,150);
context.lineTo(550,250)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath
context.beginPath();
context.moveTo(470,260);
context.lineTo(400,150);
context.lineTo(550,250)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(300,350);
context.lineTo(200,450);
context.lineTo(575,345)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(300,350);
context.lineTo(500,450);
context.lineTo(310,230)
context.lineWidth = 0
context.stroke();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.closePath();
context.beginPath();
context.moveTo(100,160);
context.lineTo(290,285);
context.lineTo(95,450)
context.lineWidth = 3
context.stroke();
context.strokeStyle = "blue"
context.fill();
context.closePath();
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
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 = "black";
context.fill();
context.lineWidth = 0;
context.strokeStyle = "white";
context.stroke();
context.closePath();
context.beginPath();
context.arc(520,265,25,0,2*Math.PI);
context.fillStyle = "White"
context.fill();
context.stroke();
context.beginPath();
context.arc(533,265,10,0,2*Math.PI);
context.fillStyle = "black"
context.fill();
context.stroke();
context.beginPath();
context.arc(533,260,4,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(670,150,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(679,138,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(670,275,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(679,264,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.arc(600,205,25,0,2*Math.PI);
context.fillStyle = "blue"
context.fill();
context.stroke();
context.beginPath();
context.arc(593,193,5,0,2*Math.PI);
context.fillStyle = "white"
context.fill();
context.stroke();
context.beginPath();
context.moveTo(580, 600);
context.quadraticCurveTo(450, 400, 560, 410);
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(100, 600);
context.bezierCurveTo(500, 600, 300, 500, 400, 600);
context.lineWidth = 10;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(650,400);
context.lineTo(700,300);
context.lineTo(500,400);
context.lineTo(600,400);
context.fillStyle = "yellow";
context.fill();
context.closePath();
context.beginPath();
context.moveTo(50,400);
context.lineTo(50,300);
context.lineTo(30,400);
context.lineTo(50,400);
context.fillStyle = "blue";
context.fill();
context.closePath();
context.moveTo(79, 93.5625);
context.bezierCurveTo(20, 16, 26, 14, 17, 240);
context.stroke();
context.beginPath();
context.moveTo(350,250);
context.quadraticCurveTo(50,500,40,690);
context.lineWidth = 7;
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('Ben Bohenick Project 1', 20, 550);
context.closePath();
</script>
</body>
</html>
Project 1 Canvas Object
In this assignment we focused on creating objects using code, while learning the software Dreamweaver.
Subscribe to:
Posts (Atom)
















