Coding Challenge #122: Quick, Draw!

Channel:

The Coding Train

Subscribers:

1,740,000

Published on November 19, 2018 2:21:38 PM ● Video Link: https://www.youtube.com/watch?v=yLuk0twx8Hc

Game:

Quick, Draw! (2016)

Duration: 33:11

52,946 views

1,285

In this multi-part coding challenge, I take a closer look at the Quick, Draw! dataset and create a simple node API to "replay" drawings of rainbows and cats using p5.js. Code: https://thecodingtrain.com/challenges/122-quick-draw

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

Other Parts of this Challenge:
📺 Quick, Draw! Part 2: https://youtu.be/EcRK6oFddPQ

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

References:
🖌 Quick, Draw! The Data: https://quickdraw.withgoogle.com/data
💾 sketch-rnn: https://magenta.tensorflow.org/sketch-rnn-demo
💾 Quick, Draw! Web Component: https://opensource.googleblog.com/2018/11/introducing-web-component-and-data-api-for-quick-draw.html
🔗 Quick, Draw! API: https://github.com/googlecreativelab/quickdraw-dataset

Videos:
🎥 Doodle Classifier: https://www.youtube.com/watch?v=pqY_Tn2SIVA&list=PLRqwX-V7Uu6Zs14zKVuTuit6jApJgoYZQ
🎥 What is JSON?: https://www.youtube.com/watch?v=_NFkzw6oFtQ
🎥 Building an API with Node: https://www.youtube.com/watch?v=P-Upi9TMrBk

Live Stream Archive:
🔴 Coding Train Live 161: https://youtu.be/v8lm5XZ2V6M?t=4041s

Related Coding Challenges:
🚂 #128 SketchRNN Snowflakes with ml5.js: https://youtu.be/pdaNttb7Mr8
🚂 #153 Interactive Drawing with SketchRNN: https://youtu.be/ZCXkvwLxBrA

Timestamps:
0:00 Introducing today's topics: the Quick, Draw! dataset
2:48 The data is the pixel paths with timing information
4:53 ndjson files
6:58 Download a simplified ndjson file
9:26 Install express and ndjson packages
12:12 Run the server
13:03 Make an express server
14:45 Pick a random drawing
16:05 Have server host a p5 sketch
18:02 Write a function to load the drawing
19:28 Loop through all the paths in the drawing
24:22 Animate the drawing
27:33 Loop through points within the strokes
29:30 Connect the points
32:12 Reset the strokeIndex to zero to draw a new cat
32:22 Enjoy a whole bunch of cats!

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

#quickdraw #machinelearning #doodleclassifiers #sketchrnn #p5js #nodejs #javascript

Other Statistics