Let's make ASCII art in p5.js together! In this video, I demonstrate a variety of techniques for translating the pixels of an image into text and finish with rendering video as text ASCII characters in a DOM. https://thecodingtrain.com/challenges/166-image-to-ascii

p5.js Web Editor Sketches:
🕹️ ASCII video: https://editor.p5js.org/codingtrain/sketches/KTVfEcpWx
🕹️ ASCII image canvas: https://editor.p5js.org/codingtrain/sketches/r4ApYWpH_
🕹️ ASCII image dom: https://editor.p5js.org/codingtrain/sketches/ytK7J7d5j
🕹️ ASCII text: https://editor.p5js.org/codingtrain/sketches/LNBpdYQHP
🕹️ ASCII weather api: https://editor.p5js.org/codingtrain/sketches/DhdqcoWn4

🎥 Previous video: https://youtu.be/PbPUgyql5p4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Links discussed in this video:
🔗 ASCII play by ertdfgcvb: https://play.ertdfgcvb.xyz/
🔗 HTML Entity: https://developer.mozilla.org/en-US/docs/Glossary/Entity
🔗 HTML div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
🔗 p5.js loadPixels(): https://p5js.org/reference/#/p5/loadPixels
🔗 p5.js brightness(): https://p5js.org/reference/#/p5/brightness
🔗 CodingTrainChooChoo on Twitch: https://www.twitch.tv/codingtrainchoochoo

Other videos mentioned in this video:
🎥 The Pixel Array: https://youtu.be/nMUMZ5YRxHI
🎥 Basics of CSS: https://youtu.be/zGL8q8iQSQw
🎥 p5.js Web Editor - Uploading Media Files: https://youtu.be/rO6M5hj0V-o

Timestamps:
0:00 Welcome! Choo choo!
0:28 Introducing Today’s Topic
1:39 Pixel to ASCII
4:52 Pixelating an image
7:03 Pixel Array Explanation
8:40 Back to the code
10:18 Adding Text
11:04 Mapping Brightness to Characters
13:26 Switching from canvas to DOM
18:10 Real-time ASCII video
20:10 Some refinemens
21:29 See you next time!

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html
🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
📚 Books: https://www.amazon.com/shop/thecodingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/website/issues/new

Coding Challenge 166: ASCII Text Images

Day 001 of coding on Handmade Hero.  See http://handmadehero.org for details.

1. Review of C on Windows
2. Command subst. subst w: c:/hmh
3. WinMain entry point
4. Navigating windows shell
5. Setting up minimal build system.
6. Windows MessageBox

Handmade Hero Day 001 - Setting Up the Windows Build

Which Pokemon is roundest??? Today we will find out!

Theo builds a full stack web app using the T3 Stack as detailed on https://init.tips

If you're interested in Next.js, React, TypeScript, Prisma, tRPC, PlanetScale + MySQL, and Tailwind, all deployed on Vercel, you're in the right place :)

The services we used are...
Planetscale - https://planetscale.com/?ref=theo
Vercel - https://vercel.com/?ref=theo

Check out the final product at https://roundest.t3.gg

Github repo: https://github.com/TheoBr/roundest-mon

Follow me on twitter for more web dev BS: https://twitter.com/t3dotgg

Rough timestamps:
0:00 - Intro & planning in Excalidraw
4:15 - Initializing with init.tips
5:00 - Tailwind setup
17:15 - API setup with tRPC
27:45 - Random pokemon endpoint
39:00 - SSR is hard
1:04:00 - PlanetScale and Prisma setup
1:26:00 - Image optimization and caching with `@next/image`
1:38:50 - Cache pokemon from PokeAPI in our db
1:43:00 - Relations are hard (Prisma fails)
1:58:00 - Backfilling all pokemon into db
2:11:00 - Results page
2:35:40 - Typescript saves us

Building a MODERN Full Stack App for FREE w/ NextJS 12, Typescript, Prisma and more - T3 Stack

In 2019 I wanted to teach myself product development while filming the whole process. It took a lot longer than expected and I burned out pretty hard near the end(2021). 

And yes I was doing it all myself which I now know is not very smart, it's just too much for one person. You really need a team of people to bring a product to market, or at least a few founders. I guess this was more of a learning experience than anything else. I knew I needed to gain experience in commercialization as my normal builds were quite sketchy. So it was good to try and build something solid over long periods. 

These first 5 months included a lot of electrical hardware design(PCBs) and embedded software development. I do want to catch you guys up on everything so I'll be making videos in roughly 5-month chunks between 2019-2022. Until we get more up-to-date, I think it just makes the most sense to post the footage in order.

Next Video:
Previous Video: https://youtu.be/hLjht9uJWgw

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://devoncrawford.io
Twitter: https://twitter.com/DevonCrawford13
Snapchat: https://www.snapchat.com/add/devoncrawfordyt
Instagram: https://www.instagram.com/devoncrawford_/
Github: https://github.com/devoncrawford
Discord: https://discord.gg/sU2fur9

Gear
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- Video Editing Software (Premiere Pro CC): https://goo.gl/rKx66D
- Keyboard (Velocifire TKL01) : https://amzn.to/2AQTjJQ
- Webcam (Logitech C920): https://amzn.to/2Cw588c
- Desk Microphone (Blue Yeti): https://amzn.to/2FPFmzi
- DSLR (Canon T7i): https://amzn.to/2T54mpZ

Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
A L E X x Kendall Miles - Hollow Moon [FULL EP] @ 17:03
Link: https://soundcloud.com/worsethanthis/a-l-e-x-x-kendall-miles-hollow-moon-full-ep-download-in-desc

けｍ SURF // ₪ JETSON
Link: https://soundcloud.com/highimjetson/m-surf-jetson

Karma Rhythm - snuggle music (beattape) @ 11:16, 13:48, 0:10
Link: https://soundcloud.com/karmarhythm/snuggle

Chill Children - bob le head EP [2018] @ 1:23
Link: https://soundcloud.com/chillchildren/bob-le-head-ep-2018

sin - Starlet @ 0:51
Link: https://soundcloud.com/sinbeatzz/starlet

Mbrr - Lucid
Link: https://soundcloud.com/m-brr/lucid

EMUNE - 100% EMUNE @ 5:45
Link: https://soundcloud.com/emune/e100

GREEN PICCOLO - Juicy
Link: https://soundcloud.com/greenpiccolobeats/juicy

SKUCCI x DVLTEM - THRILL NIGHT
Link: https://soundcloud.com/dvltem/dvlt-x-skucci-thrillnight

Learning Product Development

I released my input binding software Enchanted Gamepad.
It's designed with the purpose to play League of Legends with it.

Hope you enjoy the video!

➤ Links to Enchanted Gamepad!
https://tantandev.itch.io/enchanted-gamepad
https://github.com/TanTanDev/EnchantedGamepad

➤ Music: 
♫ Track: "Optimism Cavern" - Video Game Instrumental by Noah Eichler
♫ Watch: https://youtu.be/DQBg_qxVcUw

♫ Track: Morning Reggae - Original Composition by Noah Eichler
♫ Watch: https://youtu.be/l4bPbFPcb-U

♫ Track: Winter (not released yet) - by Noah Eichler
♫ Channel: https://www.youtube.com/channel/UCbWKKxshYuTyg3m5rohEbeg/featured

♫ Track: Happy Videogame Music Inspired by Yoshi's Island: "Rainbows n' Hammer Bros." by Noah Eichler
♫ Watch: https://youtu.be/eJXzzGkU99Y

♫ Track: [Electro Swing] TeknoAxe - Piccolo and a Cane [No Copyright Music]
♫ Watch: https://youtu.be/tG9EEkg4Tlk

♫ Track: [Electro Swing] Dj Quads - Cruise around [No Copyright Music]
♫ Watch: https://youtu.be/Fo9sXlIG5Yo

♫ Track: [Electro Swing] Dimaa - The Roaring Twenties [No Copyright Music]
♫ Watch: https://youtu.be/-SeBzpWM_as

➤ About:
Hey YOU! Welcome to my channel, I'm a game developer who enjoys making videos about game development with Unity and other tools.
Gamejams, Devlogs, all that fun stuff!

#tantan #LeagueofLegends #controller

How I Play League of Legends With A Gamepad! - Enchanted Gamepad

Improve you Python and PyGame programming skills by coding a game. This project was inspired by the classic carnival/arcade style shooting gallery games! Learn to build the entire project from scratch using Python and the PyGame framework. We start by setting up PyGame, and drawing static images on the screen. Then we animate tiers of procedurally drawn enemies onto each level and get them moving, then check to see if the player has shot them. Once the player clears a full level of enemies, they proceed to the next level. Then we create pause functionality, a main menu and game over conditions.

We store the high scores in an external text file that we read in from when the game boots up and write to it any time there is a new high score during gameplay.

✏️ Created by Pete LeMaster. Check out his channel: https://www.youtube.com/@lemastertech

💻 Code: https://github.com/plemaster01/ShootingGallery

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro and Project Showcase
⌨️ (0:02:50) Setting Up Pygame And Importing Images
⌨️ (0:13:25) Drawing the Gun and Rotating With Mouse Position
⌨️ (0:26:27) Drawing Enemies Onto the Screen
⌨️ (0:37:56) Procedurally Generate Enemy Starting Coordinates
⌨️ (0:51:14) Make Enemies Move With Speed Based on Tiers
⌨️ (0:58:32) Check for Mouse Collision with Targets on Shots
⌨️ (1:13:39) Display Score, Mode Status, Time Elapsed and Total Shots!
⌨️ (1:22:04) Menu Control and Setup
⌨️ (1:44:57) Pause Menu and Restarting from the Game Screens
⌨️ (1:51:57) Re-Initializing Enemy Coordinates on Restart
⌨️ (1:59:17) Game Over Conditions!
⌨️ (2:10:47) Reading and Writing to a .txt Text file for high scores!
⌨️ (2:15:20) Adding Background Music and Sound Effects!
⌨️ (2:20:27) Outro and Thank you!!

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Python & PyGame Tutorial – Code a Duck Hunt Game

FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified

Hangman is the perfect beginner React project since it is easy enough logic-wise, but still includes many complicated problems to solve. In this video I will show you how I would create a hangman game in React.


📚 Materials/References:

FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified
GitHub Code: https://github.com/WebDevSimplified/react-hangman
Regular Expression Video: https://youtu.be/rhzKDrUiJVk
Array Methods Video: https://youtu.be/R8rmfD9Y5-c


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:27 - Demo/Setup
01:48 - Planning
05:00 - HTML/JSX
26:12 - Drawing Component Logic
28:55 - Word Component Logic
30:03 - Keyboard Logic
38:25 - Win/Lose Logic


#React #WDS #TypeScript

This Is A Great Beginner React/TypeScript Project

Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal


#React #WDS #TypeScript