Just to let you know that there's now a new built in circle() function in p5.js so that this var declaration DOESN'T WORK anymore. Use any other name than circle when declaring your variable. Example : var c = {x:0,y:200,diameter:100}; ... ellipse(c.x,c.y,c.diameter,c.diameter); c.x+=1;
@@TheCodingTrain Hey you actually replied ! :) I didn't mean to be rude or anything, just wanted to make sure no one else would get confused. I love your videos btw you're a great teacher. Thank you very much
LMAO thank you! I have sat here for over half an hour wondering what I am doing wrong //everything 1 by one and then read this comment. also.... in the process i found out if you print() in draw you get stuck in a loop where it brings the printer options up....smh
@@pafouThank you for flagging this, because eI was going out of my mind trying to work out why my code wasn't working! Renamed the circle var declaration and it worked.
He is a great teaher becaause he varies between writing on the board to improve your conceptual understanding in addition to implementing the concept in code. This is very rare!
@TheCodingTrain why do you always say "if anyone is actually watching this video" ? I love watching your videos. You're a very good teacher whose made coding so much fun and exciting for me ! I love your positivity. You're also one of the few RUclipsrs for whom I have pressed the bell icon because I love watching all your videos ! So keep coding, keep making awesome content and always stay positive !
I have just about completed the js lesson in codecademy, watched countless tutorials from instructors and youtube personalities and I have never understood things this clear. You do a great job breaking things down without using "fantasticalness" that only gets in the way. Thank you so much
It is insane how amazingly talented you are at explaining and your amazing and positive energy... we need more professors and overall people like you in this world... wow
Hey, I actually watch your videos for javascript, and I just love the simplicity of your teaching, it really gives a nice feeling like a real class, please keep doing such amazing videos. Helps beginners like me !!! :)
Thank you so much Coding train i have been watching these videos for the past few days and i have learned so much. From knowing nothing to now writing my own program. Keep it up ! i know this video was made ages ago it is still perfect to use and learn so thank you so much for inspiring me to keep on coding.
Just started getting into JS and p5, it has been fun so far, thanks for your awesome series! Some random plotting fun: var windowW = window.innerWidth; var windowH = window.innerHeight; var moveX; var moveY; var firstLX; var firstLY; var secondLX; var secondLY; function setup() { createCanvas(window.innerWidth, window.innerHeight); background(60); frameRate(30); moveX = windowW * 0.10; moveY = windowH / 2; } function draw() { fill(rColour(), rColour(), rColour()); if (moveX 0 && moveY
I am some what new to programming ,and have been bouncing around websites such as khan academy and code academy to learn the basics. But I have found that your videos are by far the most helpful and useful :) keep making more!
This gentleman and Barnacules (Codegasm) are the best programing teachers I've ever come across on the internet. They make things feel elementary and fun.
Thank you so sososos much for your detailed tutorials. Finally someone skilled enough to teach step by step (for dummies like me haha). I CAN ACTUALLY UNDERSTAND.
I know this is a late comment but from watching your coding challenges I actually managed to reset the circleX variable to 0 when it hits the edge of the screen and also do the same thing with the mousePressed function!
it's like I am doing some javascript and then forget how, in this case, Objects worked, so i get on youtube and search your name so that you can remind me. it's been the same for a lot more. THAK YOU!
why didn't i discover p5.js earlier ?? found you through your p5.js video gamin tutorials !! looks pretty fun and logical so i found my interest in p5.js !! love your videos !! great teacher for a beginner ( although i am familiar with the coding world)
The best thing about this is that you can use ONE let (var) function to create variables that you can use for several shapes at once. It's very neat and saves u tons of space if you use it that way.
@@slinderdub9586 nope. I'm not sure why, but I believe it's just because in the video the editor is probably using a "version" of JS that didn't have "let" established as a new way to declare an object or a variable (pre es6 maybe). While following the tutorial, I tried using "var" on the p5.js web editor just like Dan did, and the code wouldn't run, but when I changed it to "let", it did.
Great Vids!! I have a quick question. I want to set up an object to use in both setup function and in the draw function but It seems to only work if I make two separate objects written inside the functions. (these objects are identical) Is there a way to only have to write the object once and use it anytime in the code?
I'm used to processing OOP, where you first put data into constructor, which then passes that data to the actual object. Is this the same thing? It looks too simple to be an object, without all that class and constructor stuff.
+Tsskyx This is somewhat different b/c there is no "class" here. Just a literal object. However, something more similar to what happens in Processing is creating a JS object with a constructor function. This comes in 6.4 ruclips.net/video/F3GeM_KrGjI/видео.html
+Tsskyx Using a javaScript constructor might look like this: function MakeCircle(xPos,yPos,diameter) { this.x = xPos; this.y = yPos; this.d = diameter; } var circle = new MakeCircle(300,200,20); This would create a circle object that looks like this: { x: 300, y: 200, d: 20 }, and that constructor could be used to make other similar objects as well.
Watched further on. Later video helps understand the issue. Basically have to change the name of the variable because some names have conflicts with the p5 library. I’m guessing this issue could come up in other languages, good lesson to learn!
Hey, so I did a code to move with up down left right and it said there was something wrong when i had space between: If(keyIsDown(DOWN_ARROW)) (here was the error) { y = y + 2 } Do you know how to make the error go away?
Hi, great videos. Working my way through hoping to create a simple game of my own at the end! I was wondering about doing things in the object variables such as: var ball = { pos: createVector(25,25), height: random(0, 100) } It says that these things are undefined. I'm sure the problem is glaringly obvious but I thought it would be useful to define these variables like this in the object. Cheers!
Hello, what a great video !!! I'm french and it's a pleasure to learn coding situ you. I've just a little question, I installed P5 on my mac but I don't have your "play/stop" button to test m'y code, where can i find it please ?
weird: If I turn r,g,b into a color object it will simply make the background to the same color of the circle (also if the circle is filled with another set of number). If I made a cast like r=color.r and then i use r in the background function everything is fine...but if I try to call the function as Background(color.r,color.g,color.b) the same original problem (background and circle of the same color). Notice that the background is actual made of the same color of circle and not simply not called...because the circle doesn't leave a trace behind when it moves.
I wish you taught just plain Java. I'm in AP Computer Science right now with a below average teacher and I'm so beyond lost. No one else on RUclips teaches code as well as you.
This playlist is actually Java using the Processing IDE (and any challenges using Processing are also Java): ruclips.net/user/shiffmanplaylists?view=50&shelf_id=2&sort=dd
Thanks so much for the videos. I had issues with this tutorial. All my syntax lined up just like the video with no errors and I still couldn’t get the circle to display. I changed var circle = to let circle = and the circle popped up on my screen. I am curious as to why this is?
You can also ask at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
so far out of all of this i have made this var circleX = 0; function setup() { createCanvas(600, 400); background(207, 0, 0); } function draw() { fill(circleX, 0, circleX); noStroke() ellipse(mouseX, mouseY, 50, 50); circleX = circleX + 0.1; } function mousePressed() { background(207, 0, 0); var circleX = 0; fill(circleX, circleX, circleX); noStroke() ellipse(mouseX, mouseY, 50, 50); circleX = circleX + 0.1; } and i have managed to make some cool artwork
editor.p5js.org/AlexArek/sketches/Sk0KynQ2m Can anyone tell me why it does that stupid "slide" in the opposite direction every time you press the left/right arrow?
An object is a list of name value pairs separated by commas. It just so happens that when you get to the end you don't need a comma after the last element. If I write it like this it might be more apparent: { x:0,y:0,z:0 }
It does work in brackets, but your code needs to EXACTLY the same on every line. It's been a month since you commented so maybe you sorted it out, but my "circle.x" was "circle. X" and it didn't work for me because it was capitalized. If you can link to your code, if you still have the problem, I'm sure we could figure it out. It definitely is working in Brackets though cause that's what I used.
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
Thank you for a great series. When I define an object in p5 Version 0.6.1, I get a message 6: Uncaught SyntaxError: Unexpected token ; "%cDid you just try to use p5.js's exp() function? If so, you may want to move it into your sketch's setup() function.
The answer is not clear, as I can assign normal variables before setup. Please help
What error are you getting? Try posting at forum.processing.org? It's easier for me and others to help that way (you can share code there easily!). Feel free to tweet me @shiffman a link so I can follow / contribute!
Just to let you know that there's now a new built in circle() function in p5.js so that this var declaration DOESN'T WORK anymore. Use any other name than circle when declaring your variable. Example :
var c = {x:0,y:200,diameter:100};
...
ellipse(c.x,c.y,c.diameter,c.diameter);
c.x+=1;
Thanks, another reason I need to do this video!
wouldn't it be let
@@TheCodingTrain Hey you actually replied ! :)
I didn't mean to be rude or anything, just wanted to make sure no one else would get confused. I love your videos btw you're a great teacher. Thank you very much
LMAO thank you! I have sat here for over half an hour wondering what I am doing wrong
//everything 1 by one and then read this comment.
also.... in the process i found out if you print() in draw you get stuck in a loop where it brings the printer options up....smh
@@pafouThank you for flagging this, because eI was going out of my mind trying to work out why my code wasn't working! Renamed the circle var declaration and it worked.
You start watching just ONE video and then you get hooked to it, like some awesome TV show ;)
lol I totaly relate lol
Quite agree. I have other things to do but it is like a box set and binge watching. Such a good teacher...
He is a great teaher becaause he varies between writing on the board to improve your conceptual understanding in addition to implementing the concept in code. This is very rare!
Daniel, you are the best programming teacher I have ever seen. Thank you
Your way of teaching way is unparalleled. Explained in such a lucid manner.
I just have to say your one of the first teachers for programming that I actually find super interesting to listen to.
Keep up the great work!
@TheCodingTrain why do you always say "if anyone is actually watching this video" ? I love watching your videos. You're a very good teacher whose made coding so much fun and exciting for me ! I love your positivity. You're also one of the few RUclipsrs for whom I have pressed the bell icon because I love watching all your videos ! So keep coding, keep making awesome content and always stay positive !
I paused the video there and was about to comment this!
i think he said that cus i think he did this for a class
Everything should be made as simple as possible, but not simpler. This man is doing it to the utmost!
My friend, Genuinely You are one of the best coding teachers I have ever had.
I have just about completed the js lesson in codecademy, watched countless tutorials from instructors and youtube personalities and I have never understood things this clear. You do a great job breaking things down without using "fantasticalness" that only gets in the way. Thank you so much
So glad to hear thank you!
Marlon Decosta learn native JS too!
I have noticed the importance of this. Thank you for your advice. Any advice is well received my friend so again gratitude.
Marlon Decosta yeah native is love native is life.
oh man, i'm rewatching this after a year, and i still love you!
It is insane how amazingly talented you are at explaining and your amazing and positive energy... we need more professors and overall people like you in this world... wow
Hey,
I actually watch your videos for javascript, and I just love the simplicity of your teaching, it really gives a nice feeling like a real class, please keep doing such amazing videos. Helps beginners like me !!! :)
This is how a teacher is supposed to be :)
Thank you so much Coding train i have been watching these videos for the past few days and i have learned so much. From knowing nothing to now writing my own program. Keep it up ! i know this video was made ages ago it is still perfect to use and learn so thank you so much for inspiring me to keep on coding.
Thank you. Was completely baffled reading about objects on a JavaScript textbook and this has cleared it up. In fact.
Just started getting into JS and p5, it has been fun so far, thanks for your awesome series!
Some random plotting fun:
var windowW = window.innerWidth;
var windowH = window.innerHeight;
var moveX;
var moveY;
var firstLX;
var firstLY;
var secondLX;
var secondLY;
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
background(60);
frameRate(30);
moveX = windowW * 0.10;
moveY = windowH / 2;
}
function draw() {
fill(rColour(), rColour(), rColour());
if (moveX 0 && moveY
I know these videos are from a while ago but very informative and the best ones I have found. Thanks Daniel!
So nice to hear, thank you!
I am some what new to programming ,and have been bouncing around websites such as khan academy and code academy to learn the basics. But I have found that your videos are by far the most helpful and useful :) keep making more!
This gentleman and Barnacules (Codegasm) are the best programing teachers I've ever come across on the internet. They make things feel elementary and fun.
Other than JavaScript and p5js, I learned tons of "enthusiasm" from Daniel.
Thank you Daniel!! For existing!!!!! You're awesome
In under 10mins I finally understand why JSON is how it is
got a udemy course and you explained it a lot better
What's the course?
Thank you so sososos much for your detailed tutorials. Finally someone skilled enough to teach step by step (for dummies like me haha). I CAN ACTUALLY UNDERSTAND.
I'm so glad to hear, thank you!
same!!
the concept of object . You nailed it in 5 min !
the best explained class ive experienced
I needed this quick refresh - thanks for this quick video!
THIS DUDE ACTUALLY HELPS!!!
I know this is a late comment but from watching your coding challenges I actually managed to reset the circleX variable to 0 when it hits the edge of the screen and also do the same thing with the mousePressed function!
UPDATE!!! instead of circle you need to write circl
omg thank u so much!
Thanks!!!
I made it work using "let" instead of "var", however I'm still not quite sure what the difference is between var and let
Thank you so much!
Thanks a lot !
it's like I am doing some javascript and then forget how, in this case, Objects worked, so i get on youtube and search your name so that you can remind me. it's been the same for a lot more. THAK YOU!
you are awesome, never stop !
@TheCodingTrain I’m very new to coding and you make it easy to learn.
Great videos! You are actually easy to listen to and you make the videos enjoyable. I'm on ground zero with this stuff and you make it interesting.
you are the best Teacher Dan !!!!!
This guy is unique, love it xD
Hey Dan, you made learning coding is very interesting. Keep this up bro, thanks a lot!
first video to watch. And I like the way you teach.
why didn't i discover p5.js earlier ?? found you through your p5.js video gamin tutorials !! looks pretty fun and logical so i found my interest in p5.js !! love your videos !! great teacher for a beginner ( although i am familiar with the coding world)
Thanks for all your work! I am just learning this stuff for fun and these vids are awesome!
i started watching these videos because i want to create some confetti and i'm really hoping these will help me understand how!!
your videos are very interestng. i dont get bored. instead i feel to see whats next whats next
I'm enjoying your videos. You're a really good teacher!
+256beans Thanks so much!
I really learn al lot from you thanks man
thank you so much. great videos you are awesome and funny :)
Thanks for watching!
The best thing about this is that you can use ONE let (var) function to create variables that you can use for several shapes at once. It's very neat and saves u tons of space if you use it that way.
Amazing videos about JS and p5. Great work!
Such an awesome video. He's the best online in my opinion.
.
Amazing tutorials you make coding fun!!
If you're following along with the editor, use "let" instead of "var" to declare the circle object .
Thank You.
;)
so if i use "let" is it ezer then "var"
@@slinderdub9586 nope. I'm not sure why, but I believe it's just because in the video the editor is probably using a "version" of JS that didn't have "let" established as a new way to declare an object or a variable (pre es6 maybe). While following the tutorial, I tried using "var" on the p5.js web editor just like Dan did, and the code wouldn't run, but when I changed it to "let", it did.
how can I ever thank you enough:)
Great Vids!! I have a quick question. I want to set up an object to use in both setup function and in the draw function but It seems to only work if I make two separate objects written inside the functions. (these objects are identical) Is there a way to only have to write the object once and use it anytime in the code?
THANK YOU!! I totally understand objects now :)
I love your videos, I've learned a lot!
I'm used to processing OOP, where you first put data into constructor, which then passes that data to the actual object. Is this the same thing? It looks too simple to be an object, without all that class and constructor stuff.
+Tsskyx This is somewhat different b/c there is no "class" here. Just a literal object. However, something more similar to what happens in Processing is creating a JS object with a constructor function. This comes in 6.4 ruclips.net/video/F3GeM_KrGjI/видео.html
+Tsskyx
Using a javaScript constructor might look like this:
function MakeCircle(xPos,yPos,diameter) {
this.x = xPos;
this.y = yPos;
this.d = diameter;
}
var circle = new MakeCircle(300,200,20);
This would create a circle object that looks like this: { x: 300, y: 200, d: 20 }, and that constructor could be used to make other similar objects as well.
Hey sir, your left side head is transparent
at video time 8:15
dan you're cool keep it up thank you have a blessed day
I don't understand why can my variable test.x work, but my circle.x is coming out undefined. Please help :<
var circle = {
x: 200,
y: 200,
size: 22
}
var test = {
x: 200,
y: 200,
size: 22
}
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
background(220);
//circle.x += 5
//circle.y += 5
//circle.size += 1
fill(22)
ellipse(circle.x,200,22,1)
print("circle var: " + circle.x)
print("test var: "+ test.x)
}
Watched further on. Later video helps understand the issue. Basically have to change the name of the variable because some names have conflicts with the p5 library.
I’m guessing this issue could come up in other languages, good lesson to learn!
what is the difference of having the x = x +1 on top of ellipse function rather than the bottom of the function??
You are awesome..I love how you get excited about silly things in your code.. Goes on to show how much you like teaching code.. Kudos !!!
Abdul Moiz I legged someth by OMFG
Is the video about adding functionality to objects coming any time soon? I'm really interested in knowing how to do that.
Hey, so I did a code to move with up down left right and it said there was something wrong when i had space between:
If(keyIsDown(DOWN_ARROW)) (here was the error) {
y = y + 2
}
Do you know how to make the error go away?
Hi, great videos. Working my way through hoping to create a simple game of my own at the end!
I was wondering about doing things in the object variables such as:
var ball = {
pos: createVector(25,25),
height: random(0, 100)
}
It says that these things are undefined. I'm sure the problem is glaringly obvious but I thought it would be useful to define these variables like this in the object. Cheers!
Hello, what a great video !!! I'm french and it's a pleasure to learn coding situ you. I've just a little question, I installed P5 on my mac but I don't have your "play/stop" button to test m'y code, where can i find it please ?
thank you, you are an awesome person
Interesting, funny and simple explained.
Just saying that they have made a update and you can’t use the word circle because it’s in the reference I needed to change it to circl
thank you
Pleasure ❤️❤️❤️
You are funny teacher, i like this king of teacher. THANKS FOR THIS
I made an in app purchase (Add Mode) for p5.js and it opened my program's IP Address When I ran my program. (1st time it just read p5.js as a JS file)
var circleX = 20;
var circleY = 20;
var circleW = 20;
var circleH = 20;
function setup() {
createCanvas(640, 360);
background(200,100,150);
}
function draw() {
ellipse(circleX,circleY,circleW,circleH)
circleX = circleX + 2;
circleY = circleY + 1;
circleW = circleW + 1;
circleH = circleH + 1;
}
loving your videos ! also when do you go live? is there a certain time you like to go live ?
Sign up for live stream notifications via e-mail on shiffman.net
Whats the compiler your using?
weird:
If I turn r,g,b into a color object it will simply make the background to the same color of the circle (also if the circle is filled with another set of number).
If I made a cast like r=color.r and then i use r in the background function everything is fine...but if I try to call the function as Background(color.r,color.g,color.b) the same original problem (background and circle of the same color).
Notice that the background is actual made of the same color of circle and not simply not called...because the circle doesn't leave a trace behind when it moves.
what is the difference between var and let ?
Hello Daniel from Colombia, you are amazing !
So entertaining man 😇
Let’s give him 2 million subscribers. I don’t know how 🤷♂️.
you helped me so much love you
I wish you taught just plain Java. I'm in AP Computer Science right now with a below average teacher and I'm so beyond lost. No one else on RUclips teaches code as well as you.
This playlist is actually Java using the Processing IDE (and any challenges using Processing are also Java):
ruclips.net/user/shiffmanplaylists?view=50&shelf_id=2&sort=dd
Var circle is like a structure right
i make my object and there isn any error but it happens anything when i start th e program
Thanks so much for the videos. I had issues with this tutorial. All my syntax lined up just like the video with no errors and I still couldn’t get the circle to display. I changed var circle = to let circle = and the circle popped up on my screen. I am curious as to why this is?
is there spaces also I had the same issue
I just used his exact example and just changed the word var to let.
oh ok thx
You can also ask at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
They have updated p5.js since then and it now has a circle function so if you call circle it doesn't work. You need myCircle or similar.
You save my life
Thank you! You are really good!
+Vukasin Stancevic (Lomz) thanks for watching!
Where are these object stores. Like we have heap for storing java object. I am a Java guy trying to learn Javascript.
so far out of all of this i have made this
var circleX = 0;
function setup() {
createCanvas(600, 400);
background(207, 0, 0);
}
function draw() {
fill(circleX, 0, circleX);
noStroke()
ellipse(mouseX, mouseY, 50, 50);
circleX = circleX + 0.1;
}
function mousePressed() {
background(207, 0, 0);
var circleX = 0;
fill(circleX, circleX, circleX);
noStroke()
ellipse(mouseX, mouseY, 50, 50);
circleX = circleX + 0.1;
}
and i have managed to make some cool artwork
Thank you sir.
hello sir, which programming editor are you using ???
he is using p5 web editor editor.p5js.org/
Does this not work In brackets?
Try atom.
works in atom
Yes. Impor the p5.js cdn into your HTML file, whrite your code and run(ctrl+ alt+p)
editor.p5js.org/AlexArek/sketches/Sk0KynQ2m Can anyone tell me why it does that stupid "slide" in the opposite direction every time you press the left/right arrow?
HI Dan
in the object
var circle1{
x:0,
y:200,
diameter:50
An object is a list of name value pairs separated by commas. It just so happens that when you get to the end you don't need a comma after the last element. If I write it like this it might be more apparent: { x:0,y:0,z:0 }
i got it !!!!
thanks
this video should be updated the current version of p5 editor in the browser dosent let you use circle as a variable because its a 2d shape input now
HELP! several times I've reloaded, saved and opened the canvas using a browser but it never works: I am usin brackets
it happens the same to me! :(
It does work in brackets, but your code needs to EXACTLY the same on every line. It's been a month since you commented so maybe you sorted it out, but my "circle.x" was "circle. X" and it didn't work for me because it was capitalized.
If you can link to your code, if you still have the problem, I'm sure we could figure it out. It definitely is working in Brackets though cause that's what I used.
I'm facing the same problem. My canvas and work progress doesn't show on my chrome default browser. I use Brackets.
Making circles with Jason! :)
hah!
thank you by subtitles
I did the syntax dot and everything is right no console errors but the ellipse does not show it's just the black background
can any one help me please
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
you're a god :D
Thank you for a great series.
When I define an object in p5 Version 0.6.1, I get a message
6: Uncaught SyntaxError: Unexpected token ;
"%cDid you just try to use p5.js's exp() function? If so, you may want to move it into your sketch's setup() function.
The answer is not clear, as I can assign normal variables before setup.
Please help
It happens when you put ; inside object.
This doesn't work in brakets, please help! Should I use processing?
What error are you getting? Try posting at forum.processing.org? It's easier for me and others to help that way (you can share code there easily!). Feel free to tweet me @shiffman a link so I can follow / contribute!
Is it the same to learn Javascript or p5?
p5.js is a library for JavaScript so they are not exactly the same but you can learn both at the same time!
@@TheCodingTrain so p5 has the same reserved words and works pretty much the same as Javascript?