> For the complete documentation index, see [llms.txt](https://vyuka.digitalneumenia.sk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyuka.digitalneumenia.sk/kp-3/02-kaleidoscope.md).

# 02 - Kaleidoscope

Drawing, Motion & Creative Experiments with GitHub Copilot

🎯 Goal

Create a kaleidoscope you want to show to the rest of the class. Start with a drawing tool, add symmetry, then develop your own visual direction: rotating shapes, delicate curves, glowing trails, strange mechanical flowers—or something we have not thought of yet.

By the end, you will be able to open and run a p5.js project in VS Code, use Copilot with your actual code, and change variables to control an image. You will also practise explaining, fixing, planning, and generating code with AI.

**Your final presentation:** a short live demonstration, one saved image, and one experiment you want to tell us about.

*One possible direction from the example sketches. Develop your own palette, rhythm, and composition.*

### 🔧 Step 1: Install VS Code and connect Copilot

#### Install the editor

1. Download [Visual Studio Code](https://code.visualstudio.com/download) for your operating system.
2. On Windows, run the installer. On Mac, open the download and move Visual Studio Code into Applications if prompted.
3. Open VS Code. You can close the Welcome tab.

We previously wrote sketches in the p5.js Web Editor. Now our project files will live in a folder on our computer. VS Code edits those files; the browser displays the result.

#### Connect your GitHub account

1. Find the Copilot icon in VS Code and choose **Use AI Features**, **Enable AI Features**, or **Sign in**, depending on your version.
2. Choose GitHub and sign in with the account you used for GitHub Education.
3. Complete the browser sign-in and return to VS Code.
4. Open the Chat panel using the chat/Copilot icon.
5. Send: **“What are setup() and draw() in p5.js? Explain in three sentences.”**

If Copilot is missing, open Extensions using **Ctrl+Shift+X** on Windows/Linux or **Cmd+Shift+X** on Mac. Search for **GitHub Copilot**, check that the publisher is GitHub, install the official extension, and follow its sign-in instructions.

✅ **Checkpoint:** Copilot answers inside VS Code.

GitHub Education approval and Copilot activation are separate steps. If access is missing, check your [Education benefits](https://github.com/settings/education/benefits) and follow GitHub's [student activation guide](https://docs.github.com/en/copilot/how-tos/copilot-on-github/set-up-copilot/enable-copilot/set-up-for-students). If activation is still pending, work with a partner whose Copilot is ready.

[Official VS Code Copilot setup instructions](https://code.visualstudio.com/docs/setup/copilot).

### 📁 Step 2: Open your first local sketch

{% file src="/files/Il23ZD88oNx1TPeogApe" %}

1. Download kaleidoscope-starter.zip.
2. Extract the ZIP: **Extract All** on Windows or double-click it on Mac.
3. Move the extracted `kaleidoscope-starter` folder into a place you can find again, such as `Documents / School / Creative Coding`.
4. In VS Code, choose **File → Open Folder…** and select that extracted folder. Open the folder containing `index.html` and `sketch.js`.
5. If VS Code asks about Workspace Trust, this is the supplied class project; trust it to enable the preview tools.
6. Click `sketch.js` in the file list on the left.

| What you see               | What it does                                         |
| -------------------------- | ---------------------------------------------------- |
| Explorer, on the left      | Shows the files in your project folder.              |
| `sketch.js`, in the editor | Contains the drawing code we will change.            |
| `index.html`               | Loads the sketch and the p5.js library in a browser. |
| `libraries` folder         | Contains p5.js. Leave this folder unchanged.         |
| Copilot Chat               | Lets you discuss and change your project with AI.    |

There is no GitHub upload step today. Signing into Copilot lets it help with the project open on your computer.

#### Run it

1. Open Extensions and search for **P5 Server**, by **Oliver Steele** ([extension page](https://marketplace.visualstudio.com/items?itemName=osteele.p5-server)). Install it.
2. Keep `sketch.js` open. Open the Command Palette: **Ctrl+Shift+P** on Windows/Linux or **Cmd+Shift+P** on Mac.
3. Search for **Run Sketch** and choose the P5 Server command. The extension also provides a run/globe control in the editor.
4. Use **Open in Browser** if the preview appears inside VS Code and you prefer a separate browser window.
5. Drag on the dark canvas. You should see a mint-coloured line.

If the extension cannot run, use this working alternative: find the project folder in Finder/File Explorer and double-click `index.html`. Save your changes in VS Code and refresh the browser manually. The starter includes p5.js, so this route does not need a library download.

[P5 Server walkthrough](https://notes.osteele.com/tools/vscode/configuring-visual-studio-code-for-p5js-development-p5-server/).

#### Make your first edit

1. Find `let brushSize = 3;` near the top of `sketch.js`.
2. Change `3` to `12`.
3. Save: **Ctrl+S / Cmd+S**.
4. Return to the preview. P5 Server normally reloads after saving; refresh manually if needed.
5. Draw again. The line should be thicker.

**Saving the code restarts the sketch in a live preview. Save a PNG before editing if you want to keep the current drawing.**

Click the canvas, then press **C** to clear or **S** to save an image. If you type those letters while the code editor is focused, they edit the code instead!

✅ **Checkpoint:** you can change a number, save, and see the effect. Keep VS Code and the preview side by side if possible.

### 🏋 Step 3: Copilot warmup — connect the conversation to the code

#### Ask it to explain your sketch

1. Open Copilot Chat in the same VS Code window as your project.
2. Choose **Ask** if it appears in the mode/agent selector.
3. Click **Add Context** and select `sketch.js`. Alternatively, type `#` and select the file from the suggestions.
4. Check that the file is attached, then send:

> Explain this sketch to me as a beginner. What runs once, what repeats, and what happens when I drag the mouse? Point out the variables I can change. Do not edit any files.

This is how we provide **context**: the actual code plus our intention. Repeating a filename in ordinary text is less reliable than selecting it as an attachment.

[How to add files and other context](https://code.visualstudio.com/docs/chat/copilot-chat-context).

#### Let it make one small change

1. Switch to **Agent**, the mode that can edit project files.
2. Keep `sketch.js` attached.
3. Send:

> Change the brush colour to warm coral. Keep the existing drawing and keyboard controls. Make the change in sketch.js and tell me what you changed.

4. Look at the changed code. Save and test it in the browser.
5. If you like it, keep the edit. If not, use the chat's review/undo controls to revert that change.

Copilot's labels vary by version. Use the normal Chat panel for this lesson. If Ask is unavailable, explicitly request an explanation with no file changes. If the Agent cannot edit, ask for a replacement code block and carefully replace only the section it identifies.

**Optional inline experiment:** write a descriptive `// comment` on a new line. If grey suggested code appears, **Tab** accepts it and **Esc** dismisses it. Tab accepts an existing suggestion; it does not guarantee that one will appear.

✅ **Checkpoint:** Copilot can explain your code and make a visible change to it.

### 🖊 Step 4: Make the brush yours

The starter draws a line from the previous mouse position (`pmouseX`, `pmouseY`) to the current one (`mouseX`, `mouseY`). The background is painted in `setup()`, so earlier marks remain.

Try these small experiments, one at a time:

1. Change the brush size and colour yourself.
2. Ask Copilot to use small circles instead of lines. Compare slow and fast gestures.
3. Ask it to put an opaque background in `draw()`. Observe why the marks disappear.
4. Restore the version that keeps your drawing.

> Add a comment beside background() explaining why its position in setup() or draw() changes whether marks remain. Keep my current drawing behaviour.

**A variable is a named value.** `brushSize` is our own variable. `mouseX`, `mouseY`, `width`, and `height` are variables supplied by p5.js.

Before a larger experiment, choose **File → Save All**, then copy the entire project folder in Finder/File Explorer and give the copy a name such as `kaleidoscope-backup-01`. Continue in your original folder. You now have a working version to return to.

### 🎲 Step 5: Give randomness a job

Try this in Agent with `sketch.js` attached:

> Choose a new random brush colour whenever I start a new mouse gesture inside the canvas. Keep that colour for the entire gesture. Keep C to clear and S to save. Explain where random() is called and why.

Draw several separate strokes. Each should keep its colour until you release the mouse.

Now ask:

> What would change if we chose a random colour inside draw() instead? Explain before editing.

Test the alternative if you want. Decide which result you prefer. Randomness can happen once at startup, once per gesture, or repeatedly during animation. Each choice produces a different visual rhythm.

**Art direction challenge:** ask for a limited palette inspired by something specific—underwater light, faded posters, warning signs, polished metal. Name the colours or describe their relationships.

### 🪞 Step 6: One gesture becomes a kaleidoscope

#### First, make a mirror

> Add a second copy of my brush stroke, reflected across the vertical centre of the canvas. Preserve the brush, colour changes, and keyboard controls. Explain how width - mouseX creates the reflected position. Reflect the previous mouse position too.

✅ **Checkpoint:** one gesture makes two matching marks on opposite sides of the canvas.

#### Then, repeat around the centre

> Turn this mirror drawing into a radial kaleidoscope. Add a segments variable, initially 8. Use translate() to move the origin to the canvas centre and convert both current and previous mouse coordinates to that origin. Use angleMode(DEGREES), a simple loop, rotate(), and push()/pop() to repeat the stroke evenly around the centre. Include a reflected copy in each segment. All copies of a gesture must share the same colour. Preserve C to clear and S to save. Explain the new code briefly.

Test slow gestures near the centre and near the edge. Change `segments` to 3, 6, and 12, clearing between experiments.

| Idea                               | What it means visually                                     |
| ---------------------------------- | ---------------------------------------------------------- |
| `translate(width / 2, height / 2)` | Move the drawing origin to the canvas centre.              |
| `360 / segments`                   | Divide a full turn into equal steps.                       |
| `rotate(...)`                      | Turn the drawing coordinates for the next copy.            |
| `push()` / `pop()`                 | Keep a copy's transformations separate from other drawing. |
| `scale(1, -1)`                     | Reflect a copy across its local horizontal axis.           |

The loop repeats the same drawing instructions. For now, experiment with its repetition count; we will examine loops more closely in the next lesson.

**Symmetry check:** if every copy gets a different random colour or shape, ask Copilot to choose the random values once before repeating the gesture.

Save one image before moving on. You already have a piece to show.

### 🧭 Step 7: Plan your visual direction

Give your project a working title and choose three words for its character: *delicate, slow, botanical*; *sharp, synthetic, unstable*; or your own combination.

Choose **Plan** in Copilot, or enter `/plan` where available. Attach your current `sketch.js`.

> I am making a p5.js kaleidoscope for a short class presentation. My visual direction is \[three words]. I already have a working drawing kaleidoscope. I want to add \[rotating shapes / Bézier ribbons / another idea]. Propose three small implementation steps. For each, say what I should see and how I can check it. Keep the existing drawing, clear, and image-saving controls. Do not implement yet.

Read the plan. Change something that does not fit your intention. Then start implementation, asking for **only the first step**. Preview the result before requesting the next one.

If Plan is unavailable, send the same request in Ask with “Do not edit files; only propose a plan.” [Official planning workflow](https://code.visualstudio.com/docs/agents/run/planning).

### 🌀 Step 8: Choose an experiment

Choose one direction first. Combine them later if it improves your work.

#### A. Rotating shapes — make it move without the mouse

> Add a separate automatic mode that draws repeated shapes around the centre. Press A to switch between drawing and automatic modes, clearing the canvas on each switch. In automatic mode, animate a persistent angle variable by adding a speed value in draw(). Expose speed, distance from the centre, and shape size near the top of the file. Use degrees consistently. Preserve C and S.

Start with an elongated rectangle, triangle, or ellipse. Try different values for speed and distance. A shape at the origin spins in place; an offset shape can orbit the centre.

Ask Copilot to explain the order of `translate()` and `rotate()` in your version. Then experiment with shapes that orbit the centre while also spinning around their own centres.

**Motion check:** the angle variable must keep its value between frames. If it is reset inside `draw()`, the rotation may appear frozen.

#### B. Bézier ribbons — bend the rules

A Bézier curve has two endpoints and two control points. The control points pull its direction and curvature. They are usually not points the curve passes through.

> Add an automatic Bézier mode to my existing kaleidoscope. Start with one visible curve, using noFill(). Show its endpoints and control points in a debug view, with connecting guide lines. Let me toggle the debug view with D. Keep the existing modes and controls.

First move one control point and observe the change. Then ask:

> Repeat and reflect this curve around the centre using the existing segments setting. Animate the control points smoothly with sin() and cos(). Add named variables for bend and speed. Keep the animation in degrees and keep D as a debug toggle.

Try almost straight curves, huge loops, tight petals, and overlapping ribbons. Hide the control points for the presentation. [p5.js Bézier reference](https://p5js.org/reference/p5/bezier/).

#### C. Trails — give the motion a memory

> In automatic mode, replace the fully opaque background with a translucent background so older marks fade gradually. Add a trailFade variable from 0 to 255: 0 keeps marks and 255 clears them each frame. Keep manual drawing mode unchanged. Explain the alpha value.

Compare long trails with short trails. Let the image develop for a few seconds after every change.

Changing a transform affects newly drawn marks. It does not rotate pixels already painted onto the canvas. If you want the entire saved drawing to rotate, describe that explicitly to Copilot; it will need a separate drawing layer. Treat that as an advanced extension.

### 🛠 When something goes wrong

Use this pattern with the current file attached:

> I expected \[behaviour]. Instead, \[what actually happens]. It starts when I \[action]. Find the cause in this file, explain it simply, and make the smallest fix. Keep the features that already work.

For an error, copy its exact message from the preview or browser console. In Chrome, open **Menu → More tools → Developer tools → Console**. Include the filename and line number if shown.

| Problem                               | First check                                                                 |
| ------------------------------------- | --------------------------------------------------------------------------- |
| My edit does nothing                  | Save the correct file. Refresh the correct preview.                         |
| Nothing draws                         | Drag inside the canvas; the starter draws only while pressed.               |
| Keyboard controls do nothing          | Click the canvas, then try again.                                           |
| My brush is a dashed trail of circles | Try lines between previous and current positions, or ask for interpolation. |
| My drawing disappears after an edit   | Live reload restarts the sketch; export images before editing.              |
| Rotation is frozen                    | Check whether the angle resets every frame or speed is zero.                |
| The result is chaotic                 | Change one parameter, reduce speed, and simplify the palette.               |
| Copilot changes too much              | Undo the latest change and request one specific edit.                       |

Keep a backup of a version you like before asking for a major transformation.

### ✨ Step 9: Make it worth presenting

Give yourself a few minutes to refine the result. Choose a deliberate palette, tune the density and movement, and remove elements that compete with your main idea.

Useful prompts:

> The centre is too crowded. Help me create negative space without losing the symmetry.

> Make a small control panel for speed, repetition count, and curve bend. Label the controls clearly and keep them outside the canvas so exported images contain only the artwork.

> Add a pause control for automatic motion. Pause should freeze the current image so I can save it. Preserve the drawing and keyboard controls.

> Help me make the motion feel like breathing. Keep it slow, smooth, and restrained.

You can also go wild: broken symmetry, oversized curves, contrasting line weights, rotating text, or shapes that almost collide. Try an extreme version, then decide what to keep.

### 🖼 Step 10: Show your work

Prepare a **60–90 second presentation**:

1. Give the piece a title and describe its visual intention.
2. Demonstrate drawing or automatic motion.
3. Change one parameter live so we can see what it controls.
4. Show one experiment that changed the direction of your project. A failed attempt can be interesting too.

**Submit:** your project folder, one saved PNG, and two or three sentences about your choices. Include one useful prompt and one part of the code you can explain.

The shared baseline is a working drawing kaleidoscope. Your personal contribution is a deliberate visual direction and at least one developed experiment. More features are useful when they make the piece more compelling.

### 🧠 Copilot quick reference

| I want to…              | What to do                                                                   |
| ----------------------- | ---------------------------------------------------------------------------- |
| Understand code         | Attach the file; use Ask and request an explanation.                         |
| Give context            | Add the actual file, relevant code, and a precise description.               |
| Fix a problem           | State expected vs actual behaviour; include the exact error if there is one. |
| Plan an extension       | Use Plan or `/plan`; review the steps before implementation.                 |
| Generate or change code | Use Agent with one concrete request, then inspect and run it.                |
| Accept inline code      | Press Tab when a grey suggestion is visible.                                 |

**Describe → change → save → run → observe → decide.**