Guest Tutorial #4: Matrix Digital Rain in p5.js with Emily Xie

[ad_1]
In this guest tutorial, Emily Xie uses the p5.js library to recreate the digital rain effect from the movie The Matrix.

Emily Xie is a software developer and creative coder. She’s passionate about coding education, having taught through various conference workshops and via organizations like Girl Develop It ( and Pioneer Works ( Currently, Emily lives in New York and works at Squarespace.

Project:
Matrix repository:
The Matrix project, deployed:

Personal:
Website:
Twitter:
Github account:

p5.js:

For more Guest Tutorials and Interviews:
For more Coding Challenges:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

44 responses to “Guest Tutorial #4: Matrix Digital Rain in p5.js with Emily Xie”

  1. DukeAaron Avatar

    this is pure gold. My deepest thank you to you both

  2. Jozie88 Avatar

    I think you should buy Sublime text Emily 😀

  3. Bush Lee Avatar

    She is so formal. Dan is a lot more dinamic i guess ? He is better at keeping your attention.

  4. Aman Mahendroo Avatar

    11:35 says 'huge' types 60…

  5. Niklas Trieu Avatar

    I like the style from Dan a bit more, he's coding really free. I don't enjoy how Emily' follows a script so strictly. Thinking about a project before is definitely a good idea, but I think you should just write down the most important points as a guideline.

  6. Noah Gehlhausen Avatar

    I did research as I was making my own variation of this that led to youtube recommending this video to me.
    Here is my version if you feel like checking it out! https://scratch.mit.edu/projects/170332474/

  7. Holden Greene Avatar

    she enunciates very clearly.

  8. Slick Avatar

    why she looks in that book?

  9. anisometropie Benihime Avatar

    Daniel’s guests are always extremely good looking women, I like it.

  10. Kino -Imsure1200q Avatar

    43:12 ummmmm is that your outro now?

    uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

  11. Kino -Imsure1200q Avatar

    instead of window.innerWidth/Height, why not use windowWidth/Height its shorter.
    i also recommend doing it on draw function because it updates based on the window area

  12. Kino -Imsure1200q Avatar

    has hard t ime making id HD 🙁

  13. Matias Konkonen Avatar

    I like her, but this is scripted. You can see her flipping a page…

  14. Matias Konkonen Avatar

    You are the Bob Ross of programming! <3

  15. Jack Reinieren Avatar

    Love this vid, butwhen I am trying to code along, I got stuck at about 26:30.
    After I copied the contents of the "this.render function" from the Symbol class to the Stream class, changed all of the "this." with "symbol." and then try to load the html file, I got this error message in my console:
    "p5.js:15601 Uncaught TypeError: Cannot read property 'toString' of undefined at p5.Renderer2D.text". I can't see what I am doing wrong, I copied the original code from GitHub so I could see differences, but I just can't find them.
    Can somebody help me? Ofcourse I can send my code, if somebody would like to have a look at it.

    Thanks in advance.

  16. Tarek Al-droubi Avatar

    this.stream = charming

  17. Hendrik W Avatar

    15:35 You can make it even better:

    this.y = (this.y + this.speed) % height

  18. Andrew Bone Avatar

    this.symbols[0].first = true;

    much cleaner.

  19. Matthew Fang Avatar

    how come when you initialize a new symbol in the generate symbols class, you don't use symbols[i] = new Symbol ( x, y , speed) and instead can do symbol = new Symbol() ?

  20. alfredoandroid357 Avatar

    Guest speaker was really cool , well spoken and a good style to her.. Thanks coding train for keeping your videos fresh and interesting .. I think its a good idea ,to have guest speakers, it show us how everyone has a different style and approach to programming : )

  21. Rareshinnho Avatar

    Beautiful tutorial:D

  22. Tushar Sadhwani Avatar

    That unicode code should be floor(random(0,96)) , right?

    Because if there are 96 katakanas, they'll be from 0 to 95, which means if the random number gives 95.5 and above, round will round it to 96, which will be out of bounds, to say 😛

  23. Birliga Robert Avatar

    There is a book you often glimpse at? Why were you using it?

  24. MegaTonL Avatar

    aw thought this was a assembly language matrix >_>

  25. Jacob Schneider Avatar

    my first thought "meh, who wants to know that?" my current opinion "Wow, she's clever!";

  26. RocketRobotz Avatar

    Hey guys I made a similar one but it is in Processing. Check my video out maybe.

  27. asdas asda Avatar

    She's just reading from a book..

  28. Ashley Brown Avatar

    does anyone know the syntax for some of the larger unicode numbers… eg emoji is u1f600 u1f601 etc. whats the score with using these in the fromCharCode ?

  29. Chao Xiang Avatar

    I saw a lot of Japanese characters on the background, are they?

  30. Rob Lego Avatar

    Jif vs Gif pronunciation wars begin… I've always said Jif, and I don't care that the creator of the file type says Jiff… he's just wrong, lol

  31. lorenzM Avatar

    "kind of like a jif"

  32. CyLv Pons Avatar

    why is se qualitie so very sad ?

  33. Diego Porto Avatar

    I really like the way she talks. I could say she raise the tone for some "misplaced" syllables.

  34. Tallen Smith Avatar

    Ive been watching a lot of Dan's videos but I havent been able to follow along because I dont know how to use p5. Does anyone know if he has a tutorial somewhere that I just cant find?

  35. Tallen Smith Avatar

    Great video. My only problem with this code is that the movie doesnt rain, it like… i dont know. It's not
    A
    B –> A
    C B
    C

    It's
    A
    B –> B
    C C
    D

    But this is just a minor issue that I bet I can figure out on my own.

  36. Christian Avatar

    I like Emily's coding style 🙂

  37. BaconKwagga Avatar

    in the movie the numbers are the same size as the symbols and some are flipped from left to right. that's the thing i don't really like about this channel. it does everything well but it never finishes anything that it starts. maybe it's better not to have numbers in there at all? if we have to include them why not look for a font that sort of matches the symbols? right now the numbers are on the left side of the stream which ruins the whole thing. how do you flip the numbers and how do you center them?

  38. Filippo Scaramuzza Avatar

    Hi everyone I'm doing this project with processing.. any idea how to print katakana characters? (with the function char() It doesn't work..

  39. km222618 Avatar

    Great tutorial Emily, thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *