- 340
- 1 319 854
Radu Mariescu-Istodor
Finland
Registrace 7. 10. 2011
I have a PhD in Computer Science and I want to teach you things. I publish:
1. Courses I teach at the university
2. JavaScript project tutorials
3. Entertaining videos about coding
4. Advice I give to my students
5. Some weird things. You'll see...
1. Courses I teach at the university
2. JavaScript project tutorials
3. Entertaining videos about coding
4. Advice I give to my students
5. Some weird things. You'll see...
Recreating a Train Simulation with JavaScript | Coding on the Train!
Join me on a train ride as I recreate my first train simulation using JavaScript! 🚂 In this video, I'll show you how to draw train tracks and animate a train using dashed lines and Bezier curves, all on an HTML Canvas. Whether you're a beginner or an experienced coder, this tutorial has something for everyone. Here's what you'll learn:
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing train tracks procedurally with JavaScript
- Creating and animating a train along the tracks
- Implementing smooth curves with Bezier curves
- Adding interactivity with customizable parameters
- Live coding challenges and solutions
Check out the final demo on my website and stay tuned for more projects, including a game based on the trolley problem! Like, comment, and subscribe for more coding adventures.
Old Version: czcams.com/video/ZNkapOL4OBw/video.html
DEMO: radufromfinland.com/projects/train_2
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing train tracks procedurally with JavaScript
- Creating and animating a train along the tracks
- Implementing smooth curves with Bezier curves
- Adding interactivity with customizable parameters
- Live coding challenges and solutions
Check out the final demo on my website and stay tuned for more projects, including a game based on the trolley problem! Like, comment, and subscribe for more coding adventures.
Old Version: czcams.com/video/ZNkapOL4OBw/video.html
DEMO: radufromfinland.com/projects/train_2
zhlédnutí: 1 938
Video
JavaScript Beginner Project Tutorial: The Ebbinghaus Illusion
zhlédnutí 1,9KPřed 16 hodinami
Hey coders! Today, I've got an exciting tutorial for you where we dive into the mesmerizing world of visual illusions. In this video, I'll guide you step by step through coding the Ebbinghaus illusion using JavaScript and HTML Canvas. Plus, we'll take it a step further and add some animation to bring this optical illusion to life! 🖥️ Explore the fascinating intersection of psychology and web de...
Understanding Data with AI (ChatGPT 3.5 and Python)
zhlédnutí 1,8KPřed 14 dny
Any data should come with some kind of documentation, but very often it doesn’t. In this video I’ll show you how to use large language models to help you understand what some structured data is. We’ll use Chat GPT and try to understand and visualize the data from here: radufromfinland.com/data/info.txt On this channel I normally do JavaScript tutorials, but this time we’ll go with what Chat GPT...
How to Fake data in Apps
zhlédnutí 2,8KPřed měsícem
Hey, everyone! In this tutorial, I'll show you a simple trick using browser developer tools to generate fake data in Gmail. It's a handy technique to capture screenshots without exposing any personal information. Whether you want to share your screen for tutorials, presentations, or just to keep your sensitive details private, this method works like a charm! 🔒 Learn how to safeguard your privac...
![Fine-Tuning the Racing Game with Self-driving Cars [Understanding AI - Lesson 15 / 15]](http://i.ytimg.com/vi/SHrIPpbElkY/mqdefault.jpg)
Fine-Tuning the Racing Game with Self-driving Cars [Understanding AI - Lesson 15 / 15]
zhlédnutí 1,8KPřed měsícem
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html Welcome to the grand finale, Lesson 15 of the "Understanding AI" course! In this concluding update, we'll add some finishing touches to our racing game. We'll play around with styles to give the game a polished look, integrate cars into the minimap, explore a simple collision handling method, and finally, I'll share a neat trick ...
![Camera Input for Racing Game in JavaScript [Understanding AI - Lesson 14 / 15]](http://i.ytimg.com/vi/odgKS32XS6Q/mqdefault.jpg)
Camera Input for Racing Game in JavaScript [Understanding AI - Lesson 14 / 15]
zhlédnutí 3,4KPřed měsícem
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html In Lesson 12 of the "Understanding AI" course, join me in implementing camera controls for our racing game using the marker detector code we built in the previous tutorial. This innovative approach will elevate your gaming experience as we delve into using marker centroids to determine tilt, allowing for dynamic control within th...
![Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]](http://i.ytimg.com/vi/jy-Mxbt0zww/mqdefault.jpg)
Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]
zhlédnutí 4,1KPřed měsícem
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html Remember those early mobile games where you could steer by tilting the phone? In this video, I'll guide you through using the device orientation sensor to capture tilt movements. It's a fantastic technique that opens up a world of possibilities for game control. Let's explore the potential of this feature not just for games, but ...
![Tilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15]](http://i.ytimg.com/vi/ZgjDeO_EzY4/mqdefault.jpg)
Tilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15]
zhlédnutí 2,5KPřed 2 měsíci
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html Remember those early mobile games where you could steer by tilting the phone? In this video, I'll guide you through using the device orientation sensor to capture tilt movements. It's a fantastic technique that opens up a world of possibilities for game control. Let's explore the potential of this feature not just for games, but ...
![3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15]](/img/n.gif)
3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15]
zhlédnutí 2,5KPřed 2 měsíci
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html In Lesson 11 of the "Understanding AI" course, I'm thrilled to unveil the magic of 3D extrusions in JavaScript. Today, I'll guide you through the process of making elements pop up in the third dimension, a technique commonly known as extrusion. And when I say everything, I mean it - from buildings and cars to road borders. But he...
3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15]
zhlédnutí 4KPřed 2 měsíci
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html In Lesson 10 of the "Understanding AI" course, I'm excited to teach you how to implement a unique perspective in your self-driving car project: one from the car's viewpoint. The fascinating part? We won't be using any libraries to achieve this effect, as the underlying math is surprisingly straightforward. I believe understanding...
Procedural Sounds for Games with JavaScript and WebAudioAPI [Understanding AI - Lesson 9 / 15]
zhlédnutí 2,3KPřed 2 měsíci
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html Welcome to Lesson 9 of the "Understanding AI" course, where I'll guide you through the exciting process of creating procedurally generated racing game sounds using JavaScript and the WebAudioAPI. In this video, I'll teach you how to generate sound from scratch, starting with a simple beeping noise that we can play at different fr...
AI Racing Game in JavaScript [Understanding AI - Lesson 8 / 15]
zhlédnutí 2,6KPřed 2 měsíci
PLAYLIST: czcams.com/play/PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81.html Welcome to Lesson 8 of the "Understanding AI" course, where I'll guide you through the process of transforming a self-driving car simulation into an exhilarating racing game using JavaScript! In this tutorial, I'll show you how to take control of the main car while letting AI handle the others. We'll implement crucial features li...
⭐🏆⭐PRIZES: Racing AI Competition⭐🏆⭐ DEADLINE: May 15ᵗʰ 2024
zhlédnutí 2,5KPřed 3 měsíci
When designing your AI car, you can use the playground as instructed previously, but you are not limited to it as long as you produce a compatible “.car” file. This extra freedom comes with a warning: changing car specifications like the max speed, acceleration, friction is not allowed and you will be disqualified if you attempt to do so. You are only allowed to modify the sensors configuration...
Using Dijkstra's Shortest Path With AI [Understanding AI - Lesson 7 / 15]
zhlédnutí 1,8KPřed 3 měsíci
Using Dijkstra's Shortest Path With AI [Understanding AI - Lesson 7 / 15]
Dijkstra's Algorithm in JavaScript [Understanding AI - Lesson 6 / 15]
zhlédnutí 3,7KPřed 3 měsíci
Dijkstra's Algorithm in JavaScript [Understanding AI - Lesson 6 / 15]
Understanding AI - Lesson 5 / 15: Navigating to Target
zhlédnutí 2,6KPřed 3 měsíci
Understanding AI - Lesson 5 / 15: Navigating to Target
Understanding AI - Lesson 4 / 15: Where Extra Dimensions Come From?
zhlédnutí 2,6KPřed 4 měsíci
Understanding AI - Lesson 4 / 15: Where Extra Dimensions Come From?
Understanding AI - Lesson 3 / 15: Multilabel Neural Networks
zhlédnutí 3,5KPřed 4 měsíci
Understanding AI - Lesson 3 / 15: Multilabel Neural Networks
Understanding AI - Lesson 2 / 15: Hidden Layers
zhlédnutí 4,6KPřed 4 měsíci
Understanding AI - Lesson 2 / 15: Hidden Layers
Understanding AI - Lesson 1 / 15: A Simple Neural Network
zhlédnutí 17KPřed 4 měsíci
Understanding AI - Lesson 1 / 15: A Simple Neural Network
Drawing the Twitter Logo with JavaScript
zhlédnutí 2,1KPřed 5 měsíci
Drawing the Twitter Logo with JavaScript
Coding a Spinning Canvas App with JavaScript
zhlédnutí 2,1KPřed 5 měsíci
Coding a Spinning Canvas App with JavaScript
Drawing CIRCLES in 10 Different Ways with JavaScript
zhlédnutí 2,6KPřed 5 měsíci
Drawing CIRCLES in 10 Different Ways with JavaScript
Coding Sorting Visualizers with ChatGPT and JavaScript
zhlédnutí 2,8KPřed 5 měsíci
Coding Sorting Visualizers with ChatGPT and JavaScript
A Virtual World - JavaScript Course: Final Lesson [Coding a MiniMap with JavaScript]
zhlédnutí 6KPřed 6 měsíci
A Virtual World - JavaScript Course: Final Lesson [Coding a MiniMap with JavaScript]
A Virtual World - JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]
zhlédnutí 8KPřed 6 měsíci
A Virtual World - JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]
A Virtual World - JavaScript Course: Lesson 9 / 11 [Self-driving Car Integration]
zhlédnutí 6KPřed 7 měsíci
A Virtual World - JavaScript Course: Lesson 9 / 11 [Self-driving Car Integration]
A Virtual World - JavaScript Course: Lesson 8 / 11 [Saving the World]
zhlédnutí 3,4KPřed 7 měsíci
A Virtual World - JavaScript Course: Lesson 8 / 11 [Saving the World]
A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]
zhlédnutí 4,7KPřed 7 měsíci
A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]
very nice birds-eye-view of starting, expanding, refactoring process!
Amazing👏
💙💙💙💙💙💙💙💙
So what is this shape? Tetracontaoctagon! Actually, how does this work with shapes of odd numbers of vertices? You can't draw a line straight across that way
💖💖💖💖
How can I be good as you are ? I've to Google for most of the time. Not able to create creative intuition. Feeling depressed 😔. Please reply.
Interesting video, liked it!
Someone once said: "A good professional does not work out of obligation. He works because he likes what he does. " .... And you in a moment of distraction, showed that we can always practice new things, while having fun doing it ....😁👍
Thanks
I have completed both Phase 1 and Phase 2 of the project. However, I need to document specific results related to this project for academic purposes, as I am incorporating this into my graduation project. Thank you once again; the journey and the knowledge gained have been amazing. I must admit, you've debunked the myth that "Sentient AI is a Myth"-hahaha!
am i going to land a job with 150K a month xd just kidding thanks for the content im about to start learning with you and i want to see what other ppl think of this course
Wow! Build this themes if you can! ( Vanilla JS with OOP)! 1. Video Player like CZcams (All functionality) (Responsive), (Preview), (Quality change) etc....; 2. Image Editor (Cropper); 3. Video Editor 4. Custom range slider |=============O===============| don't use <input type="range"/>
That's a sub and a like right there. I'm 39 and really appreciate a chance to learn the fundamentals in a more calm way.
Excellent explanation, clear demonstration and flawless execution I love your videos filled with useful information. Thank you!
Thanks!
I followed your exact code and for some reason i couldn't get the first "bestCar" to turn(it just goes forwards until it crashes).
Awesome tutorial!
This is the best way, I have ever seen.
looks like the orange circle is raising in the air
I would call the "pedals" satellites
I followed your code until 19:36 and this is what happened: Uncaught SyntaxError: Unexpected token '(' car.js:8 Uncaught ReferenceError: Controls is not defined at new Car (car.js:8) at main.js:5 please explain my code: car.js: class Car{ constructor(x,y,width,height){ this.x=x; this.y=y; this.width=width; this.height=height; this.controls=new Controls(); } update(){ if(this.controls.forward){ this.y-=2; } if(this.controls.reverse){ this.y+=2; } } draw(ctx){ ctx.beginPath(); ctx.rect( this.x-this.width/2, this.y-this.height/2, this.width, this.height ); ctx.fill(); } } controls.js: class Controls{ constructor(){ this.forward=false; this.left=false; this.right=false; this.reverse=false; this.#addKeyboardListeners(); } #addKeyboardListeners(){ document.onkeydown=(event)=>{ switch(event.key){ case "ArrowLeft": this.left=true; break; case "ArrowRight": this.right=true; break; case "ArrowUp": this.forward=true; break; case "ArrowDown": this.reverse=true; break; } console.table(this); } document.onkeyup=(event)=>{ switch(event.key){ case "ArrowLeft": this.left=false; break; case "ArrowRight": this.right=false; break; case "ArrowUp": this.forward=false; break; case "ArrowDown": this.reverse=false; break; } console.table(this); } } } index.html: <!DOCTYPE html> <head> <title>Self-driving car - No libraries</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="myCanvas"></canvas> <script src="controls.js"></script> <script src="car.js"></script> <script src="main.js"></script> </body> </html> main.js: const canvas=document.getElementById("myCanvas"); canvas.width=200; const ctx = canvas.getContext("2d"); const car=new Car(100,100,30,50); animate(); function animate(){ car.update(); canvas.height=window.innerHeight; car.draw(ctx); requestAnimationFrame(animate); } style.css: body{ margin:0; background:darkgray; overflow:hidden; text-align:center; } #myCanvas{ background:lightgray; }
Great stuff. I’m now going to be saying the word “lerp “ all the time.😂 Is there an easy way to animate the flowers rotating?
I would say that you can try to replace the start and endpoints of the outer circle from 0 to 2PI instead to have a starting point dependant on the t variable. Say you want to have a rotation period T of 20 sec then you can add (t modulo T)/T * 2 * math.pi to both start and endpoints to the arc that has circle dashes on it. Not sure how you do modular arithmetic in Java and too lazy to check.
HEY! Where's the coding with Radu theme song!?!?!?
Terrific project and design! Your explanation is first rate! Keep making these cool projects!!!
WOW! Amazing
What crazier thing 😵😵Clearly one has the impression that the central circle changes. But it does NOT change .. How crazy. 😵🤪I liked the tip to put the name of the variables in the body of the call of a function. This makes it much easier to understand the code.😁👍
Nice title song 😊
🤍
Très bon professeur Radu. Merci
love how you walk though everything from scratch- great stuff as always - thankyou
Using line dashes is a clever idea, Why complicating things when it can done by a couple lines of code. That was a fun little project and I hope you do more stuff like this. Thanks Radu!
I laughed out loudly when the animation started, it was like magic. Thank you Radu
What you are doing here reminds pretty much on few startreck tng episodes where the crew is asking the computer to create and modify a holodeck simulation. Crazy, isn't it?
I like when you make projects like this. Always fun to follow along
❤
Glad to hear :-) Looks like we switched content recently: you do more elaborate projects and I do simpler ones. I will have to catch up on your content after the holiday.
Thank you sir 🫡
You are great
Thanks :-)
Wonderful lesson😁
Glad you liked it :-)
GitHub ???
❤🎉
:-)
Please can you make a tutorial on this?
What exactly do you mean?
@@Radu How have you created this project using HTML, CSS, and JS? I want that.
@@amitkumarjha3809 ah, you mean that tool where you move the marbles and do the operations? It wasn't easy :-/ and making a tutorial about it will be even harder. I don't think it's worth it... not many people need this, I think...
@@Radu OK