So far I have done almost all of our Sound as Image projects. I am having the hardest time doing the car over a bridge one. I can not seem to visualize what that noise could be. I know there are vibrations and such but I have been redoing it many times and am just going back to square one.
My favorite one so far has been the one I created myself and the whirring of a fan. With the fan project, I created a book whose pages were being flipped by the fan. The book took me the longest time to create but I am very proud of it. Pictures will be posted later!
Monday, July 30, 2012
Thursday, July 26, 2012
Wednesday, July 25, 2012
Cow Kettle
So here is what I have so far. It still needs tweeking but I am like 75% done.
Let me know what you think!
Let me know what you think!
Monday, July 23, 2012
Opposites Posters
I am finally done!!! I spent my entire weekend on these posters as well as most of last week. But I am quite proud of the outcome and I learned a TON by doing this project. I will post another one tomorrow describing all of my steps and the tools that I used to get this done. Please let me know what you think! I don't think I have ever spent so much time on a project!
I chose to make one horizontal and one landscape because they represented opposites of each other. I stuck with a lot of blue hues in the natural one to give it a calming feeling and to also combat the overexposure of some of the pictures. I purposefully made the Synthetic poster very many conflicting colors and materials. I wanted it to be busy. I made "Natural" look like it was moving in the waves and "Synthetic" look rubbery and elastic like clothes or other man made products.
I used a lot of different tricks and layering techniques that I will go into much further detail on tomorrow morning when my computer is not over heating.
I chose to make one horizontal and one landscape because they represented opposites of each other. I stuck with a lot of blue hues in the natural one to give it a calming feeling and to also combat the overexposure of some of the pictures. I purposefully made the Synthetic poster very many conflicting colors and materials. I wanted it to be busy. I made "Natural" look like it was moving in the waves and "Synthetic" look rubbery and elastic like clothes or other man made products.
I used a lot of different tricks and layering techniques that I will go into much further detail on tomorrow morning when my computer is not over heating.
Tools you might want
Ok so at the beginning of this project, on like the first day that she described it to us, I basically sat down at the computer and just watched a ton of How To's on Photoshop so I could get a really good idea of how I wanted to manipulate my photos. I found some really cool stuff, most of what I watched, I never used and will probably never use, but the ones I actually found helpful I have listed below. These might be helpful for any of you who are burning the midnight oil and need some inspiration.
This one taught me how to use Copy Merge. I was not even looking for it when I was researching, but stumbled upon it and used it like 4 times to manipulate my photos. It is kind of like a "merge layers" but without actually merging all the layers.
http://www.youtube.com/watch?v=0IPNq4-k3Es
This is a really knowledgeable guy that talks about how to use the warp tool, which I used on both of my words. I found the warp tool on my own, but I thought posting a video would be more interesting than explaining.
http://www.youtube.com/watch?v=o_pkpBEVYZE
I also found that the "blending options" on your layers can add really cool effects. It is probably set on your Photoshop to normal. But if you click the drop down, there are a bunch of different things you can do. I had SO MUCH FUN with this tool! I created my own blend of fabrics using this tool. For example I piled two dresses on top of eachother and "overlayed" the top one so it blended into the bottom one, making the bottom go from matte to shiny and sparkly. I definitely recommend that you try it!
This one taught me how to use Copy Merge. I was not even looking for it when I was researching, but stumbled upon it and used it like 4 times to manipulate my photos. It is kind of like a "merge layers" but without actually merging all the layers.
http://www.youtube.com/watch?v=0IPNq4-k3Es
This is a really knowledgeable guy that talks about how to use the warp tool, which I used on both of my words. I found the warp tool on my own, but I thought posting a video would be more interesting than explaining.
http://www.youtube.com/watch?v=o_pkpBEVYZE
I also found that the "blending options" on your layers can add really cool effects. It is probably set on your Photoshop to normal. But if you click the drop down, there are a bunch of different things you can do. I had SO MUCH FUN with this tool! I created my own blend of fabrics using this tool. For example I piled two dresses on top of eachother and "overlayed" the top one so it blended into the bottom one, making the bottom go from matte to shiny and sparkly. I definitely recommend that you try it!
Problems Problems
So I am working on my project and the first one is almost done but when I saved it, it came out "pixel-ly" and very dark with a green tint. I am not sure if I am saving it wrong or what is happening...I tried both flattened and unflattened. I saved it as a Jpeg? Not sure what is going on but here is the picture. As you can see the colors are so saturated. The photo on the right is the correct, and the one on the left is the issue...suggestions?
Sunday, July 22, 2012
Natural Vs Synthetic
So I am doing my opposite posters on Natural VS Synthetic. I originally started on a different one, but my ideas were a little unrealistic. So now I am doing this one and am really excited. I have put in a lot of layers already and have started experimenting with a number of things. Here is what I have so far. I took it in the Adirondacks in New York. This is a picture of the base couple of layers without the bells and whistles.
Saturday, July 21, 2012
Projects
I am going a little bit on project overload. I keep picking up one project and working on it, and then stopping it to do another. They are all taking much more time than I anticipated and I really hope I do a good job on them. So far, I feel I have gotten very creative with the sound with image one however, and when I figure out how to take screen shots I will show you guys!
Thursday, July 19, 2012
My Tiles
The top right one is pretty grotesque. I started to just give myself bangs and then went overboard with the clone tool and a couple of other tools.
I had a lot of fun with this project just because I really like the projects that let us explore and figure things out on our own. I learned a lot and definately learned from my mistake on a couple of these. It definately gave me more appreciation for layers as well.
Opposites Poster
So I tried to get a head start on our assignment where we need to create 2 posters with opposite effects/feelings/adjectives etc. I was having a super hard time coming up with any kind of opposites that seemed interesting/possible to do. So I made a list of all the ones that interested me. Maybe it will give someone else inspiration!
Just a little bit of brainstorming. I did not think I would hit such a wall with the subject but maybe something will come to me...
Just a little bit of brainstorming. I did not think I would hit such a wall with the subject but maybe something will come to me...
Photoshop Tools
In class, we were supposed to Photoshop our selves and two other objects into a picture. I chose water and a water park as the 2 objects. I also put in a little safari truck and lion in the corner. The whole project took me the whole time in class but I feel I learned a lot about the tools used in Photoshop. I really like the need for attention to detail.
Wednesday, July 11, 2012
More practice
So I have been struggling to be good at this pen tool so I grabbed another couple of icons and practiced a little more. I put them side by side so it'd be easier to compare. The original for the Wings is on top and the original for the pandas is on the right. Although my panda does not look very similar to the example, I am actually still pretty proud of it because at least it is recognizable as a panda... and that's progress!
Logos...
Ok so here are my logos. I tried not to use any shortcuts or anything...but as you can see, it was a lot more difficult than I originally thought and they are pretty disappointing. With the Chilis logo, I used a lot of parts from circles and used the eye drop tool to match the color. The actual chili was the most time consuming. For the black and white logo, I basically drew out a crude version of the shapes and then went through and erased them. Pinterest I just used the paint button. the "s"'s and "e"'s were the hardest. But I am very proud of the "P" and the "t". Overall it took me about four hours to work on everything.
Logos
So I have started to work on the logos and I am encountering a couple difficulties. But I really like the practice that the homework is giving me. The logos have been a good exercise to work around Illustrator but I am still not completely comfortable with the program. I was trying to wait to make a post until I had a picture of the logo I was working on but I will just post it later.
Monday, July 9, 2012
My first Project!
I am not sure if I am supposed to post it up yet or not, but I just finished and wanted to share! Here is my code (I think about 700 lines?) and the picture. It doesn't look like much but it took a long time. I hope its ok!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//canvas border for gradient
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
// add linear gradient
var grd = context.createLinearGradient(400, 0, 400, 600);
// black
grd.addColorStop(0, "#000000");
// more black
grd.addColorStop(.2, "#000000");
// blue
grd.addColorStop(.7, "#2609B4");
// sunset colors
grd.addColorStop(1, "#F80683");
context.fillStyle = grd;
context.fill();
// Sun
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX2 = 400;
var centerY2 = 500;
var radius2 = 60;
context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();
// add linear gradient to SUN
var grd = context.createLinearGradient(400, 430, 400, 570);
// yellow
grd.addColorStop(0, "#FAEA06");
// orange
grd.addColorStop(1, "#FA8006");
context.fillStyle = grd;
context.fill();
// Saturn
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 575;
var centerY = 125;
var radius = 45;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();
// add linear gradient to SATURN
var grd = context.createLinearGradient(centerX, centerY, radius, 0, 2 * Math.PI, false);
// yellow
grd.addColorStop(0, "#450606");
// brown/red
grd.addColorStop(.2, "#EBCD0C");
// yellow
grd.addColorStop(.5, "#450606");
// dark yellow
grd.addColorStop(.7, "#605A32");
// orange brown
grd.addColorStop(1, "#503414");
context.fillStyle = grd;
context.fill();
// Piramid 1
context.beginPath();
context.moveTo(200, 400);
context.lineTo(400, 600);
context.bezierCurveTo(175, 600, 175, 600, 0, 600);
context.lineTo(200, 400);
context.fillStyle = "#E4A316";
context.fill();
context.strokeStyle = "#CB9624";
context.stroke();
//piramid shadow
context.beginPath();
context.moveTo(200, 400);
context.lineTo(450, 600);
context.bezierCurveTo(425, 600, 425, 600, 400, 600);
context.fillStyle = "#A17415";
context.fill();
context.strokeStyle = "#A17415";
context.stroke();
// Piramid 2
context.beginPath();
context.moveTo(550, 400);
context.lineTo(725, 600);
context.bezierCurveTo(550, 600, 550, 600, 400, 600);
context.lineTo(550, 400);
context.fillStyle = "#E4A316";
context.fill();
context.strokeStyle = "#BF8A19";
context.stroke();
//piramid 2 shadow
context.beginPath();
context.moveTo(550, 400);
context.lineTo(775, 600);
context.bezierCurveTo(750, 600, 750, 600, 725, 600);
context.lineTo(550, 400);
context.fillStyle = "#B07E12";
context.fill();
context.strokeStyle = "#BF8A19";
context.stroke();
// Saturns ring
context.beginPath();
context.moveTo(500, 50);
context.lineTo(570, 80);
context.bezierCurveTo(525, 53, 525, 53, 625, 185);
context.fill();
context.beginPath();
context.moveTo(625, 185);
context.lineTo(610, 155);
context.stroke();
//green star
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 700;
var centerY = 200;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
//green star gradient
var grd = context.createLinearGradient(670, 220, 730, 170);
// light green
grd.addColorStop(0, "#7BF573");
// dark green
grd.addColorStop(1, "#1E491A");
context.fillStyle = grd;
context.fill();
context.strokeStyle = "#1E491A";
context.stroke();
//pink planet
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 750;
var centerY = 50;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// pink star gradient
var grd = context.createLinearGradient(720, 20, 780, 80);
// pink
grd.addColorStop(0, "#FA08F2");
// gray
grd.addColorStop(1, "#474047");
context.fillStyle = grd;
context.fill();
context.stroke();
//shooting star
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX3 = 150
var centerY3 = 70
var radius3 = 10;
context.beginPath();
context.arc(centerX3, centerY3, radius3, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "grey";
context.stroke();
// shooting star 2 color gradient
var grd = context.createLinearGradient(145, 68, 153, 72);
// white
grd.addColorStop(0, "white");
// grey
grd.addColorStop(1, "#857F8E");
context.fillStyle = grd;
context.fill();
//shooting star tale
context.beginPath();
context.moveTo(150, 70);
context.lineTo(75, 40);
context.bezierCurveTo(142, 68, 148, 68, 50, 60);
context.lineTo(146, 70);
context.fill();
//shooting star 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX4 = 300;
var centerY4 = 200;
var radius4 = 25;
context.beginPath();
context.arc(centerX4, centerY4, radius4, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "grey";
context.stroke();
// shooting star 2 color gradient
var grd = context.createLinearGradient(290, 200, 325, 200);
// white
grd.addColorStop(0, "white");
// grey
grd.addColorStop(1, "#857F8E");
context.fillStyle = grd;
context.fill();
//shooting star tale 2
context.beginPath();
context.moveTo(295, 195);
context.lineTo(200, 75);
context.bezierCurveTo(290, 210, 273, 210, 150, 130);
context.lineTo(280, 200)
context.fill();
//little stars
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 400;
var centerY = 80;
var radius = 5;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 350;
var centerY = 150;
var radius = 5;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 190;
var centerY = 50;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 280;
var centerY = 20;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 295;
var centerY = 80;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 400;
var centerY = 20;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 350;
var centerY = 40;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 235;
var centerY = 60;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 135;
var centerY = 18;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 20;
var centerY = 100;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 30;
var centerY = 80;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 35;
var centerY = 30;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 430;
var centerY = 30;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 470;
var centerY = 60;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 500;
var centerY = 35;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 545;
var centerY = 20;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 600;
var centerY = 45;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 610;
var centerY = 20;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 630;
var centerY = 30;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 700;
var centerY = 90;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 670;
var centerY = 70;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 720;
var centerY = 20;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 680;
var centerY = 30;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 300;
var centerY = 30;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 490;
var centerY = 100;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 460;
var centerY = 85;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 375;
var centerY = 85;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
// ground
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 600, 800, 700);
context.fillStyle = '#F6E549';
context.fill();
//oasis water
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 625);
// line 1
context.lineTo(200, 675);
// quadratic curve
context.quadraticCurveTo(225, 680, 350, 625);
// bezier curve
context.bezierCurveTo(370, 610, 325, 610, 500, 650);
// quadratic curve
context.quadraticCurveTo(550, 660, 800, 645);
context.lineWidth = 8;
context.strokeStyle = "blue";
context.stroke();
// foliage
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 200;
var centerY = 670;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 205;
var centerY = 670;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 210;
var centerY = 670;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 203;
var centerY = 664;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 207;
var centerY = 663;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
// foliage 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 375;
var centerY = 625;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 368;
var centerY = 626;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 364;
var centerY = 622;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 363;
var centerY = 630;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 372;
var centerY = 632;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="700"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//canvas border for gradient
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
// add linear gradient
var grd = context.createLinearGradient(400, 0, 400, 600);
// black
grd.addColorStop(0, "#000000");
// more black
grd.addColorStop(.2, "#000000");
// blue
grd.addColorStop(.7, "#2609B4");
// sunset colors
grd.addColorStop(1, "#F80683");
context.fillStyle = grd;
context.fill();
// Sun
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX2 = 400;
var centerY2 = 500;
var radius2 = 60;
context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();
// add linear gradient to SUN
var grd = context.createLinearGradient(400, 430, 400, 570);
// yellow
grd.addColorStop(0, "#FAEA06");
// orange
grd.addColorStop(1, "#FA8006");
context.fillStyle = grd;
context.fill();
// Saturn
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 575;
var centerY = 125;
var radius = 45;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();
// add linear gradient to SATURN
var grd = context.createLinearGradient(centerX, centerY, radius, 0, 2 * Math.PI, false);
// yellow
grd.addColorStop(0, "#450606");
// brown/red
grd.addColorStop(.2, "#EBCD0C");
// yellow
grd.addColorStop(.5, "#450606");
// dark yellow
grd.addColorStop(.7, "#605A32");
// orange brown
grd.addColorStop(1, "#503414");
context.fillStyle = grd;
context.fill();
// Piramid 1
context.beginPath();
context.moveTo(200, 400);
context.lineTo(400, 600);
context.bezierCurveTo(175, 600, 175, 600, 0, 600);
context.lineTo(200, 400);
context.fillStyle = "#E4A316";
context.fill();
context.strokeStyle = "#CB9624";
context.stroke();
//piramid shadow
context.beginPath();
context.moveTo(200, 400);
context.lineTo(450, 600);
context.bezierCurveTo(425, 600, 425, 600, 400, 600);
context.fillStyle = "#A17415";
context.fill();
context.strokeStyle = "#A17415";
context.stroke();
// Piramid 2
context.beginPath();
context.moveTo(550, 400);
context.lineTo(725, 600);
context.bezierCurveTo(550, 600, 550, 600, 400, 600);
context.lineTo(550, 400);
context.fillStyle = "#E4A316";
context.fill();
context.strokeStyle = "#BF8A19";
context.stroke();
//piramid 2 shadow
context.beginPath();
context.moveTo(550, 400);
context.lineTo(775, 600);
context.bezierCurveTo(750, 600, 750, 600, 725, 600);
context.lineTo(550, 400);
context.fillStyle = "#B07E12";
context.fill();
context.strokeStyle = "#BF8A19";
context.stroke();
// Saturns ring
context.beginPath();
context.moveTo(500, 50);
context.lineTo(570, 80);
context.bezierCurveTo(525, 53, 525, 53, 625, 185);
context.fill();
context.beginPath();
context.moveTo(625, 185);
context.lineTo(610, 155);
context.stroke();
//green star
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 700;
var centerY = 200;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
//green star gradient
var grd = context.createLinearGradient(670, 220, 730, 170);
// light green
grd.addColorStop(0, "#7BF573");
// dark green
grd.addColorStop(1, "#1E491A");
context.fillStyle = grd;
context.fill();
context.strokeStyle = "#1E491A";
context.stroke();
//pink planet
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 750;
var centerY = 50;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// pink star gradient
var grd = context.createLinearGradient(720, 20, 780, 80);
// pink
grd.addColorStop(0, "#FA08F2");
// gray
grd.addColorStop(1, "#474047");
context.fillStyle = grd;
context.fill();
context.stroke();
//shooting star
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX3 = 150
var centerY3 = 70
var radius3 = 10;
context.beginPath();
context.arc(centerX3, centerY3, radius3, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "grey";
context.stroke();
// shooting star 2 color gradient
var grd = context.createLinearGradient(145, 68, 153, 72);
// white
grd.addColorStop(0, "white");
// grey
grd.addColorStop(1, "#857F8E");
context.fillStyle = grd;
context.fill();
//shooting star tale
context.beginPath();
context.moveTo(150, 70);
context.lineTo(75, 40);
context.bezierCurveTo(142, 68, 148, 68, 50, 60);
context.lineTo(146, 70);
context.fill();
//shooting star 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX4 = 300;
var centerY4 = 200;
var radius4 = 25;
context.beginPath();
context.arc(centerX4, centerY4, radius4, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "grey";
context.stroke();
// shooting star 2 color gradient
var grd = context.createLinearGradient(290, 200, 325, 200);
// white
grd.addColorStop(0, "white");
// grey
grd.addColorStop(1, "#857F8E");
context.fillStyle = grd;
context.fill();
//shooting star tale 2
context.beginPath();
context.moveTo(295, 195);
context.lineTo(200, 75);
context.bezierCurveTo(290, 210, 273, 210, 150, 130);
context.lineTo(280, 200)
context.fill();
//little stars
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 400;
var centerY = 80;
var radius = 5;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 350;
var centerY = 150;
var radius = 5;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 190;
var centerY = 50;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 280;
var centerY = 20;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 295;
var centerY = 80;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 400;
var centerY = 20;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 350;
var centerY = 40;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 235;
var centerY = 60;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 135;
var centerY = 18;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 20;
var centerY = 100;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 30;
var centerY = 80;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 35;
var centerY = 30;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 430;
var centerY = 30;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 470;
var centerY = 60;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 500;
var centerY = 35;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 545;
var centerY = 20;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 600;
var centerY = 45;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 610;
var centerY = 20;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 630;
var centerY = 30;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 700;
var centerY = 90;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 670;
var centerY = 70;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 720;
var centerY = 20;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 680;
var centerY = 30;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 300;
var centerY = 30;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 490;
var centerY = 100;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 460;
var centerY = 85;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 375;
var centerY = 85;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
// ground
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 600, 800, 700);
context.fillStyle = '#F6E549';
context.fill();
//oasis water
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 625);
// line 1
context.lineTo(200, 675);
// quadratic curve
context.quadraticCurveTo(225, 680, 350, 625);
// bezier curve
context.bezierCurveTo(370, 610, 325, 610, 500, 650);
// quadratic curve
context.quadraticCurveTo(550, 660, 800, 645);
context.lineWidth = 8;
context.strokeStyle = "blue";
context.stroke();
// foliage
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 200;
var centerY = 670;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 205;
var centerY = 670;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 210;
var centerY = 670;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 203;
var centerY = 664;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 207;
var centerY = 663;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
// foliage 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 375;
var centerY = 625;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 368;
var centerY = 626;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 364;
var centerY = 622;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 363;
var centerY = 630;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 372;
var centerY = 632;
var radius = 4;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#22E02B";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="700"></canvas>
</body>
</html>
New Ideas
So I originally spent about 15 hours on my Lorax idea and literally got no where because I just did not know where to start. I went to Channelside for dinner that night and saw the spray painter making a beautiful space scene. It had a lot of detail and really impressed me. When I came back to tackle my Lorax, I realized I would have a lot more fun doing something similar to Manuel's space scenes and I thought it would be a lot more interesting to look at and I would have a lot more opportunity to play with colors. So I sketched this up on Saturday night and have been working on it since. It is still challenging but I think it will be much more interesting. These are the preliminary drawings. It looks pretty bare bones right now but I fully plan on doing more with it.
Below is the correct one that is to scale of the canvas. It just looks really messy because my ideas have been changing as I am drawing. For example, I originally made hills, but by accident I made one of them pointy and really liked the way it looked like a pyramid, so I kept it.
Sunday, July 8, 2012
The Lorax
Wednesday, July 4, 2012
First Impressions
My name is Shelby and I am 20 years old. My major is Advertising and PR and my concentration is Marketing with a minor in Business and Finance. I was raised on a very small and secluded island not far from Tallahassee (the nearest mall was 2 hours away). I am still getting used to living in a city but so far I love it. I have been to 10 countries and if I could spend my whole life traveling, I would. I am an adventurer and love anything that gives me an adrenaline jump. I have bridge jumped, cliff jumped, scuba dived, swam with killer whales, and white water rafted.
My first take on Beginning Digital Arts was good. Although sitting still for 4 hours straight was very hard. I appreciated the mini-breaks we were given though. I did not expect to be taking so many notes but I learned more in that one class about computers and the history of computers than I have in any other computer class. I like details and tedious work so writing the code in class was fun and interesting. The idea of the grid was very well explained and although I had no background in anything that was being lectured, I was still able to easily follow and grasp the concepts. I am glad that all of it was explained well and thoroughly otherwise I don't think I would have understood.
By the end of this class, I hope that I really get a good basis for the things I will be learning in Graphic Design. If all goes well than I may consider following this path as a career. I hope the classes are very hands-on and I am excited to start exploring the tools we will be using.
My first take on Beginning Digital Arts was good. Although sitting still for 4 hours straight was very hard. I appreciated the mini-breaks we were given though. I did not expect to be taking so many notes but I learned more in that one class about computers and the history of computers than I have in any other computer class. I like details and tedious work so writing the code in class was fun and interesting. The idea of the grid was very well explained and although I had no background in anything that was being lectured, I was still able to easily follow and grasp the concepts. I am glad that all of it was explained well and thoroughly otherwise I don't think I would have understood.
By the end of this class, I hope that I really get a good basis for the things I will be learning in Graphic Design. If all goes well than I may consider following this path as a career. I hope the classes are very hands-on and I am excited to start exploring the tools we will be using.
Subscribe to:
Posts (Atom)