Symmetry and Asymmetry and Translate init

Author: xinemata

.DS_Store

@@ -137,5 +137,5 @@ This project will take approximately three to four 45-minute sessions:
 ### Planning your Lost & Found Project
 
 1. Students exchange written descriptions of their objects with one another.
-1. Then, each partner draw the object on paper by using simple shapes (rectangles, squares, circles, ellipsesovals, pointsarcs, lines, etc) and writing down what color each shape should be.
+1. Then, each partner sketch out the lost object on paper. 
 1. After 5 minutes of drawing, students take turns showing their drawing to the other for feedback. Feedback should be minimal and should not add too many complicated elements to the original drawing.

_curriculum/02-01_Intro.md

@@ -0,0 +1,173 @@
+---
+# This is the frontmatter
+title: "Lost and Found" # Title and Heading 1
+permalink: /lostAndFound-lessons/3 # Give your page a permalink
+published: true
+
+gallery: # Below is for including an image gallery
+  - url: /assets/images/curriculum/Unit-1_Sample-2.gif
+    image_path: /assets/images/curriculum/Unit-1_Sample-2.gif
+    alt: "black circle following a mouse"
+    title: "Digital Drawing Tool Step 1"
+  - url: /assets/images/curriculum/Unit-1_Sample-3.gif
+    image_path: /assets/images/curriculum/Unit-1_Sample-3.gif
+    alt: "cursor drawing a black line made up of a series of translucent circles"
+    title: "Digital Drawing Tool Step 2"
+  - url: /assets/images/curriculum/Unit-1_Sample-4.gif
+    image_path: /assets/images/curriculum/Unit-1_Sample-4.gif
+    alt: "cursor drawing multiple black arches made up of translucent circles"
+    title: "Digital Drawing Tool Step 3"
+  - url: /assets/images/curriculum/Unit-1_Sample-5.gif
+    image_path: /assets/images/curriculum/Unit-1_Sample-5.gif
+    alt: "cursor creating a drawing of vertical blue lines and stamping red ellipses"
+    title: "Digital Drawing Tool Step 4"
+---
+
+## Composition
+
+### Grade 6~8
+
+#### A. Symmetry and Asymmetry
+
+ ![Symmetry and asymmetry]({{ "/assets/images/curriculum/Unit-1_Sample-20.png" | relative_url }}) 
+
+In composition, symmetry and asymmetry are equally valuable techniques to achieve visual rhythm and harmony. 
+
+In the following tutorial, we will use the [lollipop](https://editor.p5js.org/xinemata/sketches/reojWdPOp) sketch as the starting point to draw a wild flower on the sidewalk. The wild flower is going to contain both symmetrical and asymmetrical visual elements. 
+
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-12.png" | relative_url }}) 
+
+ First, let's turn the lollipop stick into a stem just by adjusting the [fill()](https://p5js.org/reference/p5/fill/) and the [rect()](https://p5js.org/reference/p5/rect/):
+
+ ```js
+  //Stem
+  fill(22, 102, 36);
+  rect(200, 300, 6, 150);
+  ```
+Then, let's turn the lollipop candy into a pistil by adding another [ellipse()](https://p5js.org/reference/p5/ellipse/):
+
+ ```js
+  //Pistil
+  fill(189, 123, 30);
+  ellipse(200, 200, 50, 50);
+  
+  fill(43, 26, 1);
+  ellipse(200, 200, 35, 35);
+```
+We'll also add a sidewalk for the flower to sit on:
+
+```js
+  //Ground
+  fill(120, 130, 127);
+  rect(200, 365, 400, 75);
+```
+
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-13.png" | relative_url }}) 
+
+ Let's add two petals to the flower. The petals will stand behind the left and right side of the pistil: 
+
+ ```js
+  //Petals
+  fill(230, 196, 28);
+  ellipse(200 + 30, 200, 50, 40); // offset petal 30 pixel to the right
+  ellipse(200 - 30, 200, 50, 40); // offset petal 30 pixel to the left
+```
+
+Using arithmetic operators such as addition (+) and subtraction (-) allow us to offset one petal 30 pixel to the left, and the other petal 30 pixel to the right, making it easier to create symmetrical drawings. 
+
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-14.png" | relative_url }}) 
+
+To add two more petals to the flower, one on the top and one on the bottom of the pistil, we will have to manipulate the Y positions of the ellipses: 
+
+```js
+  //Petals
+  fill(230, 196, 28);
+  ellipse(200 + 30, 200, 50, 40); // offset petal 30 pixel to the right
+  ellipse(200 - 30, 200, 50, 40); // offset petal 30 pixel to the left
+  ellipse(200, 200 + 30, 40, 50); // offset petal 30 pixel to the bottom
+  ellipse(200, 200 - 30, 40, 50); // offset petal 30 pixel to the top
+```
+
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-15.png" | relative_url }}) 
+
+ Voila! Now we have a symmetrical flower with petals perfectly offset from the center of the pistil.
+
+ Let's complete this image by adding leaves:
+
+ ```js
+   //Stem and leaves
+  fill(22, 102, 36);
+  rect(200, 300, 6, 150);
+  
+  ellipse(200 + 25, 200 + 70, 50, 20); // offset leaf 25 pixel to the right, and 70 pixel to the bottom
+  ellipse(200 - 25, 200 + 90, 50, 20); // offset leaf 25 pixel to the left, and 90 pixel to the bottom
+```
+
+While the leaves are symmetrical on the X-axis, they are asymmetrical on the Y-axis, creating a cascading effect. 
+
+**Code Snippet:** [flower example](https://editor.p5js.org/xinemata/sketches/kBGJj4XJH).
+{: .notice--info} 
+
+### Grade 9~12
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/maTfm84mLbo?si=Orx71C5hl7owLq78" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipbo a ard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+#### B. Translate
+
+As your p5.js journey unfold, you might find yourself wanting to move or resize a group of shapes all at the same time. This is achievable through features listed under the [Transform](https://p5js.org/reference/#transform) category. 
+
+To begin, let's draw a cloud using the [translate()](https://p5js.org/reference/p5/translate/) feature. 
+
+![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-11.png" | relative_url }}) 
+
+By default, the p5.js canvas origin (0, 0) is at the sketch's top-left corner. [translate()](https://p5js.org/reference/p5/translate/) shifts the canvas origin to a different position.
+
+```js
+function setup() {
+  createCanvas(400, 400);
+  rectMode(CENTER);
+  noStroke();
+}
+
+function draw() {
+  background(122, 122, 190);
+  fill(255);
+  
+  // Shifts canvas origin to the center of the canvas
+  translate(400 / 2, 400 / 2); // x, y
+
+  // The rectangle refers to the new canvas origin to determine X, Y positions
+  rect(0, 0, 100, 50);
+}
+
+```
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-16.png" | relative_url }}) 
+
+ Now we'll add a bunch of ellipses after the rectangle to create the cloud shape:
+
+ ```js
+  ellipse(-80, 0, 70, 70); // offset ellipse 80 pixel to the left
+  ellipse(80, 0, 70, 70); // offset ellipse 80 pixel to the right
+ ```
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-17.png" | relative_url }}) 
+
+ ```js
+  ellipse(-40, -40, 70, 70); // offset ellipse 40 pixel to the left, and 40 pixel to the top
+  ellipse(40, 40, 70, 70);  // offset ellipse 40 pixel to the right, and 40 pixel to the bottom
+  ellipse(-40, 40, 70, 70); // offset ellipse 40 pixel to the left, and 40 pixel to the bottom
+  ellipse(40, -40, 70, 70); // offset ellipse 40 pixel to the right, and 40 pixel to the top
+ ```
+
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-18.png" | relative_url }}) 
+
+ ```js
+  ellipse(0, -50, 70, 70); // offset ellipse 50 pixel to the top
+  ellipse(0, 50, 70, 70); // offset ellipse 50 pixel to the bottom
+ ```
+
+ ![Symmetrical cloud sketch]({{ "/assets/images/curriculum/Unit-1_Sample-19.png" | relative_url }}) 
+
+ Great work! Before moving on to draw another shape, make sure that you finish grouping your cloud drawing by sandwitching the code we've written so far in between [push()](https://p5js.org/reference/p5/push/) and [pop()](https://p5js.org/reference/p5/pop/). Doing this will make sure that any new shapes you draw won't get affected by the cloud's custom [translate()](https://p5js.org/reference/p5/translate/) values.
+
+**Code Snippet:** [cloud example](https://editor.p5js.org/xinemata/sketches/deDhLjr2Q).
+{: .notice--info} 

_curriculum/02-03_Lessons.md

@@ -42,8 +42,8 @@ curriculum:
         url: /lostAndFound-lessons/1
       - title: "Color"
         url: /lostAndFound-lessons/2
-      - title: "Transformation"
-        url: /lostAndFound-lessons/2
+      - title: "Composition"
+        url: /lostAndFound-lessons/3
   - title: "Project 2: Mask Generator"
     children:
       - title: "Introduction"