Media is too big
VIEW IN TELEGRAM
25. Creating Platformer Hero
Steve creates the hero sprite and backdrop for the platformer game. Implementing a code block that fixes the sprite falling into the ground without showing the sprite movement is also covered in this segment.
#lesson
Steve creates the hero sprite and backdrop for the platformer game. Implementing a code block that fixes the sprite falling into the ground without showing the sprite movement is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Platform Collision Detection
Steve implements the ability for the hero sprite to jump and discusses the pseudo-code for improving the previously created "fix landing" code block.
- https://scratch-workshop.vercel.app/using-a-custom-block-to-fix-our-landing
#lesson
Steve implements the ability for the hero sprite to jump and discusses the pseudo-code for improving the previously created "fix landing" code block.
- https://scratch-workshop.vercel.app/using-a-custom-block-to-fix-our-landing
#lesson
Media is too big
VIEW IN TELEGRAM
27. Implementing Collision Detection
Steve implements a code block to detect if the hero sprite is touching a platform. The code block keeps track of the hero sprite's position and moves the sprite back to its last known position when the sprite is touching a platform.
#lesson
Steve implements a code block to detect if the hero sprite is touching a platform. The code block keeps track of the hero sprite's position and moves the sprite back to its last known position when the sprite is touching a platform.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Horizontal Movement Practice
Students are instructed to implement the hero sprite's horizontal movement. Steve then walks through a possible solution for adding horizontal movement and implements horizontal collision detection.
#lesson
Students are instructed to implement the hero sprite's horizontal movement. Steve then walks through a possible solution for adding horizontal movement and implements horizontal collision detection.
#lesson
Media is too big
VIEW IN TELEGRAM
29. Preventing Double Jumps
Steve updates the jump movement to include velocity and prevent double jumping.
#lesson
Steve updates the jump movement to include velocity and prevent double jumping.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Pen Tool
Steve discusses the Pen Scratch extension, which allows complete control over drawing graphics. A demonstration of combining custom blocks and the pen to programmatically draw shapes is also provided in this segment.
- https://scratch-workshop.vercel.app/the-basics-of-the-pen-tool
#lesson
Steve discusses the Pen Scratch extension, which allows complete control over drawing graphics. A demonstration of combining custom blocks and the pen to programmatically draw shapes is also provided in this segment.
- https://scratch-workshop.vercel.app/the-basics-of-the-pen-tool
#lesson
Media is too big
VIEW IN TELEGRAM
31. Snake Game
Steve discusses utilizing the Pen extension to create infinite and finite versions of a snake game. The video sensing tool is also discussed in this segment.
- https://scratch-workshop.vercel.app/infinite-snake
#lesson
Steve discusses utilizing the Pen extension to create infinite and finite versions of a snake game. The video sensing tool is also discussed in this segment.
- https://scratch-workshop.vercel.app/infinite-snake
#lesson
Media is too big
VIEW IN TELEGRAM
32. Wrapping Up
Steve wraps up the course by demonstrating how to look at a shared Scratch project's code.
#lesson
Steve wraps up the course by demonstrating how to look at a shared Scratch project's code.
#lesson
Title: Hardware with Arduino & JavaScript
Description: Tie the physical and digital worlds together, and see what's possible with hardware and JavaScript! Craft circuits, wire up LEDs, buttons, and sensors, and leverage sensors to change browser actions based on real-world data, all with web-based technologies.
Link: https://frontendmasters.com/courses/arduino-javascript/
Time: 3 hours, 0 minutes
Lessons: 22 / 22
Tags: #course #frontendmasters #720p
Description: Tie the physical and digital worlds together, and see what's possible with hardware and JavaScript! Craft circuits, wire up LEDs, buttons, and sensors, and leverage sensors to change browser actions based on real-world data, all with web-based technologies.
Link: https://frontendmasters.com/courses/arduino-javascript/
Time: 3 hours, 0 minutes
Lessons: 22 / 22
Tags: #course #frontendmasters #720p
Frontendmasters
Hardware with Arduino & JavaScript: Bridging the Digital & Physical worlds with code
Tie the physical and digital worlds together, and see what's possible with hardware and JavaScript! Craft circuits, wire up LEDs, buttons, and sensors, and leverage sensors to change browser actions based on real-world data, all with web-based technologies.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Steve begins the course by introducing the Arduino platform and talking through some third-party libraries that add support for JavaScript. Alternative boards which are compatible with this course are also discussed.
- https://github.com/stevekinney/nodebots-v2
#lesson
Steve begins the course by introducing the Arduino platform and talking through some third-party libraries that add support for JavaScript. Alternative boards which are compatible with this course are also discussed.
- https://github.com/stevekinney/nodebots-v2
#lesson
Media is too big
VIEW IN TELEGRAM
2. Getting Started with Arduino
Steve tests the Arduino board with a "hello world" example. The Arduino is connected to the computer, and an example blink program is loaded, causing an LED to blink on and off.
#lesson
Steve tests the Arduino board with a "hello world" example. The Arduino is connected to the computer, and an example blink program is loaded, causing an LED to blink on and off.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Electricity & Hardware Terminology
Steve explains a few electrical engineering concepts, including Ohm's law, polarity, and resistors. A color-coded chart is shown, which helps identify the ohm value of a resistor.
#lesson
Steve explains a few electrical engineering concepts, including Ohm's law, polarity, and resistors. A color-coded chart is shown, which helps identify the ohm value of a resistor.
#lesson
Media is too big
VIEW IN TELEGRAM
4. Wiring a Circuit to the Breadboard
#lesson
#lesson
Media is too big
VIEW IN TELEGRAM
5. Porting Blinking Light to JavaScript
Steve loads Firmata onto the Arduino, allowing the board to be controlled by JavaScript. A basic JavaScript program is written to blink the LED. The code is executed with Node.js, and the commands are sent to the Arduino.
#lesson
Steve loads Firmata onto the Arduino, allowing the board to be controlled by JavaScript. A basic JavaScript program is written to blink the LED. The code is executed with Node.js, and the commands are sent to the Arduino.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Pulsing the LED
Steve uses the pulse method to demonstrate Pulse Width Modulation. Digital pins simulate pulsing or fading by rapidly sending on/off signals.
#lesson
Steve uses the pulse method to demonstrate Pulse Width Modulation. Digital pins simulate pulsing or fading by rapidly sending on/off signals.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Wiring Button with LED
Steve adds a button to the circuit that logs messages to the console when pressed. Pressing the button completes the circuit and sends the voltage to a pin. Use the wiring diagram linked below.
- https://github.com/stevekinney/nodebots-v2/blob/main/public/diagrams/single-led-and-button.svg
#lesson
Steve adds a button to the circuit that logs messages to the console when pressed. Pressing the button completes the circuit and sends the voltage to a pin. Use the wiring diagram linked below.
- https://github.com/stevekinney/nodebots-v2/blob/main/public/diagrams/single-led-and-button.svg
#lesson
Media is too big
VIEW IN TELEGRAM
8. Controlling LED with Button Exercise
Students are instructed to modify the code so the button controls the LED light.
#lesson
Students are instructed to modify the code so the button controls the LED light.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Button with Web Server
Steve uses an Express server to read data from the Arduino. The Express server uses the Johnny-Five library to access the Arduino board. When the webpage is loaded, it checks to see if the button is pressed.
#lesson
Steve uses an Express server to read data from the Arduino. The Express server uses the Johnny-Five library to access the Arduino board. When the webpage is loaded, it checks to see if the button is pressed.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Toggling LED from the Browser
Steve challenges students to write the code to toggle an LED from the browser. The code is then moved to a client-side application, and a button is coded to toggle the LED using a POST request.
#lesson
Steve challenges students to write the code to toggle an LED from the browser. The code is then moved to a client-side application, and a button is coded to toggle the LED using a POST request.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Communicating with Web Sockets
Steve creates a web socket connection, allowing the Arduino to communicate directly with the web server without relying on GET or POST requests. When a message is received through a specific channel, the text in the browser is updated.
#lesson
Steve creates a web socket connection, allowing the Arduino to communicate directly with the web server without relying on GET or POST requests. When a message is received through a specific channel, the text in the browser is updated.
#lesson