Tuesday, July 31, 2012

Final Sound as Image

The images I did only on illustrator were the political debate, the ceiling fan, and the long distance conversation between lovers. The process and progression are in the prior post if you'd like to scroll down and see. 

The other three (bridge, opposing sports team and shell crackling) were done manipulating photos on Photoshop. I showed the process of the first two on the prior post as well, and the crackling of shells was not what I had chosen initially for my sound of choice, but my initial idea was not working well.. so I switched. For this one I assembled a few images on different payers. They were photos of the same thing in different angles. Then I adjusted the levels and curves, and the opacity for transparency. What I hoped to achieve with this composition was the sound of shells crackling in a breeze. 







Monday, July 30, 2012

progress


Here's the progress of the conversation between lovers. Everything was made on illustrator using only vector shapes. I used the brush very little for the shading of the characters. But that was about it.. You think I should color the background in? Is white too plain..?





Here's the fan I started over:





These are also all vector shapes plus the blur effect to simulate movement.


Here's the opposing sports team one.. I'm doing it on Photoshop, with the one subject I can photograph at any time. 



I took a number of photos of myself and will replicate as many of these as i have to to fill up the square. I've mainly just used the quick selection tool or the magnetic lasso to exclude the background and pasted each one in a different layer. I used the transform tool to get the sizes right, and I'm using the lasso tool to select sections of my face and changing their hue to simulate face paint of flags and such. 



I don't like how it's coming out, but I don't think I can afford to be picky right now. Burn tool for the shadows too if I hadn't mentioned that already.


For the old bridge, I have this


I took the photo I said I would use. I copied part of the bridge into different layers and lessened the opacity so that it would be mostly transparent. My goal with that was to simulate shakiness, not sure that happened but I really don't know how to do it better. That little green car was cut from another image I took. This one right here. 


I then transferred the image to Illustrator to mess with the vectors. I did a little bit but meeh.. wasn't looking too real. So i left it as is.





Friday, July 27, 2012

sound as image

I might start a new fan, i really don't like the look of mine. But anyways, I haven't done too much since my last post because I worked a double shift yesterday and worked the morning shift today, so I really didn't have a lot of time left to work on these. However, I do have something planned for the weekend workload in terms of the other 'sound as image'.. images. 

Here's a photo of a bridge in Rome I took not too long ago. I think I might use this one for the sound of crossing an old bridge.



  For the conversation between long distance lovers I was thinking of following the same format that I did for the political debate, but split the square diagonally with a lover in each triangle to simulate the distance. Both would be on the phone longing for on another and whining about the distance (kind of sort of--at least that's what I hope to portray with the image). I'd draw out the characters using vector shapes much like I did for the political debate. 

I'm still a little lost on the opposing sports teams..I have this vague idea of showing the crowds of the opposing teams in different colors holding up signs and making cheering noises, but nothing's concrete in my mind yet. I'm not even sure if I'll use only illustrator or both illustrator and photoshop. We'll see though, I'll come up with something.

And for the one of choice, many ideas, nothing concrete.. I thought of the sound of construction work, sounds of frying stuff, the sound of splashing water.. We'll see too. By my monday post I'll be sure to have more than just ideas. 

Thursday, July 26, 2012

Mesh Bear

For the Mesh assignment, besides the object difference, I'm sure everyone's process war relatively the same; separating each part of the object into different layers using the pen tool, filling it in with the eye drop tool with the general color of each area, then making a grid of each layer with the gradient mesh tool and going from the select tool to the eye drop tool and coloring each section with its appropriate color to make the object seem three dimensional. I spent a lot of time trying to make the sections blend in with each other because most of the time they would look like exactly that -- separate sections. So I'd use the eye drop tool from the color of one section to the other. I think this was most successful on his belly. For the texture I used the sponge effect. I tried many of them and it seemed to have been the most similar. Prior posts have images of earlier stages of the bear.




Wednesday, July 25, 2012

Sound as Image


This is how the bear looks now. I still have a few things to tweak and a few colors to blend more smoothly, but it's almost there. 

In terms of the sounds as images project, I started by doing a fan on illustrator but I wasn't pleased with my result. I might start over on that one. Take a look at how bad it looks though just so that it's made clear why I want to start over hehe.. 


Then I moved to the political debate, also done on illustrator. This is what I have

That blue thing is suppose to look like a donkey, which it most obviously does not as of now.. but I'll get there. I like how this one is coming out though. Still have a lot to do, and I'm still brainstorming on the ideas for the other ones. 

Tuesday, July 24, 2012

Opposites




This is the final result for the opposites project. I explored many a tools on Photoshop, some of which I mentioned in the prior post. I later added a border to the posters by adding a simple frame, but the result didn't please me; the image became heavy and I felt it didn't fit the composition very well. I very much enjoyed playing with the opacity and fill between the layers; I felt the result very much pleased me. That, as well as the words and how they fit nicely with their surroundings thanks to the eraser tool I used to change their shape by removing parts from the "dry" and the brush tool that I used to add droplets on the "wet". 

Overall I thought the result was successful and I'm happy with what I've done. Exploring Photoshop was interesting and I felt I learned a lot by doing this exercise although I'm certain there's much much more to know.

Monday, July 23, 2012

Wet and Dry

For the opposite assignment I went for a walk and photographed some dry and cracking asphalt, and for its opposite, I chose an existing photo I took a couple of years back in Natal, Brazil.

I altered the levels and curves on both images to enhance the patterns on each. I also added a slight green gradient layer to the wet landscape, and added an orange gradient layer to the dry landscape.

For the texts, both processes were relatively similar in that I added to the effects of the text with the brush tool; for the wet canvas I drew droplets on the text to simulate the movement of water, and for the dry canvas I  cut rough edges to simulate cracks similar to the ground.


This is what it looked like once I did those, but I still wanted to place images over both. 






So I added to the wet landscape another photo that I took from the inside of a bus with drops of rain sliding from the window. I pasted the photo on a new layer, changed its opacity percentage as well as the fill, and then chose the linear light effect. I like it a lot like this; 


And for the dry landscape I placed a photo of a part of the grand canyon I took a couple of years back and added some texture to the layer. I edited the levels of the photo, the fill and opacity then added the overlay effect. It contributes a lot to the orange tint the photo now carries.





Friday, July 20, 2012

Progress on zee Teddy and zee opposite poster

So far, my Teddy looks like such:


A definite progress from my last post. I'm proud of this, but there's still a lot to fix until Thursday. It's a very time consuming project, but once you get the hang of it, I feel it gets pretty fun, don't you? He's adorable, too. 

I felt a little stuck with this opposite project, especially with the topic I chose.. So I've decided, once again, that I'm switching. I'm going to work with wet and dry. I love when work of art has movement, and my prior idea wasn't translating that very well; the images were all still and flat. And although I do like repetition in terms of composition, I like it best when it works to create movement, and it wasn't doing it for me. I think this wet and dry opposition will get that point across better. Today I will photograph water (in movement) to represent wetness, and photograph cracks and dry leaves, things of the sort, to represent dryness. 

I feel I always have many ideas that come to me, but in execution, nothing translates as well as I would hope. I hope this one works. 

Best of luck to all and a great weekend.



Wednesday, July 18, 2012

Mesh Teddy / Well-being and Ill-being

Hello!

After the class session yesterday I thought that I wanted to do Man and Woman for the opposites project, but I unfortunately don't have many friends around during the summer, let alone any men willing to have me photograph them. I would pose as the man, which I think would be quite funny, but I also have no props of my own. I think the Man and Woman project would be a great one to invest in if this were a whole semester course. Given that, I tried to think of something else that would better fit the circumstances of summer. I decided on health/wellness and sickness/ill-being. And I've decided to work with food sources that bring those about. I went to Walmart and took some quick (possibly illegal) photos of their food products do display the contrast of those two words. Here's some of them:







 They aren't edited one bit and I do realize they are crooked and imperfect, but there's only so much I can do in stealth mode creeping through the aisles of the supermarket. 


  On my gradient mesh project, I noticed a good chunk of the class was working on the kettle. I was doing that one too, but I feel like I'd like to do something different. And I honestly think starting over won't be so bad. If anything, I'll get more experience with this mesh business anyways. So I switched to the Teddy. He's what the poor little thing looks like as of now. All choppy and 2D. And, oh surprise, I ran into some problems I can't seem to figure out. Sorry Brooke, I really wish I were better at these things so that I wouldn't bug you so much. 

  See you all tomorrow!

Tuesday, July 17, 2012

Six Square Banjo

I had a really tough time with this exercise at home and I had a lot of problems pop up from this one month Photoshop trial. The program would just shut down without warning and my saved files disappeared a few times. I did this thing over a number of times and how come when you place an image you can no longer make changes to it? That bothered me as well as kept me from perfecting my image. I'm having trouble uploading the assignment on lore right now.. It's absurd. It's been "submitting" for twenty minutes now. I don't think I can work from home anymore. It's ridiculous.

I'll make the best of this I guess.

So the beginning of my process is described in the prior post. I wanted to take the banjo (a simple enough looking instrument and somewhat of a bland composition) and make it more interesting, give it movement and life. So I worked with the concept of circular movement (following the shape of the body of the banjo) and repetition, which I think constitutes the pattern in music and rhythm.






I mostly used the clone stamp tool (for the background filling and parts of the banjo), quick selection/magnetic lasso tools, transform tools (to change the direction and size of the banjos). But also used the sharpening tool, Eraser, text tool, eye drop tool for the text color to match the banjo body color, burn tool for shadows, leveling and curves to make the colors more vibrant, the layer options although I didn't like what they were doing so I didn't do much with those, and the pen tool was the same; I messed around with it a little but I didn't do much with it.

I still haven't been able to upload my photoshop file on lore..
I don't know what to do..

Monday, July 16, 2012

Photoshop Banjo


        I started by taking a photo of the banjo and transferring it onto the computer. The first tool I used  was the quick selection tool/ the magnetic lasso tool to select the neck and headstock of the banjo to then clone it and reproduce it a number of times altering its size and position using CTRL+T. I did this not only to use the clone stamp tool but to give the image some movement. Each neck was its own layer, but I was having a hard time placing the photo in the document again without making all my other changes permanent and having Photoshop not allow me to make more arrangements to stuff, and I got really frustrated and confused for a while, so I flattened the image and saved it. I then opened it with Photoshop anew. Once I did that I managed the levels of the photo to make it more vibrant and messed with the curves a little. I then placed the photo in the document once again and removed its background. The two little banjos on the left are each a separate layer. I added the arched text “Banjo Time” in a new layer also, and I was using the burn tool to create some shadows that needed to exist so that the little banjos didn’t look so flat. This is what I have so far, and I really hope I’m on the right track.. I kind of wished we had seen some examples of an expected final product so that we had an idea of what constitutes a good composition and what constitutes a bad one. This course is dense and 6 weeks is so little to swallow all this stuff up and do a good job. 







See you all tomorrow. Good luck.

Friday, July 13, 2012

Mesh


I've begun on the Mesh Tool Assignment on Illustrator. I chose the Cow Kettle as my object. I started out fine, I placed the photo, then I made it a template and then used the pen tool and separated all the different sections into different layers. I was doing fine, but I ran into a problem I can't seem to fix.. For some reason the shapes don't show the fill color at all. They do on the layer box, but I can't see them on Illustrator even when I hide the original photo. But, here's what I have so far:




   On a separate note, I still have not picked my photo for the Photoshop experimentation exercise for Tuesday. If it MUST be the same photograph cut into 6 separate compositions, I might work with a portrait of some sort, I think that will be interesting. We'll see!

Wednesday, July 11, 2012

Experiencing Illustrator

     So I found Illustrator to be a very practical program, but there was so much information to swallow--and considering I've never worked with this program before--every single thing was new to me. With that said, the lecture yesterday helped a lot, and many YouTube tutorials I watched did as well.

     I was very disappointed with my in-class assignment yesterday. I experimented with a lot but I really couldn't make anything worthy of saving in a file. I've begin working with the symbols today. I've been working on them all day and I can say I am definitely more comfortable with the pen tool now. It is really an essential tool.

    My overall process was the same for all of the symbols; first I outlined the overall shapes (leaving hte hard edges) with the actual symbol in a window next to Adobe Illustrator so I had an idea of proportions like such:


     Then I smoothed them out. 


     Then I added the fill color.



      Did the other little shapes with the same process..



      This symbol came along in layers but with the same process as well. Check it out:








Just gotta finish up another one and then a logo. See you all tomorrow.





Monday, July 9, 2012

HTML Assignment Final.



DONE !
I am actually quite proud of this little fellow (high resolution photo is after html coding):


    The concept I worked around was whimsicality, asymmetry and humor. A lot of my artworks are cartoonish and humorous in a sense, and I wanted to see if I could carry that out in the digital realm as well. Asymmetry was an important one here. If you can see, nothing in this little fellow's face is bi-symmetrical, as most faces are structured to be. I not only forced this to be so, but I very much like it better this way. I think it not only adds to the whimsical nature of the portrait, but it makes it quite comical. Like, look at him: look at that left eye. It's poppin' out! He's either going mad or is frightened out of his mind. 

   The process, if you check out the coding below, is mostly made up of Bezier curves. I was really having trouble at the start, which I think showed with the first pair of eyebrows and the first nose I had made. I think I got the hand of them a bit later, and redid both the nose and the eyebrows. The notion of using a paper grid really, really helped, in my opinion. It gives you an overall idea of where (kind of sort of) your x and y points should be. And that saves you a good chunk of time, although I feel that is almost wrong to say since this took me so darn long. I think this assignment was very interesting. It was tough, but it was very interesting. I feel like I had gone into it feeling like the little fellow above, but I'm really glad we had this. I learned a lot from it. 

    Here's the HTML coding for all of it, and the initial sketches and process for the final result are in the prior posting (Bezier, Bezier...):


    Cheers.





<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//rectangle for my background
var topleftX = 0;
var topleftY = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(topleftX, topleftY, width, height);
context.fillStyle = 'rgb(221,181,2)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,150,180)';
context.stroke();
//eye1 
        var centerX = canvas.width / 1.7;
        var centerY = canvas.height / 2;
        var radius = 50;


        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(255,255,255)';
        context.fill();
        context.lineWidth = 2.5;
        context.strokeStyle = "black";
        context.stroke();
//eye2
        var centerX = canvas.width / 3;
        var centerY = canvas.height / 3;
        var radius = 80;


        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(255,255,255)';
        context.fill();
        context.lineWidth = 2.5;
        context.strokeStyle = "black";
        context.stroke();    
 //iris1 
        var centerX = canvas.width / 1.7;
        var centerY = canvas.height / 2;
        var radius = 3;


        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(0,0,0)';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
//eye bag right
//EYE BAG 2
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var x = 475.8;
        var y = 300;
        var radius = 57;
        var startAngle = 1.1 * Math.PI;
        var endAngle = 2.1 * Math.PI;
        var counterClockwise = true;
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 0.8;
        // line color
        context.strokeStyle = "black";
        context.stroke();
//iris2
        var centerX = canvas.width / 3.2;
        var centerY = canvas.height / 3;
        var radius = 2;


        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(0,0,0)';
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();
//irisblue
        var centerX = canvas.width / 3.2;
        var centerY = canvas.height / 3;
        var radius = 10;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fill();
        context.lineWidth = 6;
        context.strokeStyle = "rgb(7,200,174)";
        context.stroke();
//Shine of eye
        var centerX = canvas.width / 3.23;
        var centerY = canvas.height / 3.1;
        var radius = 3;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(0,0,0)';
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "white";
              context.fillStyle = 'white';
  context.fill();
        context.stroke();
        
        
        
        
        
        //EYE BAG 1


       
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var x = 257;
        var y = 206;
        var radius = 91;
        var startAngle = 1.1 * Math.PI;
        var endAngle = 1.9 * Math.PI;
        var counterClockwise = true;


        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 1;
        // line color
        context.strokeStyle = "black";
        context.stroke();      
        //EYE BAG 2
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var x = 263;
        var y = 203;
        var radius = 86;
        var startAngle = 1.5 * Math.PI;
        var endAngle = 2.1 * Math.PI;
        var counterClockwise = true;
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 0.8;
        // line color
        context.strokeStyle = "black";
        context.stroke();
        // NEW NOSE
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(295, 335);
context.bezierCurveTo(295, 330, 320, 430, 395, 350);
context.bezierCurveTo(395, 350, 345, 300, 295, 335);
context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "rgb(0,0,0)";
        context.fillStyle = 'rgb(250,223,48)';
  context.fill();
        context.stroke();
 // end
//Nose hole
        var centerX = 313;
        var centerY = 357;
        var radius = 12;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(221,181,2)';
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "rgb(221,181,2)";
        context.stroke();
//Nose hole right
        var centerX = 370;
        var centerY = 366;
        var radius = 12;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(221,181,2)';
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "rgb(221,181,2)";
        context.stroke();
//Nose Hole black
var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var x = 313;
        var y = 357;
        var radius = 12;
        var startAngle = 1.2 * Math.PI;
        var endAngle = 2.39 * Math.PI;
        var counterClockwise = false;
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 2;
        // line color
        context.strokeStyle = "black";
        context.stroke();
        //Nose Hole black 2
var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var x = 369;
        var y = 366;
        var radius = 12;
        var startAngle = 1.99 * Math.PI;
        var endAngle = 2.7 * Math.PI;
        var counterClockwise = true;
  context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 2;
        // line color
        context.strokeStyle = "black";
        context.stroke(); 
        
        
        




// mouth shape


 // begin 
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");


context.beginPath();
context.moveTo(60, 250);
context.bezierCurveTo(160, 250, 230, 550, 550, 340);
context.bezierCurveTo(550, 340, 688, 250, 690, 450);
context.bezierCurveTo(690, 450, 660, 550, 450, 550);
context.bezierCurveTo(450, 550, 200, 550, 140, 477);
context.bezierCurveTo(140, 477, 40, 430, 30, 300);
context.bezierCurveTo(30, 300, 9, 247, 60, 250);
context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.fillStyle = 'black';
  context.fill();
        context.stroke();
 // end
       
// begin LEFT EYEBROW
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");


context.beginPath();
context.moveTo(150, 100);
context.bezierCurveTo(230, 70, 255, 40, 290, 65);
context.bezierCurveTo(290, 65, 130, 180, 150, 100);
context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.fillStyle = 'rgb(65,46,2)';
  context.fill();
        context.stroke();
 // end
// begin RIGHT EYEBROW
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(500, 170);
context.bezierCurveTo(500, 100, 520, 160, 566, 210);
context.bezierCurveTo(566, 210, 550, 230, 500, 170);
context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.fillStyle = 'rgb(65,46,2)';
  context.fill();
        context.stroke();
//Tooth 1  
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(170, 335);
        context.bezierCurveTo(125, 338, 190, 400, 200, 360);
        context.bezierCurveTo(200, 368, 200, 360, 170, 335);
        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
        context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
//Tooth 2
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(203, 513);
        context.bezierCurveTo(209, 485, 250, 470, 267, 530);
        context.bezierCurveTo(267, 530, 210, 517, 203, 513);


        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
       context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
        
        
//Tooth 3
        
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");


        context.beginPath();
        context.moveTo(302, 412);
        context.bezierCurveTo(300, 413, 340, 417, 330, 417);
        context.bezierCurveTo(340, 417, 330, 500, 300, 412);


        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
         context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
        
        
        
//Hole in tooth 3


        var centerX = 330;
        var centerY = 430;
        var radius = 7;


        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb(0,0,0)';
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();
        
        
//Tooth 4
        
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");


        context.beginPath();
        context.moveTo(360, 416);
        context.bezierCurveTo(360, 416, 350, 417, 380, 413);
        context.bezierCurveTo(380, 413, 360, 500, 360, 415);


        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
          context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
        
        
//Tooth 5
        
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");


        context.beginPath();
        context.moveTo(360, 416);
        context.bezierCurveTo(360, 416, 350, 417, 380, 413);
        context.bezierCurveTo(380, 413, 360, 500, 360, 415);


        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
          context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
        
        
//Tooth 5
        
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");


        context.beginPath();
        context.moveTo(400, 546);
        context.bezierCurveTo(420, 499, 420, 520, 420, 546);
        context.bezierCurveTo(420, 546, 420, 547, 400, 546);


        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
      context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
        
        
//Tooth 6
        
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");


        context.beginPath();
        context.moveTo(503, 371);
        context.bezierCurveTo(503, 371, 507, 370, 520, 361);
        context.bezierCurveTo(520, 361, 520, 440, 503, 371);


        // complete custom shape
        context.closePath();
        context.lineWidth = 2;
        context.strokeStyle = "white";
          context.fillStyle = 'white';
  context.fill();
        context.stroke();
        context.stroke();
        
 // end


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


};


</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
__________________________________________________________________










Sunday, July 8, 2012

Bezier, bezier.. You're killin' me Bezier.



Here's a doodle I did about a year ago while listening to a lecture in class. And it's not that I was not paying attention.. I'm not saying that doodling helps me focus either, but it doesn't hurt.





 I've been doodling these weird and funky characters for a while now, so my inspiration is derived from the noodles between my ears. I hope to translate this sketch into an html design successfully. But for that, I'll simplify it a good amount. Here's the sketch I'm hoping to translate to an html:






This is what I had on Saturday:





The eyes weren't to hard, but the nose was my first attempt at  a Bezier curve. I must say I was somewhat dicouraged; that nose looks bad.

This is what I had today morning:



And this is what I had as of 2pm:


I've mostly been working with bezier curves. They are immensely frustrating. It took me more than an hour to do both of these teeth, but I do think I'm getting a little better. I just still haven't got the hang of coding, and I'm working mostly on guestimations with the proportions in this grid:



But, jeez, this isn't easy. And I really hope I have something good by tomorrow because it's taking me a good while to get these numbers right, and I'm afraid it might not come out as I want it to by class time tomorrow. But I have faith!

And this is what I have as of now; I've changed the expression and added a few bags under the eyes. The poor thing is either going mad or it's frightened to death.




Good luck to you all. And see you tomorrow.