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
Leave a Reply. |
Archives
April 2019
Categories
All
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. |