Coding Challenge #6: Mitosis Simulation with p5.js

Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=jxGS3fKPKJA



Duration: 25:51
216,538 views
2,878


In this viewer submitted coding challenge, I program a cellular mitosis simulation in p5.js. Code: https://thecodingtrain.com/challenges/6-mitosis-simulation

πŸ•ΉοΈ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/K_ABj0cCt

πŸŽ₯ Previous video: https://youtu.be/biN3v3ef-Y0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Next video: https://youtu.be/l8SiJ-RmeHU?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Live Stream Archive:
πŸ”΄ Coding Train Live 33: https://youtu.be/WpUnYfVmKdA?t=4390s

Related Coding Challenges:
πŸš‚ #36 Blobby!: https://youtu.be/rX5p-QRP6R4

Timestamps:
00:00 Welcome to the challenge!
00:56 Create a Cell constructor
03:01 Create a cell
04:05 Move the cell randomly
05:25 Change the appearance of the cell
06:06 Create an array of cells
08:15 Handling mouse press
11:27 Splitting the cell into two
13:49 Allowing optional constructor arguments
16:07 Split the cells and add them to the array
17:01 Error! Copying object references
19:48 Add transparency to cells
20:15 Error! Looping backwards
21:37 Delete the original cell during mitosis
22:22 Add random offset to position

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

πŸš‚ Website: http://thecodingtrain.com/
πŸ‘Ύ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://thecodingtrain.com/discord
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— p5.js: https://p5js.org
πŸ”— p5.js Web Editor: https://editor.p5js.org/
πŸ”— Processing: https://processing.org

πŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#mitosis #simulation #p5js







Tags:
p5
challenge
p5.js
coding
js
javascript (programming language)
javascript
mitosis
simulation
tutorial
p5js
html (programming language)
document object model (api)
dom
programming
creative coding
processing (programming language)
coding challenge
oop
object oriented
object oriented programming
html
html5
canvas
p5 js
html5 canvas