Javascript Training

Hello coach!

Welcome to Javascript Training! I’m so excited to see you taking the time to expand your abilities and become immersed in the Hatch community!

This basic Javascript training will get you understanding the main concepts used throughout Hatch. We will learn the basics of:

- Javascript Programming / The Hatch Programming Environment
- Coordinate Space / Basic Shapes
- Advanced Shapes
- Functions
- Variables
- If Statements
- For Loops

Each of these 7 concepts will be explained through a short video that will work through a Hatch project. The video should explain the overarching ideas of the concept at hand and give you a general understanding of the concept. 

At the end of every video, you will need to complete two tasks:

1. Complete the project demonstrated in the video -> Complete a challenge 
2. Complete at least one additional project

Details for all of this are included in the Javascript Training Booklet. When you are complete, email [email protected] to let me know. I will check your projects and suggest any follow up projects I may have. Once you’ve completed the follow-up projects your Basic Javascript Training is complete!

If you get stuck, you can refer to :

www.p5js.org/reference
www.hatchcanada.com/hints

Or email any questions you have to [email protected]! I’ll do my best to help explain anything that you’re getting confused by.

Now go explore Hatch. Learn some things. Come out a stronger programmer then you came in!

Further information on the materials presented in these lessons can be found in the Javascript Training Guide Below:

I have created you a Hatch account!

If you navigate to www.hatchcanada.com/user/login you can log on with the following credentials:

email: [email protected]
password: hatch123

We recommend you change your password by clicking the “Account” button in the top right when you first log on.

If you are having issues accessing the system, please email [email protected] 

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete Hold A Ball

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects:

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete Basic House

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects:

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete Origami Cat

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects:

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete Variadot

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects: 

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete The Function Monster

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects:

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete If mouseX...

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects:

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

Task 1 - Complete Numbered Circles

Complete at least one of the following challenges:

Task 2 - Complete an Additional Project

Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!

Complete at least one of the following projects:

If you are having trouble playing the videos, an alternate version of each of them can be found here:

https://drive.google.com/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ

It's always important to reflect back on yourself after learning something new. Take some time now to think about what you've just created!

Now that we’ve learned all about these programming structures, it’s time to start combining it all together. The most robust, interesting projects will use many and all of the things we’ve learned. Explore Hatch.

Experiment with larger and larger projects. Build your own projects! https://hatchcoding.com/projects/showcase-all

From this link you can select a Blank Canvas. This is a project that has no instructions. Experiment here. Be wildly creative. There is no limit to what you can create with code. The more time you spend with this, the more exposure you have to programming and the more comfortable and proficient you will be.

I would like to leave you with examples of artwork that can be created with code. You’ll see that it can span so much further than circles drawn on a screen. You’ll even see that it can be brought into the real world, in full exhibitions and installations. I hope this inspires you, and I hope that you can use these projects and ideas to help inspire out students as well!

Created with p5.js / processing:

https://therewasaguy.github.io/p5­music­viz/demos/08_echonestPitchSegment/
http://michellechandra.github.io/starTrails/
http://fun.the816.com/neobrush/
https://uclab.fh­potsdam.de/cf/
https://vimeo.com/1747316
https://vimeo.com/151334392
https://vimeo.com/10154340

Other:

https://vimeo.com/106798521
http://minimaforms.com/#item=petting­zoo­frac­2
http://nilsvoelker.com/content/onehundredandeight/index.html http://www.niklasroy.com/project/88/my­little­piece­of­privacy/
http://listen.hatnote.com/
http://map.norsecorp.com/#/

It doesn't end here!

The Hatch platform has over 350 projects! Continue to create, to explore, to discover! Not only will you feel more confident in your abilities the more projects you do, your students will also benefit from having a confident, creative instructor!