Coding Challenge #153: Interactive Drawing with Machine Learning Model (SketchRNN)

This challenge uses the pre-trained SketchRNN machine learning model (available with the ml5.js library) to create a p5.js sketch that finishes a person's drawing. Code: https://thecodingtrain.com/challenges/153-interactive-drawing-with-sketchrnn

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

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

References:
💻 ml5.js: https://ml5js.org/
💻 Draw Together with a Neural Network - Magenta TensorFlow: https://magenta.tensorflow.org/assets/sketch_rnn_demo/index.html
🗄 Ramer-Douglas-Peucker Algorithm on Wikipedia: https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm
📓 A Neural Representation of Sketch Drawings: https://arxiv.org/abs/1704.03477
💻 Quick, Draw!: https://quickdraw.withgoogle.com/#
💻 Recurrent Neural Networks & LSTMs: https://ayearofai.com/rohan-lenny-3-recurrent-neural-networks-10300100899b

Live Stream Archive:
🔴 Coding Train Live 186: https://youtu.be/GMaKcRkiNoM?t=4054s

Related Coding Challenges:
🚂 #128 SketchRNN Snowflakes with ml5.js: https://youtu.be/pdaNttb7Mr8
🚂 #152 RDP Algorithm: https://youtu.be/nSYw9GrakjY

Timestamps:
0:00 Introduction
0:30 Magenta website
2:11 Recurrent Neural Networks
2:43 Magenta blog post
3:18 ml5 sketchRNN reference
3:51 Let's Code!
4:25 The model
4:55 SketchRNN.generate()
5:55 Sequential data
6:24 The states
7:50 When do you draw?
10:48 Deal with the pen state
14:28 seedPath
16:14 See the user drawing
17:35 Tell the model about user seed strokes
18:54 RDP algorithm
20:40 Add rdp.js
25:07 Redraw simplified line
28:10 Other models

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://thecodingtrain.com/discord
💖 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

#sketchrnn #machinelearning #quickdraw #ml5js #p5js

Видео Coding Challenge #153: Interactive Drawing with Machine Learning Model (SketchRNN) канала The Coding Train