7.1: What is an array? - p5.js Tutorial

  • Published on Oct 2, 2015
  • This video covers the basics on using arrays in JavaScript. What do they look like, how do they work, when should you use them?
    Next video: thexvid.com/video/RXWO3mFuW-I/video.html
    Support this channel on Patreon: patreon.com/codingtrain
    Contact: shiffman
    Send me your questions and coding challenges!: github.com/CodingTrain/Rainbow-Topics
    Link to code on Github: github.com/CodingTrain/Rainbow-Code
    p5.js: p5js.org
    For More p5.js Videos: thexvid.com/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
    Help us caption & translate this video!
    📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct

Comments • 96

  • laundry basket
    laundry basket 15 days ago

    “And then I should see friendship, and then I should see E R R O R”

  • Yashwanth Dornala
    Yashwanth Dornala Month ago


  • EnTaroDHo
    EnTaroDHo 2 months ago

    @8:54 fellow brony

  • ADY Beats
    ADY Beats 3 months ago

    You are eminem of programming(G.O.A.T)

  • Ruiii
    Ruiii 3 months ago +1


  • Tamer Ali
    Tamer Ali 4 months ago


  • Jakub Wojciechowski
    Jakub Wojciechowski 4 months ago

    Coding train, learning you have to deal with a lack of love since 2015

  • Cássio Schneider
    Cássio Schneider 6 months ago

    index = index + 1;
    index += 1;

  • born_
    born_ 6 months ago

    11:52 who would've knew all it took to see love was looking beyond 4 - mysteries of the universe unlocked here alongside p5js

  • Red Pill
    Red Pill 6 months ago +2

    The possitive effect of your videos is incalculable. I am solidyfing my programming knowledge AND having fun at the same time. Thank you

  • Immortality
    Immortality 7 months ago +1

    What a great video.

  • xiao阿萌
    xiao阿萌 7 months ago

    You are the first youtuber that i'd love to watch ads for.

  • Jay
    Jay 7 months ago

    great explanation!

  • shivang bhatnagar
    shivang bhatnagar 8 months ago

    editor.p5js.org/Shivangbhatnagar237/full/Q9KYJRWTh please give a visit! :D

  • Mikey
    Mikey 8 months ago

    The best thing I will ever create...

  • hanzmanz95
    hanzmanz95 9 months ago

    How can you put random colors in an array and then create something with a fill that randomly chooses one of those colors?

  • Astrum Star
    Astrum Star 9 months ago

    you are good))))
    fun to watch!

  • JJRubes
    JJRubes 9 months ago

    Whoa be careful your not demonitized for using the 'f' word, some people just can't handle having friends.

  • Ziko Isaac
    Ziko Isaac 10 months ago

    SO good explanation! thanks

  • Sam Henden
    Sam Henden 11 months ago +1

    You look younger in 6.4 from 2018 🤨 well done for keeping continuity in the playlist and updating it over time it's really helpful as a total beginner

  • Mustafa Al Awad
    Mustafa Al Awad 11 months ago

    Hi, Thanks alot for the great info. I have a question, how can I print all of that in my browser!! you just use the method and I didn't know how you print it out !?

  • Naman Parth
    Naman Parth Year ago

    Baddest video of the world fu_k o_

  • Sauhard Bhandari
    Sauhard Bhandari Year ago +2

    0:57 my reaction was like wooooooowwwwwwww !!!!!!!!!!!!!!
    eager to learn more now .....

  • Sarah Joy Brittain

    I love ittt thank you!

  • Dustin Marino
    Dustin Marino Year ago

    figured out a code to make random words and colors here it its:

    var words = ["rainbow", "heart", "purple", "friendship", "love"]
    var colors = [0, 50, 100, 150, 200, 250]
    index = 0
    function setup() {
    createCanvas(400, 400);
    function draw() {
    fill(random(colors), random(colors), random(colors));
    text(random(words), 12, 200)

  • Fiddle WidmaToe
    Fiddle WidmaToe Year ago

    Cant find latest javascript tutorial .

  • Β_origin
    Β_origin Year ago

    how these functions is being executed ,without calling them ?

  • Raman R
    Raman R Year ago

    I love to listen your teaching

  • United Nations Human Rights Council

    Heyho Daniel!
    I just tried to code a generator which picks words randomly from an array.
    My problem is that the words are just randomly changing, mainly because of the draw() function.
    If i say text(random(words), x, y); under the mousePressed function, the words are changing too fast ( I don't want to solve the problem by changing the frameRate).
    noLoop() at the end of the draw function is not working too. And now I am overasked :/
    I just let my version with loop(); stand here for now ^^
    var words = ["Flower Power", "Satan", "Handsome", "Richard", "Donkey"];
    var button = false;
    function setup() {
    createCanvas(900, 400);
    function draw() {
    if(button) {
    fill(200, 0, 255);
    text(random(words), 140, 200);
    if(button) {
    } else {
    function mousePressed() {
    button = !button;

  • Fredo FPV
    Fredo FPV Year ago

    There's a shorthand to cycle an array, using the *modulo operator* which gives back the rest of a division:
    Why does this even works?
    Division breaks in even pieces, but focus on rest now:
    If you divide by the whole you get no rest (4 divided by 4 is 1 piece, with rest of 0)
    If you divide a bigger quantity you may get a rest (5 divided by 4 is 1 piece, with rest of 1)
    If you divide a bigger quantity you may also get no rest (8 divided by 4 is 2 pieces, with rest of 0)
    For the above reasons the rest will always be a number between 0 and the divisor (4 in this case),

  • lieblingskartoffel
    lieblingskartoffel Year ago +1

    excellent teacher

  • Fern Car
    Fern Car Year ago

    Hey bro, great video, just a question, if you ever know how to do this, could you kindly advice me on how to make a queue doing these tasks (automating these tasks):
    1. Download file from FTP
    2.Convert the file (to a more readable file)
    3.Upload the file
    I'm a noob so kindly excuse my ignorance. Any advice would be highly appreciated.
    Cheers brother.

  • Champagne Panda OG

    this helped me name my dog because i had to chose a valid random letter depending on the previos letter and you helped me learn how to make an array because i forgot and how to find the array length. Great video

  • Maddy
    Maddy Year ago

    This is the ONLY problem I've had with coding. Thanks so much for making this so simple to understand. Mostly the syntax

  • Mridula Ekka
    Mridula Ekka Year ago

    What an awesome energy you have

  • krane rcc
    krane rcc Year ago

    "whiteboard talks to me"

  • Protegit
    Protegit Year ago +2

    Can I put images into an array?

  • Sadaiha Johnson
    Sadaiha Johnson Year ago +4

    This is a great videos

  • Tushar Goyal
    Tushar Goyal 2 years ago

    hey words.leng/words.length doesn't seem to be working. has keyword been updated to something else? like println() is now just 'print()'

  • Jessica Becker
    Jessica Becker 2 years ago +7

    You have taught me so much about coding. We use your videos in school and outside of school.

  • Ritik Khatri
    Ritik Khatri 2 years ago +1

    I am studying C++ in school, the syntax for defining functions, array are totally different in javascirpt. I hope I don't get confused b/w Js and C++.

  • Akhilesh Naduvath
    Akhilesh Naduvath 2 years ago

    Man u r the teacher i have ever had.I understand this so quickly and i'm 15.keep up the good work.It's really helping me and i'm pretty sure it does to all. :)

  • Oki Virgiawan
    Oki Virgiawan 2 years ago +1

    Do you make android studio tutorial too ?

  • Baraa Safaa
    Baraa Safaa 2 years ago

    @Daniel, you are indeed a great teacher and very passionate. I am reaching a challenging thing here with this code below:
    The issue is that:
    1) I am adding the commands to print the ellipse on the screen. For some reason, once the text was rendered on screen, the ellipse disappeared and also the text is being rendered in a very weird way.
    2) I am trying to display a text on screen stating that the "list has ended" before I set the index=0. Can you please help me here?

    var index=0;
    var nums = [100,12,55,-6,77];
    var words = ['love', 'baraa', 'linah', 'cat', "5",6,78]
    var num = 25;
    function setup() {

    function draw() {


    function mousePressed(){

    text('this is the end of array!',50,100);


    • Rūdis Rozītis
      Rūdis Rozītis 2 years ago

      maybe you solved this problem, but if not:
      1)your frame rate is 60fps, and thats why you don't see your text appear. It happens so fast(changes index and all that stuff). lower your frame rate( frameRate(2) ) and you will see your text.
      2)idk about that ellipse, but fix your semicolon
      3)you have noFill(); and after that you want to fill text in some colour, it won't work like that.
      Hope you still needed that, after 4 months :D

  • VeganCartel
    VeganCartel 2 years ago +91

    You're like the Bob Ross of programming

  • kartikey srivastava
    kartikey srivastava 2 years ago

    Hey, how did you create the blue magical mass in real time?
    Thank you for sharing this stuff, means a lot to us.
    Exceptional as always :)

  • Steven
    Steven 2 years ago

    I like your videoe except that you deal with very complex stuff like creating dots or color graphics.

  • Marthy Manuel
    Marthy Manuel 2 years ago

    I have watched your video since I have watch your flappy bird challenge. I like the way you so informative and enjoyable. Keep it up. Hoping to see more videos.
    What is the software you use for p5? where can I get it? Thank you!

    • Marthy Manuel
      Marthy Manuel 2 years ago

      thank you so much!

    • Jimmy Chan
      Jimmy Chan 2 years ago +1

      Sublime and atom got the best syntax themes, if you are a guy with fancy coding texteditor, try those two, brackets and codepen is quite new compared to the first two.

    • Marthy Manuel
      Marthy Manuel 2 years ago

      Thank you! Personally, what is your favorite? I'm already at section 7 of your videos. Loving every single topic watching it up to the end until you press the stop button. :)

    • The Coding Train
      The Coding Train  2 years ago +1

      The desktop editor that I am using in these videos is deprecated, try some of these videos for other ways to develop with p5:
      sublime text: thexvid.com/video/UCHzlUiDD10/video.html
      atom editor: thexvid.com/video/d3OcFexe9Ik/video.html
      brackets: thexvid.com/video/nmZbhManVcY/video.html
      codepen: thexvid.com/video/5gfUgNpS6kY/video.html

  • Fabricio Cáceres Lecaros

    What is your code editor?

  • ssrh suresh
    ssrh suresh 2 years ago +1

    I like your explanation

  • Bradley Stone
    Bradley Stone 2 years ago +4

    When you counted to 9 on your fingers...

  • Topsoil Depletion Awareness (closing the loop)

    How do you do Math.floor in p5 so I can do something like Math.floor(random(0,4))?

    • Danbo
      Danbo 2 years ago

      p5 is just javascript with build in functions. You can use normal Javascript functions like random(), Math(), etc.

  • Dũng Tấn
    Dũng Tấn 2 years ago

    Which editor do you use?

  • Stephen Lai
    Stephen Lai 2 years ago

    I like this tutorial

  • Jamie Bergmann
    Jamie Bergmann 2 years ago +6

    I am struggling so hard with my intro to comsci course and these are so helpful. also you are hilarious without meaning to be, makes the videos a lot more enjoyable to watch aha

  • Xavier Gregorio
    Xavier Gregorio 2 years ago

    words.length doesn't work!?

    • TheHatt
      TheHatt Year ago

      Check the number of curly brackets, happened to me several times in Atom - there were orphans.

    • Tushar Goyal
      Tushar Goyal 2 years ago

      yeah doesn't work for me either. tired putting a number instead and the code worked fine so the code is fine except the "words.leng"

  • Billy Rogers
    Billy Rogers 2 years ago

    big ups

  • Benjamin Whateley
    Benjamin Whateley 2 years ago +21

    "I don't ever see love because I stop myself at 4"

  • Ritesh Srivastav
    Ritesh Srivastav 2 years ago +26

    You start from the basics and make it hell of a lot more interesting on the way to the End!!

  • MajestatiXx
    MajestatiXx 2 years ago

    U are doing such a grat job :) I am really enjoying ur videos and programming with JavaScript. Im not good at it, but i see some progress :D