Get started making your very first game with the Sprig game engine, using JavaScript! Sprig is a great tool for both beginners and advanced programmers, and if you make a game, you can get a free DIY handheld console! Follow this four-part series in order, and you'll get to make your very own puzzle game.


_Want to just see the result?_

- (Schematic PDF link)
- (EasyEDA source file link)

## Intro

We're going to make a USB splitter. It'll have 1 USB-A on one side, and 2 USB-A ports on the other side. It can transmit power as well as data.

![](https://cloud-j8bxr01tm-hack-club-bot.vercel.app/1usb_hub_needed.png)

_If you want a USB hub, this is the tutorial for you!_

### Start a new project

Go to [EasyEDA](https://easyeda.com/editor) and create a new project (File > New > Project...). Name it `usb-hub`.

### Add the parts

For our design, we're going to need a USB-A connector that plugs into our computer. Click the `Libraries` button on the left toolbar, and search for `usb-a`.

![](https://cloud-mjv8qcmxc-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_12.12.42.png)

A bunch of options will show up with options like price, stock, and mounting type. You won't understand all the options yet & that's ok! I ended up using [part number `C404965`](https://www.lcsc.com/product-detail/USB-Connectors_SHOU-HAN-AM90_C404965.html). Once you select it, click the `Place` button to add the part to our project.

![](https://cloud-b1al1d09c-hack-club-bot.vercel.app/00screenshot_2023-08-08_at_12.20.04.png)

Yeah! You did it. Now let's add the other parts we'll need!

We'll need another USB-A connector, but this time a female connector for the devices we charge / plug in. Do another search for `usb-a`, but this time I used [part number `C46407`](https://www.lcsc.com/product-detail/USB-Connectors_Jing-Extension-of-the-Electronic-Co-903-131A1011D10100_C46407.html). This time, place 2 of them on the board.

Next up we need a main board to connect everything together. There are a bunch out there, but I ended up using the CoreChips SL2.1A with part number `C192893`.

Now that we've got a great big pile of parts in our sandbox, the next step is to connect them together!

### Connect it together

We've got a whole list of parts to hook up now. Let's start with the USB-A male connector to the CoreChips SL2.1A. But what do we need to wire together?

### <i><s>Connect it together</s></i> Read the spec!

Let's find the spec for the CoreChips SL2.1A. A spec is kinda like a README for a part. Every part has one, and it's a great place to start when you're trying to figure out how to use a part.

Go to [lcsc.com](https://lcsc.com) and search for `C192893`. Click on the part and scroll down to the `Datasheet` section. Click on the link to download the datasheet.

_Just in case, [here's a link to the spec sheet for the SL2.1A](https://cloud-fa5e1sjdd-hack-club-bot.vercel.app/01811151645_corechips-sl2-1a_c192893.pdf)._

Now let's open it up and just start reading through the table of contents to find where <i>whoops</i> wait it's all in Chinese.

![](https://cloud-961a0s7fx-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_19.05.22.png)

That's fine! Many specs are in other languages and guessing/translating is part of the skill! The important part is in here, the list of pins and what they do. It looks like this:

![](https://cloud-h587v4g5f-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_12.37.30.png)

Printed Circuit Board (PCB) part-makers really like to use acronymns, which are the same in every language! We can use the acronymns to figure out what the pins do. Here's a list of the ones we'll need:

- VDD5: 5V power (also called VCC or VBUS)
- GND: ground
- DP: data positive (also called D+)
- DM: data negative (also called D-)

Great, now we know what we need to do on the chip side, let's find the spec for the USB-A!

The part I chose also had a spec in chinese, but it's a common part so I found [this by googling "USB-A pinout spec"](https://components101.com/connectors/usb-type-a-male-connector). It's a bit different than our pin numbers, but the names are the same. The only difference is that our USB connectors want a grounded shield, so that means we'll connect ports 5 & 6 to `GND`.

### Connect it together, for real this time!

Move the parts around so they're facing eachother (you can rotate them with the `R` key), the go ahead and connect `GND` on the usb to `GND` on the chip.

![](https://cloud-ntdzh89kj-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_12.48.41.png)

Now you can connect `VCC` on the usb to `VDD5` on the chip. They aren't labelled the same thing, but `VCC` just means a voltage source, and USB-A is a 5V source.

Next up, connect `D+` on the usb to `DP` on the chip, and `D-` on the usb to `DM` on the chip.

![](https://cloud-72qwemi78-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_12.54.13.png)

Hmmmm, this is looking a little like a bowl of spaghetti. Let's clean it up with nets!

![](https://cloud-j8bxr01tm-hack-club-bot.vercel.app/2spaghetti.png)

#### Nets

Nets are a way to group together wires that are connected to eachother. They're a great way to make your schematic look cleaner and easier to read. Go ahead and remove the VCC & GND lines, then choose the GND net from the toolbar on the right.

![](https://cloud-m5x117vsl-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_12.56.40.png)

Connect the GND net to the GND pins on the USB-A and the CoreChips SL2.1A. See how clean that new wiring is?

![](https://cloud-7pzslk6qe-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_13.04.24.png)

Nets are kinda like portals– you can connect them from a distance as a way to keep from crossing your wires on your schematic. They're also good or connecting lots of things together– we're going to need to wire a lot of things to `GND` in a sec, and nets are a great way to do that.

Keep in mind though with nets, there are a lot of ways to write things. All the following are a way to say PIN 4 and PIN 5 are connected to `GND`:

![](https://cloud-4w251mwos-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_15.13.08.png)
![](https://cloud-4w251mwos-hack-club-bot.vercel.app/1screenshot_2023-08-08_at_15.13.16.png)
![](https://cloud-4w251mwos-hack-club-bot.vercel.app/2screenshot_2023-08-08_at_15.13.30.png)

To prevent mistakes, try to keep your nets looking like mine for this tutorial, but in general everyone has their own style and that's ok.

![](https://cloud-j8bxr01tm-hack-club-bot.vercel.app/0gnd_nets.png)

### Add the female USBs

Next up let's connect the other USB-A connectors!

I'll position my USB-A female ports and hook them up to the main chip's `DP` and `DM` pins. `DP1` goes to USB-1's `D+`. After getting the data lines wired, we'll connect the power using nets!

![](https://cloud-6cwv1d324-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_15.16.16.png)

_Remember, with nets you can connect from a distance!_

### Power surges

The design is almost complete, and in a perfect world it would work just fine. But we aren't in a perfect world- we live in a world with static electricty and power surges. We'll need to now protect our circuit. If we don't, we could fry our hub or even our computer's USB port!

Knowing where these protective components go can be an art and hotly debated on many stackoverflow forms. Fortunately, the spec sheets we're using contain some example circuits for us to use. Let's take a look at the CoreChips SL2.1A spec sheet again:

![](https://cloud-a1u1u3jnb-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_17.32.45.png)

_This is a little hard to see, so we'll go through it step by step. For now, just know we're getting the following instructions from reading this image & adapting it a little for our own design._

First up we'll add a diode to protect from a surge coming _from the laptop_. That's a case where the laptop sends too much power and goes beyond the 5V we want. The Schottky (pronounced "shot-key") diode with part number `C48192` is perfect or this. Let's drop it in right after we take on the 5V power from the USB-A male.

_Diodes can also ensure power flows in 1 direction, but we aren't using it for that property right now- we just want it to slightly resist the flow of electricity. If you google around for diodes, keep in mind most people are using it for a different reason than we are!_

Now let's protect from power surges that make it past the diode. We'll use a capacitor for this– it's kinda like a resevior for power. It can store up power and then release it when it's needed. If there's a power fluctuation, this capacitor will let the extra power blead out to `GND` harmlessly. We'll use a 10uF capacitor with part number `C19702`. Let's drop it in right after the diode, and connect it to `GND`.

![](https://cloud-e0ekzo8gw-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_17.37.55.png)

_When using a capacitor to prevent overflows like this it's called a "decoupling capacitor"._

Go ahead and use the same capacitors to protect the other USB-A ports. You can copy & paste the components, and then move them into place.

![](https://cloud-lr6vmvrrj-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_17.44.21.png)

### Unused ports

The SL2.1A chip we're using supports up to 4 USB ports, but we're making a smaller board for the tutorial so we won't be using the ports for "3" or "4". Go ahead and use the "no connection" tool to show in the schematic that these pins aren't being used.

![](https://cloud-4sab6gwqz-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_17.51.45.png)

All finished should have pins connected to some label or wire, even if it's just a "no connection" symbol. Your PCB will error if you try to send it to the manufacturer with any pins unlabeled.

![](https://cloud-me27qfpwb-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_17.51.54.png)

Next up are pins `VDD33` and `VDD18`. Sometimes components will have these to provide lower voltages for their internal circuitry. We don't need to worry about them for this design, so we'll just harmlessly bleed off the power to `GND` using a 10uF capacitor.

![](https://cloud-p9cf2w5jg-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_17.58.13.png)

Lastly, our chip provides clock circuitry through `XIN` and `XOUT` for advanced use if we wanted to overclock our USB ports. We aren't trying to do that, so we'll opt-out of it by connecting `XIN` to `GND` and marking `XOUT` as disconnected.

![](https://cloud-np517gxwl-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_18.02.06.png)

Now, let's check if all the pins are connected. Try converting the schematic to a PCB. If you see a warning pop up that means a net is missing or not connected. ![](https://cloud-dmskkj3bl-hack-club-bot.vercel.app/0screenshot_2023-08-08_at_18.36.08.png)

If all the schematic is connected you've done it!

![](https://cloud-4dr6xa7qz-hack-club-bot.vercel.app/0yay.gif)

Now let's move into the PCB editor to make our board.


Get started making your very first game with the Sprig game engine! Even if you're a beginner, you'll walk out of this jam with your very own game in the Gallery.


Getting familiar with designing PCBs + Make your own USB hub!

Build a USB Hub


Imagine a world where you have the power to shape the landscape and design your dream buildings. **Today, we'll dive into the fundamentals of 3D modeling by building our own sky islands and collaborate by merging them into a community sky village.**

Here's an example of what you will make:
![Individual demo](https://cloud-b1g9hwiu1-hack-club-bot.vercel.app/0image.png)
[Demo](https://app.spline.design/file/dd7decef-bf50-4ca5-bff5-d76ba64513c4)

And... here's an example of a sky village if you put multiple islands together!
![Group collab demo](https://cloud-8oi5u7dkg-hack-club-bot.vercel.app/0image.png)
[Demo](https://app.spline.design/file/652cf287-958a-4b01-a818-b6a09868f645)

So without further ado, let's get started!

## Getting started with Spline
1. Head over to [spline.design](https://spline.design) and create an account. Select "New File" to get started.
![Getting started - Step 1](https://cloud-cmkhxafch-hack-club-bot.vercel.app/1gettingstarted-1.png)

2. Play around with the UI and controls!
![Getting started - Step 2](https://cloud-cmkhxafch-hack-club-bot.vercel.app/0gettingstarted-2.png)
**Toolbar:** add shapes, select/view modes, and edit tools.
- Press “+” for more tools and objects to add to the scene.
- Press “▷” to access Play mode.  
**Left sidebar:** objects and layers in the scene.  
**Right sidebar:** property panels. Change properties of objects or the scene.

## Important controls 🕹️
<Grid cols={3}>
<GridItem>
**Orbit:** `alt`/`⌥` + `drag`
</GridItem>
<GridItem>
**Zoom:** `scroll`
</GridItem>
<GridItem>
**Pan:** `space` + `drag` OR `scroll wheel drag`
</GridItem>
</Grid>

## Creating your island 🏝️
Start thinking about what you want on your own island: your dream mansion on a mountaintop, a treehouse in the forest, an amusement park—the sky’s the limit!

> We’re going to start by building a basic house. Afterwards, you can transform it to make it your own!

<Dropdown title="1. Let's start by adding the ground.">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 1A](https://cloud-3klicbvir-hack-club-bot.vercel.app/9creatingisland-1a.gif)
</GridItem>
<GridItem>
Select (single-click) the square.
Rotate the square flat and change the size to 500x500.
- Rotation: X90
- Size: X500, Y500
</GridItem>

<GridItem>
![Creating your island - Step 1B](https://cloud-3klicbvir-hack-club-bot.vercel.app/8creatingisland-1b.gif)
</GridItem>
<GridItem>
Select (single-click) the square.
Extrude the square by 50 and add some roundness.
- Extrusion: 50
- Corner: 100
- Bevel: 16
- Bevel Sides: 6

<Comment githubUser="linkai101">
Keep in mind that you can always change these settings anytime as you add more structures and decorations!
</Comment>
</GridItem>
</Grid>
</Dropdown>

<Dropdown title="2. Create the base house model.">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 2A](https://cloud-3klicbvir-hack-club-bot.vercel.app/7creatingisland-2a.gif)
</GridItem>
<GridItem>
> We’ll start with the body of the house.

Press “+” in the toolbar, then “Cube”. Select the top of the base so it highlights red.
Adjust settings:
- Size: X200, Y200, Z200
- Corner: 0
- Position: X0, Y150, Z0
</GridItem>

<GridItem>
![Creating your island - Step 2B](https://cloud-3klicbvir-hack-club-bot.vercel.app/6creatingisland-2b.gif)
</GridItem>
<GridItem>
Select (single-click) the cube. Adjust settings:
- Click “Smooth & Edit”
- Subdivision Modifier > Level: 0

<Comment githubUser="linkai101">
**Editing mode** is accessed when double-clicking on an object. This allows you to modify vertices, edges, faces, and more! Getting the hang of it?
</Comment>

Double-click the cube.
In the toolbar, select the `Loop Cut (C)` tool. Make a vertical subdivision.
In the toolbar, select the `Vertex (V)` select tool.
- Select the 4 vertices of the top face (shift + drag)
- Drag the vertices down to form an angled roof shape.
</GridItem>

<GridItem>
![Creating your island - Step 2C](https://cloud-3klicbvir-hack-club-bot.vercel.app/5creatingisland-2c.gif)
</GridItem>
<GridItem>
> Now, let’s make the roof.

Duplicate the cube and drag the copy up.
- `Ctrl`/`⌘`+`D` OR right-click > Duplicate

In the toolbar, select the `Vertex (V)` select tool.

- Arrange the vertices to form a roof.  
Exit (”X”) out and drag the roof down. Repeat the above steps until the roof sits flush on the house.
</GridItem>

<GridItem>
![Creating your island - Step 2D](https://cloud-3klicbvir-hack-club-bot.vercel.app/4creatingisland-2d.gif)
</GridItem>
<GridItem>
> Let’s add some roundness to the roof.

Select (single-click) the roof. Adjust settings:
- Subdivision Modifier > Level: 2
In the toolbar, select the `Loop Cut (C)` tool.
- Add subdivisions throughout to shape the roof.

<Comment githubUser="linkai101">
**Subdivisions** act as anchors in the shape for where the edges get rounded. Add and move the subdivisions to see how they affect the rounding!
</Comment>
</GridItem>

<GridItem>
![Creating your island - Step 2E](https://cloud-3klicbvir-hack-club-bot.vercel.app/3creatingisland-2e.gif)
</GridItem>
<GridItem>
> Now some roundness for the walls.

Repeat the above steps on the body.
</GridItem>
</Grid>
</Dropdown>

<Dropdown title="3. Add colors!">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 3A](https://cloud-3klicbvir-hack-club-bot.vercel.app/2creatingisland-3a.gif)
</GridItem>
<GridItem>
> Our scene desperately needs a makeover. Let’s start with the background!

Click the background to deselect all objects. Adjust scene settings:
- Frame > BG Color: any color you want!
</GridItem>

<GridItem>
![Creating your island - Step 3B](https://cloud-3klicbvir-hack-club-bot.vercel.app/1creatingisland-3b.gif)
</GridItem>
<GridItem>
<Comment githubUser="linkai101">
The **Depth** material type creates a gradient of color along an axis. In "Ramp", you can adjust and add the color stops. Try it out!
</Comment>

> Now, let’s make the ground look like grass and dirt.

Select (single-click) the ground. Adjust settings:
- Material > <strike>Color</strike> Depth
- Type: Linear
- Direction: X0 Y0 Z1

Adjust the start and end positions of the depth layer.
In “Ramp”, select colors for dirt and grass and adjust their positions.
</GridItem>

<GridItem>
![Creating your island - Step 3C](https://cloud-3klicbvir-hack-club-bot.vercel.app/0creatingisland-3c.gif)
</GridItem>
<GridItem>
Repeat for the walls and the roof. Make it your own!
</GridItem>
</Grid>
</Dropdown>

<Dropdown title="4. Add doors, windows, and doorknobs.">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 4](https://cloud-kv6txjh6s-hack-club-bot.vercel.app/4creatingisland-4.png)
</GridItem>
<GridItem>
> You’re on your own for this one. You got this!

In the toolbar, use the `Rectangle (R)` and `Ellipse (O)` tools to draw doors and windows on the house.
Add rounding and color to them as well.
> 💡 **Hint:** To add rounding to specific corners, click the "⛶” icon in Shape > Corner.
</GridItem>
</Grid>
</Dropdown>

<Dropdown title="5. Add trees.">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 5](https://cloud-kv6txjh6s-hack-club-bot.vercel.app/3creatingisland-5.png)
</GridItem>
<GridItem>
> You’re on your own for this one. You got this!

In the toolbar, add cubes and cylinders with the “+” icon to form trees.
Add rounding and color to them as well. Try using a Depth material for a gradient effect.
</GridItem>
</Grid>
</Dropdown>

<Dropdown title="6. Add shadows influenced by surrounding color.">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 6](https://cloud-kv6txjh6s-hack-club-bot.vercel.app/2creatingisland-6.gif)
</GridItem>
<GridItem>
> Let’s add a green glow effect coming from the trees!

<Comment githubUser="linkai101">
Materials can consist of multiple layers! See how the **Depth** layer adds a green glow to the house illuminating from the tree.
</Comment>

Select (left-click) the body of the house. In Material:
- Click the “+” icon to add a new layer.
- Select <strike>Color</strike> Depth

Drag the origin of the layer to the tree and adjust the end position.
- In “Ramp”, set the left slider to the tree color and the right slider to white.
- Click the icon in “Depth” that looks like two overlapping circles, and select “Multiply”

> Repeat this for the other tree.
</GridItem>
</Grid>
</Dropdown>

<Dropdown title="7. Build a stone path to the door.">
<Grid cols={2}>
<GridItem>
![Creating your island - Step 7](https://cloud-kv6txjh6s-hack-club-bot.vercel.app/1creatingisland-7.gif)
</GridItem>
<GridItem>
> Let’s build a stone path towards the door!

In the toolbar, select the `Vector` tool. Draw the vertices to form a stone step. Adjust settings:
- Corner: 8
- Extrusion: 2
- Position: Y50
- Bevel: 1
- Material > Color: any color you want!
> Repeat this for the rest of the stones in the path.
</GridItem>
</Grid>
</Dropdown>

## Optional activity: making assets! 📦
If you're working in a group and have extra time, this could be really fun to spice up the collaboration: making custom assets to use in each of your islands!
### The Task
Each person will create a single asset from scratch—it could be anything from a funny-looking lawn chair to a giant Among Us crewmate statue! The assets that everyone makes will be available for others to use to customize their islands in the following steps.

## Customizing your island 🎀
Now you know the basics of Spline, **it's time to start making the island your own**. Transform this basic house into your dream mansion, expand your island with more structures, or start from scratch to build something unique!

> Here are some ideas for what to make:
> - A park
> - A town in the wild west
> - Your dream house or resort
> - A space station
> - Recreate a building from your favorite movie or video game
> - Your school/the building you’re currently in

### Spline’s asset library
Spline has a ***huge*** library of 3D models and scenes for you to use in your project! Sprinkle little details into your island or add full building prefabs to form towns and parks.

![Spline's asset library](https://cloud-kv6txjh6s-hack-club-bot.vercel.app/0splinelibrary.png)

## Build a collaborative sky village by linking islands 🌉
Collaboration is one of the most fun and fulfilling aspects of design and making, and Spline makes it super easy! If you're working with a group or wanna collab with a few friends, let's build a sky village!

<Comment githubUser="linkai101">
Note: Spline's free tier currently only has 2 additional editor seats. (file owner + 2 other editors) You could still make it work if everyone sends their islands to the leader(s) who links them together.
</Comment>

1. Have the club/group leader create a new file on Spline. Share the file with the rest of the group with editing privileges.
![Linking islands - Step 1](https://cloud-mn9anfpic-hack-club-bot.vercel.app/0image.png)

2. Copy and paste each island into this master file. Connect them with bridges in the asset library or find your own creative way to link the islands!
![Group collab demo](https://cloud-8oi5u7dkg-hack-club-bot.vercel.app/0image.png)

## What's next 🔮
3D modeling literally has limitless possibilities. Here are a few:
- Visualize and manipulate 3D models on in HTML with [three.js](https://threejs.org/)
- 3D printing and inventing
- Use them in Unity, Unreal Engine, or other 3D game development applications
- Augmented/visual reality (AR/VR)
- Just for fun or for the sake of art—create and showcase a portfolio!

I wonder what you'll build next with 3D! 😁

### Exporting
Often in big projects like making 3D games and websites, 3D modeling is only one side of the story. You'll eventually need to export them into another app, and here's how you do it:

<Comment githubUser="linkai101">
Keep in mind that some export options are only available to the paid tiers. 😐 You should be able to get by though!
</Comment>

1. In the toolbar, click on "Export". There will be options on the left-hand side for various file formats to export to.
![Exporting](https://cloud-ctimzr33x-hack-club-bot.vercel.app/0image.png)

### Jams to do next
> Looking for more 3D jams? I gotchu!

**[Mastering the Matrix: Crafting Your Own Web-based AR App](/jam/WebAR-Wonderland)**  
Deploy your 3D models into the metaverse! Learn how to make a web-based AR app in which you can display and manipulate your 3D models from Spline.

**[Crafting Weapons, Shields, and Armor in TinkerCAD](/batch/3d-armory)**  
TinkerCAD is a great web-based beginner CAD software. Computer aided design (CAD) is often used for designing 3D models for engineering purposes!

In this jam, you'll create your very own virtual sky village with Spline, a web-based 3D modeling software.


Build your own 3D club village

This Jam will teach you how to use ChatGPT and AI to create a trip itinerary planner. It is extremely customizable and gives a foundation for you to expand upon with your own ideas!


Make an AI Trip Planner for a Club Adventure


Contributors: [@wollygfx](https://github.com/wollygfx "View @wollygfx on GitHub")
Edited by: [@zsh](https://read.cv/zoyashussain)
Time: 45-50 minutes, Beginner 
****
> It's time to start modelling! In this Jam, we'll be developing 3D models with the JavaScript library [Zdog](https://zzz.dog/#made-with-zdog). You ready? Let's go!

## Outline:
1. **Goal-setting**: Explore what we'll be doing in this workshop, and examples of 3D models _you (yes,_ you!) can create.
2. **Set-Up**: Follow as we walk through the steps of setting up your coding environment to write code in HTML and JS.
3. **HTML Part**: Write the HTML to prepare for creating models in JS.
4. **JS Part**: Learn how to create shapes with Zdog and JS with a combination of code, mathematics, and art 👀
5. **Additional Challenges**: Once you've nailed down the basics of 3D modeling with JS, check out some challenges to spice up your project 🌶️

At the end of this workshop, you will be able to make 3D models like these:
![examples](https://cloud-5a0ya05fk.vercel.app/0large.gif)

Here's a [live demo](https://repl.it/@wollygfx/Hack-Club-logo) of what we will make, you can also find the final code there.

![Hack Club 3D logo](https://cloud-590c1rr82.vercel.app/0screen_recording_2020-10-21_at_7.00.53_am.gif)

## Set Up
This workshop requires a very basic knowledge of the following languages: HTML & JS. Don’t worry if you get stuck at some point in the workshop, everything is explained the best way for you to understand!

For this workshop we will use [Repl.it](https://repl.it), click [here](https://repl.it/languages/html) to create a coding environment right for this workshop.

![Setup](https://cloud-qbmylslty.vercel.app/0image.png)

## HTML part

Awesome, now you've got everything set up to begin coding! Now, let's begin with HTML.

First, we want to create inside of the `<body>` tag a `<canvas>` in which, the 3D model we are going to create will render. Then, put a class; feel free to name it as however you want to… I will name it with the class `model`.

```html
<canvas class="model"></canvas>
```

Now we have to put the following code inside of the `<body>` tag, this code allows us to use the Zdog library without having to download it. Learn about CDN [here](https://en.wikipedia.org/wiki/Content_delivery_network).

```html
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
```

In the end, your code should look something like this:

```html
<body>
  <canvas class="model"></canvas>
  <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
  <script src="script.js"></script>
</body>
```

_Note: It’s very important to keep this order to make sure everything works perfectly_

## JS part
Now that we have our HTML file ready to go, we gotta work on our JavaScript file.

![Cool gif](https://cloud-p49mi1lgl.vercel.app/0tumblr_e49d74c805eec46704d22c1da59ecded_cc93a056_500.gif)

### Setting up the canvas
We are going to start with the fun part. First, let’s create the main variable and let’s give it a name. Feel free to give your variables [any name](https://sentry.io/answers/naming-variables-in-javascript/). For this tutorial, I'll use “ws”.

```javascript
const ws = new Zdog.Illustration({
  element: '.model',
  resize: 'fullscreen',
})
```

Let's break this down:
1. **Illustration** is the top-level class that handles dealing with the `<canvas>` element, holding all the shapes in the scene, and displaying those shapes in the element
2. **element** we use this element to match the render with the canvas tag
3. **resize** is used to modify the size in which the model will be rendered, in this case, the 3D model will render on the whole screen. If you want to, you can remove this element

At this point nothing shows up yet, so let’s create our first 3D model. 

### Creating the model
Now, we’re gonna create a shape, for this workshop I want to make a simple cube, but you can create whatever you want to. Here is a list of [shapes](https://zzz.dog/shapes) you can create with Zdog.

_Note: Every shape has its own properties or elements, you can check [the full list here](https://zzz.dog/shapes)._

Let’s add the following code to our JS file:

```javascript
new Zdog.Box({
  addTo: ws,
  width: 100,
  height: 100,
  depth: 100,
  stroke: false,
  leftFace: '#da0',
  rightFace: '#e62',
  topFace: '#ed0',
  bottomFace: '#636',
})
```

Explanation:
1. Box is a shape class, you can replace this for the shape you want to use…
2. We made the 3D model (cube) a child to the main Zdog Illustration (ws) using the addTo element. This element must be there, otherwise the 3D model will not render.
3. The width, height and depth elements can either stretch or shrink the shape of your box:
    - Width: Sets the width of the cube
    - Height: Sets the height of the cube
    - Depth: Sets the depth of the cube. If the value is 0, the cube will render as a 2d square; so make sure to give it a value.

4. The Stroke element gives the 3D model a stroke, it works as an external layer that you can use to give your 3D model a rounded look. Play around with it!
5. leftFace, rightFace, topFace & bottomFace elements give color to each face of the 3D model, try using different colors for each face, so that you can appreciate way better the animations you make.

### Rendering
Now that we have created our 3D model, let’s render it. Use the following line of code to render the cube we just created.

```javascript
ws.updateRenderGraph()
```

This code updates and render your Zdog illustration that was declared in the first variable, so make sure to write the correct name in.

Now let's click on the **Run** button to see what happens…

![Render image](https://cloud-k11ck8g2n.vercel.app/0image.png)

Congrats, you just made your first 3D model… Yeah, maybe not what you were expecting. Let’s fix this by animating it.

![woah gif](https://cloud-kr2lyxjbx.vercel.app/0woah.gif)

### Animating it
Add the following code to our JS file:

```javascript
function animateModel() {
  ws.rotate.y += 0.01
  ws.rotate.x += 0.01
  ws.updateRenderGraph()
  requestAnimationFrame(animateModel)
}

animateModel()
```

Explanation:
1. We just created a function that will make the 3D model rotate, you can name this function to whatever you want.
2. `rotate.x` and `rotate.y` set’s the velocity to the rotation of the model:
    - The cube will move up and down depending on the given value (- or +, respectively)
    - The cube will move to the right and to the left depending on the given value (- or +, respectively)

3. `ws.updateRenderGraph()` updates and render your Zdog illustration that was declared in the first variable, make sure to write the correct name in.
4. `requestAnimationFrame(animatemodel)` this is like a loop, basically it makes the model rotates every time by creating frames.
5. `animateModel()` calls the function.

Now you can click on run again!

![Animated model](https://cloud-djkuut7y4.vercel.app/0screen_recording_2020-10-03_at_7.31.47_pm.gif)

Amazing, huh?

![Amazing gif](https://cloud-hrs0t8jeh.vercel.app/0tenor.gif)

Now, go ahead and experiment with the other shapes offered by Zdog (spheres, cylinders, cones, or even custom shapes) and explore the possibilities for creating your own unique 3D models!

### Multiple Shapes
If you want to try and make more complex models you will need to use multiple shapes, [here](https://zzz.dog/#made-with-zdog) are some examples of what you can create:

![examples](https://cloud-2jaw6a14x.vercel.app/0image.png)

Making multiple shapes is very easy, it’s as simple as putting multiple shapes together until you get what you want. The hardest part of this is to put everything where it must be, we can do this using the property: “translate”. 

You can use this property by creating your own complex illustration, which explores hierarchical structures, grouping shapes, and experimenting with positioning and transformations. We'll see how this works when creating a Hack Club logo! Click [here](https://repl.it/@wollygfx/Hack-Club-logo) to see the final code.

First, let's change the class of our canvas in the `index.html` file from `model` to `hackclub`.

```html
...
<canvas class="hackclub"></canvas>
...
```

And add a background color for our project in the `style.css` file. You can choose any color for the background of your 3D model using [a library of hex codes](https://www.color-hex.com/).

```css
.hackclub {
  background: #FDB;
}
```

After that, let's go back to the `script.js` file and change the `element` selected by Zdog from `.template` to `.hackclub` and add the `dragRotate` property with the value set to `true` so we can rotate our creation.

```js
const ws = new Zdog.Illustration({
  element: '.hackclub',
  resize: 'fullscreen',
  dragRotate: true
})
```

Next, let's change the properties of our cube so that it turns into a square:

```javascript
new Zdog.Box({
  addTo: ws,
  width: 100,
  height: 100,
  color: '#ec3750',
  stroke: 20,
  translate: { z: -18 },
})
```

1. As seen before, the `addTo` property puts the made shape inside of the main Zdog Illustration.
2. Used the width and height properties to make a perfect square, i didn't give it a depth because it was not needed.
3. The whole square will have the same color (red), so we can use the color property to give the whole shape a single color instead of assigning a color to each face.
4. As mentioned before, the stroke property helps the shape to look a little rounded.
5. The translate property moves the square -18 within the z-axis. You can interpret this as if you were giving a shape a depth, so the shape is moved backwards.

Now I will create the letter 'H', so I'm gonna need 3 more boxes:

```javascript
new Zdog.Box({
  addTo: ws,
  depth: 20,
  width: 20,
  height: 80,
  color: '#fff',
  translate: { z: 18, x: -20 },
})
```

- This time, the shape is moved forward… This creates an space between the red square and this new shape.
- The shape is moved to the left within the x-axis

![result 1](https://cloud-kg0xtr3hs.vercel.app/0image.png)

```javascript
new Zdog.Box({
  addTo: ws,
  depth: 20,
  width: 20,
  height: 40,
  color: '#fff',
  translate: { z: 18, y: 20, x: 20 },
})
```

- This time, we created a new box but way smaller.
- We moved it to the right within x-axis and a little bit down within the y-axis.

![result 2](https://cloud-1nisp19i8.vercel.app/0image.png)

```javascript
new Zdog.Box({
  addTo: ws,
  depth: 20,
  width: 40,
  height: 20,
  color: '#fff',
  translate: { z: 18, x: 10 },
})
```

In this last one, all we had to do was to move the box to the right within the x-axis, so that it blends with the box in the right.

![result 3](https://cloud-m2gpkvlqa.vercel.app/0image.png)

Now let's update the animation function with some simple properties:

```javascript
function animateModel() {
  ws.rotate.y += 0.01
  ws.updateRenderGraph()
  requestAnimationFrame(animateModel)
}

animateModel()
```

Here's the final result:

![final result](https://cloud-d9lxnrldx.vercel.app/0screen_recording_2020-10-09_at_12.05.02_pm.gif)

### Level up
Congratulations! You just learned the basics of Zdog, feel free to check the resources below to improve your knowledge...

![Congrats gif](https://cloud-d0aqa4icc.vercel.app/0bec38a05d56ac6ae2d9dec2f482ebff9.gif)

Make your own 3D Model and share it in the [Hack Club Slack](https://hackclub.slack.com), I would love to see what you can create using what you've learned in this workshop!

Now that you know the basics, you may be wondering where to go from here. Well, look no further, I've left a list of challenges for you to spice up your project and become a 3D modeling expert!

🌶️ __MILD:__
- Interactive Animation:
	- Research Zdog's event handlers, such as 'onDrag' or 'onClick', to capture user input.
	- Use event listers to detect mouse or touch events and modify properties of your 3D model accordingly.
	- Look through Zdog's GitHub repository and CodePen to see examples of interactive Zdog projects.
- Creating Complex Compositions
	- Plan out your compositions in advance with a pen/paper or digital design tool (I recommend Procreate or Krita).
	- Experiment with positioning, rotation, and scaling properties until you reach your desired outcome.
	- Review Zdog's group property and explore ways to use it for managing multiple shapes together.

🌶️ 🌶️ __MEDIUM:__
- Camera Movement:
	- Look at Zdog examples and tutorials that showcase camera manipulation to learn different approaches and techniques.
- Lighting and Shading: 
	- Research libraries and frameworks with advanced rendering capabilities, such as [Three.js](https://threejs.org/) or [Babylon.js](https://www.babylonjs.com/), which offer support for materials, textures, and opacity.transparency effects in 3D rendering.
	- You can also achieve the effect of different opacities by experimenting with color theory, changing the colors of surfaces and the backdrop, and more!

🌶️ 🌶️ 🌶️ __HOT:__
- Advanced Interactions:
	- Create advanced interactions by using libraries and frameworks in tandem with Zdog.
		- [React.js](https://react.dev/) and [Vue.js](https://vuejs.org/), which are used for creating user interfaces, can be used to create complex and interactive scenes using event handling and component lifecycle management 
		- Interactive SVG libraries like [Snap.svg](http://snapsvg.io/), or Canvas libraries like [Paper.js](http://paperjs.org/about/) can create complex interactions, animations, and event handling capabilities.


### Other examples
Check out these cool 3D models made by other people:

- [Live digital clock made using Zdog](https://codepen.io/jh3y/pen/vqYLKd)
- [Amethyst from Steven Universe made using Zdog](https://codepen.io/Metahari/pen/dEQMBy)
- [Octocat made using Zdog](https://codepen.io/defunty/pen/vwwjPL)

### Resources
- [Zdog website](https://zzz.dog)
- [Made with Zdog](https://codepen.io/collection/DzdGMe/?cursor=ZD0xJm89MSZwPTEmdj0z)
- [Text plugin for Zdog](https://jaames.github.io/zfont/)
- [Plotting data with Zdogs](https://observablehq.com/@zechasault/images-drawn-with-zdogs)

Create Your Own Animated 3D Model


At the end of this jam, we'll create a social media app that handles users and posts.
We'll be using [Firebase](https://firebase.google.com) SDKs to help us with user authentication and data storage.

Here's a demo of something you could build:
![Demo](https://cloud-aspwulevx-hack-club-bot.vercel.app/0document.png)

[Link To Live Demo](https://demo.jaden.mov)

<Dropdown title="Leader notes">

This jam is more suited toward a collaborative environment, so try to divide jammers into teams. One group could focus on designing the app, another could focus on the front-end, and another could focus on the back-end.

</Dropdown>


#### Pre-requisites

Ideally, you have a basic understanding of HTML, CSS, and JavaScript, but if this is your first jam, feel free to ask for help!

## Brainstorming

<Dropdown title="Brain Fact!">
The human brain weighs 3 pounds
</Dropdown>
The foundation of any social media app is creating and loading some sort of post. Think of any popular social media (Instagram, Reddit, YouTube, or even a recipe app). Share your ideas with the club!

## Setting up

Please fork/clone [this Repl.it boilerplate](https://replit.com/@JadenHou1/JAM) to get started! We'll go over the files in a sec.

```
index.html
login.html
```

These are the two pages we'll be using for our app. `index.html` is the home page where we'll load all the posts and login, and `create.html` is the page where users can create posts.

On each page, we have a basic HTML boilerplate with script and style tags. Conventionally, you'd have these in other files and link them to the HTML file, but for simplicity, we'll just keep them in the same file.

### Creating a Firebase account

Head over to [Firebase Console](https://console.firebase.google.com/u/0/) and log in with Google. Once you're in, create a new project and name it whatever you want.

Then, click and enable `Authentication` and `Firestore Database`.
![Console](https://cloud-5uj5nkwmd-hack-club-bot.vercel.app/0image-1.png)

**Authentication**

1. Click `Get Started`
2. Click `Sign-in method` and enable `Google`
3. Enable and save

**Firestore**

<Dropdown title="Shark Fact!">
Sharks...do not have bones
</Dropdown>

1. Click `Start in test mode`
2. Click `Next` and choose `nam5` as the location

### Creating an app in Firebase

![Console](https://cloud-aal2o35z9-hack-club-bot.vercel.app/0image-3.png)

1. Click the `</>` icon
2. Name your app anything
3. Click `Use a <script> tag`
4. Keep this code snippet on hand, we'll need it later

Here is what the code snippet looks like and what each line does:

```html
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js"; // imports the initializeApp function from the Firebase SDK
    const firebaseConfig = {
        apiKey: "AIzaSyBdD6AmLOxx0b7MPc9FggPMYpttLq-XEE4",
        authDomain: "jammer-7b6da.firebaseapp.com",
        projectId: "jammer-7b6da",
        storageBucket: "jammer-7b6da.appspot.com",
        messagingSenderId: "789182152948",
        appId: "1:789182152948:web:380ac8c7beb26882569ea1",
    }; // specific details unique to your web app. this lets Firebase know that you want to access your services and not someone else's
    const app = initializeApp(firebaseConfig); // load the Firebase app
</script>
```

> Use your own code snippet! This code snippet won't work for you.

## Logging in

![Logs](https://cloud-aal2o35z9-hack-club-bot.vercel.app/1image-4.png)

Head over to `index.html`. Firebase makes it super easy to add user authentication to your app. We'll be using Google Sign-In, but you can use any of the other methods Firebase provides.

First, create a button with `Sign in with Google`. We'll use the id `login` to add an event listener.

```html
<button id="login">Sign in with Google</button>
```

Firebase gives us a really useful `signInWithPopup` and `GoogleAuthProvider` to handle user authentication.

First, add your **Firebase code snippet** from before to the script tag.

Then, import these Firebase functions. This lets us use pre-written functions in our code. Specifically, we want to use `getAuth` to load the authentication, `signInWithPopup` to prompt the user with a popup to log in, and `GoogleAuthProvider` to tell Firebase that we want to use Google.

```js
import {
    getAuth,
    signInWithPopup,
    GoogleAuthProvider,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
```

Initialize `getAuth` and the `GoogleAuthProvider`.

```js
const auth = getAuth();
const provider = new GoogleAuthProvider();
```

Now, we can add an event listener to the `login` button. Try making it so when the user clicks the button, we call `signInWithPopup`.


<Dropdown title="Solution!">

```js
document.getElementById("login").addEventListener("click", () => {
    signInWithPopup(auth, provider).then(() => {
        window.location.replace("/"); // redirect to home page after logged in
    });
});
```

</Dropdown>

<Dropdown title="Your HTML Body should look something like this when finished.">

```html
<button id="login">Sign in with Google</button>
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
    import {
        getAuth,
        signInWithPopup,
        GoogleAuthProvider,
    } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
    const firebaseConfig = {
        apiKey: "AIzaSyBdD6AmLOxx0b7MPc9FggPMYpttLq-XEE4",
        authDomain: "jammer-7b6da.firebaseapp.com",
        projectId: "jammer-7b6da",
        storageBucket: "jammer-7b6da.appspot.com",
        messagingSenderId: "789182152948",
        appId: "1:789182152948:web:380ac8c7beb26882569ea1",
    };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth();
    const provider = new GoogleAuthProvider();

    const login = document.getElementById("login");
    login.addEventListener("click", () => {
        signInWithPopup(auth, provider).then(() =>
            window.location.replace("/")
        );
    });
</script>
```

</Dropdown>

![Login button](https://cloud-aal2o35z9-hack-club-bot.vercel.app/7image-5.png)
Test it out! You should receive a prompt to login. <small>[Need help?](https://firebase.google.com/docs/auth/web/google-signin)</small>

## Creating a post

![Alt text](https://cloud-aal2o35z9-hack-club-bot.vercel.app/3image-7.png)

<Dropdown title="Whale Fact!">
Whales can get SUNBURNS
</Dropdown>

Head over to `create.html`. This is where we'll let users create posts. I'll have to leave these fields up to you, but I'll give you a starting point. Please add fields that are relevant to your idea!

**From now on, your code will depend on the idea you came up with.** For me, I'm going with your average dog personality-sharing app.

First, create a form for users to enter their information.

```html
<form id="form">
    <input id="name" type="text" placeholder="Name" />
    <input id="description" type="text" placeholder="Description" />
    <button type="submit">Submit</button>
</form>
```

> The fields `name` and `description` can be anything you want. Add fields that make sense for your app! For example, a recipe app may have an estimated time to make, and a club directory app may have meeting times.

This is just a basic form with 2 inputs and a submit button. Adding IDs to each input allows us to access the values on submit. Adding an ID to the form allows us to add an event listener to it.

To add these fields to the database, we have to import some new packages! First, add the **Firebase code snippet** from before to the `<script>`. Then, import both the **authentication functions from before** and the `getFirestore`, `setDoc`, and `doc` functions from **Firestore** as following.

```js
import {
    getAuth,
    signInWithPopup,
    GoogleAuthProvider,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
import {
    getFirestore,
    addDoc,
    doc,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";
```

Importing `getFirestore`, `addDoc`, and `doc` allows us to load Firestore, add documents to the database, and reference a document in the database, respectively.

Load each package.

```js
const auth = getAuth();
const db = getFirestore();
```

Then, access the form element, and add an event listener to listen for form submissions.

```js
form.addEventListener("submit", (e) => {
    e.preventDefault();
});
```

By default, forms will refresh the page on submit. We don't want this because we won't be able to execute code if the page is refreshing, so we'll add `e.preventDefault()` to prevent the page from refreshing.

We don't want just anyone to add posts, just users! So, we'll add a check to see if the user is logged in. If they are, we'll add the post to the database. If not, we'll alert them to log in.

Add the following after the `e.preventDefault()`.

If I can get the current user by using `auth.currentUser`, how would I check if there is no current user?

<Dropdown title="Solution!">

```js
const currentUser = auth.currentUser;
if (!currentUser) {
    alert("Please login first");
    return;
}
```

</Dropdown>

`auth.currentUser` lets us access the current user. If there is no current user, the variable will be `null`, so we can alert the user and not add anything. `return` will stop the function from executing any more code.

Then, create a collection in Firestore. A collection holds all your documents. It's like a bucket for all your data.
![Alt text](https://cloud-aal2o35z9-hack-club-bot.vercel.app/4image-8.png)
![Alt text](https://cloud-aal2o35z9-hack-club-bot.vercel.app/5image-9.png)

> Choose a collection name that makes sense for your app! It doesn't have to be posts if that doesn't make sense. Maybe something like `recipes` or `clubs` would make more sense for your idea

When you're prompted to create the first document, add sample data for the fields you've already created above. You can just click auto-ID for the document ID.
_For example, in my case I'll add `name` and `description`._
![Alt text](https://cloud-aal2o35z9-hack-club-bot.vercel.app/6image-10.png)

Now, we can access the values of each input and add them to the database. We'll use `addDoc` to add a document to the database. `addDoc` takes in 2 parameters: the reference to the collection and the data to add. We'll use `collection` to reference the collection we want to add to, `name.value` to get the value of the first input, and `description.value` to get the value of the second input. We can also use `currentUser.displayName` to grab the name of the author to display.

```js
const form = document.getElementById("form");
const name = document.getElementById("name");
const description = document.getElementById("description");
addDoc(collection(db, "posts"), {
    name: name.value,
    description: description.value,
    author: currentUser.displayName,
});
```

> Your `name` and `description` variables will vary based on the fields you set. Be sure to change them to match this format: `const <field> = document.getElementById("<field>")`. Also, the key/values in the data we're adding will vary.

Finally, we'll let the user know that they've successfully submitted a post.

```js
alert("Successfully submitted post!");
```

<Dropdown title="Your HTML Body should look something like this when finished.">

```html
<form id="form">
    <input id="name" type="text" placeholder="Name" />
    <input id="description" type="text" placeholder="Description" />
    <button type="submit">Submit</button>
</form>
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
    import {
        getAuth,
        signInWithPopup,
        GoogleAuthProvider,
    } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
    import {
        getFirestore,
        addDoc,
        collection,
    } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";
    const firebaseConfig = {
        apiKey: "AIzaSyBdD6AmLOxx0b7MPc9FggPMYpttLq-XEE4",
        authDomain: "jammer-7b6da.firebaseapp.com",
        projectId: "jammer-7b6da",
        storageBucket: "jammer-7b6da.appspot.com",
        messagingSenderId: "789182152948",
        appId: "1:789182152948:web:380ac8c7beb26882569ea1",
    };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth();
    const db = getFirestore();
    const form = document.getElementById("form");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        const currentUser = auth.currentUser;
        if (!currentUser) {
            alert("Please login first");
            return;
        }
        const name = document.getElementById("name").value;
        const description = document.getElementById("description").value;
        addDoc(collection(db, "posts"), {
            name: name,
            description: description,
            author: currentUser.displayName,
        });
        alert("Successfully submitted post!");
    });
</script>
```

</Dropdown>

## Loading posts

This is where it gets good. We'll be loading posts from the database and displaying them on the home page. Head over to `index.html`.

> I'll leave this implementation up to you, but I'll give you some steps to get started.

After the code from the login, import the Firestore from before into the file.

```js
// snippet

import {
    getFirestore,
    getDocs,
    collection,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";
const db = getFirestore();
```

To create an element for each post, we'll need to get each post and run a function for each. We'll need `getDocs`. `getDocs` returns a [Promise](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises#async_and_await), and we can use `await` to turn that into a value, but we won't get into that in this jam (think of it as a black box).

Here's an example of how to use `getDocs` to get all the posts.

```js
const posts = await getDocs(collection(db, "posts"));
```

Now, we can use [`.forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) to [create elements](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement).

<Dropdown title="Solution!">

```js
const db = getFirestore();
const div = document.getElementById("div");
const posts = await getDocs(collection(db, "posts"));
posts.forEach((doc) => {
    const element = document.createElement("div");
    const name = document.createElement("h1");
    name.innerText =
        doc.data().name +
        " • " +
        doc.data().author;
    element.appendChild(name);
    const description = document.createElement("p");
    idea.innerText = doc.data().description;
    element.appendChild(idea);
    div.appendChild(element);
});
```

> Your code will look different depending on your fields

</Dropdown>

That's it! Now you have a working social media app. It's your job to add CSS, more fields, and more features to make it your own.

## Not-so-full list of customizations
 - Change the styling
 - Change how posts are loaded
 - Change fields
 - Add cosmetic elements


At the end of this jam, you'll create your very own social media app that handles users and posts.


Building Your Own Social Media w/ 🔥 Firebase 🏰


Converting words to colors is a difficult concept to wrap your head around when you first think about it, but that’s exactly what you’re going to do in this workshop. In just 20 lines of code, you’re going to build a website that allows you to type all over the screen and watch the color of your screen change based on the number of verbs, nouns, adjectives, and adverbs in the text.

[**Link to demo**](https://colorful-grammar.techbug2012.repl.co/)
[**Link to demo code**](https://repl.it/@TechBug2012/colorful-grammar)

## Getting started

Create a new Repl.it project at [replit.com/languages/html](https://replit.com/languages/html).

To make things a little easier for us, we’re going to be using [jQuery](https://jquery.com/), a popular JavaScript library that simplifies writing certain common JavaScript tasks. You’ll get to see how jQuery can be really useful throughout this workshop.

We’re also going to use [WordPOS](https://github.com/moos/wordpos), a cool dictionary library that identifies the grammar type of a given word (e.g. noun, verb, etc).

Let’s start by importing these two libraries. Just before the end of the `<head>` tag of your `index.html` file, add these two lines:

```html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wordpos-web@1.0.2/dist/wordpos.min.js"></script>
```
## Typing on the screen

Great! Now that we’ve imported the libraries we need to make our website, it’s time to write some code.

In order to use our entire screen as our canvas for writing, we need to create a `<textarea>` in our HTML file and use CSS to make it fill the entire screen.

In the `<body>` of your `index.html` file, under the line where `script.js` is imported, add this line:

```html
<textarea id="sentence" autofocus></textarea>
```

This creates a [textarea](https://www.w3schools.com/tags/tag_textarea.asp) element with the id “sentence”, and automatically focuses on it so that you don’t have to click on it to start typing. If you run your repl, you’ll see this textarea in the top left corner.

In order to be able to use this textarea as our writing canvas, we’ll need to do some CSS work. Namely:

1. Remove the white background
2. Remove the blue outline around the edges
3. Remove the black border around the edges
4. Make it fill the entire screen without overflowing

Start by adding

```css
textarea {
}
```

to your `style.css` file.

To remove the white background, we use `background: none;`. To remove the blue outline, we use `outline: 0;`. To remove the black border, we use `border: 0;`. Add these three [declarations](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) inside the `textarea` [block](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) of your `style.css` file. When you’re done, the file should look like this:

```css
textarea {
  background: none;
  outline: 0;
  border: 0;
}
```

When you run your repl, you should see that the textarea appears to have disappeared. But if you click at the top left corner of the preview, you’ll notice that you can still type. The textarea is still there—you’ve just made it invisible.

We still need to make the textarea fill the whole screen. Add `width: 100%;` and `height: 100%;` to the `textarea` block in your `style.css` file. While you’re at it, go ahead and also add `font-size: 48px`, which makes the font size bigger.

```css
textarea {
  background: none;
  outline: 0;
  border: 0;
  width: 100%;
  height: 100%;
  font-size: 48px;
}
```

Your textarea still doesn’t quite fill the whole screen, though—these two properties only made it fill 100% of its parent element. In our case, this is the `<body>`, which doesn’t fill the whole screen. We ran into the same problem in the [Splatter Paint Workshop](https://github.com/hackclub/hackclub/blob/main/workshops/colorful_grammar)—check it out for a clearer explanation of this concept.

To make the `<body>` fill the whole screen, simply add

```css
html,
body {
  height: 100%;
}
```

to your `style.css` file.

When you run your repl, you’ll notice that the textarea fills the whole screen! But if you type too much, it’ll shift a little bit to the right, obscuring some of the text. We can fix this by adding `padding: 0;` to the `textarea` block.

Now the textarea fills the whole screen without overflowing!

Just to recap—this is what your entire `style.css` file should now look like:

```css
html,
body {
  height: 100%;
}

textarea {
  background: none;
  outline: 0;
  border: 0;
  width: 100%;
  height: 100%;
  font-size: 48px;
  padding: 0;
}
```

## Coloring our canvas

Now that we can write anywhere on our screen, it’s time to make use of the libraries we imported earlier.

Navigate to your `script.js` file and add the following:

```js
const wordpos = new WordPOS({
  dictPath: 'https://cdn.jsdelivr.net/npm/wordpos-web@1.0.2/dict'
})
```

This initializes a new instance of the WordPOS library with a dictionary to identify words with.

Under this, add

```js
$(document).ready(function () {})
```

This is how jQuery is initialized. Usually when you see a dollar sign in JavaScript, it’s a shorthand for jQuery.

Now, let’s write a function that updates the background of our page inside the jQuery function.

```js
$(document).ready(function () {
  function updateBackground() {}
})
```

Inside the `updateBackground` function, add the line:

```js
let sentence = $('#sentence').val()
```

This uses jQuery to get the value of our textarea, which if you recall, we gave the id “sentence”. You could replace `$(“#sentence”)` with `document.getElementById(“sentence”)`, but the jQuery syntax makes it a little bit easier.

To get the number of each type of word used in the sentence, we need yet another function. Add the following inside the `updateBackground` function:

```js
wordpos.getPOS(sentence).then(function (types) {})
```

As of now, this is what your `script.js` file should look like:

```js
const wordpos = new WordPOS({
  dictPath: 'https://cdn.jsdelivr.net/npm/wordpos-web@1.0.2/dict'
})

$(document).ready(function () {
  function updateBackground() {
    wordpos.getPOS(sentence).then(function (types) {})
  }
})
```

## Converting text to a color

The beauty of this workshop is that there are endless ways you can go about creating a color from all of this data, and each will produce a different result. I’m going to show what I personally came up with, but as you read the next steps, be actively thinking of ways you can change it to do something different.

We’re going to be creating our color with the [HSL (Hue, Saturation, Luminosity) color system](http://thenewcode.com/61/An-Easy-Guide-To-HSL-Color). If you’re not familiar with it, all you need to understand for this demo is that the HSL system uses a color wheel, and you identify a color according to its position on the color wheel in degrees. Also important to note is that colors start a new cycle once you pass 360°. Just like a 60° angle looks the same as a 420 (360 + 60)° angle, 60° on the HSL color system is the same color as 420°: yellow.

[![Color wheel divided into 6 equal parts](https://camo.githubusercontent.com/2550f89160b7c53a6f846c1206c6ba20763f93f2546e981c250c191a48c6935d/68747470733a2f2f636c6f75642d707670766b706575632d6861636b2d636c75622d626f742e76657263656c2e6170702f3168736c2d636f6c6f722d776865656c2e706e67)](https://camo.githubusercontent.com/2550f89160b7c53a6f846c1206c6ba20763f93f2546e981c250c191a48c6935d/68747470733a2f2f636c6f75642d707670766b706575632d6861636b2d636c75622d626f742e76657263656c2e6170702f3168736c2d636f6c6f722d776865656c2e706e67)

Because we can simply identify a color with a number, one way we can process our data is by adding up the frequency of each type of word. Using the WordPOS library, getting the total number of word type is as simple as `types.[type].length`; for example, `types.verbs.length`.

Create a variable that adds up the frequency of every type of word.

```js
var color =
  types.verbs.length +
  types.adverbs.length +
  types.nouns.length +
  types.adjectives.length +
  types.rest.length
```

Now that we have a number that we can create an HSL color with, let’s create it and change the background color. This is where jQuery becomes really useful: we’re going to change the CSS on our page right from our JavaScript file!

```js
$('body').css('background-color', `hsl(${color}, 100%, 50%)`)
```

(Note: in JavaScript, you can use back-ticks instead of quotation marks and concatenate strings using the `${variable}` syntax. The dollar sign next to `hsl` is unrelated to jQuery. Learn more about this syntax [here](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings).)

Here’s what your entire `script.js` file should look like after this:

```js
const wordpos = new WordPOS({
  dictPath: 'https://cdn.jsdelivr.net/npm/wordpos-web@1.0.2/dict'
})

$(document).ready(function () {
  function updateBackground() {
    let sentence = $('#sentence').val()

    wordpos.getPOS(sentence).then(function (types) {
      var color =
        types.verbs.length +
        types.adverbs.length +
        types.nouns.length +
        types.adjectives.length +
        types.rest.length

      $('body').css('background-color', `hsl(${color}, 100%, 50%)`)
    })
  }
})
```

We’re almost done! The final step is to run the `updateBackground()` function once when the page loads and then each time a new letter is typed.

Right before the last closing curly brace, add these two lines:

```js
updateBackground()
$('#sentence').on('keydown', updateBackground)
```

Now, your `script.js` file should look like this:

```js
const wordpos = new WordPOS({
  dictPath: 'https://cdn.jsdelivr.net/npm/wordpos-web@1.0.2/dict'
})

$(document).ready(function () {
  function updateBackground() {
    let sentence = $('#sentence').val()

    wordpos.getPOS(sentence).then(function (types) {
      var color =
        types.verbs.length +
        types.adverbs.length +
        types.nouns.length +
        types.adjectives.length +
        types.rest.length

      $('body').css('background-color', `hsl(${color}, 100%, 50%)`)
    })
  }
  updateBackground()
  $('#sentence').on('keydown', updateBackground)
})
```

When you run your repl, you should be greeted by a blank red screen. Click on the preview and start typing a bunch of words. You should see the background color change as you type each word!

## Hacking

Your journey is far from over. There are endless ways you can make this your own. Here are a few suggestions:

1. If you feel like the background color is changing too slowly, try multiplying your `color` variable by a number so that it goes around the HSL color wheel more quickly.
2. Why make your background only one color? How about using the CSS [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) function? [Check out what I did](https://repl.it/@TechBug2012/colorful-grammar) for an example of what this looks like. There are many, many different ways you can make a gradient!
3. I kept the saturation and luminosity of my color at 100% and 50%, but that doesn’t mean you have to! Try changing those numbers around and see how many new colors you can create.
4. Change the font and size of the text in the textarea

...and much, much more!

Your new task is to hack away at this project until it looks noticeably different from this demo and is totally your own. Go crazy, and good luck!


Let your words color the screen as you type!


Color the Screen with Your Words

> For the Code Snippets PDF, [click here.](https://cloud-gdufd98x3-hack-club-bot.vercel.app/0code_snippets.pdf)

# Introduction
Winter is objectively the best season of the year. Hot cocoa, pine trees, family tradition, sledding, and, most importantly, snow, are all favourites from this cozy season. However, winter doesn't last forever, and snow melts, much to the dismay of every five-year-old with a snowman. But, we humans have made a solution... snowglobes!

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/6snow_doge.png)]

So much snow in a small sphere?!? What much more could a person want?

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/7power_graph.png)
> It's scientifically proven!

So, how would you like to create your own, virtual, shareable snowglobe? (I guess you don't have a choice at this point because, spoiler alert, you are doing that right about now...)

## What We're Making

![https://cloud-782rtf1du-hack-club-bot.vercel.app/0ezgif.com-resize.gif](https://cloud-782rtf1du-hack-club-bot.vercel.app/0ezgif.com-resize.gif)

In this jam, we'll be making a custom, digital snowglobe (as implied by the title!) You'll be able to choose the background, particles, or even the music. [Here's a live demo of what we're building.](https://snowglobe.judahbrown.dev/)

# The Basics

> If you'd like to skip ahead to the fun part, or if you're short on time, you can use [this template on replit to get started!](https://replit.com/@VelocityDev/snowglobe-template) Just hit the "use template" button at the top of the page and skip ahead to the "Make it look Fabulous" section (note: the particles.json file is already in place.) This template comes with the 'Make it Installable' customization already added as well.

## Setting the Page Up
Every good project starts with a plan! Here, we'll link to some essential libraries and lay out the page. We'll be using basic HTML, intermediate CSS, and more advanced JavaScript, but it's really easy to figure out!

> [For a video on some HTML basics, click here!](https://www.youtube.com/watch?v=salY_Sm6mv4)

### 🦴 Add the Skeleton
While some skeletons are spooky-scary, these skeletons are actually really useful! A page skeleton is just the basic HTML that every website should have, such as a `<!DOCTYPE>`, `<html>` tags, and a `<head>`/`<body>`.

> For more information on the basics of an HTML page, watch (LINK TO BE ADDED)

### ⛓ Linking Libraries
Now, to link the `tsParticles` library.
tsParticles is available as a single file from JSDeliver. Link to it using a `<script>`  tag at `https://cdn.jsdelivr.net/npm/tsparticles@2.11.0/tsparticles.bundle.min.js`.

### Lay it all Out
To lay out our page, we'll be using `div`'s (inside of the `<body>` tag) which allow us to split the page into separate areas. They can be nested inside of each other and stylized with CSS. Let's make a `snowglobe` div with sections `particles` and `ground`...

```html
...
<div id="snowglobe">
	<div id="particles">
	</div>
	<div id="ground">
	</div>
</div>
...
```

We'll leave these `div`'s empty, but they'll serve an important role in laying out our page.

### 🖌 Make it look ✨ fabulous ✨
CSS is a language that allows us to style HTML pages! With it, we can resize elements, change fonts, mess with colors, and even animate things!

To start, let's reset all of the spacing!

```css
* {
	padding: 0;
	margin: 0;
}
```

Next, we'll set up flex display on body. Make sure to set its `flex-direction` to `column`. Additionally, we'll make the body fill the whole viewport, set its background color (feel free to change this! this is the page background, not the snowglobe background), and make it center all the items with `justify-content` and `align-items`.

```css
body {
	/* Set up flex display */
	display: flex;
	flex-direction: column;
	
	/* Fill the whole viewport */
	width: 100vw;
	height: 100vh;
	overflow: hidden; /* Hide all overflow */
	
	/* Center the items */
	justify-content: center;
	align-items: center;
}
```

> [For more information on Flex, read this article!](https://www.w3schools.com/css/css3_flexbox.asp)

Now, we'll set up the globe itself. First, we'll want to make the globe take up as much of the screen as possible. To do this, we'll use CSS's `vmin` unit to use the smallest screen dimension as a reference. To add some margin, we'll only want to take up around 85% of this space (so... `85vmin`). Next, we'll set the background to a nice, balmy blue (`#45b3e0`, to be exact.) After that, we'll round off the snowglobe by setting `border-radius` to 100%. We'll hide the `overflow` in order to keep things within limits. Then, we'll set the `margin` to `auto` in order to make the globe flow nicely within its new home. Finally, we'll add a nice glow effect!

```css
#snowglobe {
	/* Set the sizing*/
	width: 85vmin;
	height: 85vmin;
	
	/* Nice, but temporary, background */
	background: #45b3e0;
	
	/* Make the globe round */
	border-radius: 100%;
	overflow: hidden;
	
	/* Add some nice spacing */
	margin: auto;
	
	/* And finally, add a nice glow*/
	box-shadow: 0px 0px 20px 35px #FFFFFF05;
}
```

Adding the ground and particle settings are easy at this point... we'll have the ground take up just 25% of the snowglobe and leave the rest to the sky.

```css
#particles {
  height: 75%;
  width: 100%;
}

#ground {
  height: 25%;
  width: 100%;
  background: #bebebe; /* You can change this now or later if you want */
}
```

#### Bonus: A shake animation!
If you want, we can add a fun little shake animation for whenever the snowglobe is activated! First, we'll add some springy keyframes. Then, we'll add a class called "shake" that we'll add to the snowglobe once it's activated.

```css
@keyframes shake {
	0%,
	100% {
    transform: rotate(0deg);
	}
	
	25% {
    transform: rotate(15deg);
	}
	
	50% {
    transform: rotate(-15deg);
	}
	
	75% {
    transform: rotate(10deg);
	}
}

.shake {
  animation: shake 1s;
}
```

> [Read more about CSS Animations here!](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

### Script it up!
Now, after everything else is done, let's get the dirty work done!

First, we'll add another script tag after the `snowglobe` div. Inside, we'll start writing some javascript. Let's declare some variables real quick...

```js
	// Select the globe
	let globe = document.getElementById("snowglobe");
	
	// Declare particles
	let particles;
```

Next, we'll add a function that will help us later on with activating the snowglobe when a device is shaken. This will accept an input event from the motion sensor on a device and calculate the magnitude with which the device was shaken. First, we'll grab the acceleration from the sensor. Then, we'll use a mathematical function that calculates the magnitude using those values. The function will finally return the result of that calculation.

```js
	// Declare function for calculating Gyro activity
	function calculateAcceleration(event) {
		const {x, y, z} = event.accelerationIncludingGravity;
		const accelerationMagnitude = Math.sqrt(x * x + y * y + z * z);
		return accelerationMagnitude;
	}
```

Finally, we'll add the function to handle shaking activation!

```js
	function shakeItUp() {
		particles.play();
		
		// Only include this code if you're making the shake animation
		globe.classList.add("shake")
		setTimeout(() => {globe.classList.remove("shake")}, 1100)
	}
```

### ↕ Choices, choices
Now, time to tie it all together! tsParticles can load particle configuration in a number of ways, but one of the easiest is to load it from a `.json` file. Go ahead and download [this default snow configuration](https://cloud-66d7j3kh5-hack-club-bot.vercel.app/0particles.json) and place it in your website root as `particles.json`. You can customize these values later.

Under the `calculateAcceleration()` function, add the command `tsParticles.load()`, which allows us to load the configuration. This command takes two inputs, element ID and configuration. Our element ID is the ID of the element where we want the particles to appear, and our configuration is the path to our config file, `particles.json`.

```js
tsParticles.loadJSON('particles', 'particles.json')
```

Next, we'll add a callback function. Inside we'll select the particles container and immediately pause the particles until they're shaken.

```js
    tsParticles.loadJSON('particles', 'particles.json')
      .then(function () {
        // Select the particle container and pause the particles
        particles = tsParticles.domItem(0);
        particles.pause()
```

Then, we'll add an event listener that calls the `shakeItUp()` function whenever the snowglobe is clicked/touched.

```js
        // Add globe event listener
        globe.addEventListener('click', () => {
          shakeItUp()
        });
```

 Then, we'll add an event listener that calls the `shakeItUp()` function whenever the snowglobe is clicked/touched. Finally, we'll add an event listener to the `window` element (provided by default) that detects gyroscope shifts and calculates its magnitude. Finally, it will compare this magnitude to a threshold (in testing, values between 17-23 seemed to work best) which can be adjusted if needed.  If this comparison passes, then it will call `shakeItUp()`. This is a lot at once, so take a look at the code below.

```js
    tsParticles.loadJSON('particles', 'particles.json')
      .then(function () {
        // Select the particle container and pause the particles
        particles = tsParticles.domItem(0);
        particles.pause()

        // Add globe event listener
        globe.addEventListener('click', () => {
          shakeItUp()
        });

        // Add gyro event listener
        window.addEventListener("devicemotion", (event) => {
          // Calculate the magnitude every time
          const acceleration = calculateAcceleration(event);

          // Compare the magnitude to threshold.
          if (acceleration > 23) {
            shakeItUp()
          }
        });
      });
```

And, that's all!

> [For more information on what event listeners are and how they work, check out this article!](https://www.computerhope.com/jargon/e/event-listener.html/)

# Customization
At this point, you have a nice, amazing snowglobe. Congratulations 🎉
However, it's looking like all of these snowglobes are the same...

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/8identical_snowglobes.png)

Let's fix that by spicing them up a bit!

## Setting the Setting (Adding a background)

### Adding an Image
Adding an image is super simple! If you don't have an image you'd like to use already, you can find one on a free service like [Unsplash!](https://unsplash.com/) 

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/3mountains.png)
> For example, this one.

Download the image and add it to the website folder (Err- upload it to your repl!) For simplicity, let's rename the file to `background.jpg` (or `.png`, etc.) Now, go into the CSS for the `#snowglobe` element. Let's change up that background...

```css
#snowglobe {
	background: url('/background.jpg') center/cover;
}
```

Now, if you want to change up the position of the image within the globe, just change `center` in `center/cover`  to another location such as `right`, `top`, or `bottom`.

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/4picture_globe.png)
> Hurrah, cool mountains!

### Adding a Gradient
To keep it simple, you can use a tool like [cssgradient.io](https://cssgradient.io/) to generate a cool gradient background. Once you're done, all you need to do is copy the part that starts with `linear-gradient`.

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/2gradient_highlighted.png)
> Just the highlighted part!

Next, go into the CSS for the `#snowglobe` element. Let's change up that background...

```css
#snowglobe {
	/* You'll replace the gradient here with your own */
	background: linear-gradient(4deg, rgba(134, 100, 0, 1) 0%, rgba(121, 9, 9, 1) 32%, rgba(4, 0, 70, 1) 100%);
}
```

![https://cloud-fcssxnb6l-hack-club-bot.vercel.app/](https://cloud-fcssxnb6l-hack-club-bot.vercel.app/5gradient_globe.png)
> A cool sunset made with the gradient `linear-gradient(4deg, rgba(134, 100, 0, 1) 0%, rgba(121, 9, 9, 1) 32%, rgba(4, 0, 70, 1) 100%)`

If you want an extra cool challenge, try animating it! See [the section on animation above](#### Bonus: A shake animation!) and try to figure it out for yourself!

> [If you'd like to learn more about CSS Gradients, you can read this article from MDN!](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)

## It's raining, It's pouring! (Change what's falling)
To change what's falling, we'll need to go into the `particles.json` file. Here, we can change animation, color, or even shape!

### Change the Color
Changing the color is super easy! Just locate the `colors` object within `particles`. If you're using the default configuration, it should be near line 30. Change the `value` within this to whatever color you want and then you'll be good to go!

### Change the Shape to a new Shape
By default, tsParticles allows you to use one of three different shapes: `square`, `circle`, and `triangle`. To change this, simply locate the `particles.shape` object within `particles.json`. If you're using the default config, this is located near line 129. Within this object, change the `type` to the shape you want. Ta-da! Now you have a new shape!

### Make More Stuff Fall
tsParticles allows you to adjust a `number` value to make more or less particles fall. It uses a density calculator to scale this value up or down, too. This value in the default config is located near line 106, under the `particles.number` object. Change the `value` to whichever value you'd like.


## Twinkle, Twinkle (Add some music)
First find some music! Legally, you should use some audio to which you have rights. [Check the internet archive for something to use!](https://archive.org/) 

Anyway, you'll want to download that audio and add it to the website directory (or upload it to your repl.) For simplicity, rename the file to `audio`. Under the `snowglobe` div, go ahead and add a new `audio` element with a single `source` child.

```html
<audio id="music">
	
	<source src="audio.ogg" type="audio/ogg"></source>
</audio>
```

Now, select the audio element. Then, add the line `music.play();` into the `shakeItUp()` function. 

```js
let music = document.getElementById('music')
...
function shakeItUp() {
	...
	music.play()
}
```

Congratulations, now you have music!

## It's an App! (Making it a PWA)
At this point, you have a cool snowglobe that's custom to you. Now, you can make it installable. Thankfully, you don't need to do much to create it as an installable app. You won't even need to have an App Store Developer account.

In order to do this, we'll use a web technology called a Progressive Web App (Or, PWA for short.) PWA uses a combination of smaller web technologies, like web manifests that declare your site and its content and service workers that allow your site to cache content and run in the background. All in all, it creates a neat little package for a web app.

To start, download [these assets](https://cloud-osijhtm8u-hack-club-bot.vercel.app/0pwa.zip) and unzip them into the root of your project. If you want, you can generate these assets with a custom icon and color scheme using a tool like [Real Favicon Generator](https://realfavicongenerator.net/), my personal favourite. Now, add the following HTML to the end of your head:

```html
  
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3063ac">
  <meta name="apple-mobile-web-app-title" content="Snowglobe">
  <meta name="application-name" content="Snowglobe">
  <meta name="msapplication-TileColor" content="#2b5797">
  <meta name="theme-color" content="#2e2e2e">
```

> Note: If you're using a custom pack, follow the instructions that they give instead.

Now, if all has gone well, you should be able to install the website as a PWA! Congratulations! If you need help with this, [check out this article.](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Installing)

That's all, folks!

This Jam leads participants through a journey of creating their very own custom digital snowglobe that can even react to device motion!


Making a Custom Digital Snowglobe



**Before you start.**: This guide takes about 30 minutes to complete. Easy Difficulty, Good start for any newbies.

What you will end up with:

![Demo](https://cloud-rcnqjs0ni-hack-club-bot.vercel.app/0image.png)

## How you will use this as a club?

As a club, you will be able to send and recieve these tokens between eachother as a way of rewarding. For example, you the club owner can send your club members 2 tokens after the end of this jam as a way to boost their enthusiasm.

This guide teaches users how to create their own personalized cryptocurrency token using Solidity and Metamask. By following the step-by-step instructions, users set up an endpoint, create a MetaMask account, and code their token on Remix Ethereum. The resulting token can be shared and used as a form of reward or gratitude among club members, fostering a sense of community and enthusiasm. The process is beginner-friendly and offers an opportunity to learn about blockchain concepts while exploring the world of cryptocurrency creation.

<dropdown title="Here are some memes to convey the message:">

![meme](https://cloud-db2kqcawa-hack-club-bot.vercel.app/77tjen8.jpg)

![meme](https://cloud-db2kqcawa-hack-club-bot.vercel.app/67tjep6.jpg)

![meme](https://cloud-db2kqcawa-hack-club-bot.vercel.app/4download__2_.jpg)

![meme](https://cloud-db2kqcawa-hack-club-bot.vercel.app/3download__3_.jpg)
</dropdown>

## Why should you even care?

* Well, imagine a reward you made that you can share withothers.
* Like a sign of gratitude or thanks. Or anything you want! This token can be like a cashback, a reward, a sign  , of thanks, a form of currency between your friends
* and well you get to learn something new
* Understanding blockchain concepts can significantly impact your future prospects, especially in the field of blockchain development.
* Learning about current trends can help you keep up and learn something new!
   
## Learning Objectives

* To learn and understand the Ethereum platform
* To create a crypto token
* Understand the basics of Solidity language

### Prerequisite knowledge required

* None! This course covers everything you need to know and get started with!
  
### Outline of the course

* Create accounts and an endpoint
* Code in solidity
* Deploy and receive the tokens.

## What to keep ready?

* install the metamask extension to your browser (a place to store your coins)
* open and keep quicknode.com ready (a place to interact with the ethereum platform)
* open and keep remix.ethereum.org ready (a place to code and deploy in solidity)

### Key Points & Terms
* MetaMask - Think of it like a bank! Metamask is a virtual wallet where you will be storing tokens through this Jam.
* Quicknode - We use this as a method to connect your metamask to the ethereum (or any) blockchain. This helps metamask or any service communicate with the network (blockchain network)
* Endpoint - This is like a connection point between any service and a blockchain network (Quicknode makes one for you making our task easier)
* Solidity - An object-oriented programming language for implementing smart contracts on various blockchain platforms, such as Ethereum.
* ERC-20 - Short for Ethereum Request for Comment 20, It helps guide the creation of new tokens in the ethereum blockchain
* Testnet - The opposite of Mainnet, Coins in the mainnet have monetary value and the value can change but in a testnet all coins are just virtual copies/duplicates without a realworld value. But dont let that get to you as these coins are indeed shareable!

<dropdown title="warnings">
#### WARNING: THE COINS YOU MAKE ARE IN THE TESTNET AND HAVE NO MONETARY VALUE! DONT EXPECT TO MAKE MONEY OUT OF THIS lol 
#### DOUBLE WARNING (AND TIP): WHEN MAKING YOUR METAMASK ACCOUNT, MAKE SURE TO SAVE THE 12 PHRASES AS THEY ARE LIKE A PASSWORD TO YOUR ACCOUNT, STORE THEM ANYWHERE SAFE LIKE YOUR NOTEPAD, DIARY, ANYWHERE SAFE. ONCE LOST, YOUR ACCOUNT IS GONE BYE-BYE FOREVER. (also dont trust anyone and show them your phrases)
</dropdown>

# The guide! (dont be overwhelmed by the number of steps, Its easy!)

## Creating A Endpoint With Quicknode

1. Navigate to quicknode.com and create an account

2. Click "Endpoints"

3. Click "Create Endpoint"

4. Click "Continue"

5. Click on "Ethereum"

6. Click on "Sepolia"

7. Choose the free version

8. Wait for the process to complete

9. Copy the HTTP link provided at the top

10. Create a MetaMask account (if you don't have one already)

11. **WARNING**: Keep the secret phrases safe and save them in a secure location

12. Open MetaMask and click on the profile button

13. Click "Add Network"

14. Scroll to the bottom and click "Add a Network Manually"

![Ss](https://cloud-es32hz2zz-hack-club-bot.vercel.app/0screenshot__74_.png)

16. Fill out the form as follows:
    - Network Name: Ethereum Sepolia
    - New RPC URL: [Paste the copied HTTP link]
    - Chain ID: 11155111
    - Currency Symbol: ETH
    - Block Explorer URL: https://sepolia.etherscan.io

17. Click "Save" or "Add" to add the network

18. Press the text showing "Account 1" to copy the MetaMask address

## Getting some free ETH for exchange fees! 🤑💲

19. Go to sepoliafaucet.com in your web browser (You're just a few clicks away from being a crypto millionaire! Well, at least in Sepolia. Time to collect those shiny tokens!)

     ![ss](https://cloud-noik0omfz-hack-club-bot.vercel.app/0screenshot__77_.png)

21. Paste the copied MetaMask address into the provided field on the Sepolia Faucet website

22. Follow the instructions on the website to claim the free tokens

## The Coding & Creation Part!

23. Go to remix.ethereum.org in your web browser (Now you're a real crypto artist! Grab your virtual paintbrush and start creating your masterpiece.)

24. Create a new file called `MyToken.sol` and add the following code:

```
// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.9.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract MyToken is ERC20 {

    constructor () ERC20("Your Coin Name", "Your coin symbol (3-4 letters only)") {
        _mint(msg.sender, 1000000 * 10 ** decimals());
    }
}

```

![ss](https://cloud-37tpft686-hack-club-bot.vercel.app/0screenshot__80_.png)

```
Code explaination:

the first line is a comment which states the license of the code

the second line specifies the version of solidity the code is compatible with

the third line imports code from an open source library called openzeppelin

the forth line defines a new contract called MyToken from the ERC20 contract

the next few lines defines the personality of the coin like its name, symbol, amount and decimal points. psss.. BTW dont remove the " " from around your token name and symbol.
```
Quick FAQ:

<Dropdown title="Why use openzeppelin?">
      OpenZeppelin is like a prebuilt library with most of the important things already made by the community, think of it like a library used in your fav. programming language. Openzeppelin makes things easy so that we dont have to stress about the backend!
</Dropdown>

<Dropdown title="What is _mint for and why only that much?">
_mint is used to set and create an amount of tokens in the blockchain, you can increase 1000000 to any number but keep in mind that the more bigger the amount is the much less value something has. What I mean is, if everyone in the world has an Iphone, the value or the pride of having one is way low as Iphone/apple products are a way to flex but if everyone has one, you arent much unique (Dont take this example to heart as this applies to anything)
</Dropdown>

23. Click on the third icon in the sidebar to access the Solidity compiler

24. Click on "Compile MyToken.sol" and wait for the compilation to finish

25. Click on the fourth icon in the sidebar to access the Deploy tool (Deploy, deploy, and away! It's like sending your token into the crypto universe. Ready for takeoff!)

26. Click on the environment dropdown and choose "Injected provider - Metamask" (You may need to refresh the page and the name may not specifically mention MetaMask)

27. Click on "Deploy" (Waiting for confirmation? Don't worry, it's not like waiting for a pizza delivery, It wont take long!)

28. Wait for the MetaMask popup to appear and accept any prompts that show up (Buckle up, folks! You're about to embark on a digital transaction journey. Fasten your seatbelts and prepare for takeoff!)

    ![ss](https://cloud-qsv7014dp-hack-club-bot.vercel.app/0screenshot__81_.png)

30. Wait for a message or confirmation from MetaMask indicating the successful deployment

## Verifying your tokens existence (This is where you check if you did things right!)

31. Scroll down in the Deploy and Run Transactions tool to find the "Deployed Contracts" section

32. Click on the copy icon to copy the deployed contract's address

33. Go to sepolia.etherscan.io in your web browser

34. Paste the copied contract address into the search bar on Etherscan and verify its existence (Let's play detective! Paste the contract address and see if our virtual creation has left its digital footprint on the blockchain.)

    ![ss](https://cloud-jje5y5mxt-hack-club-bot.vercel.app/0screenshot__82_.png)
    ![ss](https://cloud-jje5y5mxt-hack-club-bot.vercel.app/1screenshot__83_.png)

36. Go back to MetaMask (Time to check on your tokens like a dragon guarding its treasure!)

37. Click on "Import Tokens" at the bottom of the page

38. Paste the deployed contract's address (same one used in sepolia.etherscan.io) and wait for the form to auto-complete

    ![ss](https://cloud-67bytcbnd-hack-club-bot.vercel.app/0screenshot__85_.png)

40. Continue and wait for the token to be imported

41. You will receive your coins in MetaMask (Cha-ching! It's raining digital coins in your MetaMask wallet. Time to celebrate!)

    ![ss](https://cloud-67bytcbnd-hack-club-bot.vercel.app/1screenshot__86_.png)

### Personalizing options

* Try experimenting and testing different blockchains like matic!
* Try making more coins for different occasions (maybe one for thanks and one for sorry?)
* Try messing around the settings! It wont hurt to try new things!

## How to share tokens?

* remember steps 13-17? just redo it on your reciever's (the person you want to send the tokens to) metamask
* IMPORTANT STEP - You can rename the Network name to your coins name and ** ADD YOUR (THE PERSON SENDING THE TOKEN) Quicknode http link (step 9) and paste it in the reciever's NEW RPC URL field.
* then go back your dashboard, click on your coin, click on send, paste the recievers address (step 18) to send it to him! Its that easy!!!!

  ![sending](https://cloud-ago25sz07-hack-club-bot.vercel.app/0how_to_send_tokens.gif)
  
  ![getting](https://cloud-ago25sz07-hack-club-bot.vercel.app/1recieved_tokens.gif)

### A couple of things as tips or bonus
* Make sure to give all your addresses right as messing up addresses can ruin literally everything
* Play around with code or settings to find out how things work! (You can never go wrong in a testnet)
* Before trying out a new Blockchain, do infact read and understand about it.

### Additional Resources & Guides
* Check out metaschool.so (where i learnt all of this) for many many for courses where you get to explore the wonders of Web 3.0
* Learn more about ethereum and its blockchain at - ethereum.org/en/
* Make a blockchain with python - https://hackernoon.com/learn-blockchains-by-building-one-117428612f46 & http://ecomunsing.com/build-your-own-blockchain
  
## Stuck? Facing issues? Your last braincell stopped working?

* Feel free to contact me on slack! The name's @Briyan Dyju





In this Jam, you'll be creating an awesome cryptocurrency which you will be able to personilize and share with others!


Create your own Club Crypto Currency

In this jam, you'll learn about the Mandelbrot set, and how to render it (and other fractals!) in realtime using ShaderToy.


Create INFINITE ART with MATH (and code)


# Make your own PCB Hacker Card

[TODO: intro]

## Schematic

The first step is creating a schematic for your PCB design. A schematic shows the components that will be used in the circuit, as well as how each of these components connect to each other.

For our card, we'll be using

- A [NT3H2111W0FHKH](https://jlcpcb.com/partdetail/NxpSemicon-NT3H2111W0FHKH/C710403) NFC Chip: this will be the main component of our card -- it handles the NFC functionality as well as harvesting energy from the phone to light up the LED
- An ~2V LED. I'm using [C2296](https://jlcpcb.com/partdetail/Hubei_KentoElec-17_21SUYCTR8/C2296), but feel free to pick a different color (note: this part may also be called 17-21SUYC/TR8)
- A [47Ω resistor](https://jlcpcb.com/partdetail/23909-0603WAF470JT5E/C23182)
- A [220nF capacitor](https://jlcpcb.com/partdetail/21832-CL10B224KA8NNNC/C21120)

First, let's open up [EasyEDA](https://easyeda.com). This is a browser based PCB designer, so all you need is an account.

Once you've logged in, select `File` > `New` > `Project` to create a new project.
![](/photos/new-project.png)

This will open up the schematic editor. Some important parts:

- `Library` on the left toolbar: This is where we will search for components and import them.
- `Wiring Tools` panel: We'll be using the wire tool to connect the components together.

![](/photos/schematic-unannotated.png)

## Adding components to the schematic

Click the `Library` button to open the parts picker. Search for a part (the part number works best), and make sure `JLCPCB Assembled` is selected. This will make sure we're choosing parts from JLCPCB's parts library, so that JLCPCB can assemble the boards when we order them.

![](/photos/searching-for-parts-unannotated.png)

Select the part, then hit the `Place` button to add it to your schematic. Repeat for all 4 of the parts listed above.

![](/photos/parts-on-schematic-unannotated.png)

### Adding the antenna

The NFC chip needs an antenna to work. We'll be using a PCB trace as the antenna, so we'll need to add that to our schematic.

Note: this is not an actual part, so it doesn't need to be assembled onto the board -- it's formed by the copper traces on the PCB.

To add the antenna, search for `25X48MM_NFC_ANTENNA` in the Library, and instead of `JLCPCB Assembled`, select `User Contributed`. Select one of the options (check the preview to make sure it looks similar to the one I used here, but most of them should work), and place it on your schematic.

![](/photos/selecting-antenna-unannotated.png)

## Wiring up the components

Now that all of our components are placed, let's connect them together! We'll use the `Wire` tool to indicated an electrical connection between the different parts -- this is similar to how you would connect wires on a breadboard. On the actual PCB, copper traces will go where we added wires, to form those electrical connections.

We'll reference the NFC Chip's Datasheet, specifically [this explanation](https://www.nxp.com/docs/en/data-sheet/NT3H2111_2211.pdf#page=38) for creating an energy harvesting circuit.

The datasheet says

> A complete total connected capacitor in the range of typically 150 nF up to 220 nF
> maximum shall be connected between VOUT and GND

So we'll connect the capacitor between `VOUT` and GND (the `VSS` pin).

https://github.com/maggie-j-liu/hacker-card-jam/assets/63619830/d65ff889-cf6c-44e8-90d4-0d61e032274d

- The pins `LA` and `LB` are for the antenna, so we'll wire up the antenna between those two pins.
- > If NTAG I2C also powers the I2C bus, then VCC must be connected to VOUT

  Since the NFC chip's energy harvesting _will_ be powering the chip itself, we'll connect `VCC` to `VOUT`.

- Finally, to complete the circuit and light up the LED, we'll connect the LED and resistor between `VOUT` and GND (the `VSS` pin).

Here's what your schematic should look like when completed!

![](/photos/completed-schematic.png)

# Designing the PCB

Now that the schematic is complete, we can start designing the PCB. In this step, we'll place the components onto the board, in the exact shape and configuration that the final board will be. The schematic will help guide us in connecting the the components together.

## Converting the schematic to a PCB

To convert the schematic into a PCB design file, click `Design` > `Convert Schematic to PCB`. You may get a warning about unfinished nets -- this is fine, just click "No, Keep Going."

![](/photos/convert-schematic-to-pcb.png)

This will open up the PCB editor, as well as a popup window to specify the board's dimensions. (If the popup window doesn't show up for any reason, you can find it through `Tools` > `Set Board Outline`.)

Here are the dimensions I'll be using, but feel free to make your business card a different size! Bonus: try making your business card a custom shape (not circular or rectangular). You should have the tools to do that by the end of the jam.

- Board Outline: Round Rectangular
- Width: 88.9mm
- Height: 50.8mm
- Radius: 4mm

![](/photos/set-board-outline.png)

## Functionality: Making a working PCB card

Once you set the board outline, you should see something like the image below. There's the outline of the board in pink, a bunch of components in red, and some thin blue lines connecting the components. Let's talk about what these are, and what the colors mean!

![](/photos/pcb-editor-unannotated.png)

### Layers

A PCB like a sandwich -- it's made up of many different layers. We're designing a 2-layer PCB, which has the following layers:

- The **substrate** is in the middle. This makes up the foundation of the PCB, and is usually made of FR-4 (fiberglass).
- On either side of the substrate are **copper layers** (since this is a 2-layer PCB, there are 2 copper layers: one on top and one on the bottom). In our PCB designer, these are indicated by the `TopLayer` (red) and `BottomLayer` (blue) layers. The copper layers are where electrical connections happen! You should place **traces** (lines that form electrical connections between components) on the `TopLayer` and `BottomLayer`.
- On top of the copper layers are **soldermask** layers. This is what gives PCBs their color -- common soldermask colors are green or black, but white, purple, blue, red, yellow, and more are also possible. Soldermask is added to the entire surface of the board (both the top and the bottom) by default. If you want to **remove** the soldermask (which will reveal the copper underneath), use the `TopSolderMaskLayer` or `BottomSolderMaskLayer` (for the top and bottom of the board, respectively).
- On top of the soldermask layers are **silkscreen** layers. Silkscreen is usually white, and is generally used to label and identify components, but we'll be using it for ✨ PCB art ✨. We can use this to add contact info, a QR code, or even some illustrations to our business card. In EasyEDA, silkscreen is added on the `TopSilkLayer` and `BottomSilkLayer`.

[TODO: insert illustration of PCB layers]

### Components

You'll notice that the PCB designer already has your components populated on the board. By converting the schematic to a PCB design, EasyEDA automatically places the **footprints** of the components on the board. Try dragging these around! You're able to place them anywhere, but keep in mind that they must be placed within the pink board outline. This is exactly how the components will be placed on the final board.

Some helpful tips:

- You can hit the `R` key to rotate a component 90 degrees.
- The thin blue lines indicate where electrical connections need to be made; so try to rotate components so that the lines do not cross
- Don't worry if the yellow marks cross (that's just silkscreen), but the red parts should not be touching! (That's the copper layer, and if they touch, it will cause a short circuit.)

Drag the components around until you're happy with the placement. Here's what mine looks like, but don't copy it directly; almost anything will work!

![](/photos/components-placed.png)

### Routing traces

Now, we have a bunch of components on the card. If we were to have the card manufactured right now, it wouldn't work -- the components are not connected to each other! We need to add **traces** to connect the components together.

It's best practice to manually route your traces, using the first button in the PCB tools panel: the `Track` tool.

[TODO: insert image of PCB tools menu]

However, to speed up the jam a bit, we'll be using EasyEDA's auto-router. Select `Route` > `Auto Route...` and click `Run` to watch the magic happen...

![](/photos/auto-router.png)

...Except, it seems like the magical autorouter 🪄 wasn't 100% successful :(. We'll finish up the last bit with some manual routing.

![](/photos/autorouter-results.png)

The autorouter was able to connect most of the components, but there's still one thin blue line (representing an unrouted connection). Can you find it?

Zoooming in, we see that it's between the antenna loop and pin #8 on the NFC chip. Here's how to route it:

1. Click the `Track` tool in the PCB Tools panel
2. On the right sidebar, set `Routing Conflict` to `Ignore`. This step is generally not needed (for normal manual routing), but there's a small issue with the footprints that makes it necessary here.
3. Click between the two pads that need to be connected. The thin blue line should disappear, and a red trace should connect the two pads.

[TODO: insert manual-routing.mov video]

Now, your PCB card is functional. Woooo! 🎉

We can check out a preview by clicking the `3D` button in the top toolbar. Hmmm... doesn't look like a business card yet. Let's fix that!

![](/photos/card-preview.png)

## Aesthetics: Personalizing your card

We'll mostly be using the silkscreen layer to add our information and designs. Select the `TopSilkLayer` by clicking the yellow rectangle in the Layers and Objects panel. This will make sure that you're on the silkscreen layer.

### Adding text

In the PCB Tools panel, select the `Text` tool. If you want to make it a business card, you can add your name and contact info -- or add any other text you want. Select the text object you just placed, and change the font, line width, and size in the right sidebar.

![](/photos/text-properties.png)

Drag the text to where you want it on your board. Here, I've added my name, website, and GitHub. If you need ideas: you can add your email, phone number, or other social media handles.

![](/photos/text-added.png)

### Adding a QR Code

EasyEDA also supports importing images! I'll use this to add a QR Code that links to my website. I used [QRCode Monkey](https://www.qrcode-monkey.com) to generate a QR Code, then use the `File` > `Import` > `Image` option to import it.

Just like Text objects, you can select the image to modify the properties (width, height, etc.) on the right sidebar.

![](/photos/import-image.png)

Note: we've been placing everything on the yellow `TopSilkLayer`. This means that they will all appear on the top side of our board. If you want to add anything to the bottom, use the green `BottomSilkLayer`! Keep in mind that the bottom layers of the board are a top-down, see through view, which is essentially flipped -- use the 3D viewer to check that all your text and images are oriented correctly.

### Bonus: Textures and other effects

Thus far, we've only used silkscreen to add designs and text to our board. The silkscreen will show up white on the manufactured board, but it's also possible to achieve a variety of other effects by combining different layers!

Here are some examples -- try incorporating these techniques into your board.

- **White silkscreen**: this is what we've been using. Add things to the `TopSilkLayer` or `BottomSilkLayer` to achieve this effect.
- **Shiny silver or gold** (depends on the finish selected when ordering): add your object to both the `TopLayer` and `TopSolderMaskLayer` (for the top of the board), or to both `BottomLayer` and `BottomSolderMaskLayer` (for the bottom of the board), and superimpose these layers on top of each other. The `TopLayer` or `BottomLayer` will put the shiny copper on your object, while the `TopSolderMaskLayer` or `BottomSolderMaskLayer` will **remove** the soldermask on the object, revealing the shiny copper underneath.
- **Textured, or with slight color variation**: add your object to only the `TopLayer` or `BottomLayer`. Without removing the soldermask, the copper will still be covered by the soldermask, but it may slightly lighten the soldermask color and will create a textured feel.
- **Translucent yellow** (color of the FR-4 material): add our object to only the `TopSolderMaskLayer` or `BottomSolderMaskLayer`. This will remove the soldermask on the object, revealing the yellow FR-4 material underneath. This technique is useful for allowing LEDs to shine from one side of the board to the other, or just for adding another color to your design.

[TODO: conclusion / onboard / links to other projects to try out]

Let's build a business card -- but with a twist -- it can transmit a URL on tap and light up! You'll learn the basics of designing a PCB, and you can get the cards made for free, with Hack Club's OnBoard.

Make your own PCB Hacker Card



Hello!! In this Jam, you will be designing and building a web game. When you're all done, it'll look a bit like this:
![A demonstration of a completed platformer game](https://cloud-4p2y0vzmm-hack-club-bot.vercel.app/0screen_recording_2023-08-04_at_11.06.53_am.gif)

## So how are we gonna do this?
Here are the steps we'll go through to build your own game:
1. Get started with [Glitch](https://glitch.com)
2. Start with a simple template game
3. Add more levels to the template
4. Share your game!
---
## Get set up
First, let's get started on [🎏 Glitch](https://glitch.com).
<Dropdown title="Hey, what's Glitch?">  
           Glitch is a site that makes it super simple to build web apps. You can code in your browser and see your results live.
</Dropdown>
1. Go to [glitch.com](https://glitch.com) and click `Sign Up`.
   ![Glitch.com's header, with an arrow pointing to the Sign Up button](https://cloud-ic6sx4m6w-hack-club-bot.vercel.app/0scr-20230714-psiv-3.png)
2. Choose how you'd like to sign up - you can use a GitHub account or a Google account, or if you don't have either, click `Email Magic Link` and you'll get a link and code in your email. 
3. Either click the link in the email or enter the code from the message in your browser.
4. Wahoo! You're ready to code!
---
## Start coding
Now, it's time to code!

Start by remixing my template. Head to https://glitch.com/~kaboom-game-template, then scroll down and click `Remix your own` below the preview. Now you've got your own code editor!

Before we go any further, let's take a look at the structure of a Kaboom game.
```js
kaboom()
```
Every Kaboom game's code will start with this - it initializes the library and gets everything set up. Here's what it looks like:
![A blank checkerboard canvas](https://cloud-6n8dlncke-hack-club-bot.vercel.app/0image.png)

Pretty boring. Let's get some action going!
```js
loadSprite("bean", "https://cdn.glitch.global/6e7edbfb-3679-4519-bb57-df3008b83592/bean.png?v=1688618964513")
```
This loads in a sprite so you can use it later. You pass in a name for the sprite (here, it's `bean`) and a URL. I've included a bunch of sample sprites in the project (check the `📦 Assets` tab in the sidebar!).

```js
add([ 
	sprite("bean"), 
	pos(80, 40), 
])
```
This adds a sprite to the screen. 
![The same background, but now there's a frog-bean-like sprite on it](https://cloud-65jcy7vy5-hack-club-bot.vercel.app/0image.png)

Right now, it doesn't do much. Let's change that!
```js
const bean = add([ 
	sprite("bean"), 
	pos(80, 40), 
	area(),
	body(),  
]);
```
In Kaboom, each *game object* is composed of multiple *components*. Each component will give the game object certain functionality.

> A game object is basically any character in the game, like the player character, an enemy, a rock, or a cloud.

For example, there might be a component to decide the shape of an object, whether gravity affects it, its color or even how much health it has. Let's take a deeper look at that sample:
- The `const bean` part saves the object we're making, so we can refer to it later. You don't always need to do this, but for parts you need to use again later, it's super useful.
- The `add()` method wraps all the components together, a bit like the tortilla of your object burrito. 
- `sprite("bean")` tells Kaboom "render this object with the `bean` sprite I loaded earlier". 
- `pos(80, 40)` gives it a position, at X=80, Y=40.
- `area()` gives it an area that can collide with other objects.
- `body()` gives it a physical body, which makes it affected by gravity and lets it jump.

Now, head back to your code. You'll notice I've left a comment in the code with some steps to make the game work better. Try to fill them in! If you need help with one, check below.

<Dropdown title="1. Making Bean more floaty">  
           Do you see anything that changes the world's gravity? Try changing the value there.
</Dropdown>
<Dropdown title="2. Making coins collectible">  
           You might need to look at the [Kaboom docs](https://kaboomjs.com) for this one. Take a look at the methods under `Game Obj`. What looks like it does what you want?
           For where to put it, try to find a place where _collisions_ are handled. What looks right?
</Dropdown>
<Dropdown title="3. Make the level bigger">  
           There's a place in the code where the level is laid out with symbols. Can you try to add more?
</Dropdown>
Once you're done, your game should look a bit like this:
![a screenshot of a platformer game with a wider platform and more coins](https://cloud-7rnuby5u8-hack-club-bot.vercel.app/0image.png)

> Psst.. here's a tip. Hit <kbd>F1</kbd>. See all those blue boxes? Those are the collision areas of each object in your game. Now hover over one of those objects. Now you can see every object's components! It's a bit like those [x-ray specs](https://en.wikipedia.org/wiki/X-ray_specs) that there used to be ads for in comic books, but it actually works. 
> 
> *(Did nothing happen? If you're on macOS, hold the <kbd>fn</kbd>  key as you press F1. If you're on Windows or Linux, try toggling <kbd>Fn Lock</kbd>.)*
---
## Add another level!
Now, let's add another level to our game. Find this section of the code:
```js
const levels = [
[
// Design the level layout with symbols
"@  ^ $$",
"=======",
],
// TODO add more levels
]
```
Try duplicating everything within the inner set of brackets and designing a new level! 
<Dropdown title="Done? Take a look at what it should look like.">  
	   My level looked a bit like this, but you can make yours whatever you like! Notice how I added another line to the level in order to add more stuff.
	   ```js
const levels = [
[
// Design the level layout with symbols
"@  ^ $$",
"=======",
],

[
"  $  $   ",
"@        ",
"== == ===",
],
]
```
</Dropdown>

But how does Bean get to the next level? I'll leave this as an exercise for you. 

<Dropdown title="I'm a little lost, give me some steps...">  
Here are the general steps you'll need to do in order to do this. You can pull down any of them for some guidance. (Hint: each one corresponds to about one line of code.)
<Dropdown title="1. Import a sprite to use for the goal">  
	   Go to the `📦 Assets` tab in your project and find a sprite you want to use for the goal. Click on it and choose `Copy URL`. Then find the place in the code where we load in sprites. Add your new sprite!
</Dropdown>
<Dropdown title="2. Add it to each level (except the last one)">  
	   Remember when you added some more space to the previous level? Do that again, but use a _different_ symbol.
</Dropdown>
<Dropdown title="3. Map the symbol you used to your sprite">  
	   Now take a look at the `renderNewLevel` function in the code. This function includes a dictionary of all the sprites used in each map. Go ahead and add the portal to that dictionary! 
</Dropdown>
<Dropdown title="4. Add some code to move to the next level">  
	Look at the bottom of the code. Remember when you added code to make the coin collectable? Try to copy that for the portal. When the player hits the portal: you'll want to **increase the `levelID` counter** and **render the next level**.
</Dropdown>
</Dropdown>

---
## Add more stuff!

You can also add more sprites, [some sound effects](https://kaboomjs.com/play?example=audio), or even change the look of the entire game! Check out the Kaboom [docs](https://kaboomjs.com) for documentation on how to use every feature of the library, and the [playground](https://kaboomjs.com/play) for examples! 


--- 
## Sharing your game
Now that you've made the perfect game, it's time to let others play it. Just follow these steps: (On my end, I've had issues with the "Edit project details" menu. This works a lot better for me.)
1. Click `🎏 Settings` in the top left, above the file list.
2. Click `Go to project page`
3. On that page, click `👆 Edit details`
4. Enter your new project name, then save it!
5. Click the `Edit project` button to get back to coding.

To get a link that your friends can use to play your game, click the big purple `Share` button at the top, then copy the `Live site` link.
![A screenshot of Glitch's share dialog with the "Live site" link highlighted](https://cloud-mmr3sh0b9-hack-club-bot.vercel.app/0image.png)


In this Jam, you'll be designing and creating a fun platformer-style game and sharing it with your friends.


Build a game (with explosions!)


<video controls style={{width: "400px"}}> <source src="https://cloud-opkznq4e6-hack-club-bot.vercel.app/1store_preview.mp4" type="video/mp4" /></video>

[Sample Figma Design](https://www.figma.com/file/R0x2u5Z0n1wcOAbVVekcei/The-Cow-Charm?type=design&node-id=34%3A423&mode=design&t=68QuGZqGJfs2QT92-1)
[Interactive Demo](https://www.figma.com/proto/R0x2u5Z0n1wcOAbVVekcei/The-Cow-Charm?page-id=34%3A423&type=design&node-id=34-507&viewport=535%2C362%2C0.09&t=RaHKT5mf6K7wXh1B-1&scaling=scale-down&starting-point-node-id=34%3A507&mode=design)


<Dropdown title="psst">
here's an example of what a finished product might look like! however, your project is going to be completely unique. the feel and flow of your project should be very different ;)
</Dropdown>
---

> Hacker!
> Are you awake? Hurry up; we have a boat to catch.

---

This is **Part 1** of a two-part workshop in creating your very own store on the web! You'll design everything from the products you'll sell to the colors and feel of the website. At the end, you'll get a chance to pitch your design to the workshop hosts and compete for the title of <font color="#7CFC00">Best Designer</font>!

If your website looks like something you would make, you did a great job 🎉
Otherwise, go back and brainstorm ways to make your project ✨ unique ✨

Today, we'll be designing our website using [**Figma**](https://figma.com/), a design tool to create functional and awesome user interfaces! If you're worried about code, don't worry. There isn't going to be any code yet, you'll have full artistic freedom after we explain Figma's features!



There are **6** important steps in this Jam! Feel free to backtrack and reference old points as you design your dream store!

#### Outline:

1. **Embark on your journey.** (create your first Figma file)
2. **Open your inventory**. (learn about the tools in your hot-bar & Figma structure)
3. **Make your first painting.** (create the landing page to your store)
4. **SO MANY DUPLICATES.** (simplify repetitive elements with components)
5. **Make it ✨ Magical ✨** (connect your pages with interactions)
6. **Your next adventure awaits...** (next steps)

Packed your things? Let's rock this.

---

## Embark on your journey. 🛶

> You made it to your home for the next hour. Time to set up camp.

### Create an Account

Head over to [Figma.com](https://www.figma.com/) and create an account! Afterwards, complete the onboarding portion of registration. Select the **Free** plan, and choose to "**Design with Figma**" first.

You should be instantly booted into a new design file!

![Figma New File](https://cloud-opkznq4e6-hack-club-bot.vercel.app/0figma_new_file.png)

<Dropdown title="Not there?">
If you're redirected to the dashboard instead, just click the **+ New Design File** button!
<video controls style={{width: "400px"}}> <source src="https://cloud-n2adyd9na-hack-club-bot.vercel.app/0file_from_dashboard.mp4" type="video/mp4" /></video>
</Dropdown>

If you're working with a team, click the Share button in the top right and add your groupmates' emails with "Edit" permissions!

You're all set now! ≧(´▽｀)≦

---

## Open your inventory ⚒️

<Dropdown title="a weirdly shaped creature takes off its hood">
Hey there. I'm Orpheus, your humble guide to Figma!

We're about to go over a lot of info, so don't worry if you forget some of it.
I suggest you read through this section and then use it as a cheat-sheet if you ever get stuck!
</Dropdown>

It _speaks_:

Okay! So, let's go over the structure of the Figma editor.

---

![Left Sidebar](https://cloud-p4lmdd3r0-hack-club-bot.vercel.app/0pasted_image_20230716011036.png)

### Left Sidebar

Here, you'll keep track the current objects in your design (text, shapes, images), and be able to access assets & pages (we'll go over this later).

![Toolbar](https://cloud-i2t8xhz0p-hack-club-bot.vercel.app/0pasted_image_20230716011117.png)

### Toolbar

Situated at the top of your screen, this contains every tool you need to start designing, we'll break them down below :)).

![Right Sidebar](https://cloud-i2t8xhz0p-hack-club-bot.vercel.app/1pasted_image_20230716011129.png)

### Right Sidebar

This section opens properties of the currently selected layer or tool. You can edit attributes such as font size, stroke, etc. and prototype!

---

Figma relies on a layered system of groups. Think about it like you're stacking sheets on top of each other. Here are the main types of objects in Figma.

### Frame

The foundational element for your designs is called a "frame"! It acts like a top-level container for your content. We normally set these to the dimensions of a target device to see what our design might look like on it.

![](https://cloud-ki7xeojmd-hack-club-bot.vercel.app/0frame.gif)

### Group

A group combines related objects together. This is a temporary union that helps reduce the number of layers that you have to work with as you design.

You can group a selection of layers together with `Ctrl + G`!

![](https://cloud-8utwa7bc9-hack-club-bot.vercel.app/0group.gif)

### Layers

Layers are the building blocks in any Figma Design. They can be anything from images, vector objects, or text. Anytime you insert an image or create a rectangle, you're making a layer!

---

Let's have a quick rundown of the tools we'll be using in our design.

Your workshop host should have given you a cheat-sheet for Figma's tools; this is your chance to read through it!

You can view the digital copy [here](https://cloud-brvsdgazn-hack-club-bot.vercel.app/0figma_tools.pdf)

**Phew!** That was a lot of content. Like I said earlier, feel free to come back and review :D

Hacker, it's time to make your first piece of art.

---

## Make your first painting. 🖼️

Before we start designing, we always should think about what we want to design!

Take this time to think about the name of your corporation and the products you might sell. Once you've got it, continue :D

---

Let's give your project an awesome name! Click into the area which says "Untitled" and give it a name of your choosing (you can change this at any time).

![Name your Project](https://cloud-4m7ljqmox-hack-club-bot.vercel.app/0image.png)

Next, we'll make a frame for the landing page of our website. We'll do this by clicking the hashtag-esque button on the navbar, and clicking **Desktop > Macbook Pro 16"** as our size.

<video controls style={{width: "400px"}}> <source src="https://cloud-hivp3jiyp-hack-club-bot.vercel.app/02023-07-15_21-19-10.mp4" type="video/mp4"/> </video>

Note that you can always extend the height of the frame as you need.

Can you believe it? You've created your first layer in Figma. 🎉

> I really love cows. In fact, I love them so much I'd like to make a business selling cow charms. I want to name it something unique and original. I GOT IT!
>
> ~ the cow charm ~

Inside your frame, we'll create a _text object_! Once the tool is selected, click anywhere in your frame to create a text box. You may type whatever you'd like in here.

wait a minute...
![Text is too small naurr](https://cloud-6gf9bcrd6-hack-club-bot.vercel.app/0pasted_image_20230716031051.png)

#### Quiz Time!

<Dropdown title="What do you think we should do?">
<Dropdown title="Hint">
Hmm... Think back to the tools we learned about earlier, maybe something in the "Move Tools" section?
</Dropdown>
<Dropdown title="Solution">
Luckily we can scale this up with the **Scale Tool (K)**. Scale the text to your desired size and place it where you want on the frame.

We can also select it using the **Move Tool (V)** and edit the font size in the text box's properties.
</Dropdown>
</Dropdown>

Let's try adding stars to our page. We can do this by selecting the **Star Tool** and placing them as we want. If a sharp grey star isn't what I want, I can choose the _Fill Color_ and the _Corner Radius_ in the layer's properties after selecting it. In fact, I can also change the amount of angles and the size of each angle of the star. If you ever want to edit some property of an object, you always check the right sidebar!

> Might there be some property to smite.
> Veer your eyes to the right.

#### Quiz Time!

<Dropdown title="Try to find these properties yourself! (expand for solution)">
![Needed Properties](https://cloud-6fotdvxns-hack-club-bot.vercel.app/0pasted_image_20230716203619_480.png)
</Dropdown>

Now, I'll make the background black, text white, and change the color and size of the stars!
![Initial background](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/0pasted_image_20230718011242.png)

I want the background to resemble a dark sky with a bright moon, so I'll set it to a gradient with dark shades of purple. You can find the settings of the **Fill Color**.

![Gradient](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/1pasted_image_20230718011436.png)

It's time to create the ✨ charm ✨! I'll make an Circle with the **Ellipse Tool** and import the images I want to use for the design.

![First charm](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/2pasted_image_20230718011702.png)

It's starting to come together! It would be really awesome to have it drop down from the top of the screen, but I'm not sure how to create a string.

#### Quiz Time!

> [!question]- What tool should I use to create the string?
> We have a lot of different choices, I could use the **Line** tool to make a simple straight string, or the **Pen** tool to create a more realistic, curvy, string.
>
> I think I'll stick with the **Line** tool, thanks for your help!

This is cool, but something seems a bit off.
![String](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/3pasted_image_20230718012123.png)

There isn't a hole for the string to go through!! It would be easy to just use another circle to indicate the hole, but the gradient background makes it hard to replicate.

If only, we could cut a hole in the circle...

**WAIT NEVERMIND WE CAN YAYAYAYA**

Let's first create a circle to designate the hole, and then select both the charm and the circle destined to be a hole on top of it.

![Circle](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/4pasted_image_20230718012451.png)

At the top of your screen, you'll see an icon that looks like two overlapping rectangles; click that!

![Boolean operators](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/5pasted_image_20230718012524.png)

These are Figma's boolean operators!! 😍😍

You have four options:

1. Union selection.
   - Merges two layers together. If the objects overlap, then the shape's outline consists of the it's sublayers not including segments that overlap.
   - Think of it as a bitwise OR operator — `A | B`
2. Subtract selection.
   - Removes a layer's intersection (and itself!) from another layer. This is the opposite of a union.
   - Think of it as `A & ~B`.
3. Intersect selection.
   - Removes everything but the intersection between the two.
   - Think of it as a bitwise AND operator — `A & B`
4. Exclude selection.
   1. Keeps everything except the intersection between the two.
   2. Think of it as a bitwise XOR operator — `A ^ B`

> [!question]- Which one do we need?
> The **Subtract** boolean operator! We want to remove the smaller circle from the larger one.
>
> Awesome! Now we'll select both and perform that operation:
> ![Subtract](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/6pasted_image_20230718112359.png)

It's starting to look more and more like a charm!
![Charm](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/7pasted_image_20230718112519.png)

Now, I'll add some decorations and drop shadow, and we'll have a completed element!

![Charm with effects](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/8pasted_image_20230718112914.png)

If I have multiple layers that I want to fit into a circle, I can use Figma's **Mask** tool!
![Mask select](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/9pasted_image_20230718113841.png)
_Here, I've created a new circle to use as the frame and selected all the layers I want to be inside of it!_

This tool allows you to use a layer as a "cutout" for another, and we can even adjust it after masking!

Here's the result:
![Masked layers](https://cloud-f6y742j59-hack-club-bot.vercel.app/0pasted_image_20230718114047.png)

Now, we'll place in a product image (ill use the mockup we designed earlier).
![Background + Product](https://cloud-rgpmdor1b-hack-club-bot.vercel.app/1pasted_image_20230722221003.png)
_To make the background stars, I created 4 stars and dropped the opacity to ~60%_

From here, I can add some text using the **Text Tool (T)**, setting its fill color to whatever I want.

![With Text](https://cloud-rgpmdor1b-hack-club-bot.vercel.app/2pasted_image_20230722221229.png)

Awesome! I'll create a couple more to create a grid-like format.

![Few more!](https://cloud-rgpmdor1b-hack-club-bot.vercel.app/3pasted_image_20230722221310.png)

As you might have guessed, the footer will also be the same; we'll use a rectangle as a background:
![Step 1](https://cloud-rgpmdor1b-hack-club-bot.vercel.app/4pasted_image_20230722221404.png)

Add in star shapes with the **Star Tool** and add our logo!
![Step 2](https://cloud-rgpmdor1b-hack-club-bot.vercel.app/5pasted_image_20230722221434.png)

After that, it's up to us to add whatever information we think is necessary. I'll add a privacy & terms page and a contact us page :D

![Step 3](https://cloud-rgpmdor1b-hack-club-bot.vercel.app/6pasted_image_20230722221519.png)

Try creating the Navbar by yourself :)

---

Looks like you've got the hang of it! Remember to look back at the tool cheat-sheet from earlier and start to build out your store.

Here are the pages you should build out **right now**:

1. **Landing Page** (add your own creative splash on this!)
2. **About Page**
3. **Product Listing Page** (can be on the landing page)
4. **Product Pages** (for each one you sell)

To make these, you can create separate frames for each page.

Good luck hacker! We'll see you on the other side.

---

## SO MANY DUPLICATES 😱

While you were designing your pages, you may have realized how many reused components are in each page. So, if you wanted to add an extra button or link, you had to go through every single page and edit it.

Fear not, Figma has a wonderful tool called: **Assets**!

These are layers that reference another layer instead of having its own value. If your familiar with pointers and references, these are basically the same thing.

### Layer

![Layer Animation](https://cloud-faklou4uh-hack-club-bot.vercel.app/0color-scheme-_remix_.gif)

### Asset

![Asset Animation](https://cloud-ghmaoucif-hack-club-bot.vercel.app/0color-scheme-_remix___1_.gif)

First, we'll create a new page so that we have our final prototype in one place. We can do this by expanding the "Page" icon on the left sidebar and clicking the '+' icon when it appears. Name this page **Assets**.

Now, we'll copy over the elements that we want to turn into components.

![Copied Elements](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/0pasted_image_20230717003414.png)

Now, select the entire asset, right click, and select "**Create Component**"

![Create Component](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/1pasted_image_20230717003457.png)

Do the same for every other asset you want to create. You'll know you've done it correctly if they appear purple in the left sidebar.

![Component layers](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/2pasted_image_20230717003601.png)

When you open the **Assets** tab in the left sidebar, you'll get the chance to drag it into your project!

![Asset sidebar](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/3pasted_image_20230717003648.png)

You did it hacker!

## Make it ✨ Magical ✨

Well we have our pages, but it doesn't feel right. What's missing?

Right. It just feels like we're scrolling through images. Let's make this an actual prototype.

You might have noticed a **Prototype** tab in the right sidebar; this tab helps us make interactions from clicking different areas of the page.

For example, if we click an element on our **About** page, we'll get options to create an interaction.

![Prototype tab](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/4pasted_image_20230717004550.png)

Let's try that!
![Interaction](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/5pasted_image_20230717004607.png)

For now, we'll just use the **On Click** trigger with the **Navigate to** response. This gives us a list of frames in our project we can jump to:
![Navigate to?](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/6pasted_image_20230717004656.png)

Select the one you want and customize the transition!
p.s. for similar pages (such as your product page), it might be more intuitive for a "**Smart Animate**" transition.

For example, I set the transition between the home and about page to "**Smart Animate**", and this is the result:
![Animation Preview](https://cloud-h7lkfzs4c-hack-club-bot.vercel.app/02023-07-18_11-49-28.gif)

**Follow the same technique for every single clickable element!**

---

Once your finished, click the present icon on the top right corner (looks like a play button) and enjoy the show! Make sure you're on the final prototype page and not the assets page!

Splendid! Here's are my interactions in my example design:
![Final prototype](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/7pasted_image_20230717005112.png)

Hopefully, your design looks totally unique and different!

Get ready to pitch it to the hosts... 🍿

## Up for a challenge?

There's a really awesome tool in your toolbar that I haven't mentioned.
![Plugins?!](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/8pasted_image_20230717005231.png)

The **Plugins** tab :00

It's a community run store with a lot of amazing pre-made components/tools to help with your Figma design.

Feel free to browse through and find something awesome for your design. One that I thought was really cool is called "_MeshFlow Gradients_".

## Your next adventure.

> You thought it was over?
> sorry

Onward to the next island! Here we'll learn how to integrate the Shopify API with Next.JS to make our site **REAL**!

Before you head over, you should implement your design in code! (preferably in Next.JS or similar).

Check out the jam "**Wielding the Elemental Magic of the Web (not evil)**" to figure out how to implement your design in HTML and CSS! Also, try enabling "**Dev Mode**" in Figma (a switch on the top right corner) to see property values in CSS and example code for some objects! If you have no idea what Next.JS is, I suggest you check out their <a href="https://nextjs.org/docs">Official Tutorial</a> to get started.

It's been a blast jamming out with you! Catch you later :>
<video controls style={{width: "400px"}}> <source src="https://cloud-f39p2nwab-hack-club-bot.vercel.app/00718.mp4" type="video/mp4"/> </video>
<br/>
<small>"Oh, Christmas Tree" Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 4.0 License
http://creativecommons.org/licenses/by/4.0/</small>


In this jam, you'll be designing your own online store with Figma! In the next jam, we'll be using the Shopify API to turn this into a real store.


Design Your Own Digital Store


In this workshop, you're going to use p5.js, along with 🌟 PHYSICS 🌟, to animate colorful particles. Along the way, you'll learn a little bit about:

- how to use p5.js
- some basic physics concepts
- how _fun_ creative coding is

All of the different particles will act like planets in orbit. They'll all apply forces (gravity) to each other depending on their mass and their distance from each other. The main difference here is that they are much closer together than real planets. This is so you don't have to wait an entire year for one particle to orbit another.

When you are done with this workshop, you should end up with something similar to this!

[![Final product](https://camo.githubusercontent.com/588608bd77901d32e460818794b2832627e4a785d69bee0821115166d7be3a1b/68747470733a2f2f636c6f75642d6f64646a696971356b2e76657263656c2e6170702f3073756d6d6172792e676966)](https://camo.githubusercontent.com/588608bd77901d32e460818794b2832627e4a785d69bee0821115166d7be3a1b/68747470733a2f2f636c6f75642d6f64646a696971356b2e76657263656c2e6170702f3073756d6d6172792e676966)

This workshop should take 30-45 minutes to complete.

## Getting Set Up

First you need to setup your project. I created a basic p5.js [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) that you can use to easily start coding.

1. Go to [https://repl.it/@SquarePear/p5-boilerplate](https://repl.it/@SquarePear/p5-boilerplate)
2. Click "fork" to make a copy for you to edit

## Making a Particle

The first step in this project is to create a class to manage the particles. Before you can do this, you should create a new file to store the class for easier readability.

1. Create a new file called `particle.js`
2. Add this file in between the `<body>` `</body>` tags of the `index.html` file:

```html
...
<body>
  <script src="particle.js"></script>
  <script src="sketch.js"></script>
</body>
...
```

3. Add the class definition to `particle.js`

```js
class Particle {}
```

A [class](https://en.wikipedia.org/wiki/Class_(computer_programming)) is just a way of connecting a set of variables and functions in one package. Now that you have a particle class, you need to define what the particle can do.

Inside your newly-created `Particle` class, add:

```js
class Particle {
  constructor (x, y, mass) {
    // Setup particle
  }

  draw() {
    // Draw particle
  }

  applyForce(force) {
    // Apply force to particle
  }

  physics(particle) {
    // Use particle
  }

  update() {
    // Update particle
  }
}
```

We just added a list of functions that objects of this class can perform. With the basic structure set up, lets go through each function individually and add the code.

```js
...
constructor(x, y, mass) {
  this.position = createVector(x, y)
  this.acceleration = createVector(0, 0)
  this.velocity = createVector(0, 0)
  this.mass = mass

  // radius = (mass / π) ** 0.5
  this.radius = Math.sqrt(this.mass / PI) * SCALE
  // set random color for particle
  this.color = color(random(0, 255), random(0, 255), random(0, 255))
}
...
```

The [constructor](https://en.wikipedia.org/wiki/Constructor_(object-oriented_programming)) is used to create an instance of a class. In this case, we use it to set up all of the variables when we make a new particle. The [`createVector()`](https://p5js.org/reference/#/p5/createVector) function is provided by p5 to easily make a [vector object](https://p5js.org/reference/#/p5.Vector). This is just a 2d line or position with a few helper functions to easily modify the values.

Next, let's add the code for drawing the particle.

```js
...
draw() {
  // Remove outline
  noStroke()
  // Set fill to particles color
  fill(this.color)
  // Draw particle
  ellipse(this.position.x, this.position.y, this.radius * 2)
}
...
```

This one is much simpler. All this function does it set the color using the [`fill()`](https://p5js.org/reference/#/p5/fill) function and then draws the particle using p5's [`ellipse()`](https://p5js.org/reference/#/p5/ellipse) function.

Next, let's add the code for applying force to the particle.

```js
...
applyForce(force) {
  // acceleration = force / mass
  this.acceleration.add(p5.Vector.div(force, this.mass))
}
...
```

Here we see the first physics formula. This calculates how much acceleration the object should have based on the force applied. We use [Newton's second law of motion](https://en.wikipedia.org/wiki/Newton%27s_laws_of_motion#Constant_Mass)—`F=ma` or `Force = mass * acceleration`— to calculate this acceleration.

Next, let's add the code for applying real-world physics to a particle.

```js
...
physics(particle) {
  // Don't apply to self
  if (this === particle) return

  // mass1 * mass2
  let mass = this.mass * particle.mass
  // radius1 + radius2
  let radius = this.radius + particle.radius
  // Distance between particles
  let distance = this.position.dist(particle.position)

  // Don't apply if particles are touching
  if (distance <= radius) return

  // force = G * mass1 * mass2 / distance ** 2
  let force = p5.Vector.sub(this.position, particle.position)
    .setMag(G * mass  / (distance ** 2))

  // Apply the force
  particle.applyForce(force)
}
...
```

This one looks complicated, but if you think about it in terms of physics it is actually surprisingly simple.

- The first line is just making sure it isn't trying to compare itself.
- Next, we declare a few variables.
- The second if statement is just used to stop the forces when the particles are colliding. This isn't 100% necessary, but things will probably break if they get too close.
- The `force` variable points from the affected particle to the affecter.
- Next the magnitude is set to the amount of force using the [gravitational formula](https://en.wikipedia.org/wiki/Newton%27s_law_of_universal_gravitation).
- Finally, the force is applied to the particle.

Finall y, let's write some code for updating the properties of the particle:

```js
...
update() {
  let deltaVelocity = p5.Vector.mult(this.acceleration, deltaTime)

  this.velocity.set(this.velocity.add(deltaVelocity))

  this.position.set(this.position.add(p5.Vector.mult(this.velocity, deltaTime)))

  this.acceleration.set(0, 0)
}
...
```

This might also look a bit intimidating at first, but if you break it down into sections it is much easier to understand.

- The first line just calculates the change in acceleration. [`deltaTime`](https://p5js.org/reference/#/p5/deltaTime) is used to keep the forces constant no matter how many frames per second you are getting.
- The next line adds the acceleration to the velocity.
- Then the velocity is added to the position, again using `deltaTime` to keep constant changes.
- Finally you reset the acceleration to zero. The velocity stays because of momentum.

Yay! You set up the Particle class! Now you can go back to the main sketch and set up the particle management.

## Managing the Particles

Open the `sketch.js` file in the left sidebar. Right now the code should look like this:

```js
function setup () {
  createCanvas(400, 400)
}

function draw () {
  background(51, 51, 51)
}
```

The [`setup()`](https://github.com/hackclub/hackclub/blob/main/workshops/particle_physics) function is run once at the beginning of the program to do any setup you might need. We use it to create the canvas using [`createCanvas()`](https://github.com/hackclub/hackclub/blob/main/workshops/particle_physics). This creates a 400x400 pixel canvas for us to draw on.

The [`draw()`](https://github.com/hackclub/hackclub/blob/main/workshops/particle_physics) function is run every frame of the program. This can be used to update the animation every frame. We will use it to perform the the physics updates and draw the particles to the canvas.

This file is where we're going to write all the program logic, from creating the `Particle`s we just wrote, to applying physics to them and animating them.

First, we will create the array of particles we will be displaying. Then we need to update and display them every frame inside `draw()`.

First, we need to set some constants and cerate an array of particles we will be displaying. Above the `setup()` function, at the beginning of the file, add:

```js
// Constants
const G = 6.67e-11
const SCALE = 0.001

// Array to store particles
let particles = []
```

In physics, `G` refers to the [Gravitational Constant](https://simple.wikipedia.org/wiki/Gravitational_constant), which is 6.67 x 10-11 N⋅m2⋅kg-2 (which we'll write as 6.67e-11 in JS). This constant is used as the basis for all sorts of fun equations.

Now, let's set up our canvas. In the `setup()` function, add:

```js
function setup() {
  createCanvas(400, 400)

  // Loop and create each particles
  for (let i = 0; i < 10; i++) {
    let x = random(0, width)
    let y = random(0, height)
    let mass = random(2e8, 1e9)

    // Add the new particle to the list
    particles.push(new Particle(x, y, mass))
  }
}
```

All we're doing in the `setup()` function is creating a random location on the canvas, as well as a random mass, for the particle. Then, we create a new `Particle` with this data and add it it to the array of particles we just created.

All of the building blocks are in place. Finally, we're going to use the `draw()` function to animate the particles we created according to the rules of physics. In the `draw()` function, add:

```js
function draw() {
  // Set the background of the canvas to a dark gray
  background(51, 51, 51)

  // Loop all particles twice
  for (const particleA of particles)
    for (const particleB of particles)
      if (particleA !== particleB) particleA.physics(particleB)

  // Loop particles again
  for (const particle of particles) {
    // Update the particle with the new acceleration and velocity
    particle.update()
    // Draw the particle on the canvas
    particle.draw()
  }
}
```

- First, we set the background of our canvas to a dark gray
- Then, we loop through the array of particles twice. If the two particles in the nested for loop are different, we use the `physics()` function we wrote earlier to apply physics to them
- After that, we loop through the array of particles again and update each `Particle` object with the new data as a result of running `physics` on the particles.
- And finally, to see the changes, we draw the particle.

We're going through this slowly and step-by-step, but don't forget that because all of thise code is in the `draw()` function, it's run dozens (sometimes hundreds) of times per second. This is how the smooth animation that you'll see in a second is created.

Here's the final sketch.js code:

## You're Finished!

Click the green "Run" button at the top of the page. You should see some colorful particles movine!

And with that, you should now have a working—although very basic—simulation of gravity between particles. This simulation is roughly what would happen in real life with these exact masses and distances. The values themselves are a bit over exaggerated to be more visually interesting.

- [Final Code](https://repl.it/@SquarePear/Particle-Physics#sketch.js)
- [Final Project](https://particle-physics.squarepear.repl.co/)

## What to Do Next?

Try changing some values and see how they affect the simulation. Add some extra features like creating a particle on click, anti-particles, or maybe apply this concept in a whole different way?

1. [Add on Click](https://repl.it/@SquarePear/Particle-Physics-Add-on-Click#sketch.js): Add a particle whenever you click on the canvas
2. [Anti-Particles](https://repl.it/@SquarePear/Particle-Physics-Anti-Particle#sketch.js): Anti-particles that repel other particles instead of attracting
3. [Physical Text](https://repl.it/@SquarePear/Particle-Physics-Text#sketch.js): Trace letters with particles


Creating a basic particle physics simulation and rendering using p5.js

Making a Basic Particle Physics Simulation


Sound visualization is one of the coolest things that modern-day web development tools have made accessible. There’s something surreal and indescribably satisfying about _seeing_ the sounds around you on your screen and somehow understanding what you’re seeing.

[![Colorful particles traveling vertically down the screen](https://camo.githubusercontent.com/ae14331c08ceff647994cdce13fb4a2247c4eca77b5f0c4ac36de966cda3c790/68747470733a2f2f636c6f75642d6d746f736c726739722d6861636b2d636c75622d626f742e76657263656c2e6170702f3266696e616c2d64656d6f2e676966)](https://camo.githubusercontent.com/ae14331c08ceff647994cdce13fb4a2247c4eca77b5f0c4ac36de966cda3c790/68747470733a2f2f636c6f75642d6d746f736c726739722d6861636b2d636c75622d626f742e76657263656c2e6170702f3266696e616c2d64656d6f2e676966)

In this workshop, you’re going to create a galaxy out of shimmering particles that expand and move based on microphone input, in less than 50 lines of code.

[Final code](https://sound-galaxy--techbug2012.repl.co/)
[Final demo](https://sound-galaxy-1.sahitid.repl.co/)

## Getting Started

We’re going to be using [p5.js](https://p5js.org/), a JavaScript library for creative coding, to make this project. This project requires two separate p5.js libraries: `p5.js` and `p5.sound.js`.

Get started from the starter project by [clicking here](https://repl.it/@TechBug2012/sound-galaxy-starter). Once your project spins up, navigate to the `index.html` file. Then, just before the end of your `<head>` tag, import these two libraries:

```html
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/addons/p5.sound.js"></script>
```

Great! Now that we’ve imported p5, we’re ready to start writing JavaScript.

## About the Fourier Transform

At the center of everything we’re building in this workshop is something called a Fourier Transform: a mathematical operation that takes a frequency (e.g. the sound frequency picked up by your computer’s microphone) and decomposes it into the individual wavelengths that make it up. You don’t need to understand how the Fourier Transform works—it’s built into p5 and super easy to use—but if you’re interested, 3Blue1Brown made [a great video](https://youtu.be/spUNpyF58BY) explaining it.

## Setting Up p5

p5.js is primarily composed of two functions: `setup()` and `draw()`. The `setup()` function runs only once when the project first starts up, and the `draw()` function runs continuously afterwards. Let’s start by creating these two functions in your `script.js` file:

```js
function setup() {}

function draw() {}
```

Everything in p5.js happens on a p5 canvas. Let’s create a canvas that fills our window in the `setup()` function:

```js
function setup() {
  createCanvas(windowWidth, windowHeight)
  noStroke()
}
```

By default, p5 adds an outline around objects in a canvas. `noStroke()` removes this outline.

Now, let’s tell p5 to listen for microphone input.

```js
function setup() {
  createCanvas(windowWidth, windowHeight)
  noStroke()

  let mic = new p5.AudioIn()
  mic.start()
}
```

Next, let’s initialize p5’s Fast Fourier Transform algorithm. We’ll be using this throughout the project, so we want to declare it globally and initialize it in the `setup()` function:

```js
let fft

function setup() {
  createCanvas(windowWidth, windowHeight)
  noStroke()

  let mic = new p5.AudioIn()
  mic.start()

  fft = new p5.FFT()
  fft.setInput(mic)
}

function draw() {}
```

## Creating a Particle

We’re almost ready to start drawing—but as of now, we don’t have anything to draw! Let’s create a Particle object and give it some basic properties. Above the `setup()` function, add:

```js
let Particle = function (position) {}
```

This is how [objects](https://www.w3schools.com/js/js_objects.asp) are created in JavaScript. If we want to create a new Particle, we would use `let particle = new Particle()`.

We want to give the Particle object a standard set of properties that can be changed for each instance of a Particle. For now, let’s start with `position`, `speed`, and `color`—but think of some other properties that your particles can have!

```js
let Particle = function (position) {
  this.position = position
  this.speed = createVector(0, 1)
  this.color = [random(0, 255), random(0, 255), random(0, 255)]
}
```

Here, we’re setting:

- `position` to a position given to the Particle when it’s created
- `speed` to 0 in the x direction and 1 in the y direction
- `color` to a random [RGB](https://www.w3schools.com/colors/colors_rgb.asp) color.

Now that we've created our Particle object, let’s create a bunch of particles and randomly distribute them across our screen. The starter project you started with comes with a handy `galaxyManager`, which gives you a few functions to easily manage your galaxy with. The `positionParticles()` function creates an array of 1024 particles at random places on your screen. Let's add this function to the bottom of `setup()`.

```js
function setup() {
  createCanvas(windowWidth, windowHeight)
  noStroke()

  let mic = new p5.AudioIn()
  mic.start()

  fft = new p5.FFT()
  fft.setInput(mic)

  positionParticles()
}
```

## Drawing Particles

Before we can draw our particles, we need to think about what “drawing” a particle even means. As of now, a “particle” is just an abstract idea that we made up. We've given it certain properties, but we haven't used these properties anywhere.

Let’s go back to our `Particle` object and write a [method](https://www.w3schools.com/js/js_object_methods.asp) that gives instructions for drawing a particle.

```js
let Particle = function (position) {
  this.position = position
  this.speed = createVector(0, 1)
  this.color = [random(0, 255), random(0, 255), random(0, 255)]

  this.draw = function () {
    circle(this.position.x, this.position.y, this.diameter)
    fill(this.color)
  }
}
```

The `draw` method that we just added creates a circle at the `x` and `y` coordinates of the particle and fills it with the color assigned to it. Now, instead of being an abstract idea, a Particle is a randomly-colored circle.

Now, if we wanted to draw a Particle called `awesomeParticle` at the top left corner of the screen, we could do it with `awesomeParticle.draw()`.

Now that our particles are real objects, we can finally draw them on our canvas! In the p5 `draw()` function (the function under `setup()`, not the method you just created), add:

```js
function draw() {
  drawParticles()
}
```

`drawParticles()` is another function offered by the galaxy manager that calls the `draw` method on every instantiated particle.

If you run your repl now, you should see this:

[![Colorful particles randomly scattered on a white canvas](https://camo.githubusercontent.com/99375510ad5585041cb8773b1a241210216f11b31e5f3fc28552c065b2bf7999/68747470733a2f2f636c6f75642d6d746f736c726739722d6861636b2d636c75622d626f742e76657263656c2e6170702f31647261772e706e67)](https://camo.githubusercontent.com/99375510ad5585041cb8773b1a241210216f11b31e5f3fc28552c065b2bf7999/68747470733a2f2f636c6f75642d6d746f736c726739722d6861636b2d636c75622d626f742e76657263656c2e6170702f31647261772e706e67)
Nice! We've just given life to our particles! If you want to make your canvas look more like space, you can add

```js
background(0, 0, 0)
```

to your `draw()` function to make the background black.

```js
function draw() {
  background(0, 0, 0)
  drawParticles()
}
```

## Updating Particles

We have one more problem: the particles don’t move or change at all! Currently, they’re just being drawn according to the properties we gave them earlier. Let’s put the Fast Fourier Transform to use and make our particles update according to the microphone input.

Just like for drawing particles, we need to set instructions for what “updating” a particle means via a method. Under the `draw` method in the `Particle` object, add

```js
this.update = function (energy) {}
```

We’re passing in an `energy`, which is the intensity of sound at each part of the FFT spectrum. In our case, this means the intensity of each particle.

There are endless ways to update a particle based on intensity of sound, but here’s what I personally came up with:

```js
this.update = function (energy) {
  this.diameter = random(5, 7) + energy * 100
  this.position.y += this.speed.y * energy * 10
  if (this.position.y > height) {
    this.position.y = 0
  }
}
```

This makes the particles shimmer (like stars in a galaxy), updates the diameter and speed based on sound intensity, and resets each particle to the top of the screen once they reach the bottom of the screen to make it look like a continuous stream of particles.

This is where you shine! Play around with these numbers, think of other ways to update the particles—don’t walk out of this meeting with this block of code unchanged!

Now that we’ve given instructions for updating a particle, we can finally put the Fast Fourier Transform to use and continuously draw updated particles! In the `draw()` function, remove `drawParticles()` and replace it with these two lines:

```js
let spectrum = fft.analyze()
updateParticles(spectrum)
```

This runs p5’s Fast Fourier Transform algorithm and updates each particle accordingly using another handy function from the galaxy manager.

Congratulations! You did it! Here’s what your entire `script.js` file should now look like:

```js
let fft

let Particle = function (position) {
  this.position = position
  this.speed = createVector(0, 1)
  this.color = [random(0, 255), random(0, 255), random(0, 255)]
  this.draw = function () {
    circle(this.position.x, this.position.y, this.diameter)
    fill(this.color)
  }
  this.update = function (energy) {
    this.position.y += this.speed.y * energy * 10
    if (this.position.y > height) {
      this.position.y = 0
    }
    this.diameter = random(5, 7) + energy * 100
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight)
  noStroke()

  let mic = new p5.AudioIn()
  mic.start()

  fft = new p5.FFT()
  fft.setInput(mic)

  positionParticles()
}

function draw() {
  background(0, 0, 0)
  let spectrum = fft.analyze()
  updateParticles(spectrum)
}
```

Run your repl now, then **open it in a new window** by clicking the window button at the top right corner. Make sure the page has access to your microphone, then click once on the screen. You should start seeing a shimmering galaxy that you can control with your voice!

## Hacking

There are endless ways to make this project completely your own! Go back through your code and look for anything that can be played with. Try changing the default values of your Particles, playing with the numbers in the `update` method, and think of ways you can add to this to make it even better!

Here are some examples of projects that stem from this project but take it even further:

- **Raining particles**: [Demo](https://observant-wild-sunspot.glitch.me/) [Code](https://glitch.com/edit/#!/observant-wild-sunspot)
- **Raining particles 2**: [Demo](https://icy-married-crabapple.glitch.me/) [Code](https://glitch.com/edit/#!/icy-married-crabapple)
- **Using mp3 files as input**: [Demo](https://sound-viz-song-2--techbug2012.repl.co/) [Code](https://repl.it/@TechBug2012/sound-viz-song-2)

Visualize sound by making particles move in a galaxy!

Create Your Own Space-Themed Audio Visualizer


_Note: this workshop requires Google Chrome or another browser [supporting the Web Speech API](https://caniuse.com/mdn-api_speechrecognition)._

We’ll be using [p5.js](https://p5js.org/) & the p5.speech library to make something fun with web speech recognition! Say a color name out loud, & the screen will fill with that color.

[**Live demo**](https://speak-colors.glitch.me/)  
[**Final code**](https://glitch.com/edit/#!/speak-colors)

## Setup

First, let’s make a new HTML project on [repl.it](https://repl.it/): [start one right here](https://repl.it/languages/html).

Next, we need to import the p5 & p5.speech libraries. Because these are long URLs, just replace the file with this:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Speak a Color</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
    <script src="https://rawcdn.githack.com/IDMNYU/p5.js-speech/e7ae007d61f048fc2379971b0de7d5db8abb7eee/lib/p5.speech.js"></script>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>
```

But never copy & paste code without reading it 🙂

- We’re initializing an HTML page
- We’re giving it a `<title>`, which appears as the tab name in your browser
- We’re linking the two external libraries we need
- Finally, a link to the `script.js` file we’ll write our own JavaScript code in

The rest of the code samples in this workshop will all be for `script.js`, where we write the p5 code.

## Displaying instructions

First, we need to set up a canvas with p5.

- We want the canvas to fill the screen, so p5's `windowWidth` & `windowHeight` come in handy.
- Let’s go ahead & fill the background with white, and make the text color dark grey.

```js
function setup() {
  createCanvas(windowWidth, windowHeight)
  background(255)
  fill(25)
}
```

The page still looks empty, oops! Let’s add some initial instructions, even though they won’t do anything yet.

(You only need the `text()` line here—you can omit the `textSize`, `textAlign` etc—but these other lines make the text more fun-looking. Feel free to change the size or font!)

```js
function setup() {
  createCanvas(windowWidth, windowWidth)
  background(255)
  fill(25)

  textSize(48)
  textAlign(CENTER)
  textStyle(BOLDITALIC)
  textFont('"Avenir Next", system-ui, sans-serif')
  text('SAY A COLOR', width / 2, height / 2)
}
```

Fantastic! Up next: the speech recognition we came here for.

## Running speech recognition

The p5.speech library has [an example](https://github.com/IDMNYU/p5.js-speech/blob/master/examples/05continuousrecognition.html) of "continuous" speech recognition—that is, the mic stays active after you’ve said your first phrase, instead of being one-time.

Let’s set up continuous speech recognition, and display an alert when new speech is transcribed:

```js
const speech = new p5.SpeechRec('en-US', parseResult)
speech.continuous = true
speech.interimResults = false

function setup() {
  // …
  text('SAY A COLOR', width / 2, height / 2)
  speech.start()
}

function draw() {
  // Where we’re going we don’t need drawing
}

function parseResult() {
  if (speech.resultValue) {
    alert(speech.resultString)
  }
}
```

We’re getting there…

## Changing the color

Because HTML/CSS support a wide array of [named colors](https://html-color-codes.info/color-names/), we’re going to use those for this project. (You can read more about [where the color names come from](https://www.chenhuijing.com/blog/where-did-css-named-colours-come-from/), or if you want to extend this project, figure out how to use [JavaScript objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) to support your own colors!)

For the first iteration, we’re just supporting single-word colors, because it’s simplest.

- We’re starting with the `speech.resultString`, which we used before.
- To get the last word:
    - We’ll do [`.split(' ')`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split), which converts the text into a [JavaScript array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of words: `'hello there friend'.split(' ')` is `['hello', 'there', 'friend']`
    - `.pop()` then gets the last item from the array, which is the last word as a string
- Finally, because we want all text on the site to be in all-caps, we’ll add `.toUpperCase()`
- These function calls can all be chained next to each other!

```js
// …
function parseResult() {
  if (speech.resultValue) {
    alert(speech.resultString.split(' ').pop().toUpperCase())
  }
}
```

Spectacular! Now let’s set the background color to the color, and write it onscreen.

```js
// …
function parseResult() {
  if (speech.resultValue) {
    const color = speech.resultString.split(' ').pop().toUpperCase()
    background(color)
    text(color, width / 2, height / 2)
    console.log(color)
  }
}
```

- Because we need to use the color name in multiple places, we’re setting it to a variable, so that we don’t have to do the whole split/pop/upperCase things multiple times.
- Setting the background is as simple as `background(color)`. Thanks, p5!
- Adding the text onscreen works just the way the instructions did. Because we want it centered horizontally & vertically, we set the x coordinate to `width / 2` (so the midpoint of the width of the canvas), & the y to `height / 2` (same for canvas height).
- The `console.log` line is totally optional, but it allows you to see what’s being transcribed in your [DevTools JavaScript console](https://developers.google.com/web/tools/chrome-devtools/console/log).

## Wrapping up

That’s it! Here’s the whole `script.js` file:

```js
const speech = new p5.SpeechRec('en-US', parseResult)
speech.continuous = true
speech.interimResults = false

function setup() {
  createCanvas(windowWidth, windowHeight)
  background(255)
  fill(25)

  textSize(48)
  textAlign(CENTER)
  textStyle(BOLDITALIC)
  textFont('"Avenir Next", system-ui, sans-serif')
  text('SAY A COLOR', width / 2, height / 2)
  speech.start()
}

function draw() {
  // Where we’re going we don’t need drawing
}

function parseResult() {
  if (speech.resultValue) {
    const color = speech.resultString.split(' ').pop().toUpperCase()
    background(color)
    text(color, width / 2, height / 2)
    console.log(color)
  }
}
```

A few ideas to take this further:

- Support multi-word color names. Hint: instead of getting the last word, maybe figure out how to remove the spaces?
- As aforementioned, support your own colors 👀
- Keep track of all the colors, maybe show them all simultaneously?

Color your screen with your voice via speech recognition.

Speak & Color Your Screen Outloud


One of the most common myths about coding among people who are first learning to code is that coding mostly consists of sitting in a dark room all day writing algorithms in a black terminal window with green text, solving complex mathematical equations, and generally being a genius.

You’re going to crush this myth in this workshop by making crazy, colorful splatter paint right in your web browser, in only 20 minutes.

![Colorful patterns of dots and lines on a canvas](https://cloud-3aosybiuc-hack-club-bot.vercel.app/1final-demo.png)

[Final code](https://repl.it/@TechBug2012/splatter-paint#index.html)
[Final demo](https://splatter-paint.techbug2012.repl.co)

## Getting started

Start by creating a new HTML project on repl.it by going to [repl.it/languages/html](https://repl.it/languages/html).

We’re going to be using a library called [Paper.js](http://paperjs.org), which makes it easy to create cool visuals on an [HTML canvas](https://www.w3schools.com/html/html5_canvas.asp).

To import a JavaScript library in HTML, we use the `<script>` tag and include a link to the library we want to import. For Paper.js, this looks like:

```html
<script src="https://unpkg.com/paper@0.11.5/dist/paper-full.min.js"></script>
```

Add a script tag that imports Paper.js somewhere in the `<head>`. Then, directly under it, add the following:

```html
<script
  type="text/paperscript"
  canvas="splatterPaint"
  src="/script.js"
></script>
```

Let’s go over what each attribute of this tag does:

1. `type="text/paperscript"` tells Paper.js that the code in the script is Paper.js code
2. `canvas="splatterPaint"` refers to the ID of the HTML canvas that Paper.js will operate on (we haven’t created this canvas yet, but we will in a second)
3. `src="/script.js"` means that the content of this script is located in your `script.js` file

Remember when we referred to a canvas called `splatterPaint` that hasn’t been created yet? Let’s create that canvas. In the `<body>`, remove the line that imports `script.js` and replace it with

```html
<canvas id="splatterPaint"></canvas>
```

Amazing! we’ve got ourselves a canvas.

## Drawing some circles

Now that we’ve successfully imported Paper.js and created a canvas to work on, it’s time to write the JavaScript code that will create our splatter paint.

Let’s write a function that draws a circle at the cursor’s position whenever the mouse is moved.

Navigate to your `script.js` file and create a function called `onMouseMove`:

```js
function onMouseMove(event) {}
```

Although you can normally call functions whatever you want, it’s important that this function is called `onMouseMove` and passes in an `event`. Paper.js knows what `onMouseMove` is—when it sees this function, it will know to run the code you write inside it every time your mouse moves, and that the `event` you pass in is a [Paper.js Mouse Event](https://paperjs.org/reference/mouseevent/). Cool, right?

Time to draw our circle! Inside the function you just created, add this code snippet, which creates a circle at the mouse cursor with a radius of 10px:

```js
var path = new Path.Circle({
  center: event.middlePoint,
  radius: 10
})
```

If you run your repl now and move your mouse around, you’ll see...nothing. You are, in fact, drawing circles, but the circles are currently transparent. So, let’s give them some color. Under the previous code snippet, still in the `onMouseMove` function, add:

```js
path.fillColor = {
  hue: 0,
  saturation: 1,
  brightness: 1
}
```

Right now, your entire `script.js` file should look like this:

```js
function onMouseMove(event) {
  var path = new Path.Circle({
    center: event.middlePoint,
    radius: 10
  })
  path.fillColor = {
    hue: 0,
    saturation: 1,
    brightness: 1
  }
}
```

Instead of using the more common hexademical or RGB color systems, Paper.js uses the HSB color system, which uses angles on a color wheel to describe color. In the HSB color system, 0 = 0° = red, and `360*n`° is also red.

![Color wheel in which each color is assigned a degree value](https://cloud-b0scmt0cu-hack-club-bot.vercel.app/0hsb-color-wheel.png)

(If you’re interested in learning more about the HSB color system, check out [this fantastic explanation](https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html))

With this in mind, try running your repl now. Because you set `hue` to 0, you’re now drawing red circles! But your circles only appear in the top left corner of the screen. That’s because the width and height of your canvas are currently set to the Paper.js defaults (300px by 150px).

Let’s make your canvas fill the whole screen. In your `style.css` file, add the following:

```css
canvas {
  width: 100%;
  height: 100%;
}
```

Run your repl again.

Almost there. The CSS you just wrote set the canvas width and height to 100% of the parent element. In your `index.html` file, `<body>` is parent element of the `<canvas>` because you created the canvas in between the `<body>` tags.

`<body>` is currently as big as its own parent element, `<html>`, which doesn’t quite fill the whole screen. With this in mind, add the following to your CSS file:

```css
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
```

This sets the width and height of the body to the width and height of your screen, and removes any extra space between the edge of your screen and the body.

Just to recap: your entire CSS file should now look like this:

```css
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%;
}
```

If you run your repl again, you should notice that your red circles are now filling the entire screen!

![Random pattern formed by red circles](https://cloud-3aosybiuc-hack-club-bot.vercel.app/6red-circles.jpg)

## Making it Splattery

We’re getting somewhere, but this still doesn’t feel very splattery.

![colorful paint randomly splattered on a canvas](https://cloud-3aosybiuc-hack-club-bot.vercel.app/5real-splatter-paint.jpg)

Part of what makes splatter paint so fun to create and look at is the chaotic randomness of everything on the canvas. So, if you want to get your website as close to splatter paint as possible, the best way to do it is to introduce some randomness.

Change the radius of your circles from `10` to `Math.round(Math.random() * 25) + 5`. This makes the radius a random number between 5 and 30. Then run the repl again.

![Circles with large radii forming a random pattern on a canvas](https://cloud-3aosybiuc-hack-club-bot.vercel.app/4random-radius.jpg)

Not bad, but it feels sort of mashed together, doesn’t it? Maybe we can make each circle unique by making it a different color than the last. Try changing the hue from `0` to `event.count * 3`. Run the repl and see what happens.

![Rainbow assortment of circles of various sizes on a canvas](https://cloud-3aosybiuc-hack-club-bot.vercel.app/3rainbow-colors.jpg)

`event.count * 3` creates a rainbow effect by setting the hue on each circle to the total number of times a circle has been drawn multiplied by 3, which jumps around the HSB color wheel. And it looks great!

Congratulations! You can now splatter colorful circles all over your screen. If you haven’t already, open your repl in a new tab and treat yourself to a bigger canvas to go crazy on.

## Hacking

Your journey is far from over. There are endless directions you can take this project in. Here are a few suggestions.

1. If you want to increase the distance between each circle, you can add `tool.fixedDistance = SOME_NUMBER` to the top of your `script.js` file. This will fire the event after your cursor has moved every `SOME_NUMBER` px instead of every time your mouse moves. You can set it to fixed number, or you can make it random!
2. If you find the rainbows too predictable, you can set the hue to a random number between 0 and 360 (remember, this covers every color on the HSB system).
3. Who says your canvas has to be white? Try setting the background color of your website to something custom—your favorite color, an image, or even a [gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)—and/or change it every time a new circle is created.
4. Who says you have to draw circles? Try drawing a random mix of circles, ovals of random lengths and widths, and other shapes.
5. Randomness is fun, but controlled randomness is even more fun. Take a look at the [Paper.js docs on mouse events](https://paperjs.org/reference/mouseevent/). How can you use the properties of the MouseEvent to play with the radius? (here’s what I came up with: try setting the radius to `event.delta.length` and see what happens)
6. If you want to hurt your eyes and ears, try using the [Tone.js](https://tonejs.github.io) library to play a synth sound of a random frequency whenever a new circle is created.

Here are some example projects that have stemmed from this project:

- [https://welllitvelvetyoperation.techbug2012.repl.co](https://welllitvelvetyoperation.techbug2012.repl.co)
- [https://splatter-paint-crazy.techbug2012.repl.co](https://splatter-paint-crazy.techbug2012.repl.co) (**WARNING: FLASHY COLORS**)
- [https://wlhc-paperjs-demo-custom1.glitch.me](https://wlhc-paperjs-demo-custom1.glitch.me)

Now, your task is to spend the rest of the meeting making this project insanely cool and totally unique!

Crazy colorful splatter paint in your browser with Paper.js


Splatter Paint in Your Browser

Whether you have programmed your whole life or this is your very first project, there is plenty of fun to be had with creating a  Choose Your Own Adventure Game (CYOA)! This build incorporates music, interactive elements, and the ability to control all stylistic  features! The most important part is to use your imagination since there is no limit to what YOU can create!


Crafting a Build Your Own Adventure Game!

In this Jam, you'll be creating an awesome unique Lofi Animation using Voxels! It will be a lot of fun and you will have an awesome animation as a result!


Creating Your Own 3D Club Lofi Animation

In this jam, we'll be using ChatGPT to generate the text of a children's comic, and use Stable Diffusion to create pictures for the comic. Both ChatGPT and Stable Diffusion are completely free. Lastly, we'll walk through deploying your comic as a website (yes, with a live URL :)) so you can share it with your friends 🌎


Create Your Own Comic Book with AI

![https://cloud-4vl3zrzew-hack-club-bot.vercel.app/7image.gif](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/7image.gif)

Imagine a universe where you hold the magic to create your own dimensions and craft the castles of your dreams. **Today, we'll embark on a journey through the heart of VR development by constructing our very own floating virtual lands and join forces by integrating them into a shared celestial town.**

## Objective

In this workshop, we'll not only dive into the futuristic world of Augmented Reality (AR) but we're going one step further, summoning not one, but multiple interactive 3D models to our web-based AR application. Because if you can make one duck appear, why not a whole duck army?

## Prerequisites

You should have a basic understanding of HTML, CSS, and JavaScript. You know what they say, if you can say "Hello, World!" in these languages, you're ready to conquer the AR world.

![https://cloud-4vl3zrzew-hack-club-bot.vercel.app/6image__1_.gif](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/6image__1_.gif)

## Tools

- HTML, CSS, JavaScript - The holy trinity of web development.
- AR.js and A-Frame libraries - Our magic AR wand.
- Any text editor - Even Notepad is invited to this party!
- Any modern web browser - Yes, even Internet Explorer... if you dare.

## Getting Started

1. Head over to [Argument Reality Template](https://replit.com/@DevIos01/WebBasedArgumentReality-Template) and click "fork". Then, sign up or sign in, which will load the new dashboard where you can do everything.

![Gif of how to fork the project](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/5ar__1_.gif)


1. Take a moment to look around and familiarize yourself with this lovely dashboard.

![image (19).png](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/4image__19___1_.png)

**Source Code:** The canvas where all your creativity takes the form of code.

- Type in your desired code, using the provided programming language syntax.
- Lines are numbered for easy tracking and debugging.
- Syntax is color-coded for readability and error prevention.

**Toolbar:** Actions for coding and executing scripts.

- Press "Run" to execute your current script.
- Press "Version control" to manage your coding versions.

**Left sidebar:** File explorer, list of all files in the current workspace.

- Click on a filename to open it in the editor.
- Right-click a file for more options like rename, move, delete, and more.

**Right sidebar:** Debug console, shows output of your executed scripts.

- Use the "Clear" button to clear the console.

### Important controls:

- **New File:** **`Ctrl`** + **`N`**
- **Save File:** **`Ctrl`** + **`S`**
- **Find:** **`Ctrl`** + **`F`**
- **Replace:** **`Ctrl`** + **`H`**
- **Comment/Uncomment:** **`Ctrl`** + **`/`**
- **Indent:** **`Tab`**
- **Outdent:** **`Shift`** + **`Tab`**
- **Delete:** **`Ctrl`** + **`D`**
- **Go to line:** **`Ctrl`** + **`G`**
- **Autocomplete:** **`Ctrl`** + **`Space`**

![https://cloud-4vl3zrzew-hack-club-bot.vercel.app/3image__2_.gif](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/3image__2_.gif)

Steps

### 1. Setting Up

Picture this - you're a wizard, and you're about to cast your first spell. You reach out for your wand and your spell book, right? Similarly, in the realm of AR, our HTML document is our spell book and the JavaScript files are our magic wands!

```html
<!DOCTYPE html>
<html>
  <head>
      
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
  <script
    src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
  <script
    src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
  
</body>
</html>

```

![https://cloud-4vl3zrzew-hack-club-bot.vercel.app/2image__3_.gif](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/2image__3_.gif)

We're essentially incorporating these 'spells' into our web page to breathe interactivity into it. Without them, our web page would be a static set. But with JS (our magic ink), we make the elements come alive, move, disappear, change colours, and much more!

Now, we've prepared our magical stage. It's invisible for now, but we're just getting started. Hold onto your wizard hats as we dive deeper into the mystical world of AR!

### 2. Unveiling the AR Scene

Now that we've prepared our magical spell book, it's time to set our stage for the grand performance! Imagine you're a magician, and you want to conjure a magical creature for your audience. In our digital magic show, that creature is a 3D duck.🦆✨

**The Magical Treasure Chest**

First, we need a place to store our magical entities, our 3D models.

```html
    <a-assets>
      <a-asset-item id="animated-asset" src="demo.gltf"></a-asset-item>
    </a-assets>
```

This is our magical treasure chest, holding our precious 3D duck.

**The Magic Circle**

Next, we draw our magic circle. Whenever someone activates this circle (using a specific marker), our magic comes to life!

```html
    <a-marker id="animated-marker" type="pattern" preset="custom" url="marker.patt" raycaster="objects: .clickable"
      emitevents="true" cursor="fuse: false; rayOrigin: mouse;" id="markerA">
      <a-entity id="bowser-model" scale="0.4 0.4 0.4" animation-mixer="loop: repeat" gltf-model="#animated-asset"
        class="clickable" gesture-handler></a-entity>
    </a-marker>
```

**The Magician's Eye**

Every magician needs a way to see and interact with his audience. That's what the magical camera is for:

```html
    <a-entity camera></a-entity>
```

With the cursor, we can point, choose, and interact, just as a magician might use a wand!

**The Magical Scroll**

Lastly, the magician leaves a message, guiding the audience on how to partake in the magic:

```html
<a-text value="Please point your camera at the custom HackClub marker." align="center" position="0 -0.5 -1.5"
      color="red" visible="true"></a-text>
```

![https://cloud-4vl3zrzew-hack-club-bot.vercel.app/1image__4_.gif](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/1image__4_.gif)

When these ingredients come together in our digital cauldron, a delightful AR experience is brewed! The 3D duck majestically appears, twirling and spinning in all its glory. Every magician has more than one trick up their sleeve, and so will we! Stay tuned!🎩🔮

If you've followed the steps to the letter, the enchantments inside your **`<body>`** tag should now look like this. If they don't, fear not! Even the most seasoned magic-makers sometimes stumble. Take a moment to retrace your steps, realign your magic symbols, and let's try the spell within the **`<body>`** realm again!

```html
  <a-scene vr-mode-ui="enabled: false;" loading-screen="enabled: false;" renderer="logarithmicDepthBuffer: true;"
    arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;" id="scene" embedded gesture-detector>
    <a-assets>
      <a-asset-item id="animated-asset" src="demo.gltf"></a-asset-item>
    </a-assets>

    <a-marker id="animated-marker" type="pattern" preset="custom" url="marker.patt" raycaster="objects: .clickable"
      emitevents="true" cursor="fuse: false; rayOrigin: mouse;" id="markerA">
      <a-entity id="bowser-model" scale="0.4 0.4 0.4" animation-mixer="loop: repeat" gltf-model="#animated-asset"
        class="clickable" gesture-handler></a-entity>
    </a-marker>

    <a-entity camera></a-entity>
  </a-scene>

```

### 3. Unleashing Multiple AR Entities (optional)

Alright, conjuring one 3D duck is cool, but you know what's cooler? Conjuring multiple 3D entities! Each entity will be linked to a different marker, leading to an entirely new model. It's like having multiple magic tricks up your sleeve!

```html
  <a-scene embedded arjs>
    <a-assets>
      <a-asset-item id="duck-model" src="Duck.gltf"></a-asset-item>
      <a-asset-item id="another-model" src="AnotherModel.gltf"></a-asset-item>
    </a-assets>
    <a-marker preset="hiro">
      <a-entity id="duck" gltf-model="#duck-model" scale="0.3 0.3 0.3"
        animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; startEvents: spin">
      </a-entity>
    </a-marker>
    <a-marker preset="kanji">
      <a-entity id="another-entity" gltf-model="#another-model" scale="0.3 0.3 0.3"
        animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; startEvents: spin">
      </a-entity>
    </a-marker>
    <a-entity camera>
      <a-cursor></a-cursor>
      <a-text value="Please point your camera at the Hiro or Kanji marker." align="center" position="0 -0.5 -1.5"
        color="red" visible="true"></a-text>
    </a-entity>
  </a-scene>

```

## What Did We Learn?

We've now built a basic AR application with multiple 3D models, and we didn't even need goofy glasses! Not only do we know how to set up an AR scene, but we can also add multiple 3D models to the scene and make them come alive. We've mastered the basics and we're ready to create our own digital universe. Remember, in the world of AR, the only limit is your imagination. Keep coding and keep exploring!

![https://cloud-4vl3zrzew-hack-club-bot.vercel.app/0image__5_.gif](https://cloud-4vl3zrzew-hack-club-bot.vercel.app/0image__5_.gif)

In this guide outlines how to create a virtual reality scene using A-Frame, a web framework for building VR experiences. It discusses a component-based architecture to manage complexity and improve reusability.
