Best namespace example video on YT, hands down. Also a pretty decent, slimmed down introduction to Object Oriented Programming in JS. My hat is off to you, sir
Oh, that is amazing. Just spent last hour trying to figure out how to use this through reading the documentation and accidentally saw that you made a video on it. So much more clear. Thank you once again!
Who knows why, I decided to create a page. Deciding to deal with the idea of a second canvas that I wanted to add, later. I just been like 20 minuts adding "canvas1." everywhere xDD I think I have a special god for me, because it worked perfectly at the first try. I was So happy whe I saw it working. Thanks !
Was looking for something exactly like this! I'm using p5 to render a 3D image, and allowing the user to edit the color & spin the image 360. I needed a way to reset the Z-spin back to normal before converting the canvas to jpg. It kept saving the image at weird angles... I was able to do it w/ pure js, but being able to create my own method on a p5 obj keeps inline with everything! Thanks man!
so what i was trying is reading one canvas onto another.. but it seems sketch functions setup is called asynchronously. so how to get instance of first canvas in second canvas ? basically some hook for canvas loaded ?
hello, did anyone here try to use p5sound with instance mode? i've been trying to create an oscillator in an instance canvas and really can't find a way to create one... I keep getting the "p5.Oscillator() is not a constructor"...
It seems this could be very useful when working with genetic algorithms, when I want to visualize many at once and it doesn't make sense to show all examples on the same sketch.
Thanks Daniel, great set of tutorials. This might be a noob question but when in instance mode, is there a way to pass variables through rather than needing to "copy, paste and edit" the way you did with the colors at the end of the video? If so, can you pass in p5 objects like Tables? I am trying to do show a number of sketches on one page (each with their own div tag so they can be found) but the data may vary and I want them to look the same so while all the same functions will be used only the underlying data will vary.
Yes, you could create multiple p5 instances with the same codebase but pass in different data as input. This would be a great idea for a follow-up tutorial to this!
Can you show how I can combine lesson 6.6: Multiple js Files with this lesson 9.8: Instance Mode (aka "namespacing"). Also want to say a big Thank You for the spirit and depth of your tutorials :)
So glad I found this tutorial! Is it possible to combine global mode with instance mode? For instance, under the global setup environment, if I press a button, turn sketch1 on and if i press another button, turn sketch2 on? THANK YOU!
@@UrbanPretzle hi, yes I did, when creating an class object you have to give it the 's' prop parameter used in the instance mode as a property of the object. After that, any p5 method you want to use inside the class, like draw an ellipse or change the fill color, is a method of s, like s.ellipse(...) , s.fill(...), s.noStroke() etc.
Hello Mr.Shiffman! I'm struggling with one project using p5.js, trying to make a multi-layer drawing app. I need to clear the drawing board. And I can make it neither by redrawing background (because it will cover other layers) nor by clear() function for createGraphic (because it's not implemented in p5.js and only works in Processing or just working other way and can't be used for my purpose). Recreating createGraphic leaves old drawings on the screen. Any suggestions?
You might be able to store every pixel that is colored in in an array, and draw using that array. var layer1 = [[200, 20], [201, 21], [202, 21]]; var layer2 = [200, 30], [199, 31], [198, 33]]; for(var i = 0; i < layer1.length; i++) { ellipse(layer1[i][1], layer1[i][2], size, size); } And then something that pop()s the array until it is empty when you delete a layer
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.
I find it incredible that this "p." must really be added in front of EVERYTHING... It turns the code into something much too heavy, horrible for testing or debugging. Wouldn't it be possible to introduce something such as "pushMatrix()"? That is: "This is a piece of code in which each command should be understood as p.command" And does it really make sense to put a "p." in front of a UNIVERSAL CONSTANT like PI!? I guess I will end up using s instead...(Sorry, I should have started by saying: excellent video, thank you Daniel!)
hey Daniel im a big fan and I have been watching your videos for a long time... I have a question that I don't know how to solve. When creating a class I cannot make it so the class gets all the functions of p5.js library. Can anyone help me? it says fill is not defined var game = function(g) { g.setup = function() { g.createCanvas(400,400); g.background(0); g.snake = new Snake(); g.snake.test(); } } class Snake { test() { fill(255); //this line throws error (Uncaught ReferenceError: fill is not defined) ellipse(0,0,100); } } var mySnake = new p5(game);
I realise this was a year ago, but in case it helps anyone else... It's because you are calling fill and ellipse outside of the p5js namespace. You need to use mySnake.fill() and mySnake.ellipse
@@TheCodingTrain after 4 hours of debugging and reading Docs .i just realized that i could just use , thanks God that i decided to read the comments lol.
Best namespace example video on YT, hands down. Also a pretty decent, slimmed down introduction to Object Oriented Programming in JS. My hat is off to you, sir
Oh, that is amazing. Just spent last hour trying to figure out how to use this through reading the documentation and accidentally saw that you made a video on it. So much more clear. Thank you once again!
You're awesome. p5.js is awesome.
thank you!
Who knows why, I decided to create a page. Deciding to deal with the idea of a second canvas that I wanted to add, later. I just been like 20 minuts adding "canvas1." everywhere xDD
I think I have a special god for me, because it worked perfectly at the first try. I was So happy whe I saw it working. Thanks !
Hey Daniel, im a yound programmer and i loved your book "The Nature of Code" keep up the good work!
+SpikyCat thank you so much for the nice feedback!!
The best description and example of instance mode anywhere!
Thanks for letting us know some "secrets" behind p5js.
I have read instance mode on the p5 website but still lost of what it means, this video really helps me a lot.
That was great, I’m actually in a jam on my code and this helped lots
hey!, ideas about how to share global variables on instance mode sketches, i mean, sharing variables between instance mode sketches?
So how do you write in a class with constructors and functions for that class inside of instance mode?
did you find an answer yet? I am looking for a solution too
Nope not yet, looked everywhere....still nothing.
I'm looking for a solution too. Found nothing yet
I found this solution pastebin.com/EyNbemRi kindof hacky but it works
Just in case you're still wondering.
var sketch = function(p) {
var myObj;
p.setup = function() {
myObj = new MyObj(p); //
Was looking for something exactly like this! I'm using p5 to render a 3D image, and allowing the user to edit the color & spin the image 360. I needed a way to reset the Z-spin back to normal before converting the canvas to jpg. It kept saving the image at weird angles... I was able to do it w/ pure js, but being able to create my own method on a p5 obj keeps inline with everything! Thanks man!
Can you just pass an empty function into p5()? So that way everything is outside the sketch function
What if my draw function calls another function that I defined. Do I slap "p." in front of that as well?
so what i was trying is reading one canvas onto another.. but it seems sketch functions setup is called asynchronously. so how to get instance of first canvas in second canvas ? basically some hook for canvas loaded ?
Our coding idol!
hello, did anyone here try to use p5sound with instance mode? i've been trying to create an oscillator in an instance canvas and really can't find a way to create one... I keep getting the "p5.Oscillator() is not a constructor"...
Thanks~~~ I wonder how to embed this into Java JS file for making a two canvas webpage ?
It seems this could be very useful when working with genetic algorithms, when I want to visualize many at once and it doesn't make sense to show all examples on the same sketch.
Great Video! Is there any way to add a canvas below the first one? Would be awesome to play around with a grid of canvas'.
i want to delete the existing instance of p5 and create another one.
how do i do that?
thank you again!! ♥ i love your videos
Thanks Daniel, great set of tutorials.
This might be a noob question but when in instance mode, is there a way to pass variables through rather than needing to "copy, paste and edit" the way you did with the colors at the end of the video? If so, can you pass in p5 objects like Tables? I am trying to do show a number of sketches on one page (each with their own div tag so they can be found) but the data may vary and I want them to look the same so while all the same functions will be used only the underlying data will vary.
Yes, you could create multiple p5 instances with the same codebase but pass in different data as input. This would be a great idea for a follow-up tutorial to this!
Any idea how to call the instance of your sketch function in HTML? Because mtp5 is a variable not a function so I'm not sure how
I love you. Im making a game with different screens with html buttons and toggling between them is very difficult
Can you show how I can combine lesson 6.6: Multiple js Files with this lesson 9.8: Instance Mode (aka "namespacing").
Also want to say a big Thank You for the spirit and depth of your tutorials :)
I like this idea, could you ask here? github.com/CodingTrain/Rainbow-Topics/issues
@@TheCodingTrain Was this ever done? Would love to see it!
@@BlackSlimShady There was a post on Github about it, but not much else.
github.com/CodingTrain/Rainbow-Topics/issues/541
So glad I found this tutorial!
Is it possible to combine global mode with instance mode?
For instance, under the global setup environment, if I press a button, turn sketch1 on and if i press another button, turn sketch2 on? THANK YOU!
specifically, I want to load sound with p5.sound in global mode and use the same soundfile while changing to different sketches...
What about using external classes? What about if those classes use p5 objects and methods, like for example createVector(x,y) or max(v1,v2)?
I'm wondering the exact same - did you find a solution to this?
@@UrbanPretzle hi, yes I did, when creating an class object you have to give it the 's' prop parameter used in the instance mode as a property of the object. After that, any p5 method you want to use inside the class, like draw an ellipse or change the fill color, is a method of s, like s.ellipse(...) , s.fill(...), s.noStroke() etc.
@@metacarpo10 Thank you! I have already done this, thanks for checking :D
Love you Daniel.
For the camera going off problem; have you tried magic lantern software? (if you are using canon dslr) It might help you.
Yes, I just haven't had the chance to try it but I should!
I wish you have all the time to do more and more of these amazing stuff.
Hello Mr.Shiffman! I'm struggling with one project using p5.js, trying to make a multi-layer drawing app. I need to clear the drawing board. And I can make it neither by redrawing background (because it will cover other layers) nor by clear() function for createGraphic (because it's not implemented in p5.js and only works in Processing or just working other way and can't be used for my purpose). Recreating createGraphic leaves old drawings on the screen. Any suggestions?
You might be able to store every pixel that is colored in in an array, and draw using that array.
var layer1 = [[200, 20], [201, 21], [202, 21]];
var layer2 = [200, 30], [199, 31], [198, 33]];
for(var i = 0; i < layer1.length; i++) {
ellipse(layer1[i][1], layer1[i][2], size, size);
}
And then something that pop()s the array until it is empty when you delete a layer
can I use this to overlay a confetti code to drop over another draw function?
I have a sketch that builds and ice cream cone and I want to connect that sketch to another sketch that drops confetti
So. . . how you add an object in instance mode?
How to use parameters to an object in instance mode or things like that.
Do something with offscreen canvases and compositing and alpha channels on images.
+Thin Soldier ok, will add to my list!
Hey Daniel : can we convert [ ] to mode instance. your tutorials help me so much : Guillaume
how do you access the elements in the script from the console when you are debugging?
This workflow video series might help! ruclips.net/p/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X
How can you display multiple sketches on a single page that are not necessarily the same sketch? Thanks :)
You just need to create two "seed" sketch objects/functions. Using s might be easier than instance mode.
Can one canvas overlap another?
Can you create a myp5 element inside a class in a different .js file?
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.
Is there any tool which lets us convert a p5 sketch code to instance mode code automatically?
Oh, this is a nice idea! I don't believe I've seen anyone make something like this.
I found something github.com/DrSensor/p5-global2instance
can i have mulitple canvas kind of thingy in processing Java mode ?
Take a look at createGraphics(). . but not easy to open multiple windows at once (but possible!)
thanks for the reply
Great Daniel! thank you so much o/
Your y variable isn't declared yet you're using it to draw the circles ???? How?
I know you changed it in the middle of the video but why does it work before you change it
Also could you use this. Instead of using p.?
5:21 Nothing to add ^^
+Furrane hah!
I like the word window. My variable would never be anything but WINDOW
I find it incredible that this "p." must really be added in front of EVERYTHING... It turns the code into something much too heavy, horrible for testing or debugging. Wouldn't it be possible to introduce something such as "pushMatrix()"? That is: "This is a piece of code in which each command should be understood as p.command"
And does it really make sense to put a "p." in front of a UNIVERSAL CONSTANT like PI!? I guess I will end up using s instead...(Sorry, I should have started by saying: excellent video, thank you Daniel!)
That defeats the purpose of instanced mode though, if you want to treat the private members as global just use global mode
hey Daniel im a big fan and I have been watching your videos for a long time... I have a question that I don't know how to solve.
When creating a class I cannot make it so the class gets all the functions of p5.js library.
Can anyone help me?
it says fill is not defined
var game = function(g) {
g.setup = function() {
g.createCanvas(400,400);
g.background(0);
g.snake = new Snake();
g.snake.test();
}
}
class Snake {
test() {
fill(255); //this line throws error (Uncaught ReferenceError: fill is not defined)
ellipse(0,0,100);
}
}
var mySnake = new p5(game);
I realise this was a year ago, but in case it helps anyone else... It's because you are calling fill and ellipse outside of the p5js namespace. You need to use mySnake.fill() and mySnake.ellipse
Whhhhyyyyyy shiffman , why can´t you add two canvas if not with the instance mode???? Why do I need to use this hard mode ? ?
i might also suggest just using s as that then won't require instance mode.
Wooa, that´s a cool idea
@@TheCodingTrain after 4 hours of debugging and reading Docs .i just realized that i could just use , thanks God that i decided to read the comments lol.
I'm struggling with instance mode also, any simple examples of how to use more than one ?
@@TheCodingTrain I'm doing this right now. My problem here: The d sketch does not work behind HTML text. why?
Why is it called p5.js? :O
(edit) Oh, I finished watching the video. Now I understand.
you're so funny, bro
I know this from another source, but you are really confusing, you babble a lot. I know I am being mean, but it's true.