Tuesday, September 28, 2021

Canvas Project

Here is my Canvas Project. Its called "Halloween Plushes" because I'm very unoriginal. I chose two of the super cute plushes I kept seeing on Instagram and decided they seemed simple enough to code. I am a big fan of stuffed animals and plushies so as soon as I found this picture, I knew I had to do it. This project took me between 8 and 10 hours to complete. I lost count so I don't have an exact time.

 I was actually very excited to do this project as coding seemed very interesting to me. After having suffered the sleepless nights and stress, it doesn't seem as fun. I made the two plushies simple shapes like arcs, circles, and curves and then used smaller circles and lines for their faces. I'm super proud of how they turned out and considering this is my first time using this program, I'm very surprised with how well it looks. Below is the inspiration picture of the plushies from Instagram.

Code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">



<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </title>



<!-- import external .js scripts here -->

<!-- <script type="text/javascript" src="#" ></script> -->


<!-- modify CSS properties here --> 

<style type="text/css">

body,td,th { 
font-family: Monaco, "Courier New", "monospace"; 
font-size: 14px; 
color: rgba(255,255,255,1); 
}

body {
background-color: rgba(0,0,0,1); 
}

#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;

#fmxCanvas { 
position: relative; 
background-color:rgba(255,255,255,1); 
border: rgba(255,255,255,1) thin dashed; 
cursor: crosshair; 
display: inline-block; 
}

</style>

</head>



<body>

<div id="container">
<!-- START HTML CODE HERE --> 



<canvas id="fmxCanvas" width="800" height="600"></canvas>

<div id="display"></div>




<!-- FINISH HTML CODE HERE --> 
</div>

<script>

///////////////////////////////////////////////////////////////////////
// DECLARE requestAnimFrame

var rAF = window.requestAnimFrame ||
window.mozRequestAnimFrame ||
window.webkitRequestAnimFrame ||
window.msRequestAnimFrame;

var fps = 30;

window.requestAnimFrame = (

function(callback) {

return rAF ||

function(callback) {
window.setTimeout(callback, 1000 / fps);
};

})(); 

///////////////////////////////////////////////////////////////////////
// DEFINE GLOBAL VARIABLES HERE

var canvas;
var context;
canvas = document.getElementById("fmxCanvas");
context = canvas.getContext("2d");

var canvas1;
var context1;
canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;
canvas1.height = canvas.height;

var display;
display = document.getElementById('display');

var counter;


///////////////////////////////////////////////////////////////////////
// DEFINE YOUR GLOBAL VARIABLES HERE 



///////////////////////////////////////////////////////////////////////
// CALL THE EVENT LISTENERS

window.addEventListener("load", setup, false);


//////////////////////////////////////////////////////////////////////
// ADD EVENT LISTENERS

canvas.addEventListener("mousemove", mousePos, false);

//////////////////////////////////////////////////////////////////////
// MOUSE COORDINATES

var stage, mouseX, mouseY;

function mousePos(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
}

/////////////////////////////////////////////////////////////////////
// INITIALIZE THE STARTING FUNCTION

function setup() {

/////////////////////////////////////////////////////////////////////
// DECLARE STARTING VALUES OF GLOBAL VARIABLES

counter = 0;
mouseX = canvas.width/2;
mouseY = canvas.height/2;

/////////////////////////////////////////////////////////////////////
// CALL SUBSEQUENT FUNCTIONS, as many as you need

clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS

draw(); // THIS IS WHERE EVERYTHING HAPPENS

}

////////////////////////////////////////////////////////////////////
// CLEAR THE CANVAS FOR ANIMATION
// USE THIS AREA TO MODIFY BKGD

function clear() {

context.clearRect(0,0,canvas.width, canvas.height);
context1.clearRect(0,0,canvas.width, canvas.height); 

// clear additional contexts here if you have more than canvas1 

}

////////////////////////////////////////////////////////////////////
// THIS IS WHERE EVERYTHING HAPPENS

function draw() {

counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS

if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER 

clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS

//////////////////////////////////////////////////////////////////// 
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

//Ghost Bear Body
var centerX = 200;
var centerY = 300
var radius = 110;
var startangle = 0* Math.PI;;
var endangle =  1* Math.PI;

context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "rgba(255,255,255,1.00)";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "rgba(182,182,182,1.00)";
context.stroke();

 //Ghost Bear Bottom of Body
// starting point coordinates
var x = 90;
var y = 300;

// control point 1 coordinates (down)
var cpointX1 = 90;
var cpointY1 = 700;

// control point 2 coordinates (up)
var cpointX2 = 150;
var cpointY2 = 300; 
// ending point coordinates 
var x1 = 155;
var y1 = 430;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 10;
context.strokeStyle = "rgb(182,182,182)";
context.lineCap = 'round' 
context.stroke();
// starting point coordinates
var x2 = 155;
var y2 = 430;

// control point 1 coordinates (down)
var cpointX3 = 170;
var cpointY3 = 650;

// control point 2 coordinates (up)
var cpointX4 = 190;
var cpointY4 = 300; 
// ending point coordinates 
var x3 = 216;
var y3 = 460;

context.beginPath();
context.moveTo(x2, y2);
context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, x3, y3);

context.lineWidth = 10;
context.strokeStyle = "rgb(182,182,182)";
context.lineCap = 'round' 
context.stroke();

// starting point coordinates
var x4 = 184;
var y4 = 460;

// control point 1 coordinates (down)
var cpointX5 = 210;
var cpointY5 = 300;

// control point 2 coordinates (up)
var cpointX6 = 230;
var cpointY6 = 650; 
// ending point coordinates 
var x5 = 248;
var y5 = 430;

context.beginPath();
context.moveTo(x4, y4);
context.bezierCurveTo(cpointX5, cpointY5, cpointX6, cpointY6, x5, y5);

context.lineWidth = 10;
context.strokeStyle = "rgb(182,182,182)";
context.lineCap = 'round' 
context.stroke();
// starting point coordinates
var x6 = 310;
var y6= 300;

// control point 1 coordinates (down)
var cpointX7 = 310;
var cpointY7 = 700;

// control point 2 coordinates (up)
var cpointX8 = 250;
var cpointY8 = 300; 
// ending point coordinates 
var x7 = 248;
var y7 = 430;
context.beginPath();
context.moveTo(x6, y6);
context.bezierCurveTo(cpointX7, cpointY7, cpointX8, cpointY8, x7, y7);

context.lineWidth = 10;
context.strokeStyle = "rgb(182,182,182)";
context.lineCap = 'round' 
context.stroke();
///Ghost Bear Arms
// starting point coordinates
var x = 90;
var y = 300;

// control point coordinates ( magnet )
var cpointX = -10;
var cpointY = 275;

// ending point coordinates
var x1 = 90;
var y1 = 375;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;
context.strokeStyle = "rgba(182,182,182,1.00)";
context.stroke();
 
// starting point coordinates
var x2 = 310;
var y2 = 300;

// control point coordinates ( magnet )
var cpointX1 = 400;
var cpointY1 = 275;

// ending point coordinates
var x3 = 310;
var y3 = 375;


context.beginPath();
context.moveTo(x2, y2);
context.quadraticCurveTo(cpointX1, cpointY1, x3, y3);

context.lineWidth = 10;
context.strokeStyle = "rgba(182,182,182,1.00)";
context.stroke();
 
///Ghost Bear Ears
// starting point coordinates
var x = 100;
var y = 250;

// control point coordinates ( magnet )
var cpointX = 75;
var cpointY = 150;

// ending point coordinates
var x1 = 175;
var y1 = 193;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;
context.strokeStyle = "rgba(182,182,182,1.00)";
context.stroke();
 
// starting point coordinates
var x = 300;
var y = 250;

// control point coordinates ( magnet )
var cpointX = 325;
var cpointY = 150;

// ending point coordinates
var x1 = 225;
var y1 = 193;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;
context.strokeStyle = "rgba(182,182,182,1.00)";
context.stroke();
 
///Ghost Bear Face
//nose
context.beginPath();
context.arc(200, 300, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
//eyes
context.beginPath();
context.arc(150, 290, 5, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
context.beginPath();
context.arc(250, 290, 5, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
//mouth lines
context.moveTo(205,300); // COORDINATES OF STARTING POINT
context.lineTo(180,340); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE

context.moveTo(195,300); // COORDINATES OF STARTING POINT
context.lineTo(220,340); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE

///BAT

context.beginPath();
        context.moveTo(400, 200);
        context.bezierCurveTo(250, 600, 900, -200, 700, 200);
context.bezierCurveTo(850, 550, 200, -200, 400, 200);
        context.fillStyle   = 'rgba(182,182,182,1.00)';
        context.fill();
context.closePath();
        // line color
context.lineWidth = 10;
        context.strokeStyle = 'rgba(22,22,22,1.00)';
        context.stroke();
        
var centerX = 555;
        var centerY = 200;
        var radius = 70;
        var startangle = 0;
        var endangle = 2 * Math.PI;
///Bat Ears
context.beginPath();
context.arc(500, 147, 15, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(182,182,182,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
context.beginPath();
context.arc(600, 142, 15, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(182,182,182,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
///Bat Feets
context.beginPath();
context.arc(520, 260, 20, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(182,182,182,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
context.beginPath();
context.arc(590, 260, 20, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(182,182,182,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
/// Bat Body
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
    context.fillStyle   = 'rgba(182,182,182,1.00)';
        context.fill();
context.closePath();
        context.lineWidth = 10;
        context.strokeStyle = "rgba(22,22,22,1.00)";
        context.stroke();
///Bat Mouth
// starting point coordinates
var x = 555;
var y = 200;

// control point coordinates ( magnet )
var cpointX = 550;
var cpointY = 220;

// ending point coordinates
var x1 = 525;
var y1 = 220;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 3;
context.strokeStyle = "rgba(21,21,21,1.00)";
context.stroke();
// starting point coordinates
var x2 = 555;
var y2 = 200;

// control point coordinates ( magnet )
var cpointX1 = 550;
var cpointY1 = 220;

// ending point coordinates
var x3 = 585;
var y3 = 220;


context.beginPath();
context.moveTo(x2, y2);
context.quadraticCurveTo(cpointX1, cpointY1, x3, y3);

context.lineWidth = 3;
context.strokeStyle = "rgba(21,21,21,1.00)";
context.stroke();
///Teefers
context.beginPath(); 
context.moveTo(532,220);
context.lineTo(540, 220);
context.lineTo(536,225); 
context.closePath(); 
context.lineWidth = 3; 
context.lineJoin = "square";
context.strokeStyle = "rgba(0,0,0,1.00)"; 
context.stroke();
context.fillStyle = "rgba(255,255,255,1.00)";
context.fill();

context.beginPath(); 
context.moveTo(570,220);
context.lineTo(580, 220);
context.lineTo(575,225); 
context.closePath(); 
context.lineWidth = 3; 
context.lineJoin = "square";
context.strokeStyle = "rgba(0,0,0,1.00)"; 
context.stroke();
context.fillStyle = "rgba(255,255,255,1.00)";
context.fill();

///Bat Nose
 context.beginPath();
context.arc(555, 200, 5, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
 
///Bat Eyes
context.beginPath();
context.arc(530, 190, 7, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
context.beginPath();
context.arc(580, 190, 7, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();



 

 

 

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE 
///////////////////////////////////////////////////////////////////

// CREDITS

context.save();
var credits = "Jordan Wilchuck, Halloween Plushes, FMX 210-1, FA 2021";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(0,0,0,1)"; // change the color here
context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
context.shadowBlur = 12;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
context.restore();

//////////////////////////////////////////////////////////////////
// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>
</html>

 

Tuesday, September 7, 2021

Internet vs. World Wide Web

 The Internet is a worldwide nexus of electronic devices like phones, tablets, and computers. Before the internet we have today, research teams led by Leonard Kleinrock created a "two-node network" in 1969. It was used to send information between two neighboring computers. Vinton Cerf and Bob Kahn are the two computer scientists said to have invented the Internet and the protocols we have today. This occurred in 1980 and now we can play games, access information, communicate over long distances and do many other things thanks to the Internet.

The World Wide Web is composed of all the websites accessible via the Internet. The Web was invented in 1989 and created in 1990 by a computer scientist named Sir Tim Berners-Lee. It was initially used to help scientists access different information on different computers but now it houses millions of websites that contain pictures, news, games, etc.

The Internet and the World Wide Web are different things but work together to allow people to access information, share pictures and videos, and communicate with others all around the world. The Internet is the connection of devices while the Web is composed of the actual websites you can access. The first website was made available on August 6th, 1991. It was created by Tim Berners-Lee and has information on how to create websites. (http://info.cern.ch/hypertext/WWW/TheProject.html )

Sources: 

https://edu.gcfglobal.org/en/internetbasics/what-is-the-internet/1/

https://www.britannica.com/story/who-invented-the-internet

https://webfoundation.org/about/vision/history-of-the-web/

https://www.businessinsider.com/flashback-this-is-what-the-first-website-ever-looked-like-2011-6


Wednesday, September 1, 2021

Ascii Art




+++++++++++++++++++++++++=+++???++=++++++++++++++++++++++++++++++++++++++++++++?
++?++++++++++++++++++++++++++=+++++++++++++?++++++++++++++++++++++++?+++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++=+++++??+++++++++++++++++++++++++
++++++?++++++++++++++++++++++++++++++++++++++++++++++++++++++++++??+?+++++++++++
++??++++++++++++++++++++++++++++++++++++++++++++++?+++++++++++++++?+++++++++????
+++++++?+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++=+++++?+++?++
+?+++++++++++++?++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++?+++++++++++++++++++++
+?+++++++?+++++++++++++++++++?????77?++++77I++++++++++++++++++++++++++++++++++++
++++++++?++++++++++++++++++++??I?77Z$OOZ$ZZZO+?+++++++++++++++++++++++++++++++++
++++++?????????????++++++++++I??IIO$$OOZZOOOOZ7??++++++++++++++++++++++?+++++?++
+???++?+++?+?+++++++++++++??IIII?IO8OOZO8D8D88$ZI???++?+++?+++=+++++++?+++?+++++
++++++?++++++++++++++??+??I7IIII77OD888Z8DO8O8O$O$$O7??????????+?+++++?+++++++?+
?+????++++++++++?+++?++?II?$$7O88O888888O888OO8OZODDOO??+++++++++++??+++++++++??
+?+++++++?++++++++++?+??7$ZOZZZOO$OOZOZZZOZOOOO8ODZZ8D88I?+++++++++++++++?++?+++
??+?++?++++++++++???I?7$ZOZ$$$$$ZZ$$$7777$$ZOOOODDD888DOZ$?+++?+++++++?+++++++?+
+++??+++++++++++++??7Z7ZZ$$$$$7777777I????I7$ZOOOOOO8OZO8ZI???+++++??++++++++?++
++??+????+++++++++?I7ZO$$7777777II7IIII????II$ZOOO8OONDOD888$+??++?+++???+++++++
++?+?+?+?+++++++++I7ZZ$77777777IIIIIIIIIII?III7$$ZZO8DN8O8DD8$++++++?+?+?++++?++
?++++?+?++++++???+7OZ$7$777777777IIIIIIIIIIIII777$ZZZOOND8OO8$???++++?++++++++?+
++++++?++++++++++IO$7$$$$$$77777II7IIIIIIIIIII7I7$ZZZZO8DD88O??+++?+++?+++++++++
++++++?++???+++??Z$$$$$$$$$$77777777I7777777777777$$ZOOZO8DD87?+++++++??++??++++
++?++?+?++?++++?ZZ$$$ZZ$$$$7$77777$7777$$7$7777777$$OZZZOODD8Z?+?+?++?+??+?+++++
??????????????IZZ$$$Z$ZZ$$$$$$$$7$$$$7Z$$$$$$$$777$ZZZOZZZOND???+???????????????
+++++++???+++IIZZ$$$$ZZZ$Z$$$$$$$$$$$$$$$$$$$$$7777$$ZZOZOZ887++++?++++?+?++++++
+?+?++++?+++II$$$$$ZZ$$$Z$$$$$$Z$$$$$$$$$$$$$$$$7$7$$ZZZOZO8DO+?+?+?++++?+++++++
+++++?+++?+7IIO$$$$ZZZZZZZZZZ$Z$$$Z$ZZZ$$$$$$7$777$$$ZZZOOOOI++++++++++++?++++++
+?++?++++??III77$OO888OOOZZZZZZZZZZZZZZZZZZ$Z$$77$7$$$ZOOOOO8O??+?++?++++?++++++
+?+++++??+?IIII7ZOZOO8O88OZZZZZZZZZZOOO8888OOOOZZ$7$$$$ZOOZO88Z?++++++++?+++++++
++++++++?+IIII77777I$OOOOOOZZZZZZZZZOOO888OOOOOOZ$$7777ZOOOO88O$???++++++++++?++
++++++?++?II7II77$$$ZZZ7$OOZZZZZZZOOOOO?$ZZZZZZ$I$$$77$OOOO8DZOZ+?++++?+++?+?+++
+++++??+?I7$III$$$$$$ZZZZ$ZOZZZZZZZO$OOZZZ$Z$ZZZZ$$I777OOO8ND88??++++??+++++++?+
?+?+?++?III7Z$7$$ZOOO$$OZZZ7I$$$??IOOZZZ$ZZ$Z$$$$$$$IIIOOOOD88Z??++++++?++++++++
+?+++++IIII7I77$Z888O8888OZ7Z$$$$ZZZZZZZ$ZOOOOOZ$$$$777O78D8DO?++++++++++?++++++
+++++++IIIIIII7$$$$8O8D88OZ$Z$$$$$ZZO88ODO88O888OO$$$77OODDDO7?+?+++++++++++++++
+++??+IIIII77777$$$ZZZZZZ$$ZZZ7$Z$7ZZ$ZZO8888OZ$$$$7$77$$$$I???????????+++++++++
+++++I7777777$?$7$$$$ZZ$Z$Z$$77$$O$$$$ZZZZZZZZ$$7777777$O8??+++?++++++?+?+++++++
++++II7777$$$Z$$$?7$$$$7$$$$77I7$$Z$$$$$Z$$$$$$$I777777$$8O+++++++++++?+++++++++
???I777$$$ZZZO$ZZZ$ZZZ$Z$$$77I777$$$$Z$$??II?7$$77777778ZZNOD$?++++++++?++++++?+
+?7I7777$ZO888$$$ZZ$$$ZZZ$777II777$$$$Z$$$$$$7$$777777O8ZZ7D7?87++++++++++++++++
?77I77$ZZOO888$$$ZZ$$ZZZZ$$$$$$77777ZZZ$$$$$$$$$$$$777$ZZ88N8++8?+++++?++++?++++
II7I77$ZO88O8DZ$ZZZ$ZZZZ$$Z$ZZZZZ$$77OZZZ$$$$$$$$$$777$7D88OD??$O+?+++++?+++++++
II777$ZOO8DDDDDZZZZZZZZZZ88OZOOO88DOZOZZZ$ZZZZZZZ$$$7$ZDODDD88O?DI?+++++++++++++
7I777$ZO8DDDD8+$ZZZZZZZZZOOOO8888888OZZZZZZZZOZZZ$$$788Z8OI7$88DZO+++?+?++++++++
777$$$ZODDDDI?+?ZZZOOZZ$ZZZZZ8O8OOOOOZZ$ZZZZZOZZZZ$$$O88Z$IIII?II????+???+++++++
777$$ZO8DDD?++++$ZOZZZZZZZZZZZZZ$ZZZZZZZOOOOOOOZZZZ$ZOZDZ$I7II?I??II?II??????+++
7$$$ZOO88D++?+++?OZOOOOZZOZZZZOZZOOZZZZOOOOOOOOZZZZZZOZ8ZZ$77IIIII?IIIII????????
$$$ZZO8D8++++++?+7ZOO88D88OOOOOOO88O88OD8OOOOOOOZZZOOOO8OZZ77III??IIII?II??????I
$$ZOO888?++++?++?+7OOOOZ$$$77$77777$$ZO888OOOOOOOZOOOO8DOZZ777IIIIIIIII7III??I??
$ZOO888+?+?+?++++++IZOOOOZZ$ZZ$$$ZZZZOOOOO8OOOOOO8OOO888DZZ$Z7IIIIIIII7IIIIIIIII
ZZO88O?+?+++++?++++?+ZOOOO8D8888888D888O88O88O8D88O888D8NZZI$77IIIIIII77IIIII?II
ZO888+++++++++++?+++?+ZOZZOOO88888888OO88888O88D8888D88DDZZ777II7IIIIII7IIIIIIII
O888++++??+++++++++++?I$ZZZZZZZZOOOOOOOO8888D8888D8DD88DN8Z$$7IIIII7III77IIIIIII
O88?++??+?++++?+?++??$O7$ZOOOOOOOOOOOO8O8DDDDDDDDDDD88DD8NZO7777IIII7I777IIIIIII
88???++++++?+++??ZZ7ZOO$$$OO88O88888888DDDDDDDDDDDD888DZ8DOZ7$7I7IIIIIII7IIIIIII
OZ??+??+??????7$Z88OODO$$$$7I7O888D8DDDDDDDDDDDDDD88888ZOD8Z7$7$77IIII7777IIIIII
8????+++++7$OOO8888888O$777II7ZDDDNNDDDDDDDDDDDDD88888$Z$ODZ7$7$$77I7I7777IIIIII
+++?+?+?IO88D88ODD8N88Z$777II$$8N88NDDDD88DD88DD88888$OZ7$OO$$77$77III77777III7$
++?+++$$OO8DD8D8NDDN88$7777I77$8D8D8NDNDD88888D8888Z$O8Z7$ZOZ$77777III777777II7Z
++?+I$ZOOOO8DDDDDDDD8877II$I7778DZDD888DDDDDD888D87ZZOOZ77$ZOZ77$77III7777777I7O
?I77ZOOO888O8DDDDNDD8877II777778DOZ8DDDDDDDDDDDD$$ZZOOO$77$ZOO77777III777777777O
7$OOO8OOO888DDDD88ND8877II777778DOZZOODDDDDD8$ZZZZOOOZO$77Z8DOO$7$$77I77777777$O
ZOOO8O8DDDDD888DDDDD8877777$7778DOOZOOZZZZZZZZZZZZZZZZZ$7$O8O8OO7$7777777777777O
888888888DD8888DDDDND8777I7$7778D8OOZOZZOZZZZZZZZZZZZZZ77$OO$Z88O$$$7777777777$8
D88888D888888888DD8D8D777I77777ODOOOZOOZZZZZZZZZZZZZZZZ7$$OO$$Z8OOZ$777I777777Z8
OOOD88888888888888DDD8777777777O8Z8OOZZZZZZZZZZZ$Z$ZZZ$7$$ZO$$$$88OZ$777777777Z8
ZZZZO8O88888D8DND88DDDI77IIZ77788$Z8OZZZZZZZZZZZ$ZZZZ$$7$$ZZ$$$$$88OZ$77777777$8
ZZZZZZ8888888DDDNDDDD8777I7II$$O8$$DOOOZZZZZZO$$$ZZZZ$$7$$O$7$$ZO$8O8$$777777$$8
$Z$ZZZZZ888DDDDDDNDDN87IIII77$$O87$Z8OOZZZZZZZZ$ZZZZZ$$7$$O$7ZZZ$Z7888$$777777$D
$$$ZZZOZODDDD8DDNNNDDO7777$777$O877ZDOOOZZZZZ$$$ZZ$$$$$77ZZ$7$$$$$$7888$7777777D
Z$ZZZZOOO8DDDDDDNNNNNZ777777$$$O877$8Z$OZZZ$$$$ZZZ$ZZ$777Z$$7777$$$Z$888$777777D
ZZZOZOO8888DDDDDDDNND$7777$777ZO8$7$$O$$ZOZ$Z$$$ZZZZ$$77$Z$7777I+I$$$788D$77777Z
ZZZOO888888NNNDDDNDNN77777II7$ZO877778$$$$Z$$$$$ZZ$Z$$7$$$777I???7$$O$$Z88$7777$
OOO888888DNNDNNDDDDNN7777II?7Z$O87777$Z$$$$Z$$$$$$$$$$7$777$7$I??I$$OZZ7$8D$777Z
O888888NNNNNNNNNDDN8+7777777$7ZO877777O$$$$$$$$Z$$$$$$$7I7777777?7$ZZZZZ7$8D$7ZZ
8888888NNNNNNNNNDDI++777777$Z$$O8$7II7Z$$$77$$$Z$$7$$$$77II77$$777$$OZ7$O7$8DOZ$
D8888D8D88NNNNNI?++++I77777$7$$88777I77Z$777$$Z$$II$$$$7II7777$$777$ZZ$$$$778$$Z
888888DDDDDDZ7I?+++++?7777$$7$$O87$77I7Z$77777$Z$Z$$$$$$II7III7777$$$$$$$$O$78$Z
88888DDDDDDDD$7?+++++?7777$$778O8777777$777777$$$$$$ZZ$7II7II?I?77$$$$$$$$$Z$$8$
88D88DDDDDNDDZ$I++?++?777$$$77$ZZZ$7I777$77I77$$ZZZ$ZZ$7777IIIII77$7$Z$$$7$7$7ZO
8888D8DDDDNNDDZ$?+???+777$$7777$ZZZ$II77$I7777$$$$$$$$$$7I77III777$$$$$$$$$$$Z$Z
8888888DDDDDDND$7??++?777$77777ZZZI??II7$7I7I777$$777$$$$777I77777$$$$$$$$$$$ZOZ
8888DDDDDDDDDNDZ$7+???7777777778OI???III77II77$$$7?777$$$$$77777777$$$$$$$$7$ZOZ
O8888D88DDDDDDDD$$I???7I777777$I???I??I7I$777I7$777?I7$$$$$$$77777$$$$$$$Z$$Z$$$
O888DDDDDDDDDDNDDZ7I??II77777II8I7??II$7777IIII77??I777$$$$$$$777$$$$$$$$$$$ZOZO
O88888DDDDDDDDDDDO$$??+777$I?IIII$$I$7777IIII?77II?IIII$$Z$Z$$$ZZ$$$$$$$$$$$ZZOZ
888888DDDDDDDNDDDDZ$I??777I??II7$$$7$777I7?III777IIII777$$$ZZZ$$$$$$$$$$$$$$$ZZO
O88888DDDDD8DDDDDDDZ$I?777$IIII$$$8$Z$$7$I?I7I77I777777777$$$$Z$$Z$$Z$$$$$$$$ZZO
8OO888DDDDDDDDNDDDDDZ$II77$III77OZZ8Z$$7?I7II77IIII777$7777$$$ZZZZ$$$$$77$7$$OZZ
8888888D8DDDDDDNDDDDOZ7?77$7I$7Z$$O7$$II?$II?IIIIII777777$$777$$Z$$ZZ77777$$ZZOO
O88888D8DDDDDNDDDNDNDZ$I$77Z$$Z$7$7$II?III7I7II????IIII77777$7777$$$$$777$ZZZ8OO
OOO888DDDDDDDDDDDDDNDDZ$777$$$$77$II?I7??77I??IIIIII?IIIII777$$$77$ZZZ$Z$$$OOO88
OOO88888DDDDDDDDDDDNDD8Z$77$Z$7$?IIIII?I7$Z7Z7O88OZDD?????IIIII77$$$$7$$$$ZOODDD
8O8888DDDDDDDDDDDDDNNDNOZ$77Z$IIIIII?IDOOOOZ$$77IDIIIDD7I7$$7777I77II777$ZODD8DD
OO8888D88DD8DNDDDDNDNNNDZ$77$ZII7II78ODDOODZZZ$$$DNDI7O$O88D8OOOZZZZOOOO888D8DDD
                                                                 GlassGiant.com

Business Cards

This project was about making business cards using our 3 differently colored logos. My favorite is the first one because of the color scheme...