Shape and color pages init

Author: xinemata

_curriculum/01-01_Lessons.md

@@ -7,15 +7,13 @@ published: true
 gallery: # Below is for including an image gallery
 ---
 
-# Getting Started
-
-## 1. Setting Up Your Environment
+## Setting Up Your Environment
 
 To begin writing code using [p5.js](https://p5js.org/), you need to set up the coding environment to write and save your programs. [Processing Foundation](https://processingfoundation.org/) provides the [p5.js Editor](https://editor.p5js.org/), a website where programmers can write, test, share, and remix p5.js programs without needing to download or install a code editor on a computer.
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/MXs1cOlidWs?si=h8uilatDVzeLCl_a" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-### What you will need
+#### What you will need
 
 - Access to the internet and the latest version of a desktop browser such as:
   - Chrome (recommended)
@@ -24,14 +22,14 @@ To begin writing code using [p5.js](https://p5js.org/), you need to set up the c
   - Edge
 - A desktop computer, laptop, or Chromebook
 
-### 1A. Opening the p5.js Editor
+#### A. Opening the p5.js Editor
 
 1. Open the latest version of Chrome or Firefox browser on your computer and visit the [p5.js Editor](https://editor.p5js.org/) website.
 1. Click the “Sign up” link on the top right of the web page.
 
 ![p5.js Editor sign-up link]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_sign_up.png?raw=true" | relative_url}})
 
-### 1B. Creating an Account
+#### B. Creating an Account
 
 Create an account on the [p5.js Editor](https://editor.p5js.org/) using one of the following options:
 
@@ -53,7 +51,7 @@ Create an account on the [p5.js Editor](https://editor.p5js.org/) using one of t
   - Follow the prompts to enter your username and password for GitHub.
   - Authorize the [p5.js Editor](https://editor.p5js.org/) to access your GitHub details by clicking the “Authorize processing” button.
 
-### 1C. Exploring the p5.js Editor and running your first “sketch”
+#### C. Exploring the p5.js Editor and running your first “sketch”
 
 ![p5.js Editor interface breakdown]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_interface_breakdown.png?raw=true" | relative_url }})
 
@@ -67,15 +65,15 @@ Create an account on the [p5.js Editor](https://editor.p5js.org/) using one of t
    ![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_2.png" | relative_url }})
    ![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_3.png" | relative_url }})
 
-### 1D. Renaming, saving, and sharing sketches
+#### D. Renaming, saving, and sharing sketches
 
 1. By default, the [p5.js Editor](https://editor.p5js.org/) will generate a playful name for your first sketch. You can rename your sketch by clicking on the pencil icon above the text editor and typing in a name for your project. ![Renaming a sketch]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_naming_a_sketch.png?raw=true" | relative_url }})
 1. Save projects by clicking on File in the top toolbar and selecting Save. Alternatively, you can use the shortcut keys Control+S (PC) or Command+S (Mac). ![Saving a sketch]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_saving_a_sketch.png?raw=true" | relative_url }}) ![Saved notification]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_saved_sketch_notification.png?raw=true" | relative_url }})
 
 **Tip:** Make sure you are logged in to your account, or you will not be able to save the sketch. Saving projects frequently helps ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you're coding.
 {: .notice--success}
 
-### 1E. Sharing, downloading, and deleting your sketches
+#### E. Sharing, downloading, and deleting your sketches
 
 1. Once your project is saved, you can share it! Click on File in the navigation menu, select Share, and copy one of the links provided to share your project in Embed, Fullscreen, and Edit modes.
 1. If you share your project link with a teacher or classmate, you are giving them the permission to view all of your sketches stored on the [p5.js Editor](https://editor.p5js.org/). This is because all sketches stored in the [p5.js Editor](https://editor.p5js.org/) are publicly viewable. Additionally, it’s also possible for your sketches to show up in search engine results.

_curriculum/xx_02-01_Intro.md _curriculum/02-01_Intro.md_curriculum/xx_02-01_Intro.md renamed to _curriculum/02-01_Intro.md

@@ -1,7 +1,7 @@
 ---
 # This is the frontmatter
 title: "Lost and Found" # Title and Heading 1
-permalink: /lostAndFound-lessons/ # Give your page a permalink
+permalink: /lostAndFound-lessons/1 # Give your page a permalink
 published: true
 
 gallery: # Below is for including an image gallery
@@ -22,12 +22,11 @@ gallery: # Below is for including an image gallery
     alt: "cursor creating a drawing of vertical blue lines and stamping red ellipses"
     title: "Digital Drawing Tool Step 4"
 ---
-# Lesson Plans & Technical Steps
 
-## 1. Shape
+## Shape
 <iframe width="560" height="315" src="https://www.youtube.com/embed/hISICBkFa4Q?si=U-LWuegXM9xtLfXg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-#### 1A. p5.js canvas coordinates
+#### A. p5.js canvas coordinates
 By default, every new p5.js sketch you create on the p5.js Editor will contain the following code:
 
 ```jsx
@@ -62,7 +61,7 @@ function setup(){
 Additionally, it’s not possible to animate canvas size while a sketch is playing. 
 {: .notice--success}
 
-#### 1B. p5.js coordinate system
+#### B. p5.js coordinate system
 We’re on our way to placing shapes on the canvas. Do you recall the Cartesian coordinate system taught in math classes? Don’t worry, we believe this to be much simpler! The p5.js canvas features an invisible coordinate system that originates from an X position of 0 and a Y location of 0 in the top-left corner. 
 
 ![p5.js coordinate system]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/coordinates.png?raw=true" | relative_url }}) 
@@ -72,7 +71,7 @@ As a shape on the canvas moves to the right of this point, its [X-coordinate val
 **Code Snippet:** Explore the p5.js coordinate system with this [pixel ruler tool](https://editor.p5js.org/xinemata/sketches/gjWtrowcK) created by Alp Tugǎn, a p5.js Contributor. 
 {: .notice--info} 
 
-#### 1C. Drawing simple shapes
+#### C. Drawing simple shapes
 Now that we’ve covered the basics of the coordinate system, let’s draw a rectangle on the canvas by using the [rect()](https://p5js.org/reference/p5/rect/) feature!    
 
 ```jsx
@@ -192,135 +191,4 @@ function draw() {
 **Code Snippet:** [ellipse() + rect()](https://editor.p5js.org/xinemata/sketches/29C52nZDz).
 {: .notice--info} 
 
-The ellipse should now be sitting on top of your rectangle. What this tells us is that the order in which you code your shapes matters. [p5.js](https://p5js.org) is built on JavaScript, and JavaScript renders code on the fly from top to bottom. Coding the rectangle first means that the rectangle is drawn first, and then it gets covered by the ellipse, which comes later. 
-
-### 2. Color
-<iframe width="560" height="315" src="https://www.youtube.com/embed/fTEvHLLwSBE?si=O-3UMF0ZjaUhQb6M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-
-#### Grade 6~8
-##### 2A. Story Behind the Screen
-Look at the screen in front of you right now. Every color you see—bright pinks, glowing greens, stormy blues—is made from just three colors of light: red, green, and blue—also known as RGB.
-
-You can’t always see it, but it’s true. If you looked at your phone or computer screen under a microscope (cool science class moment!), you’d see tiny red, green, and blue lights—called pixels—turning on and off in different combinations. That’s how screens make color: by mixing light.
-
-![RGB screen]({{ "https://upload.wikimedia.org/wikipedia/commons/9/9d/TFT_Bildschirm_RGB_Pixel.JPG" | relative_url }}) 
-
-This kind of color mixing is called additive color. It’s different from mixing paint, where adding more makes things darker. With light, adding more actually make things brighter.
-
-![RGB mixing]({{ "https://upload.wikimedia.org/wikipedia/commons/5/59/RGB_combination_on_wall.png" | relative_url }}) 
-
-
-In this topic, we'll learn to cast some color spells together using code. You’ll learn how to control the RGB colors in p5.js, a creative coding environment made for artists, designers, and anyone curious about how code can be expressive.
-
-##### 2B. Meet RGB
-
-Let’s start by updating the [background()](https://p5js.org/reference/p5/background/) in the [p5.js editor](https://editor.p5js.org/):
-
-```js
-function setup() {
-  createCanvas(400, 400);
-}
-
-function draw() {
-  background(255, 0, 0);  // r, g, b
-}
-```
-
-If you click the Play button, the background of the canvas should be filled in bright red. Let's break this down to better understand what's going on:
-
-- RGB ranges from a minimum value of 0, to a maximum value of 255. These numbers control the brightness levels of the red, green, and blue lights. 
-- In this case, the sketch is coloring the background in the brightest possible red in RGB. `background(255, 0, 0);` means: full red light, no green light, and no blue light. 
-
-**Mini-Challenge:** Can you update background() to fill the canvas with the brightest blue possible?
-{: .notice--warning} 
-
-**Tip**: In the RGB world, `background(255, 255, 0);` creates yellow, `background(255, 0, 255);` creates magenta, and `background(0, 255, 255);` creates cyan.
-{: .notice--success} 
-
-Play around! What happens with:
-- `background(255, 255, 255)`?
-- `background(0, 0, 0)`?
-
-**Tip**: If you only type one number like `background(150)`, it fills the background with a shade of gray. That’s a shortcut for `background(150, 150, 150)`.
-{: .notice--success} 
-
----
-
-##### 2C. Filling Shapes with Color
-
-Let’s add an ellipse and give it color using the [fill()](https://p5js.org/reference/p5/fill/) feature:
-
-```js
-function setup() {  
-  createCanvas(400, 400); // w, h
-  rectMode(CENTER);
-}
-
-function draw() { 
-  background(220); 
-  fill(255, 255, 0); // r, g, b
-  rect(200, 200, 40, 40); // x, y, w, h
-  ellipse(200, 200, 40, 40); // x, y, w, h
-}
-```
-
-By default, [fill()](https://p5js.org/reference/p5/fill/) recognizes RGB values and sets the color of the shapes you draw. But what if you want to fill the ellipse with a different color? You will need to place another [fill()](https://p5js.org/reference/p5/fill/) right before the ellipse. 
-
-```js
-function setup() {  
-  createCanvas(400, 400); // w, h
-  rectMode(CENTER);
-}
-
-function draw() { 
-  background(220); 
-  fill(255,255,0); // r, g, b
-  rect(200, 200, 40, 40); // x, y, w, h
-  fill(255,0,255); // r, g, b
-  ellipse(200, 200, 40, 40); // x, y, w, h
-}
-```
-**Code Snippet:** [fill()](https://editor.p5js.org/xinemata/sketches/sU7-2LedO).
-{: .notice--info} 
-
-Once you feel comfortable with using RGB colors, you have the option of going further by adding a fourth number to [fill()](https://editor.p5js.org/xinemata/sketches/sU7-2LedO)  to make something see-through!
-
-```js
-fill(255, 0, 0, 100);  // r, g, b, alpha
-```
-
-The last number is called the alpha value. It also ranges from 0 (fully transparent) to 255 (fully opaque).
-
-**Mini-Challenge:** Try overlapping shapes with different alpha values. What kinds of layering effects can you make?
-{: .notice--warning} 
-
-##### 2D. Draw your favorite snack
-Let’s use everything you’ve learned so far to draw a snack you love. Think about ways you could represent your snack using 2D primitives like ellipses and rectangles. And instead of guessing the RGB values of a color you want to use, play around with this [color picker](https://g.co/kgs/6fssxMC) to choose specific colors. Below is an example of a lollipop:
-
-![lollipop made in p5.js]({{ "/assets/images/curriculum/Unit-1_Sample-10.png" | relative_url }}) 
-
-**Code Snippet:** [lollipop example](https://editor.p5js.org/xinemata/sketches/reojWdPOp).
-{: .notice--info} 
-
-**Tip:** Adding [noStroke()](https://p5js.org/reference/p5/noStroke/) removes the black outline around shapes. [stroke()](https://p5js.org/reference/p5/stroke/) sets the outline to a different color. [strokeWeight()](https://p5js.org/reference/p5/strokeWeight/) alters the thickness of the outline.
-{: .notice--success} 
-
-#### Grade 9~12
-##### 3. Blend Modes
-
-Want your colors to mix in cool ways—like in Photoshop or Instagram filters? Try this:
-
-```js
-function setup() {
-  createCanvas(400, 400);
-  blendMode(LIGHTEST);  // Try other modes: DARKEST, MULTIPLY, DIFFERENCE
-
-  fill(255, 0, 0);
-  ellipse(150, 200, 200, 200);
-
-  fill(0, 0, 255);
-  ellipse(250, 200, 200, 200);
-}
-```
-
-Blend modes change how colors mix when they overlap. Each one creates different visual effects.
+The ellipse should now be sitting on top of your rectangle. What this tells us is that the order in which you code your shapes matters. [p5.js](https://p5js.org) is built on JavaScript, and JavaScript renders code on the fly from top to bottom. Coding the rectangle first means that the rectangle is drawn first, and then it gets covered by the ellipse, which comes later.