Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating arrays

From: Interactive Data Visualization with Processing

Video: Creating arrays

Up to this point, we've been working with what are called primitive variables like ints, floats and Booleans that only hold a single value at a time. You can make an array with any datatype. You can make it with primitives, you can make an array of int variables of Booleans of colors. You can even make arrays with more complex things like images or objects or strings that we haven't dealt with very much yet. However, every piece of data in the array must be of the same type. If you need data of different types, an object, which we'll talk about later, would probably be a better idea.

Creating arrays

Up to this point, we've been working with what are called primitive variables like ints, floats and Booleans that only hold a single value at a time. You can make an array with any datatype. You can make it with primitives, you can make an array of int variables of Booleans of colors. You can even make arrays with more complex things like images or objects or strings that we haven't dealt with very much yet. However, every piece of data in the array must be of the same type. If you need data of different types, an object, which we'll talk about later, would probably be a better idea.

In this particular one, I want to show you how to create arrays and then work with some other values. I'm going to start by putting a little comment here at the top, put the name of the sketch and then, I'm going to show you how to create an array. The first thing you need to do, I will call this one, Manually create an array. What I'm going to do here is, first like a variable, you have to declare the variable type that's in the array. I'll make an array of int variables and then, you immediately follow it with square brackets to indicate, that it's an array.

You have the opening square bracket and the closing square bracket. Those are right above the Enter key. One way to think about these is that, this is like a little box that holds all the numbers. So you create that box with the square brackets, let me backup, and then you give a name to the array. I'm simply going to call this one "a" and then say, a = and then, what I'm going to do here, is if you're going to insert the variables manually in an array, you can do this little shortcut thing, where you simply put a curly bracket that's right above the square brackets and I'm going to put five values in there.

Close the curly bracket and then end with a semicolon. And then, what you can see is I'm going to do a little print line, the five values in a, from 0-4 are, now I'm going to do the printline in two lines. So this one shows at the top, it's because arrays get printed in multiple lines and they don't really like having all the stuff in their print line command.

And so here, is what I get. I am going to save it and run it, close this and I'll open up the -- and there you see, the five values in "a". The interesting thing about arrays is that they start counting at zero. So the first item the 100 is item 0 in the array, the fifth one is actually labeled item number 4. These are the index numbers and while that's kind of a weird way of thinking, it actually makes a lot of the math with arrays much easier.

Another way to create an array is to create an empty array and then fill it in manually. So for instance fill in. What I'm going to do here is I'm going to create another integer array. So I do int, open and close square brackets, I'm going to call this one "b" and then, if you're not going to fill in the values immediately or if you are getting it from somewhere else, you have to type in new to say that it's a new array. Then you have to put that variable type again, and then you need to put how many values there's going to be.

In this case, I'll just have three values, a semicolon. And then I'm going to put a little print line to keep track of things here. I'm actually going to put a blank line to separate it from the previous one, and I'm going to put "b" has not yet been filled in, so it's default values. I forgot to put this in quotes back here, and then I'm going to ask it to print "b" and I'm actually going to comment these ones out up here, by highlighting them and doing Ctrl+/on the PC or Cmd+/ on the Mac.

So they're still there but they won't run. Now, I save it and run it, and you see that what it does by default is it fills in the array with zeroes. So it's not completely empty. It has values, it's just not the ones that I wanted to give it. If I want to assign the values, one way to do that is to simply indicate that I am going to do "b" and then in square brackets, I put the index number of the item. In this case, I'm going to say, that the first item which is b[0] as its index is now equal to 3, that b[1] is equal to 6, but b[2] the last item is equal to 9; and then I can do another print line, and say, now the values of b[] are, and then I'll do the print line for the entire array, I hit that again, and now you see that they filled in, oh, you know what I made a mistake, I used the wrong slash right here; got to flip that around to the other slash to make it an escape character.

Now when I run it there we go. Now you see that the values are 3, 6, 9. So that's one way to do it. Now, filling in an array like that would be such an extraordinarily arduous process, you would never want to do that unless you're just changing one value at a time. A much better way is to fill it in with a loop and we're going to talk more about loops later, but I just want to demonstrate a neat way of doing this. What I'm going to do is I'm going to create a window, 600x200, I'm going to give a white background to the window by just doing 255, so that's full white, turn on anti-aliasing, and then I am going to set the stroke because I'm going to draw a bunch of lines.

I'm going to make the strokes relatively dark gray, 100 on the 0 to 255 scale. But I'm also going to make them highly transparent, that's the alpha value there. If you have just two values, where you put color, it's a grayscale value and it's an alpha. So these ones are going to be relatively dark but highly transparent and now watch what happens right here. We're going to tell it that I want to draw, I'm going to draw a thousand lines and I'm using a variable int to simply indicate how many I want because that makes it easier to change.

And then I'm going to change create a few arrays of floating variables, that get x-coordinates for lines across the top and lines across the bottom and all I'm going to do is put xTop as a new array of float variables and it's going to have "n" in it. You can see by using the variable "n" up above I don't have to write a 1000 here and if I decide to change it from a 1000, it's really easy to modify it. And I'm going to do another array.

So I'm just going to copy that, paste it down and those are the top. I'm going to have another array for "x" values on the bottom. So now, I've got two arrays created. Now I'm going to make a loop to fill those in, this is one of the best things you can do. And I'm creating a local variable here called "i" that exists only within the loop and "i" is the most common variable for loops, I think of it as index. It's going to start at 0 and it's going to go until it reaches "n".

And you can actually see, if I say, less than "n" but that's okay because even though there's a thousand items because it starts at 0, the thousandth item will be 999, so this will work as a limit. And then I'm going to increment through one step at a time. By the way, you may notice, I tend to put my closing curly brackets and then go back just so I don't lose track of where I am. What I am going to have it do is execute these lines of code a thousand times. I am going to say, I want you to go to the array xTop and I want you to go to the index number "i".

Now, you saw, early above, I put b[0], b[1], b[2]. This will simply go xTop 0 through xTop 999. And I'm going to tell it is equal to a random number somewhere between 50 and 550. Then I'm going to do the same thing for xBottom. So what this is going to do is it's going to create two arrays. We have an array of x-coordinates for the top and another array of x-coordinates for the bottom and they're all random values between 50 and 550.

By the way, the reason I choose those is because the window is 600 pixels wide, this just keeps a border of 50 pixels on each side of the window. Then what I'm going to do is I'm going to draw lines. Remember when you draw a line, you need the x and y for one end, and the x and y for the other end. What I have here, is I'm going to do an xTop(i) and I'll put 25, so it's going to start just 25 pixels down from the top, then I'll go to xBottom(i) and that one will go to 175 which is 25 pixels from the bottom, and when I run that, we get something very interesting.

And what that is, is a thousand lines drawn with random x-coordinates but all on the same y-coordinates, and you can see that this would be a lot easier than trying to type in a thousand y and x coordinates manually. Instead, I use this little loop to fill in an entire array, and you can see the efficiency we have with that particular approach and that's something that's going to come very handy in subsequent movies, where we start dealing with data sets and we want to be able to fill in a lot of values with a little bit of code, as little as possible.

Show transcript

This video is part of

Image for Interactive Data Visualization with Processing
Interactive Data Visualization with Processing

72 video lessons · 13210 viewers

Barton Poulson
Author

 
Expand all | Collapse all
  1. 3m 16s
    1. Welcome
      58s
    2. What you should know
      1m 22s
    3. Using the exercise files
      56s
  2. 11m 51s
    1. Overview of data visualization
      11m 51s
  3. 11m 53s
    1. Installing Processing
      3m 38s
    2. Overview of Processing
      4m 5s
    3. Exploring libraries
      4m 10s
  4. 1h 1m
    1. Basic setup
      7m 31s
    2. Drawing points
      4m 37s
    3. Drawing lines
      5m 6s
    4. Drawing ellipses and circles
      5m 24s
    5. Drawing arcs
      6m 54s
    6. Drawing rectangles and squares
      4m 58s
    7. Drawing quadrangles
      3m 25s
    8. Drawing triangles
      2m 55s
    9. Drawing polygons
      3m 37s
    10. Drawing simple curves
      4m 54s
    11. Drawing complex curves
      6m 46s
    12. Drawing Bézier curves
      5m 38s
  5. 54m 3s
    1. Introduction to variables
      10m 44s
    2. Understanding variable scope
      6m 53s
    3. Modifying variables
      9m 8s
    4. Creating arrays
      9m 53s
    5. Modifying arrays
      6m 37s
    6. Creating strings
      7m 3s
    7. Modifying strings
      3m 45s
  6. 1h 2m
    1. Incorporating randomness
      7m 59s
    2. Using Perlin noise
      4m 24s
    3. Shuffling with Java
      3m 30s
    4. Specifying line attributes
      8m 2s
    5. Changing placement modes
      5m 45s
    6. Understanding color attributes and functions
      4m 16s
    7. Exploring color spaces
      7m 44s
    8. Using color palettes
      7m 5s
    9. Transforming the grid
      8m 38s
    10. Exploring the attribute matrix
      5m 33s
  7. 52m 7s
    1. Building code blocks
      5m 57s
    2. Writing a while loop
      3m 52s
    3. Using for loops
      5m 35s
    4. Creating conditionals
      14m 50s
    5. Working with easing
      10m 51s
    6. Creating spirals
      11m 2s
  8. 18m 55s
    1. Mouse tracking
      3m 54s
    2. Hovering and clicking
      11m 16s
    3. Understanding keyboard interaction
      3m 45s
  9. 27m 32s
    1. Specifying fonts
      6m 43s
    2. Using images
      5m 51s
    3. Playing a video loop
      6m 20s
    4. Exporting video
      3m 47s
    5. Adding sound
      4m 51s
  10. 20m 49s
    1. Creating functions
      11m 48s
    2. Creating classes and objects
      9m 1s
  11. 31m 10s
    1. Using embedded data
      5m 26s
    2. Working with appended text data
      6m 4s
    3. Working with appended tabular data
      10m 26s
    4. Reading XML data
      9m 14s
  12. 48m 17s
    1. Generating dot plots
      11m 11s
    2. Building scatter plots
      10m 0s
    3. Making line plots
      9m 55s
    4. Creating bar charts
      9m 12s
    5. Checking out examples of maps, hierarchies, and networks
      7m 59s
  13. 20m 57s
    1. Introducing some principles of 2D design
      13m 44s
    2. Understanding color theory
      7m 13s
  14. 24m 46s
    1. Interacting with zooming, rotating, and sliding
      6m 26s
    2. Implementing slicing
      6m 47s
    3. Using rollovers
      5m 58s
    4. Introducing the GUI libraries
      5m 35s
  15. 10m 35s
    1. Sharing via OpenProcessing and other sites
      3m 19s
    2. Saving as a desktop application
      2m 42s
    3. Saving as JavaScript
      1m 47s
    4. Saving as an Android application
      2m 47s
  16. 2m 38s
    1. Where to go from here
      2m 38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Interactive Data Visualization with Processing.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.