In this coding challenge, I'm implement fractal trees with recursion in p5.js. This is the first part of a series on algorithmic botany. Code: https://thecodingtrain.com/challenges/14-fractal-trees-recursive

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/xTjmYXU3q

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

References:
🌿 Algorithmic Botany: http://algorithmicbotany.org/
📕 My NOC class on Kadenze: https://www.kadenze.com/courses/the-nature-of-code/info

Videos:
🎥 Algorithmic Botany Track: https://thecodingtrain.com/tracks/algorithmic-botany
🔴 Coding Train Live 40: https://youtu.be/MwLyeEWnMCY?t=1838s

Related Coding Challenges:
🚂 #15 Object-Oriented Fractal Trees: https://youtu.be/fcdNSZ9IzJM
🚂 #174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls

Timestamps:
0:00 Introducing today's topic
0:39 Recursion
2:51 Exit condition
3:53 Let's Code!
5:03 Branch function
10:06 Add slider
13:25 Push and pop functions
14:42 Conclusion and next steps

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ 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/thecodingtrain.com/issues/new

#fractals #generativeart #p5js #javascript

Coding Challenge #14: Fractal Trees - Recursive

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

In this video, I talk about p5.js.  What is it? What can you do with it? Where did it come from? What is its relationship with Processing? p5.js is both a library for JavaScript and a beginner-friendly editor where you can build creative computational projects in the browser. It can be used for art, data visualization, and websites alongside other tools like HTML5, CSS and JavaScript.

Next video:https://youtu.be/D1ELEeIs0j8?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Support this channel on Patreon: https://patreon.com/codingtrain

Contact: https://twitter.com/shiffman

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Link to code on Github: https://github.com/CodingTrain/Rainbow-Code

p5.js: http://p5js.org
Processing: http://processing.org
Processing Foundation: https://processingfoundation.org/

For More p5.js Basics Videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Help us caption & translate this video!

http://amara.org/v/HCxe/

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

1.1: Introduction - p5.js Tutorial

So hyped about Bun and all of Jarred's hard work on it

Check out Jarred's Twitter https://twitter.com/jarredsumner

Check out Railway https://railway.app?referralCode=Ms4Rg-

Pardon the lame edit, I did it myself because I wanted this out ASAP

Follow me on...
Twitch: https://twitch.tv/theo
Twitter: https://twitter.com/t3dotgg
Everywhere else: https://t3.gg/links

00:00 - What is Bun?
02:15 - Playing With Bun Deployment
04:55 - Things Bun Does Fast
09:30 - Nixpacks and Railway are really fast

JS FASTER THAN RUST??? HOW IS BUN SO FAST

I'll show you how to integrate 3d positional sound in JavaScript and build an audio visualizer.

Support me on:
Patreon: https://www.patreon.com/simondevyt

Follow me on:
Twitter: https://twitter.com/iced_coffee_dev
Instagram: https://www.instagram.com/beer_and_code/
Github: https://github.com/simondevyoutube/

I'll step through getting audio and 3d positional audio working in JavaScript using three.js, and we'll build out a couple simple audio visualizers using the AudioAnalyzer class.

Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.


Inigo Quilez's Site:
https://iquilezles.org/

Music: https://www.bensound.com

Immersive 3D Audio and Visualization (three.js & javascript)

GLSL Course: https://simondev.teachable.com/p/glsl-shaders-from-scratch

Support me on Patreon: https://www.patreon.com/simondevyt

Follow me on:
Twitter: https://twitter.com/iced_coffee_dev
Instagram: https://www.instagram.com/beer_and_code/


Here I tried making a 3D first person shooter, all in JavaScript and Three.js. I took some code from a couple of my other tutorials, like first person camera controls and ammo.js stuff, bolted on a few free things from places like Sketchfab, and added some shooter gameplay. The code could totally be used as a starting point for somebody else wanting to make a little browser FPS.

Basically, I tried to code up a first person shooter skeleton in a few days, using nothing more than JavaScript and the browser. All the elements, HUD, etc. are in there and in workable states. There's tonnes more you could do obviously, but I think this can help you understand how you might structure things and use something like Three.js to get started on these types of projects. Making a basic first person shooter, even in JavaScript, isn't too difficult.

Droid Thing from Quaternius: https://quaternius.com/

"Anubis Bust" (https://skfb.ly/6RwNp) by lucasthx88 is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"K-VRC | Love, Death + Robots" (https://skfb.ly/6XCCo) by ArbitraryCanary is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Buddha" (https://skfb.ly/QGxw) by hullo is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Human Skull" (https://skfb.ly/6RsWT) by Sergey Egelsky is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Heavy Assault Rifle" (https://skfb.ly/6RGPy) by pixelgrapher is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

I Tried Making an FPS Game

I'll show you how to use Three.js's decal system to build FPS bullet marks, footsteps, and anything else you want.

GLSL Course: https://simondev.teachable.com/p/glsl-shaders-from-scratch
Patreon: https://www.patreon.com/simondevyt

Follow me on:
Twitter: https://twitter.com/iced_coffee_dev
Instagram: https://www.instagram.com/beer_and_code/
Github: https://github.com/simondevyoutube/

I'll step through using DecalGeometry in JavaScript and three.js to build little squibs and marks on existing geometry. Using decals, you'll be able to place additional details, as well as dynamically generate marks from shots, footsteps, explosions, and whatever else you can think of.

Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.

Make stuff look better with DECALS!

Let's go, in and out, 20 minutes adventure! Let's dive into the world of Ethereum, Solidity, nft's, and lazy minting.

GLSL Course: https://simondev.teachable.com/p/glsl-shaders-from-scratch
Patreon: https://www.patreon.com/simondevyt

Follow me on:
Twitter: https://twitter.com/iced_coffee_dev
Instagram: https://www.instagram.com/beer_and_code/
Github: https://github.com/simondevyoutube/

In this video, we'll do a little dive into the world of crypto, Ethereum, and smart contracts by building our own nft platform. We'll cover getting a basic hardhat setup going, with ethers.js and waffle.js for testing. We'll also cover using Solidity, along with OpenZeppelin's contracts to build our NFT's using ERC721 and EIP712. It's kind of interesting to explore the world of smart contracts a bit, see what this is all about. Our NFT's will have their metadata hosted on IPFS using Moralis, and we'll adhere to the OpenSea metadata standards so that we get nice listings with stats and all that jazz. By the end, we should end up with a full Web3 enabled website, where you can list NFT's that are lazy minted on demand, and then you can turn around and resell them on OpenSea.

Links:
https://hardhat.org/
https://docs.ethers.io/v5/
https://getwaffle.io/
https://ethereum.org/en/developers/docs/
https://docs.polygon.technology/
https://mumbai.polygonscan.com/
https://docs.openzeppelin.com/contracts/4.x/
https://metamask.io/
https://testnets.opensea.io/
https://en.wikipedia.org/wiki/Non-fungible_token