studies have shown that using the word "we" helps increase engagement. because it does not put people on guard like like word "you" does, so i wouldn't be so hard on yourself, it probably indirectly (among many many other things) helped increase engagement in your video courses. anyways, great teaching style, found your videos when looking up answers to help a student get a better grasp on p5.js
I bought "The nature of code" book and its great to have these videos to go along with the book. Visual art is now my focus and its been a long time since I coded, so these bite sized sessions are awesome, thanks for publishing the lessons.
Your videos are addicting. I watch the basics videos (like this one) for no reason whatsoever than just to see how you explain what is already known to me.
I'm in my Summer Vacation...and I wanted to go-through JavaScript and I found your videos! I am very impressed by the way you teach Sir! Thanks a lot....instead of going-through I will surely learn everything!!!!! Love from INDIA❤❤
As a professional programmer and coding tutor for kids, I started with Swift in Xcode to let kids have fun on iPad and iPhone. Then I found the Python's turtle which kids love so much. Now it seems to me p5js it also great for kids coding because it has the cool online editor and p5js can do animation and 3D stuff easily.
I feel so blessed to have the internet and access to all this Wonderfull and useful information. The coding train thank you that you have gone out of your way to provide us all with these easy to follow tutorials!
Hi, Im a fan of your channel. Your videos blows my mind away and you did it for free. Thank you very much. Im an vfx artist and Im on the way learning code to utilize my career. And thank you again
This is absolute gold as far as learning to code in any language and you are teaching style is really good, thank you for helping me learn somethings that i found difficult.
From 2015 To 2017 You Still Haven't Learned That Green Clothes And Green Screen Don't Go Together Lol. You Make The Most Interesting Programming Videos Though :D
Here is the house I drew with p5.js :) function setup() { createCanvas (150,150); } function draw() { rect(50,50,75,50); rect(108,20,10,20); triangle(50,50,125,50,90,5); rect(50,65,15,15); rect(110,65,15,15); rect(78,80,20,20); }
I AM YOUR BIGGEST FAN . I HAVE WATCHED YOUR ALL VIDEOS , ALL LIVE STREAMS , I LIKE YOUR WORK VERY MUCH , YOU ARE WORKING VERY WELL . I AM WATCHING YOUR VIDEOS SINCE YOUR 100 K SUBS . I HOPE GOD WILL GIVE YOU BLESSINGS .
You're an amazing teacher!.I think you should make more videos which more challenging but easy to understand it, like creating native apps (IOS and Android), etc.Thumbs up
finally... proper coding tutorial. everything else i've found is "write exactly this"... problem is that you learn nothing by doing that! thanks for all the details... that reference page is quite cool. though i don't really understand the arc... i've made a pizza slice but i have no clue how i did it (in a 400, 400 canvas) arc(200, 200, 360, 360, 1, 8) If i change 1 to a number 2, it changes quite dramatically...
When I try to launch a live server from Atom it just keeps showing me a blank white screen. And when I launch the javascript console the error message says Cannot GET /favicon.ico, what is the issue?
Can I use that program for windows? Because I can't find any program that I can use to write javascript (without html and that stuff). I don't want a website just a game. I don't want to use unity either because I just want to write pure code.
No, you can't have pure Javascript program. You must use HTML, but you don't need to be expert in HTML for that, you just need to set "head" and "body" and connect javascript, and there you go :)
Nice explanation sir . I have one doubt, I am not getting how to move the single triangle in protractor shape movement ? Outer angle associated with the triangle should change not the inner angle of triangle.
hi daniel !!! i wanted to know are is there a such thing is a built in variables in java or java script such as gravity ,speed, ect... which i notice is often used???? thanks again
Did I just experience a glitch in the matrix? like 15 minutes ago, I thought its already 2017 and now back to 2015 :/ HAHAHAHAHA Like the way you explain the functions. Thanks
When I double p5 nothing shows up. I have to create a project and code everything through Atom like shown in the last video, how do I get to the program he's running?
ive been doing processing for a while last year and i love it... but the past year i really focused on web development and i recently decided to go back.. but figured this time id give p5js a try instead..... oddly enough it feels like processing has way more userbase and online community than p5js.. i'm curious why.... also i dont know if it's caused by the minor change in syntax but i feel more at home with processing over p5js... only problem is that it's kindof a pain to show people your processing work....
The rectangle is actually being drawn in the setup function. The setup up function can ‘draw’ images to the screen but it is only called once at the start of the app, the draw function is called every frame. So if you wanted to have a moving or constantly changing graphic you’d place it in draw, otherwise setup works fine to do it once.
I am using processing to code p5.js but how do I make the text change colour because I have he same syntax for create canvas yet it is not working or changing colours
Hey as you mentioned in a newer video im using brackets to learn js. But when I launch the live preview I get a different url named 127.0.0.1:51504/index.html and not something with localhost. This leads to me not seing anything I programed, just a blank space
127.0.0.1 is the "IP Address" for localhost so both are the same. If you aren't seeing your code it's most likely you have a typo. Check to see if there are any errors in the JavaScript console. Also, consider posting your code to forum.processing.org in the p5.js category for additional help.
it's your ip you should not post information like that to the internet it's the address of your pc. it's like telling anyone where you live by giving your home address
Sir i become interested with your follow tutorial some need your answer regarding this..Why at at my brackets (i follow all your instructions) the ellipse is fill of color black instead of white or transparent as the arc and points shape is not working only RECT, ELLIPSE & LINE is working..pls sir i need to follow video thank you sir for the coming reply from yours
I'm gonna sound really nooby here - I use Brackets to open sketch.js and when I write code it says that I'm missing the 'use strict' statement... What does that umm mean...?
Man, just found your channel. Top notch, mate! Thank you!
Thank you for watching!
love your videos keep up the good work!
studies have shown that using the word "we" helps increase engagement. because it does not put people on guard like like word "you" does, so i wouldn't be so hard on yourself, it probably indirectly (among many many other things) helped increase engagement in your video courses. anyways, great teaching style, found your videos when looking up answers to help a student get a better grasp on p5.js
I bought "The nature of code" book and its great to have these videos to go along with the book. Visual art is now my focus and its been a long time since I coded, so these bite sized sessions are awesome, thanks for publishing the lessons.
+sadiqsomjee thanks so much!
Absolute gold of a teacher! Thanks so much, I am so blessed to have found a teacher like you. Please accept my regards.
Your videos are addicting. I watch the basics videos (like this one) for no reason whatsoever than just to see how you explain what is already known to me.
I'm in my Summer Vacation...and I wanted to go-through JavaScript and I found your videos! I am very impressed by the way you teach Sir! Thanks a lot....instead of going-through I will surely learn everything!!!!! Love from INDIA❤❤
maan wish you were my teacher back in school!
Me too@
Mee tooooo ❤️
As a professional programmer and coding tutor for kids, I started with Swift in Xcode to let kids have fun on iPad and iPhone. Then I found the Python's turtle which kids love so much. Now it seems to me p5js it also great for kids coding because it has the cool online editor and p5js can do animation and 3D stuff easily.
I feel so blessed to have the internet and access to all this Wonderfull and useful information. The coding train thank you that you have gone out of your way to provide us all with these easy to follow tutorials!
I love the way you assertively express your knowledge. You've inspired and now I'm eager to learn, thanks.
Thanks!
Hi, Im a fan of your channel. Your videos blows my mind away and you did it for free. Thank you very much. Im an vfx artist and Im on the way learning code to utilize my career. And thank you again
Glad to hear!
The Coding Train 🚂 love your videos
Tran Thien Vu r
Mike Boyd brought me here, and man am I glad for that!!! So deeply thankful and appreciative of what you do!!
Welcome! There are actually more recent versions of this video here: th-cam.com/play/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA.html
@@TheCodingTrain Thanks! Will see em all!
Just found this channel while searching for a better explanation of gradient descent, incredible channel, thank you!
Even though I'm a JS expert, I am watching this. And really good, the way you teach teach the fundamentals to beginners.
Nice work
You convinced me, Daniel. As always, thank you very much.
Dan is short for Daniel? Holy cow how didn't I notice that ever
2021, and I'm here learning for my project.
These tutorials are a blessing.
This is absolute gold as far as learning to code in any language and you are teaching style is really good, thank you for helping me learn somethings that i found difficult.
U have the best personality! Love your Lessons, as a new student in Coding ur videos help so much :)
Yo idk if you are or not, but you should become a professor in this stuff! Seriously! You have amazing teaching skills
He is a professor.
that was akward...
From 2015 To 2017 You Still Haven't Learned That Green Clothes And Green Screen Don't Go Together Lol. You Make The Most Interesting Programming Videos Though :D
your teaching style is perfect for me!!!
I am enjoying your tutorials! Your energy is ideal for teaching this. Great work sir. Thank you!
Here is the house I drew with p5.js :)
function setup() {
createCanvas (150,150);
}
function draw() {
rect(50,50,75,50);
rect(108,20,10,20);
triangle(50,50,125,50,90,5);
rect(50,65,15,15);
rect(110,65,15,15);
rect(78,80,20,20);
}
Oh no the house is under attack.
var meteors = [];
function setup() {
createCanvas (150,101);
for (i = 0; i < 8; i++){
meteors[i] = new Meteor();
}
}
function draw() {
background(255);
rect(50,50,75,50);
rect(108,20,10,20);
triangle(50,50,125,50,90,5);
rect(50,65,15,15);
rect(110,65,15,15);
rect(78,80,20,20);
for (i = 0; i < 8; i++){
meteors[i].update();
meteors[i].show();
}
}
function Meteor(){
this.x = random(width);
this.y = -8;
this.xspeed = 1;
this.yspeed = random(1,3);
this.update = function(){
if (this.x > width){this.x = random(width);}
if (this.y > height){this.y = -8;}
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}
this.show = function(){
push();
fill(255, 153, 0);
ellipse(this.x,this.y,8,8);
pop();
}
}
Kopuz I modified your code!
Click the balls and they will stop.
var balls = [];
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
for (var i = 0; i < 5; i++) {
balls[i] = new Meteor();
}
}
function draw() {
background(255);
for (i = 0; i < 5; i++) {
balls[i].update();
balls[i].show();
}
}
function Meteor() {
this.x = random(width);
this.y = random(height);
this.xspeed = 3;
this.yspeed = 3;
this.update = function () {
if (this.x > width || this.x < 0) { this.xspeed *= -1; }
if (this.y > height || this.y < 0) { this.yspeed *= -1; }
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}
this.show = function () {
push();
fill(255, 153, 0);
ellipse(this.x, this.y, 8, 8);
pop();
}
}
function mousePressed() {
for (i = 0; i < balls.length; i++) {
if (Math.sqrt((Math.pow(mouseX - balls[i].x, 2)) + (Math.pow(mouseY - balls[i].y, 2))) < 10) {
balls[i].xspeed = 0;
balls[i].yspeed = 0;
}
}
}
Lol best replies ever.
I love these replies
You know its lit when they drop more code.
You are a great teacher, I recently started learning JS and eager to use p5 going forward.
Great channel man, I've never seen coding challenges made so interestingly :) Keep up the good work :)
Best Coding teacher Hats off
I have to admit that I was high most of the time when I watched your videos. And I watched almost all of them.
i love the passion you show when teaching. It seems you are having fun!
Thank you!
I AM YOUR BIGGEST FAN . I HAVE WATCHED YOUR ALL VIDEOS , ALL LIVE STREAMS , I LIKE YOUR WORK VERY MUCH , YOU ARE WORKING VERY WELL . I AM WATCHING YOUR VIDEOS SINCE YOUR 100 K SUBS . I HOPE GOD WILL GIVE YOU BLESSINGS .
Im in 2018. And i love saw this old videos..
My students really like your videos and so do I!
You're an amazing teacher!.I think you should make more videos which more challenging but easy to understand it, like creating native apps (IOS and Android), etc.Thumbs up
Quick tip - turn the green screen sensitivity down also... dont wear green (obviously)
You are the best Tutor I have ever got for teaching this stuff a way better than any other boring Professor :)
Tanks, that's nice to hear!
I really enjoyed your lecture. My first day.
you remind me of ross from the friends series its so fun to learn with you
You crack me up. Amazing!!
Thanks for watching!
I'm looking to buy a computer or laptop for coding only but am on a budget you got any ideas
I'm looking to buy a computer or laptop for coding only but am on a budget you got any ideas
I'm looking to buy a computer or laptop for coding only but am on a budget you got any ideas
I'm looking to buy a computer or laptop for coding only but am on a budget you got any ideas
I love watching your videos. You are a wonderful teacher. I'd like to know how you would code the animation at 11:05. Thank you
Your teaching is very easy to understand the concept
Your Channel helps heaps! I especially like the coding challenges. Also try watching on 2X speed!
Thank you for making these stuff. It does helps.
finally... proper coding tutorial. everything else i've found is "write exactly this"... problem is that you learn nothing by doing that!
thanks for all the details...
that reference page is quite cool. though i don't really understand the arc... i've made a pizza slice but i have no clue how i did it
(in a 400, 400 canvas)
arc(200, 200, 360, 360, 1, 8)
If i change 1 to a number 2, it changes quite dramatically...
Simply awesome.... I got addicted to your videos. Much love and respect for you 💞
Ay ty man you explain it way better than my "teacher".
This man deserves a teleprompter.
Great video! I love all your videos :D
@9:22 - I believe that value would change the height of the rectangle not the position
Awesome video I really learned something thanks man
When I try to launch a live server from Atom it just keeps showing me a blank white screen. And when I launch the javascript console the error message says Cannot GET /favicon.ico, what is the issue?
Thanks man I'm learning easy coding for fun and this made it really easy
Love it, Thats so awesome. Thanks so much for sharing it with us. Cant wait to see more.
I just started :) thx for this wonderful tutorial !
Coding is fun on this channel.I like it
You're the best teacher I never had!
i love you dan , i wish ur my math teacher
Спасибо за контент! Отдельное спасибо за русский язык!
:D just downloaded p5...and it's really cooooool
You are a fucking genius, just started js! thanks mate
Thank you, thank you and thank you again Dan :)
THANK you . ! This video is so cool. And its so easy to learn THANK YOU !
Can I use that program for windows? Because I can't find any program that I can use to write javascript (without html and that stuff). I don't want a website just a game. I don't want to use unity either because I just want to write pure code.
eyewars You can use it for Windows.
No, you can't have pure Javascript program.
You must use HTML, but you don't need to be expert in HTML for that, you just need to set "head" and "body" and connect javascript, and there you go :)
install node.js. webbrowser's work with html css and JavaScript. and html is unavoidable
awesome videos! cant wait to study more coding :)
Nice explanation sir . I have one doubt, I am not getting how to move the single triangle in protractor shape movement ? Outer angle associated with the triangle should change not the inner angle of triangle.
oh boy, you are not using the bracket which you showed last video.
what is this? It looks so clean and neat.
Can I have it on Windows?
omg i am glad i found thsi vid
Nice video man i just found your channel. And i start to learning programming i mean i want to be a programmer. Cool channel subscribed! :D
Thankyou you ,you explain very good
I am taking coding classes now,. How do I draw around an object in a picture in a JavaScript?
Gee, I can follow diz )))...and Yaaaay-working !! maaan, diz iz unbelievable...; I become you believer from now on.
Thank you so much for this!
+danielshiffman I wonder how do you film yourself with the computer screen background? Like in 8:40?
green screen and wirecast!
Thanks!! you make it look so easy.. I just hear the switch! :)
Thank you! So fun
Amazing tutorial.you are great
Thanks for watching!
hi daniel !!! i wanted to know are is there a such thing is a built in variables in java or java script such as gravity ,speed, ect... which i notice is often used???? thanks again
There are not! (But sometimes if you use a library that includes this stuff then yes.)
Hi! If I'm done with some designs using p5.js, can I actually put the design as a background for my website?
Thank you!! Helped me a lot....
I'm so glad to hear, thank you!
Sir,will it possible possible to make any web app by p5 js or it just for hobby or fun for programming ......???
Did I just experience a glitch in the matrix? like 15 minutes ago, I thought its already 2017 and now back to 2015 :/ HAHAHAHAHA Like the way you explain the functions. Thanks
the code train, i really confuse about "ellipseMode( )". do you help to understand that ...
this video teach so much good stuff. thank you man
you're welcome!
Thanks🤝
When I double p5 nothing shows up. I have to create a project and code everything through Atom like shown in the last video, how do I get to the program he's running?
ive been doing processing for a while last year and i love it... but the past year i really focused on web development and i recently decided to go back.. but figured this time id give p5js a try instead.....
oddly enough it feels like processing has way more userbase and online community than p5js.. i'm curious why....
also i dont know if it's caused by the minor change in syntax but i feel more at home with processing over p5js... only problem is that it's kindof a pain to show people your processing work....
thank thank thank you bro
makes me laugh every time he ends his videos
How does the draw() know to draw the rectangle in the canvas created by the setup()? Did i miss something?
The rectangle is actually being drawn in the setup function. The setup up function can ‘draw’ images to the screen but it is only called once at the start of the app, the draw function is called every frame. So if you wanted to have a moving or constantly changing graphic you’d place it in draw, otherwise setup works fine to do it once.
I am using processing to code p5.js but how do I make the text change colour because I have he same syntax for create canvas yet it is not working or changing colours
what better...jquery or p5.js?and what's different of both
Hey as you mentioned in a newer video im using brackets to learn js. But when I launch the live preview I get a different url named 127.0.0.1:51504/index.html and not something with localhost. This leads to me not seing anything I programed, just a blank space
127.0.0.1 is the "IP Address" for localhost so both are the same. If you aren't seeing your code it's most likely you have a typo. Check to see if there are any errors in the JavaScript console. Also, consider posting your code to forum.processing.org in the p5.js category for additional help.
it's your ip you should not post information like that to the internet it's the address of your pc. it's like telling anyone where you live by giving your home address
localhost is basically the same. it picks your ip specifically. it's a shortcut
Sir i become interested with your follow tutorial some need your answer regarding this..Why at at my brackets (i follow all your instructions) the ellipse is fill of color black instead of white or transparent as the arc and points shape is not working only RECT, ELLIPSE & LINE is working..pls sir i need to follow video thank you sir for the coming reply from yours
I'm gonna sound really nooby here - I use Brackets to open sketch.js and when I write code it says that I'm missing the 'use strict' statement... What does that umm mean...?
One question if i have 2 difrent rect and if i wana name my rect's is that in the funktion ore can i simply do like this insted kub(200,200,400,400);
Missing 'use strict' statement.
'createCanvas' was used before it was defined.
How to solve this problem?
go into the extensions manager and go onto the installed tab. Scroll down and disable JSlint and ESlint
awsome channel
thank you!
thanks for living!
Hello, do you know how to creat a graph interactively with p5.js?
anyone know why i can listen to other videos but the audio for his videos dont work for me
What is p5.js used for? is it a programming language to learn just for fun?
p5.js is a way to code with javascript as far as i know.
please help, i have the js file in the same folder as the index.html folder and when i open it in firefox it just displays as text.......
This workflow video might help?
th-cam.com/video/HZ4D3wDRaec/w-d-xo.html
Also:
sublime text: th-cam.com/video/UCHzlUiDD10/w-d-xo.html
atom editor: th-cam.com/video/d3OcFexe9Ik/w-d-xo.html
brackets: th-cam.com/video/nmZbhManVcY/w-d-xo.html
codepen: th-cam.com/video/5gfUgNpS6kY/w-d-xo.html
The Coding Train I figured it out awhile ago thanks for the reply tho made my day
So, I don't understand how you opened the sketch.js. It isn't in atom or sublime. Can anyone help me out?