Random Walker in p5.js (Coding Challenge 52)
Вставка
- Опубліковано 26 чер 2024
- In this coding challenge, I simulate a "random walk" with the p5.js library. This video is part of the course Nature of Code at ITP, Tisch, NYU. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • A* Pathfinding Algorit...
🎥 Next video: • Coding Challenge #53: ...
🎥 All videos: • Coding Challenges
References:
🚶🏽♀️ Random walk Wikipedia article: en.wikipedia.org/wiki/Random_...
5️⃣ random Function Reference Page: p5js.org/reference/#/p5/random
5️⃣ floor Function Reference Page: p5js.org/reference/#/p5/floor
📕 The Nature of Code GitHub (Spring 2017): github.com/nature-of-code/NOC...
Live Stream Archive:
🔴 Live Stream #73: • Live Stream #73: Rando...
Related Coding Challenges:
🚂 #53 Random Walker with Vectors and Lévy Flight: • Coding Challenge #53: ...
🚂 #162 Self Avoiding Walk: • Coding Challenge 162: ...
Timestamps:
0:00 Introduction to the Random Walker Coding Challenge
1:56 Whiteboard explanation of a random walk
6:48 Into the code...drawing a point!
7:30 Picking a random number between 0 and 4 using p5.js's 'random' and 'floor' functions
9:58 Setting up the code to use the random number
12:26 First run! The point...it wibbles...it wobbles
12:48 Stop clearing the background every frame so that we can see the point's path
13:10 Discussion of the possibilities of the random walker
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ua-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ 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/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#random #floor #randomwalker #p5js #javascript #processing #java
One of the best coding teachers, great job!
I just wanted to say that you taught me more about programming than my teacher did in half a year by a mile. Your students are really lucky :D
Congratulations on 200,000 subs, Daniel! They're well-deserved!
i really miss theses kind of videos and i find them helping me the most
Nice 200,000 subscribers , congrats man you really deserve more
You just hit 200000 subs! Congrats Daniel! Keep up the good work!
You deserve more subs. I am working on a p5.js video for my channel and I mentioned you because you are one of the best teachers on youtube. My coding challenge was a tag game.
Man I love you !! Never knew coding stuff would be fun after 2 years of college
wow your channel has grown heaps! congrats on almost 200k! wow.
Also, love the train flute, keep it up!
haha, thanks, I'm glad to hear!
Exactly 200.000 subscribers!
Congratulations :)
You know a coder is legit when he has a longish beard :P
and apparently this has nothing to do with testosterone levels
Congratulations for 200k subscribers !!!!
Coding Challenge #52, yay! If you were producing and releasing these every week, it would mean that you made year's worth of content :o
Keep up the good work.
Gratz on 200k subs!
awesome vid daniel!
Is there another youtuber like you that makes coding entertaining for other languages?
KydroxHD He is unique
Thats what you call an unique outro xD
200k subs congrats😃
congrats on 200k :DD
I'm sorry dan, I'm never very creative with your videos, i just follow them step by step and be happy that i made a little application :D
Perfectly great way to experience them too, I approve!
Genial!!!, muchas felicitaciones, y te pasa igual que a muchos de nosostros con la sentencia SWITCH, puedes usar tambien un map
{
0: "UP",
1: "LEFT",
2: "DOWN",
3: "RIGHT"
}
YESSSSSSSSSSSSS!!!!!!!! YOU HIT 200K !!!!!!!!
you rock bro.
The best... Awesome! Thx
Random (stochastic) processes are typically used for communication purpose, to model the transmitter & receiver of analog/digital signals
nice job brah
your style in the vidoes are really entertainment :D
Thanks for the nice feedback.
I always give u a like before I watch the video. Cuz I know you r awesome
Why is this so entertaining to watch?
love your vids!!
thank you!
Like the new set up. Lol I always forget how to set up a switch statement too.
that thumbnail
'I got a thing in my brain' lol , me too Dan
The first time I ever used p5js I created this exactly (even the colour choice was the same), eerie. Danel are you a time traveler?
I just coded a similar thing in vPython. I set it so that whenever it got a certain distance from the center, it would reset it's position back to the center. It looks pretty cool!
great idea!
Random walkers but based on another variable (ex : resources) would be fun !
I really love your videos. I have also implemented some of your projects, but in Python and Pygame (since I'm more comfortable with that)
Wow you legend
Amazing vid !
thank you!
i tried to modify the random walker to something that can give me something of a stock market evolution feeling. It's really weird because the same things sort of apply (fibonacci retracement, double tops/bottoms etc.
this is what i put in draw:
stroke(255);
strokeWeight(8);
point(x, y);
x = x + 10;
var yr = floor(random(2));
switch(yr) {
case 0:
y = y + 10;
break;
case 1:
y = y - 10;
break;
}
200,000th Subscriber :)
I feel like such an idiot. We had to do a project for my digital media class where we create a basic paint program using P5. I got it to draw lines but for some reason the lines would immediately disappear after being painted onto the canvas. So I made it so that the program would store all of the coordinates for every line drawn in a vector and then repeatedly update the screen by looping through the vector and drawing said lines for every frame. I submitted that.
After watching this video, I now realize that the reason for my issue was because I put background(255) at the beginning of my draw() function, which repeatedly refreshes the screen. If I had simply removed that line, the project would've been so much easier. Rip.
rip indeed
hello sir daniel, i would like to ask if there is a user input in processing? like cin>> for c++ what is for processing?
@The Coding Train Persi Diaconis had a great lecture series on - essentially - what does it mean to be random. Highly recommended.
Is there the possibility that these videos will be available in 1080p in the future? I would really love that. (Hey, it can only help a great channel, right?)
You look like one of my teachers at school, I'm in Australia though.
Yes! People bang on about using switch statements but they only allow you to test one variable, IF statement is much more flexible (IMHO)
The Classic Example i associate with random walk is hill climb/ cliff or the Drunkards walk. which is the term i first learned in place of random walk.
200K subscribers!!!
Dan can you code a countdown timer circular like, with a line as big as a radius mapped to the countdown time that changes the color of the circle as it moves?
8:30 explains the floor function
I am a big fan of your work, and I would very much like to see more videoes on how to use the Kinect. Using libraries to find skeletons, faces, hands etc. tnx
I am hoping to get to this.
I'm trying to model a cheetah and antelope chase system using random walkers. How would you implement it so that if one walker is in contact/intersects the other walker the program terminates? Also I'm trying to use your other video on attraction and repulsion to model the attraction of the walker to the other walker.
Hi Daniel Shiffman!
First of all, let me express my sincere appriciation to your esteemed efforts! And now I started reading your book which is called "the Nature of Code". And here is my question: 1. when playing randomCounts in rect like this:var randomCounts = [];
for (var i = 0; i < 20; i++) {
randomCounts[i] = 0;
}
var rectWidth = floor(width/randomCounts.length);
noStroke();
// Animate the distribution of random numbers over time
var draw = function() {
background(255, 255, 255);
var index = floor(random(randomCounts.length));
randomCounts[index]++;
for (var i = 0; i < randomCounts.length; i++) {
fill(mouseX, mouseY, mouseY);
rect(i*rectWidth,
height-randomCounts[i],
rectWidth-1,
randomCounts[i]);
fill(0, 0, 0);
text(i, i*rectWidth+1, height-10);
}
}; how can I make it rapidly on screen I mean, how can I play the drawing again from begining, without clicking "Restart".
Come and join the discord, it's a better place for code discussion and help! thecodingtrain.com/discord
I am sorry Sir! But it is not working it is showing @@TheCodingTrain "hCapta" over and over or maybe this course is done only during certain hours, I live in Tashkent, Uzbekistan. That's why maybe our clocks may differ? All in all, Thank you for your kind attention and corporation!
Instead of a switch statement, in JavaScript, you can map an object or array with a function and call it.
var fn = [ function a(x) { return x + 1; }, function b(x) { return x - 1; } ];
var x = 100;
var i = floor(random(2));
var v = fn[i](x);
No if, no switch, clean syntax.
EDIT: it's slower and not useful on small use cases, but if there are many branches, it keeps the code clean and scalable.
thanks for the tip!
Yanick Rochon, Sure, no switch and no ifs. But incredibly much harder to read. If anyone of my coders every would write code like that I'd have a serious talk with him about how important readability and maintanibility of code are.
Mats Engstrom look at this StackOverflow question, to which I answered : stackoverflow.com/questions/3336709/custom-range-variable-set-with-jquery-ui-slider/3336837#3336837
My answer is much easier to maintain than the alternative, using a switch case, one. If your student writes unreadable code, sure, I 100% agree with your. Then again, if your student comes and write a gient blob of IF statements, I'd also have a word with him.
There are things, in software engineering, called design patterns (I know you know, but some people might not), and my comment addresses one of them, notably the strategy pattern (en.wikipedia.org/wiki/Strategy_pattern)
In my examples, I used dummy variable names, but if sementic names are used, things would make much more sense.
Mats Engstrom Yanick Rochon I like it, but isn't this just a preference? It's not a 'best practise' for sure.
Isn't dropping if/else statements part of functional programming? This is a different paradigm. A lot of companies implement this so not everywhere you will get a rant about readability etc, as this compensates for the pros of this paradigm.
Fabian Tjoe-A-On of course. Software engineering is not about knowing design patterns, but when to use them.
You could simply put an array with four objects as the argument of the random function.
Here's what you could do:
let rand = random([{
x: 1, y: 0
}, {
x: -1, y: 0
}, {
x: 0, y: 1
}, {
x: 0, y: -1
}];
x += rand.x;
y += rand.y;
And you know the rest
Really like your vids btw
It'd honestly make more sense if you looked more behind you rather than directly to your left when looking at the big green screen.
Just a little something I picked up and my OCD gets to me
ayy, Coding Challenges are back.
The Coding Train...bow
+The Coding Train
Try coding a "virtual smartphone" android or iOS where it isn't actual iOS or Android but you can scroll the home screen or code one of the iPhone / android apps (like clock)
how would I make it so as the path gets older it changes color so you can actually see where it is in all of it
I wish you where my programming teacher in college. my teacher was so cut and dry from the book.
200k reached :D
Listening to the p5 while I'm programming in python(3.2) going to class later for c++. Yep I am going to mix everything up.
Ewe case, I prefer if, Else if
Everytime you say "DOT", the word "THIS" pops up in my head. Am I watching too many of your vids? :)
HAH! Same :joy:
8:02 can we use the decimal part for the angle
what do I do with index.html? Because I open the program in a local server and it doesn't do anything
'Can we say that this is a very simple cellular automaton?
More AI videos, please
how did you get the program to actually run ?
I never remember the switch syntax either. And when I look it up it always reminds me how ugly it is...
What is this program you use?
Another person who can't remember switch syntax! I'm not alone!
I know this video has nothing to do with it, but will you make a tutorial series for neural networks, like you did for genetic algorithms?
Yes, planning to!
+The Coding Train Great, looking forward to it
Karlo Ivusic uujjj j J. H
Thank God! Your explanations are easy to understand, fun, and exciting. Don't worry about all the people who comment about "cringe." You're kickass
I always use else if as well xD I don't know why, maybe because it basically does the same thing and I feel safer with if :D
what the floor! :D
14:44 the random walker made a demon
How do you make it show when you open it up? I'm trying to follow along (I'm completely new to this stuff) and it won't open up in my browser.
This video might help! ua-cam.com/video/UCHzlUiDD10/v-deo.html
Alright so that video helped me fix many of my issues. The only thing I have left to find out is how to set up the index file (when you have the libraries folder, the .js and the index.html). I have no clue how to set this up and any help would be appreciated! Thanks a lot.
"nine nine nine nine" actually sounded like german saying "no no no no" :D
So true!
Hey I have Processing i3 latest one & its not picking up on the term -> 'Function' it doesn't not recognize it anyone know what I am doing wrong please any help is appreciated thank you.
I'm back from being off the grid. So the Coding Rainbow has been rebranded? Link to more info guys pls! Thanks!
Where can I buy coding train branded train whistles?
Sir, after watching your video about random walk, suddenly pop up a question in my brain :D. Can you make a video that visualize a flower or something with random walk? [It's like l-system visualize trees]. I'm until now trying it with p5 following your tutorial because of my curiosity about random walk. I hope u can make the video sir. Thank you. [I'm from Indonesia sir, i'm really like your videos and the way you're explaining it are easy to understand]
Awesome video! Instead of saying 'I lost my train of thought', definitely start saying 'I lost my coding train of thought'. :P
omg yes!
oh, somewhat reminds me of Mars Rovers
can you do a tutorial on how to code a platformer game with gravity and platforms?
Yes I always wonder how you code those things it seems so difficult
I just use other peoples platformers as templates then custimize as my own
Hes very busy person he might be able to do it though
Gravity is so hard to make
Gravity is not that hard to code!
Source of bouncy balls (made by me):
ball[] balls = new ball[10];
void setup() {
size(700, 700);
colorMode(HSB);
for(int i = 0; i < balls.length; i++) {
balls[i] = new ball();
}
}
void draw() {
background(51);
for(int i = 0; i < balls.length; i++) {
balls[i].update();
balls[i].show();
}
}
class ball {
PVector loc = new PVector(random(width),random(height));
float velocity = 10;
float acc = 0;
float gravity = 0.01;
float velx = 3;
void update() {
acc += gravity;
velocity += acc;
loc.y += velocity;
if(loc.y + velocity + 24 > height) {
float p = (velocity / 100) * 90;
velocity = -p;
if(velocity < 1) {
loc.y = height - 24;
}
}
loc.x += velx;
if(loc.x + velx > width || loc.x + velx < 0) {
velx = -velx;
}
velx = (velx/100)*99;
}
void show() {
stroke(map(loc.y,0,height,0,255),255,255);
fill(map(loc.y,0,height,0,255),255,255);
ellipse(loc.x,loc.y,48,48);
}
}
can you make something like random walker but each time dot moves it play's some piano note and like 30 cases 30 notes, i think it will make nice song
great idea!
Just curious, how many WPM can you type?
typeracer.com
can you make some neural network coding?
dude , do u have some Python codes?
instead of using ceil or floor, you could just truncate the float
Hunter Spurdo Doesn't floor() just do that?
Just started with p5 today and was just wondering how i can make it so the dot won't go offscreen? if anyone knows please let me know i am currently using it as my desktop background but it keeps going off the screen.
Check the x and y coordinates of the dot against the boundaries of your canvas.
if (x < 0 && x > width) {
// you're outside (on the horizontal axis)
}
Same with height for the y (vertical axis).
Does that help ?
199.669 subs, ooooooh, so close!!!
Christoph Schneider 200k special would be great
cadfoot Yes! but what could he do? Livestream? or a Musicvideo with his flute and his awesome soundsamples ;)
What the floor?! 😂
Илья Еремин What the ceiling?
Where's intro Billy?
how to code these in mathematica?
Why didn't you use the random Value as an angle and changed the position based on that angle with an radius of 1. Then you could round the values in the output bit still have a more random random walker
I do that in the next video I'm going to release soon!
what is the link to the code?
I wonder how a random walker would perform in a maze.
Does anyone know how to do this? but in Matlab?