Coding Challenge

In this coding challenge, I discuss turtle graphics and make a Logo Interpreter in JavaScript. Code: thecodingtrain...
p5.js Web Editor Sketches:
🕹️ Logo Interpreter Part 1: editor.p5js.or...
🕹️ Logo Interpreter Part 2: editor.p5js.or...
Other Parts of this Challenge:
📺 Part 2: Logo Interpreter: • Coding Challenge #121:...
🎥 Previous video: • Coding Challenge #120:...
🎥 Next video: • Coding Challenge #122:...
🎥 All videos: • Coding Challenges
References:
📁 Logo Repo: github.com/shi...
📓 Logo on Wikipedia: en.wikipedia.o...)
📝 Logo Tutorial: cs.brown.edu/co...
Videos:
📓 Transformation Tutorial: • How to Rotate Shapes i...
📐 Angles and Angular Motion: • 3.1: Angles and Angula...
🧾 Angular Motion: • 3.2 Angular Motion - N...
Live Stream Archive:
🔴 Coding Train Live 158: • Coding Train Live 158...
🔴 Coding Train Live 159: • Live Stream #159: Logo...
Timestamps:
0:20 What is Logo?
1:21 Logo commands
2:23 Let's go!
5:04 The turtle object
7:14 Let's code the turtle methods
10:39 Iterating over the tokens
12:51 Understanding the increment operator
14:37 A little debugging
18:55 Found the bug!
20:00 A look-up table
23:44 Real-time interpretation
26:50 Pen up and pen down
37:54 It works!
40:00 Ending remarks
40:33 Thank you for watching!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain....
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
💡 GitHub: github.com/Cod...
💬 Discord: / discord
💖 Membership: kzbin.info...
🛒 Store: standard.tv/co...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
This description was auto-generated. If you see a problem, please open an issue: github.com/Cod...
#logo #logointerpreter #turtlegraphics #p5js #javascript

[@msclrhd]

To clarify, a token is a typed range of characters in the source code that match a specific pattern determined by that type. This includes keywords ("let", "for", "function", etc.), numbers ("1", "60", etc.). They are such that they can typically be defined as regular expressions. In the logo example, you will have keyword tokens ("fd", "rt", "setxy", etc.), number tokens (/[0-9]+/), and whitespace tokens (/[ \t ]+/). The more complex logo commands adds a begin block token ("[") and an end block token ("]"). The tokens are then used by the parser, and possibly the interpreter (for a language like logo) or a compiler (for a language like Java). For example, a forward command is the "fd" keyword followed by a number.

[@GustavoCesario.]

14:40 "Let me just write stroke here..." Visual Studio: "DID YOU MEAN MEDIASTREAMTRACKAUDIOSOURCENODE???????"

[@TheSkytherMod]

I'll give you my like :)

[@vasyapupkin9338]

hhahahaahaha

[@senna_william]

kkkkkkkkkkkkkkkkkkkkkkkkkkkk

[@profiluefter]

Visual Studio just had a stroke there ^^

[@Brahvim]

@@profiluefter Deserving of being the *TOP* reply for this comment.

[@jameshello38]

He is full of positive energy.

[@crides0]

But still a little bit too slow...

[@TheJamesM]

Yes, and it makes programming feel accessible, where many other resources probably feel a bit more forbidding to novices.

[@crides0]

@@TheJamesM but it's a "coding challenge" isn't it? And by the way, I meant he's a little too slow to figure out his mistakes/bugs.

[@parsonsmarcus]

@@crides0 "Coding Challenge" in this channel's sense isn't to see how fast something can be done. And he always figures out his mistakes, anyways.

[@roshanpawara8717]

Oh My God!!! My programming journey actually started with programming in Logo back in 2006 when I was in the 3rd grade where I made a little animation with Warli Paintings. I won the first prize for it in our school and 1st runner up in Inter School competition. It made me feel so happy and since then I have been very fond of programming. Feeling nostalgic..!! No wonder why its called The Coding Train; Thank you so much Dan Sir for taking me back to the station where I started from.

[@avi12]

Dan, never forget: If you type something to the console, e.g. 5 Even though you didn't explicitly save it to a variable, Chrome saved it for you It temporarily lives in a variable $_ So if you type: $_ * 2 The console returns 10

[@TheCodingTrain]

I did not know this!

[@CaelVK]

@@TheCodingTrain you should pin this

[@Timooooooooooooooo]

Thanks for sharing this, this is great to know! I did know of $1 referering to the selected element, but I'm new to $_

[@iamjimfan]

In the 90s, school indoctrinated me that Logo as a useless toy language to command a "turtle". We even had exam on it. I failed my all of them in 3 consecutive years because I felt it was just boring and pointless. In university, I discovered LISP and found Logo is considered its child. Particularly, Logo is dynamically scoped and functional, and supports macro as well. And it is nearly as fun as programming in LISP. So my suggestion is another Logo video demonstrating the true Logo as a functional programming language and set the "turtle" free.

[@pattty847]

I love the choo choo... Everything about this channel makes me happy, thanks, Dan. You make programming a hobby.

[@Noe-Mastro]

Programming *is* a hobby

[@juweinert]

17:30 Even though it may not make a lot of sense, I like to say "i++ returns and then increments, ++i increments first and then returns" The order you write it in will happen.

[@vitorhmtts]

i learned it that way. ++ increments, so if u write it before de variable, u'll increment it before returning the variable value and vice-versa

[@angelcaru]

24:41 In Visual Studio Code you can select some code and then: You click on the light, You click "Extract to functrion in global scope"

[@Brahvim]

...or do `Ctrl + .`

[@angelcaru]

@@Brahvim Let me quickly inform you of the fact that I do not and cannot remember every single keyboard shortcutin Visual Studio Code

[@Brahvim]

@@angelcaru It's Ok! It's more of an "addition" to your tip..whoops, my bad.

[@loic.bertrand]

30:27 You could have used the "length" property of functions, which corresponds to the number of arguments of the function. This lets you know how many tokens you need to consume for the arguments : const commands = { 'fd': function(amt) { console.log('fd', amt); }, 'pu': function() { console.log('pu'); }, }; const tokens = 'fd 100 pu fb 50'.split(' '); let index = 0; while (index < tokens.length) { const token = tokens[index++]; const command = commands[token]; if (command) { const args = []; for (let i = 0; i < command.length; i++) { args.push(tokens[index++]); } command(...args); } } A one-liner to collect the arguments into an array is the following: const args = Array.from(command, () => tokens[index++]);

[@TheCodingTrain]

Oh such a good tip!

[@krccmsitp2884]

Great idea!

[@yourubeusername1]

your such an sweet human being, so positive so fun and super talented

[@kyukitagawa8807]

your coding challenge, was able to help me with some of my project. I love it so much, since when you do it. you also explain the steps on how the codes works. Thanks you a lot.

[@merseyviking]

Javascript functions are also objects with a very useful property: .length This returns the number of arguments. So you could do something like: let args = tokens.slice(index, index + funcs[fn].length); funcs[fn].apply(this, args);

[@DaveBriccetti]

I love this, especially the live execution! Well done. (And I even saw a const.)

[@katdobermann]

Back to watching Daniel. After busy months. I miss you DANIIIIEEEL!

[@HeerdyesMahapatro]

this is so nice! logo is the first programming language that i learned. building a logo interpreter is actually a cool assignment project. lot of people discount logo as a children's language but it is very close to the lisp family!

[@HazzyDevil]

How dare anyone say your videos should be 20 min at most. Make them as long as you want 😊

[@sudoalex]

You're the best and funniest coder of the world Dan!

[@tychobra1]

20:00: This is totally how I did it in my little parser project. I like to avoid if/else or switch statements and also came up with a command map using the token as key and a function pointer as value. I like how different people not always come to different solutions, but can also have the same ideas and processes of thinking during the development. I like also that this separate command list was his first thought, before he was switching his mind to implement all this stuff within the turtle class. Just to come back later to his initial idea and re-vive the commands after he discovered the elegance of avoiding the switch statement ;-)

[@_ata_3]

I did Logo when i was a kid 30 years ago. Its awesome!!! 🐢

[@BoJaN4464]

You can get the number of arguments that a function is expecting with func.length, so you could do something like this: let cmd = commands[token]; let args=[]; for(var i=0; i < cmd.length; i++) { args.push(tokens[++index]); } cmd(...args); This will pull as many tokens as the command function expects and pass them as arguments(using ... to unpack args into individual arguments instead of an array) This way would allow a command to take any number of tokens, including 0 or more than one.

[@Picasso11]

19:32 PUT THAT HAND BACK TO THE TABLE !

[@steakiefrags1866]

Hahahaa

[@eliottgdl4718]

Just thanks for all of your videos ! You explain very well and with a big energy so its very nice to watch them, and its nice because we learn very fast and we WANT to learn more with you so thank you very much ! (and sry for my english ..)

[@MrZakrencony]

i was YELLING ++index when u wrote index++ at around 13:40

[@Brahvim]

Same LOL Us people who started with java Also I hate how JS doesn't have ++variable _oh wait it does_

[@borekworek69]

Love your videos

[@maksymiliank5135]

Actually, JavaScript objects are just dictionaries so you didn't need to create the separate "commands" object. If the naming of the functions of a turtle would match the name of the command, you could write: turtle[tokens[index]](tokens[++index]] Note: The turtle class would have to have functions like: fd, bd, rt, lt in order to get it working

[@Rightlime7923]

Oh, i was waiting so much for it...love you dan 💙💙

[@imninja4220]

Great idea, finally found a side project to work on

[@kacperozieblowski3809]

Function.length returns number of parameters a function takes, you can use it with ... operator (spread syntax) in JS that transforms an array into function parameters and vice versa to do something like: let f = commands[token]; f(...tokens.slice(index+1,index+1+f.length )); index += 1 + f.length; Put it inside your while loop in if(commands[token]) branch

[@Baal3033]

Great video :) And a really awesome idea. Also easy to follow along, although I don't know much JS

[@luismiguelgallegogomez8000]

7:34 Ohhh, i'm going to miss the "this dots" everywhere ;P

[@xnick_uy]

I'm very intrigued by how would be a nice and simple way to handle nested "repeats" in a possible logo input.

[@jonmayer]

Instead of the extra if else, all you have to do is not increment index. Call the function passing tokens[index + 1]. It will try and parse the value next cycle, but will quickly fail and move on to the next command.

[@JonathanChute]

The easiest way to remember the difference between i++ and ++i in my opinion is that the order happens in the way you read it: You read ++i as "Plus Plus I" so it does the addition and then gives you back i. You read i++ as "I Plus Plus" so it gives you back i and then does the addition.

[@TheCodingTrain]

That's super helpful!

[@juweinert]

22:22 This is really elegant. I hoped that you'd implement it like this throughout the video :) Nice

[@kacperozieblowski3809]

Actually it can be better, if you consider Function.length, a number of arguments a function takes and you slice tokens with it and index and you pass it into the command with spread operator and you add 1+function.length afterwards, so that you can have a command with no parameters or 5 or 2 or 23

[@simpletongeek]

That's great! I used to say that nobody is willing to teach turtle graphic programming, despite the fact that the problem is simply conversion from Polar coordinate to Cartesian coordinate. I now will have to qualify it with "... except Dan Shiffman!" I do wish you kind of practice a bit. The first time I did it, it took me one hour. I was having trouble with screen wrap. The quickest I did was about 10 minutes, without clearscreen command. I just forgot. :) You managed to do it in 20 minutes, so I guess you're better than me. Congratulations! BTW, Logo is not equal to Turtle graphic. I actually ended up not implementing logo, but implementing macro processor instead. Can't call it Logo. So I just call it Turtle Graphic with Macros. Edit: I implemented the repeat command by pulling 3 parameters: number of repetition, and two commands to be repeated. Obviously, sometimes you want more than 2 commands, but that's where having macros (sub func) helps. And just a suggestion to avoid the hang up problem: implement wait() and quit() commands.

[@TheCodingTrain]

Thank you for the feedback!

[@6754bettkitty]

There are two increment/decrement operators: prefix and postfix. Prefix (++i) is used when the user wants the value incremented before use. Postfix (i++) is used when the user wants the value incremented after use. Use the correct one for the situation!

[@TheCodingTrain]

Thanks, excellent explanation!!

[@bitquark730]

awesome person

[@stepansudakov8012]

Thank you.

[@kosmic000]

excellent vid

[@XenXenOfficial]

When I was in highschool I used Logo and VB.net to create MS paint!

[@DaveBriccetti]

Here’s my 3D Logo experiment: davebsoft.com/software/logo-3d/

[@TheCodingTrain]

Nice work! Submit to the website if you haven't already! github.com/CodingTrain/website/wiki/Community-Contributions-Guide

[@DaveBriccetti]

@@TheCodingTrain Thanks! Done.

[@FanJapanStudios]

"Wow!"

[@ItsHoro]

You should take a look at the Live Server extension for VSCode

[@Brahvim]

It's autocorrect doesn't work for me -_-

[@nickmartin7418]

Think some kind of hierarchical tree would work for implementing the repeat syntax

[@kumarvishalben]

Oh,,Man,,,, i used to write this LOGO language ,, 10 years ago,, this reminded me of early school days,, at that time i don't even noticed i was writing a programming language 😄,, #awesome 👍🏻

[@Brahvim]

Same, it was the language we learnt it grade 3! _Us Indians go together I see xD_

[@woodeyelyegaming1401]

I think this is the turtle program they had us do is school 30 sum years ago except the screen was black with green letters and drawing and we had a little turtle on screen. I also didn't do anything this complicated lol

[@porigonopop]

You should just give the token list and the index to your function, and then the function return the number of index she eat. (Pu : return 0/1 implementation dependent, FW: return 1/2, repeat: sum of command + 3/4)

[@ShaunDreclin]

TIL console.table is a thing I love you 😐

[@alexisarcegomez8698]

Hello, I just wanna say that I finally solve the problem. Now I have one question: Is it possible to change the color of some words that have been splitted?

[@rodrigoqteixeira]

13:40 Why did bro put a POST increment insead of an PRE increment. That returns the OLD value, not the NEW INCREMENTED one.

[@jimmyvanduuren5920]

Thank you so much for the awesome videos. It really motivates me to challenge myself and try working with new things. A little request, could you maybe do a video on Puppeteer for web scraping?

[@TheCodingTrain]

Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

[@Zack-xz1ph]

do you have this interpreter on a website somewhere where I can quickly try it out? If not I see you have it on github

[@ifelseprog]

thecodingtrain.com/CodingChallenges/CC_121_Logo/P5/

[@Zack-xz1ph]

thanks bro

[@A1rPun]

Inspiring video! I definitely want to make a PR for it. About the ++index & index++, the former increases the index before the expression gets evaluated (that's why one writes ++ BEFORE the expression). I see that the abbreviated variables 'dir' & 'amt' saving you keystrokes but it introduces cognitive overhead for you and the reader. I recommend clarity over brevity. EDIT: Pull-request is here github.com/CodingTrain/website/pull/833

[@deathszn4389]

So intresting. I guess! XD

[@alexisarcegomez8698]

Thank you very much Dan, this video is really cool, but I have only one problem. When I try to use the function select() at my js file, it returns to me an error, it says this: Uncaught ReferenceError: select is not defined. Why? I'm sorry, I'm just a beginner. PD: I have already linked the p5.js library into my HTML file.

[@TheCodingTrain]

Make sure you also have p5.dom.js!

[@alexisarcegomez8698]

@@TheCodingTrain Thank you for your help Dan, you are so cool. I have already solved my problem. Now I would like to know if it is possible to use the words that have been splitted and change it color and then replace them into the text area, that would be cool!

[@IARRCSim]

I wonder how many new Logo interpreters were made because of this video. I wonder how people many spent more than 40 hours making their interpreters a lot more complete than this video.

[@MotherSoft]

Wow good guy

[@kumarang1862]

Could you do a visualization of movement of a lizard in p5.js as coding challenge? The lizard could have a triangle like head, body, legs. It should go to the point where the mouse was clicked. The hard part will be the way the lizard moves, it should turn and move at the same time and travel the least distance.

[@quillaja]

A starting point would be Dan's videos on Forward and Inverse Kinematics.

[@EdoTM]

For a next coding challenge, try to remake microsoft solitaire in p5.js

[@adamtemple9417]

I was hopping you'd do a Halloween Spooky code today.

[@TheCodingTrain]

Me too, overwhelming schedule this year so no halloween special. . I will do a holiday one though!

[@adamtemple9417]

@@TheCodingTrain I hear that, I'm about to do my fist stream tomorrow for a blender 3d tutorial and I didn't have time for spooky this year.

[@rohit-lohar]

hi sir , pls make a tutorial on how to make exe. file from pde. (processsing) file.

[@OKay5067]

You probably want commands[token].length to get the number of arguments ;)

[@crides0]

New to the channel! For the challenge, is it okay to use other languages? I don't know JS unfortunately...

[@TheCodingTrain]

Of course! More info: github.com/CodingTrain/website/wiki/Community-Contributions-Guide

[@crides0]

@@TheCodingTrain Cool, thanks!

[@BadchessTactics]

So I don't understand what processing is. Can someone link me a video where Dan explains that?

[@TheCodingTrain]

Maybe? kzbin.info/www/bejne/d57PcpyBqM6sZtE

[@Brahvim]

Can someone tell me HOW to disable the same "out of context VSCode suggestions" thing? _...And does it require me to uninstall IntelliSense altogether..!?_ _Anyway:_ How do I set up... (Sam Lavigne was their name I think?) the p5.js autocorrect/suggestions plugin on the VSCode extensions store...? Edit: It's been 3 years as if me having written this, but if somebody can answer this for others to see, that'd be great! Thank you in advance.

[@ArsenGaming]

Wonders why code is broken, realizes he forgot pendown. Remember, computers do as they are told

[@smonman2873]

Isn't there a p5.js extension for vs code?

[@ziemsl]

Thanks for all that!! - You are so funny - love it (see 14:50) :-)

[@Brijeshkumar-fc8zj]

i did this when computer first came in my school

[@christianloizou4463]

Did nobody really notice he mixed pen up and pen down up for that long? 😂

[@Noe-Mastro]

You are crazy... I like you

[@aymen_]

try to make simple 'openGL fragment shader' -like in javascript (loop through pixels with a callback func that changes pixel) it would be hella fun to then copy some glsl code from web & try it in js

[@kacperozieblowski3809]

Actually there is webgl so you can do that without a custom interpreter that would be too slow anyways (cuz JavaScript) and to render a frame would take ages

[@kacperozieblowski3809]

And also WebGL runs no GPU so that is also cool

[@aymen_]

@@kacperozieblowski3809 its meant to be a challenge , not an actual thing tho 😉

[@aaronti5230]

how do you start a server in terminal

[@TheCodingTrain]

This workflow video might help! kzbin.info/www/bejne/fJu6k4iBZ62XedE (Full playlist: kzbin.info/aero/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X)

[@MrZakrencony]

32:33 yes it should!

[@ruthleutwyler668]

When does Dan normally stream?

[@TheCodingTrain]

Normally on Fridays, but I don't have a set schedule. . someday!

[@justgame5508]

Does java script support the use of delegates?

[@A1rPun]

I think you mean Anonymous functions. JavaScript is a dynamic language so you can create functions inside a function scope.

[@justgame5508]

A1rPun Yeah think that’s what I mean, in C# there referred to as delegates, basically an enclosed function that can be passed to objects or other functions as a parameter

[@m.z.2466]

i prefer lambdas over delegates

[@rodrigoqteixeira]

21:37 ✅ "fd": function() {turtle.forward()} ❌ "fd": turtle.forward

[@salvatorepenna3345]

When the second part?

[@TheCodingTrain]

Soon I hope!

[@averageanon007]

You forgot the 'Home' command from Logo.

[@dawalton7435]

7:33 I guess we don't need the this dot song anymore... :(

[@aperion8278]

At 29:00 i just want to jell the error at the screen

[@kiler78887]

on what thing do u do live stream

[@taba1950]

Every Friday on KZbin

[@TheCodingTrain]

Except not this Friday, have a workshop I am teaching 😢

[@satyamgupta756]

Checkout What other things could be done with nested loop *imgur.com/a/LgiXoh5*

[@jugendhacker2833]

Dude you freaked out because VS Code could correct forward to this.forward, just use a real IDE and there would be much more such cool features

[@charliejulietdavies8715]

first time watching coding train in a long time!! i've been inspired by this video, i forked the project so i can apply what i learned a couple years ago about parsing... i guess we'll see what i remember hahaha edit: github.com/seejaythrulife/Logo i have done it! i got as far as movement and loops (i kind of skipped ahead to loops, for the challenge), and i can fairly easily add more features

[@micheledaffara9245]

Setxy ahahahah Im dying

[@anuraghazra4772]

Hello? How can I contribute my project?

[@A1rPun]

Go to github.com/CodingTrain/website/blob/master/CONTRIBUTING.md

[@samuelfischer3764]

i would love for you to make a brain**** (very bad word) interpreter in js or java

[@TheZackyy]

too scared to watch this :э

[@pratikjha3647]

challenge make enigma and then make Christopher (a machine that Alan Turing made) to break enigma..... pin me if u c me.like my idea xD

[@satyamgupta756]

This Rotates Like Hell *imgur.com/mmq2Zsi* Animated using setInterval

[@akanshsirohi8804]

Can u please do a coding challenge on draw a "Hasse Diagram" in p5.... Hasse Diagram Wikipedia Link:- en.m.wikipedia.org/wiki/Hasse_diagram

[@SergiuszOlszewski]

Wouldn't it be so much easier to simply do something like this: for(every token; i+=2) eval("token[i]+"("+token[i+1]+")");

[@simpletongeek]

Sergiusz Olszewski You probably want to pull the parameters during command processing just in case you want to have a command with more than one parameter, such as gotoxy. Or no parameter such as clearscreen.

[@Boom2219]

Eval is generally a bad idea

[@anuraghazra4772]

First