Tuesday, October 31, 2017

Poster Project











Here is my poster project, The original photo is at the bottom, the final version is at the top. Santiago wanted me to play with the size and color of the font to make the message stand out more. I also noticed some issues that the original outline has with my chin. I drew the outline of my face by hand cause the black and white logo washed out a lot of my features. 
at No comments:

Thursday, October 26, 2017

Mesh Project


Here's my Mesh Project, I did a spoon from my kitchen since I don't have too many objects from my room. Below I also attempted to do my elephant ring holder. It didn't go as well but I got pretty far so I brought it to Santiago anyway and I'm posting it here.



at No comments:

Thursday, October 19, 2017

Logos+ Words that describe them

 Here are all of my cards in one file, I have each individually posted below if you want to take a closer look. I was trying to stick with simplistic designs for most of them cause I didn't want it to get too busy and look messy.
 I enlarged the hearts above the cup via Santiago's request, as well as decided on my own to add the words going around the cup on the name side to give it a bit more to look at instead of just the cup. I feel like the logo itself is simple but recognizable.
 For this one I really enjoyed getting to make the cow, it was a bit different than the other logos in that for this one I actually outlined a cow instead of making the objects out of lettering or thin air. I really liked Santiago's suggestion to make the udders red instead of pink. I kept the motto at the bottom in to again add something different so it wasn't just the logo again.
 

 This one I was trying to go as minimalist as possible since the design can be a little busy. I used Sonata font to create the typography for the treble clef. I really like that it ties in my initials but also the symbol into one. I added ledger lines on the back to pull in another aspect of music writing because a treble clef would appear at the beginning of your ledger. 
Santiago mentioned that the snow on the mountains translated as noise with the previous stroke I had applied, I still kept a stroke but I think this one can only really be seen if you're looking at the full size which was originally the point and you can still tell what it's meant to be. The incorportation of my initials is again something I thought was really cool and enjoyed playing with, it is not typography however as I couldn't find any S's that were as squared off as I needed to make the mountains.
This one is my personal favorite since it was the most difficult to figure out how to create. The first few times I made it the roots ended up looking like chinese symbols, so when I eventually figured out how to create the roots well I was pretty excited. Santiago wanted it to take up more space, I'm not one hundred percent sure I love it this long but I do like the format of having my name on one side and the address on the other, it's definitely unique.


at No comments:

Thursday, October 12, 2017

Logo Brainstorming


Here is my brainstorming for logos, I did 6 words cause I was unable to come up a full 10 for the Actor ones however I might finish them before Tuesday. I got a little stuck on incorporating my initials but otherwise I think they were for the most part not too bad. Sorry I'm not an artist but they'll look better on the computer!
at No comments:

Moana


Here's my calligram with Moana, the second image is a close up of just her which I will continue to focus on and add more details to later, especially her face as I need to find a successful way to add details like her eyelashes and cheeks without over filling and making her too busy.

at No comments:

Thursday, September 28, 2017

If it wasn't for those meddling kids...

Mystery Machine Canvas Final Project
Hour Count: 18.5
Cry Count: 22.5



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 dashed; }


</style>


</head>

<body>

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

<script>


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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

 ///background
    var bkgdgrd = context.createLinearGradient(0,0,0,800);
   
    bkgdgrd.addColorStop(0,"rgba(0, 204, 255,1)");
    bkgdgrd.addColorStop(.15, "rgba(244, 175, 216, 1)");
    bkgdgrd.addColorStop(.50,"rgba(201, 88, 19, 1)");
    bkgdgrd.addColorStop(.75,"rgba(204, 0, 255,1)");
    bkgdgrd.addColorStop(1, "rgba(255,255,255,1)");
       
// BACKGROUND
   
    context.beginPath();

         context.rect(0,0,800,600);
   
    context.closePath();
   
    context.fillStyle = bkgdgrd;
   
    context.fill();
   
    //background flower
    var flower = context.createLinearGradient(0,100,200,400);
    flower.addColorStop(0,"rgba(230,0,0,1)");
    flower.addColorStop(.25,"rgba(200,190,0,1)");
    flower.addColorStop(1,"rgba(201,88,19,1)");
        context.beginPath();
    context.moveTo(150,100);
    context.bezierCurveTo(-100,-200,-100,100,140,110);
    context.bezierCurveTo(-100,70,-50,300,145,115);
    context.bezierCurveTo(40,180,80,500,170,115);
    context.bezierCurveTo(300,380,330,150,170,100);
    context.bezierCurveTo(330,-50,150,-100,150,100);
    context.closePath();
    context.fillStyle=flower;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //Background flower 2
    var flower2 = context.createLinearGradient(650,500,700,700);
    flower2.addColorStop(0,"rgba(255,0,0,1)");
    flower2.addColorStop(.25,"rgba(200,130,0,1)");
    flower2.addColorStop(1,"rgba(201,88,19,1)");
   
   
    context.beginPath();
    context.moveTo(550,500);
    context.bezierCurveTo(300,200,300,500,540,510);
    context.bezierCurveTo(300,470,350,700,545,515);
    context.bezierCurveTo(440,580,430,900,560,530);
    context.bezierCurveTo(640,800,690,550,570,515);
    context.bezierCurveTo(810,575,770,400,565,500);
    context.bezierCurveTo(730,350,550,200,550,500);
    context.closePath();
    context.fillStyle=flower2;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
    //flower 2.5
        var flower3 = context.createLinearGradient(650,100,500,100);
    flower3.addColorStop(0,"rgba(255,0,0,1)");
    flower3.addColorStop(.25,"rgba(255,130,0,1)");
    flower3.addColorStop(1,"rgba(201,88,0,1)");
   
   
    context.beginPath();
    context.moveTo(550,100);
    context.bezierCurveTo(300,-200,300,100,540,110);
    context.bezierCurveTo(300,70,350,300,545,115);
    context.bezierCurveTo(440,180,430,500,560,130);
    context.bezierCurveTo(640,400,690,150,570,115);
    context.bezierCurveTo(810,175,770,0,565,100);
    context.bezierCurveTo(730,-150,550,-200,550,100);
    context.closePath();
    context.fillStyle=flower3;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
 //background flower 4

    context.beginPath();
    context.moveTo(687,435);
    context.bezierCurveTo(615,390,640,440,680,445);
    context.bezierCurveTo(610,440,635,475,685,452);
    context.bezierCurveTo(645,505,690,490,695,453);
    context.bezierCurveTo(700,510,740,500,700,450);
    context.bezierCurveTo(750,455,750,425, 700, 440);
    context.bezierCurveTo(700,390,685,390,687,435);
    context.closePath();
    context.fillStyle="rgba(204,0, 204,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    context.beginPath();
      context.arc(690, 445, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();

    //background flower 5
        context.beginPath();
    context.moveTo(687,135);
    context.bezierCurveTo(615,90,640,140,680,145);
    context.bezierCurveTo(610,140,635,175,685,152);
    context.bezierCurveTo(645,205,690,190,695,153);
    context.bezierCurveTo(700,210,740,200,700,150);
    context.bezierCurveTo(750,155,750,125, 700, 140);
    context.bezierCurveTo(700,90,685,90,687,135);
    context.closePath();
    context.fillStyle="rgba(255, 153, 115,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    context.beginPath();
      context.arc(690, 145, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(0, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
     /// background flower 3
        context.beginPath();
    context.moveTo(87,495);
    context.bezierCurveTo(15,450,40,500,80,505);
    context.bezierCurveTo(10,500,35,535,85,512);
    context.bezierCurveTo(45,565,90,550,95,513);
    context.bezierCurveTo(100,570,140,560,100,510);
    context.bezierCurveTo(150,515,150,485, 100, 500);
    context.bezierCurveTo(100,450,85,450,87,495);
    context.closePath();
    context.fillStyle="rgba(255, 0, 0,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    context.beginPath();
      context.arc(90, 505, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   
    //back bumper
   
    context.beginPath();
    context.moveTo(150,405);//BottomRight
    context.lineTo(150,380);//Top Right
    context.lineTo(130,380);//TopLeft
    context.lineTo(130,405); //bottom Left
    context.lineTo(150,405);
    context.closePath();
    context.fillStyle= "grey";
    context.fill();
    context.stroke();
   
//Car Body
    var van= context.createLinearGradient(100,200,700,500);
    van.addColorStop(0,"rgba(51, 153, 255,1)");
    van.addColorStop(.5,"rgba(128, 229, 255,1)");
    van.addColorStop(1,"rgba(51,153,255,1)");
   
    context.beginPath();
    context.moveTo(145,105); //Left top
    context.quadraticCurveTo(80,250,145,400); //Left side
    context.lineTo(700,400); //right bottom
    context.lineTo(740,285); //right side
    context.lineTo(650,105); //right top
    context.lineTo(145,105); //finish at start
    context.closePath();
    context.fillStyle=van
    context.fill();
    context.stroke();
   
    //left tire opening
   
    context.beginPath();
    context.moveTo(210,350); //top corner L
    context.lineTo(200,400); //bottom L
    context.lineTo(315,400); //bottom R
    context.lineTo(305,350); //top R
    context.lineTo(210,350); //close at start
    context.closePath();
    context.fillStyle= "rgba(0,0,0,1)";
    context.fill();
   
    //right tire opening
   
    context.beginPath();
    context.moveTo(525,350);
    context.lineTo(525,400);
    context.lineTo(640,400);
    context.lineTo(615,350);
    context.lineTo(525,350);
    context.closePath();
    context.fillStyle="rgba(0,0,0,1)";
    context.fill();

    //left tire


      context.beginPath();
      context.arc(260, 400, 40, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(171, 240, 102, 1)";
      context.fill();
      context.lineWidth = 20;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
   
   
    //right tire
   
     context.beginPath();
      context.arc(575, 400, 40, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(171, 240, 102, 1)";
      context.fill();
      context.lineWidth = 20;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
   
   

    //window
   
    context.beginPath();
    context.moveTo(535,115); //top left
    context.lineTo(535,240); //bottom left
    context.lineTo(660,240); //bottom right
    context.lineTo(640,115); //top right
    context.lineTo(550,115); //close
    context.closePath();
    context.fillStyle= bkgdgrd;
    context.fill();
    context.lineWidth=3;
    context.strokeStyle= "rgba(0,0,0,1)"
    context.stroke();
   
    //bottom panel decoration
   
    var body= context.createLinearGradient(150,400,550,400);
    body.addColorStop(0,"rgba(171, 240, 102, 1)");
    body.addColorStop(.75,"rgba(0,250,90,1)");
    body.addColorStop(1,"rgba(171, 240, 102, 1)");
   
    context.beginPath();
    context.moveTo(113,250);
    context.quadraticCurveTo(110,280,120,325);
    context.quadraticCurveTo(140,300,150,330);
    context.bezierCurveTo(150,300,170,300,160,330);
    context.bezierCurveTo(170,300,180,300,170,340);
    context.bezierCurveTo(260,225,402,410,500,325);
    context.bezierCurveTo(470,300,500,290,505,320);
    context.bezierCurveTo(505,280,510,270, 520,330);
    context.bezierCurveTo(580,250,620,400,678,360);
    context.bezierCurveTo(650,360,660,340,680,350);
    context.bezierCurveTo(665,320,675,320,685,340);
    context.bezierCurveTo(670,310,695,310,700,330);
    context.lineTo(723,330);
    context.lineTo(740,285);
    context.lineTo(720,247);
    context.lineTo(690,250);
    context.lineTo(115,250);
    context.fillStyle=body
    context.fill();
   
   
    context.strokeStyle="rgba(0,0,0,1)"
    context.stroke();
   
    //top panel decoration
   
    context.beginPath();
    context.moveTo(200,105);
    context.quadraticCurveTo(180,110,200,130);
    context.quadraticCurveTo(165,140,190,210);
    context.bezierCurveTo(210,170,210,210,200,210);
    context.bezierCurveTo(230,170,220,210,210,220);
    context.lineTo(480,220);
    context.bezierCurveTo(440,210,485,205,485,210);
    context.bezierCurveTo(465,190,490,185,500,215);
    context.bezierCurveTo(540,190,470,150,500,105);
    context.lineTo(200,105);
    context.fillStyle=body;
    context.fill();
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
   
    //vertical panelling
    context.beginPath();
    context.moveTo(525,400); // bottom of car
    context.lineTo(525,105); //top of car
    context.closePath();
    context.lineCap="butt";
    context.lineWidth=1;
    context.stroke();
   
    //horizontal panelling
    context.beginPath();
    context.moveTo(112,250); //left edge
    context.lineTo(690,250); //right edge
    context.closePath();
    context.lineWidth=1;
    context.stroke();
   
    //hood panelling
    context.beginPath();
    context.moveTo(645,105); //top
    context.lineTo(690,250);//center
    context.lineTo(660,400);//bottom
    context.lineWidth=1;
    context.stroke();
    context.beginPath();
    context.moveTo(690,250); //left
    context.lineTo(720,247); //right
    context.lineWidth=1;
    context.stroke();
   
   
    //windshield
   
    context.beginPath();
    context.moveTo(655,115);
    context.quadraticCurveTo(670,200,717,240);
    context.closePath();
    context.fillStyle=bkgdgrd;
    context.fill();
    context.stroke();
   
    //top of car
   
    context.beginPath();
    context.moveTo(145,105);
    context.quadraticCurveTo(400,75,650,105);
    context.closePath();
    context.fillStyle="rgba(135, 224, 238, 1)";
    context.fill();
    context.stroke();
   
    //spare tire
   
    context.beginPath();
    context.moveTo(740,285);//LT
    context.lineTo(760,290);//RT
    context.lineTo(735,360); //RB
    context.lineTo(715,355);//LB
    context.lineTo(740,285);
    context.closePath();
    context.fillStyle="rgba(171, 240, 102, 1)";
    context.fill();
    context.stroke();
   
   
    //front bumper
   
    context.beginPath();
    context.moveTo(700,405); //bottomL
    context.lineTo(710,405); //bottomR
    context.lineTo(715,385); //topR
    context.lineTo(705,385); //topL
    context.lineTo(700,405);
    context.closePath();
    context.fillStyle="grey";
    context.fill();
    context.stroke();
   
   
    //headlight
   
     context.beginPath();
      context.arc(695, 380, 5, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(171, 240, 102, 1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
     context.beginPath();
      context.arc(695, 350, 12, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255,255,255, 1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0,0,1)";
      context.stroke();
   
    //text
    context.beginPath();
    context.font='italic 20pt Comic Sans MS';
    context.fillStyle="rgba(255, 153, 0,1)";
    context.fillText("THE",210,145);
    context.beginPath();
     context.font = 'italic 25pt Comic Sans MS';
      context.fillText('MYSTERY', 250, 170);
    context.beginPath();
    context.font= 'italic 25pt Comic Sans MS';
    context.fillText('MACHINE',280,210);
    context.closePath();
   
    //right flower moving counter clockwise starting NW
   
    context.beginPath();
    context.moveTo(645,290);
    context.bezierCurveTo(610,240,615,290,635,300);//NW
    context.bezierCurveTo(590,295,590,325,640,310);
    context.bezierCurveTo(630,350,660,350,650,315);
    context.bezierCurveTo(680,345,680,320,657,308);
    context.bezierCurveTo(685,310,685,280,655,295);
    context.bezierCurveTo(670,250,650,250,645,290);
    context.closePath();
    context.fillStyle="rgba(255, 153, 0,1)";
    context.fill();
    context.lineWidth=1;
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    // center of right flower
    context.beginPath();
      context.arc(645, 300, 4, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   
   
    //left flower
   
    context.beginPath();
    context.moveTo(287,295);
    context.bezierCurveTo(215,250,240,300,280,305);
    context.bezierCurveTo(210,300,235,335,285,312);
    context.bezierCurveTo(245,365,290,350,295,313);
    context.bezierCurveTo(300,370,340,360,300,310);
    context.bezierCurveTo(350,315,350,285, 300, 300);
    context.bezierCurveTo(300,250,285,250,287,295);
    context.closePath();
    context.fillStyle="rgba(255, 153, 0,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();
   
    //center of left flower
    context.beginPath();
      context.arc(290, 305, 6, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
//left tire flower moving clockwise starting in SE
   
    context.beginPath();
      context.moveTo(260,400);
      context.bezierCurveTo(275,450,245,420,260,400);//SE
    context.bezierCurveTo(230,430,225,400,260,400);
    context.bezierCurveTo(228,400,224,365,260,400);
    context.bezierCurveTo(240,370,270,360,260,400);
    context.bezierCurveTo(280,365,295,390,260,400);
    context.bezierCurveTo(295,405,290,435,260,400);
    context.fillStyle="rgba(255, 153, 0,1)"
    context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'rgba(0,0,0,1)';
      context.stroke();
    //center
    context.beginPath();
      context.arc(260,400, 4, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   
   
    //right tire flower
    context.beginPath();
      context.moveTo(575,400);
      context.bezierCurveTo(590,450,560,420,575,400);//SE
    context.bezierCurveTo(545,430,540,400,575,400);
    context.bezierCurveTo(543,400,539,365,575,400);
    context.bezierCurveTo(555,370,585,360,575,400);
    context.bezierCurveTo(595,365,610,390,575,400);
    context.bezierCurveTo(610,405,605,435,575,400);
    context.fillStyle="rgba(255, 153, 0,1)"
    context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'rgba(0,0,0,1)';
      context.stroke();
    //center
        context.beginPath();
      context.arc(575,400, 4, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(255, 153, 0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0, 0,1)"
      context.stroke();
   

   
   
   
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(255,255,255,1)";
context.fillText('TSahli-Canvas Final Project', 20, 550);
context.closePath();

</script


></body>
</html>
at No comments:

Thursday, September 21, 2017

An Apple a Day...

Is it an apple or a tomato? We'll never know.

at No comments:
Subscribe to: Posts (Atom)

Portfolio

  • Portfolio
  • Binary
    Name: tara sahli (I deliberately chose lower case) 01110100 01100001 01110010 01100001 00100000 01110011 01100001 01101000 01101100 0110...
  • An Apple a Day...
    Is it an apple or a tomato? We'll never know.