Coding Challenge #6: Mitosis Simulation with p5.js

Coding Challenge #6: Mitosis Simulation with p5.js



In this viewer submitted Coding Challenge, I program a cellular mitosis simulation in p5.js.

Send me your Coding Challenge ideas!

Contact:

Source Code For This Challenge:
p5.js:
Processing:

p5.js:

For More Coding Challenges:

Help us caption & translate this video!

welcome to another quick coating rainbow coding challenge I'm gonna see how long it takes to program a mitosis simulation now I should really admit that this is not really going to be precisely a simulation of mitosis which is a complex interesting biological process I'm actually just going to make be sort of inspired by this idea and make a very very simple example of a bunch of bubble shapes floating on the screen and as you click on them they split into two so those bubble shapes those circles will represent cells you click on them those cells will split into two and then you click on those and those will split and from there hopefully maybe some of you watching this video will take my example and be inspired to read about mitosis and other biological processes and make more complex sophisticated and interesting interactive examples but I already talked for 48 seconds let's go I want to see if I can wrap this up in about ten minutes let's see how that goes I'm sure by the end we'll find out it was much longer okay so I've got an empty JavaScript file here and as always not as always but as in a lot of these I'm using something called p5.js which has a set up and a draw and the main thing that I want to do is I need a cell object I need an object on the screen to represent this idea of a cell and so a way that I'm going to do that is with a constructor function as you've seen out if you watch any of these other coding challenges and I'm going to say a little bit different I'm going to use a vector object to store the cell objects position so create vector is a function that creates a vector a vector being a pairing of components an x and a y there's a lot more to vectors I would encourage you to check out my nature of code videos of tutorials ah no no no no promotional stuff in these coding challenges but if you want more you can you can take a look at those and then I'm also going to give this is going to be very important for it to have a radius because I'm going to use the radius when the cell splits and it has a radius of 20 the to kill Drance cells so to speak will have radii of ten so I'm going to give it start it with a radius of 20 and I'm going to give it I'm going to I want them to move around the screen whoops so I'm going to say this dot move equals function and I'm going to say this show equals function and let's first just show it ellipse at this pause X this cause dot Y so pause is the vector pause has built into it an x and a y so and I want to draw the circle I want to draw it at this dot Paz X and this dot Paz dot y this dot R this dot R now I already I'm starting to feel like this is enough code for me to just go and put it in a new separate file so I'm going to make a file called cell J s and I'm going to paste it in there and as always if I make a another JavaScript file that I'm going to use I need to go to my HTML file and add that in so I hope if you're trying to program along with me you're pausing to do some of the stuff as I'm doing it kind of quickly so now we should be able to see at the very least that I can make a single cell and I'm gonna make a canvas that's 400 400 pixels wide I'm going to give it a sort of dark grayish background and I'm going to say cell equals new cell and cell cell move cell dot show so if i refresh this we should see where's that cell it's up there in the top left corner so this is no good clearly what I want is for my cell to start somewhere not the top left corner what might be useful right now would be to have it start at a random location so when I said create vector with no arguments it automatically made a vector with an X of 0 and a Y of 0 now I want a vector with a random width and a random height giving it a random position in the window so you can see each time i refresh this sketch it starts in a new place and I am calling a function called move but it's not moving anywhere why is it not moving anywhere because if I look at my code I didn't write anything in the move function so one thing I could do oh this is exciting I could make a variable I'm going to call it like a change for it's good now I'll call it velocity it's kind of like its velocity V L and I'm going to say p5 vector dot random Oh camera random 2d sorry about that everybody I forgot a crucial thing which is to read it this button so here I am a back and I'm there is a function in p5 called random 2d which I call statically on this sort of idea of a p5 vector which gives me a random vector so if I say that and then if I say this dot pause dot add that what this is doing is it's actually saying take that random velocity add it to position I couldn't do this all with just this dot X and this dot Y which I've done in other videos but kind of giving you a little taste of vectors in p5 here in this one so now if i refresh this you should see there we go I want to get it somewhere more in the middle you can see it kind of like jig or grunt really wants to pick random locations on the bottom you can see here's its random nervous movement now if you are following along I encourage you to think about other ways to have this move around the screen based on all sorts of possibilities steering behaviour would be a great thing to look into that's also I'm building this with vectors because I have a lot of other examples along these lines that you could take a look at ok so but one thing I want to do is I want it to be bigger and also I think I want to give it a color so I'm going to give it a color which is going to be I'm going to call that variable C and I'm going to make mp5 I'm going to make give it a random red amount and random blue amount and I'm going to have those ranges be kind of at least starting at 100 and then I'm going to say fill dot fill see this dot C and I'm going to say what am I going to say next and having to say no stroke so now here we go we can see each time I get a random circle with a slightly different color somewhere in the window moving randomly so this is good now what I want is to be able to click on it and when I click on it have it split into two so I need a new data structure here I need a data structure that keeps track of a list of these cell objects clearly just one is not good enough so what I'm going to need is an array so let's go over here to sketch and let's change this to cells and make that an array and then I'm going to say cells push cell right so in setup I'm still going to make one new cell object oh and this is the array so this is cells hello confusing to look at everything is the word cell but let's let's unpack this for a second capital cell the name of the constructor function that makes cell objects lowercase cell an individual variable holding one cell object lowercase cell plural the array holding a list of cell objects so I make one cell object stored in this variable and immediately put it in the array you know what it's a little bit silly that I did that because this could be written much more compactly like this like I just want to make a new cell object and put it in the array why not write it that way okay so let's now run this we could see up what's going on I don't see anything let's look I got some errors cell is not defined why is it not defined look down here I need to deal with the fact that I have an array so there is no such thing as an individual cell there is only the array so what do I do for VAR I equals 0 I is less than cells dot length I plus plus by the way you are doomed if you are watching these there's you are doomed to type for VAR i equals 0 I is less than blank length I plus plus for the rest of your life just letting you know that it's a nice thing to type I enjoy it ok so now I want to move no matter how many cells there are I want to move and show the cells ok so now there we go we've got our one cell when I click on it I want it to split we are tracking along now 8 minutes we're going to have this mitosis simulation wrapped up in just a few minutes what do we what are we missing here we need a mechanism to know if the user has clicked the mouse and then we need it back because to know if the users click the mouse on a particular cell object so knowing if the users click the mouse is easy because I could just say function mousepressed which is a global event in p5 which just detects the mouse has been pressed and then what I need to do here what do I need to do I also need to loop through all these cell objects oops I'm very I'm very obsessed with indentation apologies so I need to say if cells index I what clicked Mouse X Mouse Y right juice okay okay what's going on here so I just realized there's a really common thing that that you might think to do right Mouse pressed is a global function to detect if the user clicks the mouse now with Dom elements like a button or a piece of text or the full cameras anything on a webpage you can attach an event to a particular object to know if you click only on that object but this is stuff that we're drawing in a canvas so these are just pixels it's up to us to create that mechanism ourselves and the way that we're going to create that mechanism is by sticking with the the mouse is clicked anywhere but then checking everything and seeing if the mouse is clicked on one of those things so I'm going to write a new function called click inside of the cell object and what am I going to do in that function I'm going to say this dot clicked equals function and I need to check it against a particular I pass again mouse X and mouse Y so I need an X and a y as arguments to this particular function and what I want to do is I want to know the distance between this cells position its x and y and the x and y that I'm checking and then if that distance is less than what the radius then I've clicked on it return true or return false so because I'm going to handle this stuff with the clicking is elsewhere I want this function to do the figuring out but just send back the value true or false so now if I go back here I can at least say check to see if this is working by putting a consult logged okay here we go dramatic drum roll please look I'm clicking over here and I don't see anything I'm looking over here and I don't see anything and look at that I'm clicking on it and I look let me go right to the edge nothing let me click on it so we've now at least determined we know how to figure out and like clicking on that or am i clicking on some task and just to be sure that this is really working let's also at the beginning add two cells to this alright and maybe I'm going to make the canvas a little bit bigger the 707 should be fine and we give myself more space here there we go ok so now I should be able to click here and I see click anywhere here nothing and if I click here also click too I'm clicking on any there we go so now what happens if I click on one of them I need to mitosis ID'd that cell to split into two copies of itself how can I do that mm-hmm this is exciting well there's so many ways we could do this I can't think of all of them at once let's do it in a sort of interesting way I think what if I inside the cell added a function called mitosis and that function actually makes two new cells and how does it make two new cells it makes two new cells how at its position where it is with the same color with half the radius so basically what I want to say is make a cell at this cells position with this cells radius divided by two and with it this cells color cell a and cell be I want to make two new cells like this and you know what forget about making two let's just make one because let's have a function that's called I'll call it mitosis but let's just make one because what can I do I could say return that cell right so this object knows how to make a new cell with its material and return it now there's all sorts of fancy ways to copy and clone objects but I think an easy way of doing it is just make a new object with this objects data this is a nice way of doing it but this won't actually work right look at the constructor function look at those parentheses there's nothing in them so I need to be able to have the constructor function receive arguments right it needs to receive a position a radius and a color so I'm going to change this to get a position a radius of color sorry and a position right so now this works if I make the cell with position I get it if I make it with a radius it fills it if I made it with a color it does it guess what I'm going to show you guys something wildly interesting off topic but super useful the problem is this is how I made the cell out here I made the cell with no arguments in here I made the cell with arguments how could I make a cell that if I make it with an argument I get I use that argument if I make it with no argument I get a default value I'm going to show this to you well can I can I actually do this there might be a slight problem with what I'm writing here but I'm going to show this to you uh I'm just trying to remember what I had something like this okay so I had I had to really think for a second so I don't know like this should be fine you could put function expressions anywhere yes so what's going on here I got two pipes I've got pause two pipes then create vector let's just see if this even work so it gives me an error amazingly it's working so what's happening here let's say you call new cell and you call it with this you call it with an actual value well that actual value exists and so it gets assigned to the objects variable one of the funny things about JavaScript is absolutely anything can get evaluated to true or false so if you have a variable that has a value it gets evaluated to true basically if you have a variable that you didn't actually ever assign anything its value is undefined and undefined gets evaluated to false so pause if it's not defined is false so if it's false I want or so I want to I want to assign this dot pause to this if it's true or if it's not true this other value so this is a way of having optional arguments to a constructor now it's you know it's sort of tricky they're not all optional because you have to have them still in the right order that I should make a whole video just about this topic but I often off the beaten path a little bit too much here that's a bit enough I think to show you so now we can see and what's happening here I'm still got my clicks going and now what can I do here instead of right if the cell is clicked this is what I want var cell a equals cells index mitosis remember that function makes a new cell and I'm just going to do this twice right what I'm doing now is saying if that cell is clicked on make two new cells from this that cells mitosis function and then what cells dot push push cell a cells push cell be and guess what we could be once again more concise by just doing this and incidentally you can see now that if I wanted to sell to split into five I could just have a little loop that runs that does this five times so let's see what happens here whoops do I have an error whoops we zoom out oh no they're just up top click whoa whoa whoa craziness it's just moving faster whoa and iced only see one what's going on haha I know what the problem is Oh lots of little tiny lessons inside of these larger ideas okay let's look at what the problem is look at this this dot pause equals pause or create vector so when pause is something it gets assigned to this dot pause when it's not something a new vector is made guess what guess what we've made a fatal error here here is a cell in the computer's memory here is the data for its position now we made a new cell two new cells and so this is cell cause now we have cell a dot pause and now we also have cell B dot pause they are all pointing to that same vector not the same exact vector the same data so if I move this one this one moves and they all have the same exact location they can't move independently from each other so I don't want to do that I need to take this and copy it so that cell be copied so this is called like you know variably this is cause a lot of things I have a video about this another one but this is the idea sort of passed by reference passed by copy and what I need to do here is I need to make sure I'm thoughtful here and I make a copy of it pasta oh this is going to be bad oh I've made this soaked extra complicated for no good reason this is going to give me an error cannot read property copy of undefined yeah right so it can't copy if it doesn't exist so I got to write a more complex algorithm here which is just if pause this dot pause equals pause copy I just have to break this out otherwise this dot pause equals a new vector so this is just a little bit of more of a long-winded right way of writing this for an optional argument if the piff you're getting a position argument then set this object's position to that arguments copy otherwise make a new random vector and this should be okay now so let's go back oh what happened to my browser they've lost the browser come back to me browser mitosis okay here we go click now let's click on it oh yes there there you just can't see them when I clicked a bunch of times I make so many little children okay hold on a second here so in order to figure out if this is really working it would be I need to do a couple things one is one way just to be able to sort of visually see what's going on is let me add a little bit of alpha so it's going to work I hope this works that doesn't hold on okay hold on I'll just put the alpha I'm sorry I'm gonna put the alpha here there you go so you can see oh why did it made so many oh you know why it made so many that was kind of glorious look how many we're making so why didn't make so many oh this is fascinating okay so because it made so many is look at this I'm looping through the array right I'm saying let's think about this over here right I've got this array with like two cells in it sell and sell I get to this one I click on it so I add two more and then I go check this one but now these other ones are being checked by Mouse doclet so I'm adding to the array while I'm trying to get to the end in my loop which is a bit of a problem so we can actually they solve this problem by going through the array backwards if I go through the array backwards I can also add to the beginning but that's going to make things really wonky if I'm going through the array backwards I can add things on to the end without messing up my sort of iterative thing that I'm doing so I'm going to say cells length minus 1 that's starting at the end I is greater than or equal to 0 and I – – okay so here we go these are dark let's let's look at this one zoom and we're gonna click on it and you can see now there's just two there and if I click on one of those that one it's split into two as well so and one thing is I'm by the way if they're overlapping and I click all of them are going to split but you know that's a problem you can worry about for another time but let's at least fix one more thing here which is that I also might as well say splice I so what does this do the moment that I click on a particular cell add two new cells to the array and delete that one so that the cell that was clicked on is cell I so I'm deleting that one and then I'm adding two new cells so the two new cells get added and the old one gets deleted we can go back I don't I don't know why maybe I should have a brighter background someone someone make me a nice visual design for this example with nice colors and interesting bacteria looking like things let's let's try this there we go that's a nicer so if I click on here you can see – and you know what I don't love about this they both start right where they both start right where that first one is I feel like I want to give them a little separation like a little bit of like almost as if a burst outward so at least what I'm going to do is say this dot new and by the way I'm going to say okay so I'm gonna make a new position equals create vector this dot pause I'm trying to think of it it's like look how it gets so long in a given line I don't know why I'm deciding I need to fix this for here but what I want to do is this deposit X plus random actually you know what I'm just going to I'm just going to set it to the right oh no no it has to be rain because one goes to the right so oh yeah minus a plus sorry so I'm going to sorry offset equals random negative ten ten and new pause equals this dot pause plus offset comma this dot pause you know what I can do I'm sorry this pause dot X plus equals this so I know it's like thinking about this through way too many times in my head of like a nice concise way of writing it this is pretty good I just want to like before I make that new cell I'm going to just like shove its position to the right or the left somewhat randomly so that the new cells aren't in exactly the same position and also are divided by two divide it in half while probably accurate in some way it just like gets so small so fast so I'm going to just like multiply it by like 0.8 to have it just be 80% the size now I guess 10 pixels is oh you know what I should just make it random based on R and that might do the trick to give it whoops that's too much right whoa way too much way too much there we go that's kind of what I want it's still too much a little bit and so I don't know what I'm doing here somebody will come up with a better really what I want and I'm gonna I'm gonna I'm gonna comment this out because this really sort of not a crucial detail do you know what I want I want a system where the the bacteria are moving not just randomly so that when you click on it there's a bit of a burst and that if the abscence were like physics to them their velocity would be pointed out in opposite direction so you might see more of a split there and that's it so this is the basic idea you can see as I click on these they separate let this run for a little while and the cells are splitting so I don't know this was 25 minutes oh my goodness 25 minutes mitosis example I got to just stop now hopefully you will take this idea and maybe actually build more features into it you know motion could be more interesting when they split could be something different what happens if they bump into each other maybe they come back together can you take two and make one that's bigger what other types of things could you pass what if they each like have a label and that label gets passed so many possibilities please make some variation on this read about actual mitosis that teach me something about it and share it in the comments or send a tweet of me and I'll look forward to seeing you next time

23 thoughts on “Coding Challenge #6: Mitosis Simulation with p5.js

  1. I was thinking that maybe you could just have a simulation where each cell grows, and when their radius is a certain size, they split in two. That’s more like real life, so it could be interesting.

  2. You could've done:

    cells.forEach(cell => {
    cell.move();
    cell.show();
    });

    Instead of:

    for (var i = 0; i < cells.length; i++) {
    cell.move();
    cell.show();
    }

    Just a little tip; looks nicer imo. Good video nonetheless!

  3. That's simply amazing, Is there any way to think like this on the fly, because it takes me more than a week to finish this amount of code. By the way your videos are great, also could you try to implement these challenges with any other language like python for example… 🙂

  4. #15:30 Important is to understand how boolean expression evaluation works. If there's A || B || C… and A evaluates to true, whole expression evaluates to true no matter what B or C evaluates to, so B and C are not run at all. This can have important side effects.

  5. I decided to become a programmer.. I started an online course last week… and Im starting to understand more and more by watching your videos… very helpful …thanks for uploading .

  6. Ooh Great you gave me an idea of creating new things! Thanks a lot awesome i've just downloaded p5.js and i started working with!

Leave a Reply