In this lesson, we used a Khan Academy Java Script lesson to learn how to make simple shapes, how to color, and adjust the borders of shapes and backgrounds using Java Script. A few examples of simple shapes that we learned to make are ellipse, rectangle, triangle, arcs, and much more. To make the artwork above, which is a beach, I had to create the ocean itself, the foam made by the waves, and the sand. First, I changed the background to the color of the sand for the base. Then I made multiple rectangles that transitioned from navy blue to a lighter greenish blue for the ocean. Finally, I added two rows of arcs(one in white and other in baby blue) to represent the sea foam. Below is the code I used to create this image. The code:
noStroke(); background(230, 204, 124); // sand fill(0, 22, 168); rect(0,0,400,10); //OCEAN 1 fill(2, 26, 179); rect(0,10,400,10); //OCEAN 2 fill(0, 25, 189); rect(0,20,400,10); //OCEAN 1 fill(0, 38, 189); rect(0,30,400,10); //OCEAN 1 fill(0, 46, 199); rect(0,40,400,10); //OCEAN 1 fill(0, 50, 199); rect(0,50,400,10); //OCEAN 1 fill(0, 50, 209); rect(0,60,400,10); //OCEAN 1 fill(0, 59, 209); rect(0,70,400,10); //OCEAN 1 fill(0, 73, 219); rect(0,80,400,10); //OCEAN 1 fill(9, 96, 227); rect(0,90,400,10); //OCEAN 1 fill(0, 116, 224); rect(0,100,400,10); //OCEAN 1 fill(0, 125, 219); rect(0,110,400,10); //OCEAN 1 fill(0, 133, 219); rect(0,120,400,10); //OCEAN 1 fill(0, 144, 222); rect(0,130,400,10); //OCEAN 1 fill(7, 155, 219); rect(0,140,400,10); //OCEAN 1 fill(0, 163, 219); rect(0,150,400,10); //OCEAN 1 fill(0, 170, 219); rect(0,160,400,10); //OCEAN 1 fill(0, 173, 219); rect(0,170,400,10); //OCEAN 1 fill(26, 185, 217); rect(0,180,400,10); //OCEAN 1 fill(42, 192, 222); rect(0,190,400,10); //OCEAN 1 fill(55, 201, 230); rect(0,200,400,10); //OCEAN 1 fill(76, 208, 235); rect(0,210,400,10); //OCEAN 1 fill(27, 217, 224); rect(0,220,400,10); //OCEAN 1 fill(63, 219, 227); rect(0,230,400,10); //OCEAN 1 fill(41, 224, 230); rect(0,240,400,10); //OCEAN 1 fill(106, 228, 232); rect(0,250,400,10); //OCEAN 1 fill(107, 223, 227); rect(0,260,400,10); //OCEAN 1 fill(255, 255, 255); rect(0,270,400,10); //OCEAN 1 arc(14,279,27,18, -8,194); arc(37,279,27,18, -8,194); arc(60,279,27,18, -8,194); arc(83,279,27,18, -8,194); arc(106,279,27,18, -8,194); arc(129,279,27,18, -8,194); arc(152,279,27,18, -8,194); arc(175,279,27,18, -8,194); arc(198,279,27,18, -8,194); arc(221,279,27,18, -8,194); arc(244,279,27,18, -8,194); arc(267,279,27,18, -8,194); arc(290,279,27,18, -8,194); arc(313,279,27,18, -8,194); arc(336,279,27,18, -8,194); arc(359,279,27,18, -8,194); arc(382,279,27,18, -8,194); arc(405,279,27,18, -8,194); fill(227, 255, 250); arc(14,285,27,18, -8,194); arc(37,285,27,18, -8,194); arc(60,285,27,18, -8,194); arc(83,285,27,18, -8,194); arc(106,285,27,18, -8,194); arc(129,285,27,18, -8,194); arc(152,285,27,18, -8,194); arc(175,285,27,18, -8,194); arc(198,285,27,18, -8,194); arc(221,285,27,18, -8,194); arc(244,285,27,18, -8,194); arc(267,285,27,18, -8,194); arc(290,285,27,18, -8,194); arc(313,285,27,18, -8,194); arc(336,285,27,18, -8,194); arc(359,285,27,18, -8,194); arc(382,285,27,18, -8,194); arc(405,285,27,18, -8,194);
0 Comments
In this project we had to create a complex design of something that is important/meaningful to you by using multiple basic shapes we learned(are in previous posts). For this project, I chose my dog Browny because he was my first actual pet(not counting fish) and helped me feel less lonely as an only child. He also helps our house feel less lonely when he come in by running and barking towards us to greet us. Browny means a lot to me and my family in many other different ways and we are thankful that we were able to have him be a part of our family.
To create this picture below, I had to mostly convert rectangles and eclipses to paths and change its shapes. To put together the shapes, I used a picture of Browny as a guide and layered the shapes above the picture. For the colors, I used the tool for finding the color on the canvas and used it to make sure Browny had the most similar colors to real life as possible. The hardest part overall was the nose because I had to create almost 25 different shapes to get the shape of his nose. But in the end I was able to put the shapes together and created the picture below. |
Archives
April 2019
Categories
All
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. |