IntroductionWelcome| 00:03 | Hi! I'm Barton Paulson and I'd like
to welcome you to Interactive Data
| | 00:08 | Visualization with Processing.
| | 00:10 | Processing is a free open-source
programming environment that's based on Java.
| | 00:14 | In this course I'll teach you how to
create basic and complex shapes, static
| | 00:19 | sketches and dynamic animations and
interactive sketches that respond to user input.
| | 00:24 | I'll also show you how to install
external libraries that can add functionality
| | 00:29 | to your sketches, import local and
external datasets into Processing.
| | 00:34 | And develop custom visualizations
that are perfectly suited for your data.
| | 00:38 | Finally, I'll demonstrate how you can
export images and animations from your
| | 00:43 | visualizations for use in other programs.
| | 00:45 | And create standalone applications
for Mac, Windows, and Linux, as well as
| | 00:49 | Android mobile devices with a single click.
| | 00:52 | And so, let's get started with
Interactive Data Visualization with Processing.
| | Collapse this transcript |
| What you should know| 00:00 | Processing is an extremely friendly
and flexible programming language and,
| | 00:04 | because it's based on Java,
it's also extremely powerful.
| | 00:08 | However, there are a few things that you
should know before you get started with Processing;
| | 00:12 | The first is that Processing is a text-
based language, that is, you have to type
| | 00:16 | out lines of code instead of using a
drop click menu graphical user interface.
| | 00:22 | At the same time, it's good to keep in
mind that Processing was designed by and
| | 00:26 | for artists, and also for
accessibility to new programmers.
| | 00:31 | Also, like most computer languages,
Processing is very particular, for instance,
| | 00:36 | all text is case-specific.
| | 00:38 | Functions must be capitalized in a
particular way or Processing won't recognize
| | 00:42 | them, the same with the
variables and other commands.
| | 00:45 | Also, the order of your commands matters,
whether something comes first or later
| | 00:49 | can make a difference in the final product.
| | 00:52 | Finally, you need to be able to tell
your parentheses (), curly bracket {} and
| | 00:55 | square brackets [] from each other.
| | 00:58 | Processing is perhaps the easiest and
friendliest text-based language you'll
| | 01:02 | ever work with, especially,
because of its visual output.
| | 01:05 | It is also one of the best introductions
to computer programming that you can have,
| | 01:09 | given the similarity to other
languages like Java or even C or C++.
| | 01:15 | You'll be glad you took time to explore
Processing, and how you can use it to
| | 01:19 | create some beautiful and insightful work.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium Member of the
Lynda.com Online Training Library or
| | 00:05 | if you're watching this tutorial on a DVD,
then you'll have access to the Exercise
| | 00:09 | Files used throughout this title.
| | 00:11 | In the beginning chapters, most
exercises begin with a blank Processing file.
| | 00:15 | And the code is typed in during the exercise.
| | 00:17 | As such, you won't need to open any
files at the beginning, but you can compare
| | 00:21 | your results to the
finished product if you like.
| | 00:24 | Starting in Chapter 7 where we begin to
use longer coding sketches and external files,
| | 00:27 | you will have access to the
files that are used at each stage.
| | 00:31 | The Exercise Files are contained in a folder
and there is one project folder for each movie.
| | 00:35 | Inside the folder, you will find a
folder with a Processing sketch, as well as
| | 00:40 | folders for any other files
needed to follow along with the movie.
| | 00:43 | Such as datasets or image files.
| | 00:45 | If you're a monthly subscriber or an
annual subscriber to Lynda.com, you
| | 00:49 | don't have access to the Exercise
Files, but you can follow along from
| | 00:52 | scratch with your own data.
| | 00:54 | And so, let's get started.
| | Collapse this transcript |
|
|
1. Basics of VisualizationOverview of data visualization| 00:00 | This course has two major objectives.
| | 00:02 | The first is to introduce you to
Processing but the second objective is to
| | 00:06 | introduce you to the field of Data
Visualization, and show how you can use
| | 00:10 | Processing to create
customized visualizations from scratch.
| | 00:12 | Now, in one sense visualization is nothing new.
| | 00:16 | Data Visualization can be seen in
some ways as nothing more than a more
| | 00:20 | elaborate version of statistical graphing;
| | 00:22 | like the pie charts and the line
graphs that we're familiar with.
| | 00:26 | On the other hand there is so much more
to it than the simple and often simple
| | 00:31 | minded pie charts and graphs that we see.
| | 00:34 | It turns out that most kinds of
statistical graphs have a long history and they
| | 00:38 | all have one important thing in common.
| | 00:40 | In the words of John Tukey, the spiritual father
of the modern field to data visualization,
| | 00:45 | "The greatest value of a picture
is when it forces us to notice
| | 00:49 | what we never expected to see."
| | 00:52 | You can find this happening in one of
the first known graphics, which is this
| | 00:56 | chart of planetary
movements from the 10th Century.
| | 00:58 | It's pretty rough by modern standards,
but even though it's over a thousand
| | 01:02 | years old, it's pretty easy to tell
that it's showing the positions of several
| | 01:05 | celestial bodies over time, making it
the earliest version of what can be called
| | 01:08 | a Multiple Time Series Chart.
| | 01:10 | It's also pretty clear that some of
the bodies seem to move around a lot more
| | 01:14 | than others, which can lead to some
interesting theorizing about the nature
| | 01:17 | of the solar system.
| | 01:19 | Moving forward 800 or 900 years,
two people made particularly important
| | 01:22 | contributions to statistical graphics.
| | 01:25 | The first was William Playfair, who
was a Scottish engineer and economist.
| | 01:28 | In this graph from 1786, Playfair
created what is considered by many to be the
| | 01:33 | first bar chart, which is
still available right in Excel.
| | 01:37 | In another graph of trade data, he also
created a Time Series Line Chart, which
| | 01:41 | was not terribly unlike the early
planetary chart, but which was more clearly
| | 01:45 | labeled and showed excellent use of color.
| | 01:47 | Fifteen years later in 1801, Playfair came
out with another innovation that's still
| | 01:53 | with us today, for good or evil, the pie chart.
| | 01:56 | The pie slices are easiest to see
in the second pie to the left and the
| | 02:01 | fifth one to the right.
| | 02:02 | I should mention that despite Playfair's
innovation, there are a lot of good
| | 02:05 | reasons for not making pie charts and
we'll talk about those in a later movie.
| | 02:09 | While Playfair's graphs were significant
for getting the visualization ball rolling,
| | 02:13 | they existed primarily as an
early form of annual report fodder,
| | 02:17 | that this, they simply communicated
information and tried to do so in a
| | 02:20 | clear and attractive way.
| | 02:22 | It was the English nurse Florence
Nightingale who was the first to use
| | 02:26 | statistical graphics as compelling
tools for persuasion and policy change.
| | 02:30 | Her best-known chart was the 1858
Diagram of the Causes of Mortality in the
| | 02:35 | Army in the East, which depicted causes of
death among soldiers in the Crimean war in Turkey.
| | 02:40 | This particular chart which is a
variation on Playfair's pie chart is called a
| | 02:44 | Polar Area Diagram or sometimes in
her honor, a Nightingale Rose diagram.
| | 02:49 | Although Nightingale
herself called it a coxcomb.
| | 02:52 | As a result of her presentation, Queen
Victoria appointed a sanitary commission
| | 02:56 | that came to Turkey and removed dead
animals from the water, got rid of rotten
| | 02:59 | floors and improved ventilation.
| | 03:01 | As a result, the mortality rate there
dropped from 52% to 20%, making this
| | 03:07 | perhaps the graph that saved
more lives than any others.
| | 03:10 | Playfair's and Nightingale's graphs
also served to illustrate one half of a
| | 03:14 | potentially important distinction in
visualization, which is the difference between
| | 03:18 | what is called Information
Visualization and Data Visualization.
| | 03:22 | Now this is far from a hard and fast
distinction, but at least it can help focus
| | 03:26 | thinking about graphics.
| | 03:27 | Essentially, Information Visualization
refers to graphics that are created to
| | 03:32 | communicate information that is
already understood by at least some people.
| | 03:36 | This was the case for both, Playfair's
and Nightingale graphs and it's true for
| | 03:39 | most of the infographics,
trotted out in today's newspaper.
| | 03:42 | Data visualization on the other hand
can be thought of as a graphics that are
| | 03:46 | designed to help researchers find
the patterns in the first place.
| | 03:49 | One of the great historical examples
of this kind of pattern searching comes
| | 03:52 | from the 1854 cholera outbreak in the
Soho district of London, which eventually,
| | 03:57 | claimed over 600 lives.
| | 03:59 | The predominant theory of cholera at
the time was it was passed by "bad air."
| | 04:04 | However, the physician John Snow
charted each case of cholera and found an
| | 04:08 | epicenter at the public
water pump on Broad Street.
| | 04:11 | This led to the removal of the pump
handle, which may have contributed to the
| | 04:14 | steep decline in cholera at the time,
that is some say, it declined because
| | 04:19 | they took the handle off, others say,
it was already going down, but either way
| | 04:22 | it was great detective work and an
excellent low-tech solution to a serious problem.
| | 04:26 | But really, Data Visualization is not identical
to these graphs from 150-200 or 1100 years ago.
| | 04:34 | Despite the fact that you can still produce
most of these graphs in any spreadsheet
| | 04:38 | program, a lot has changed since then,
and the nature of visualization has
| | 04:41 | changed significantly.
| | 04:42 | One important change is the ability
to automate analyses and graphics with
| | 04:46 | computers, which is something
that none of these pioneers had.
| | 04:48 | But perhaps the most important change is
the scale of data available and how the
| | 04:53 | modern deluge calls for
new and different methods.
| | 04:56 | When a dataset has hundreds or thousands
of variables and possibly millions or
| | 05:00 | billions of cases, it's simply not
possible to go through manually and do one
| | 05:04 | variable, or one correlation
or one pie chart at a time.
| | 05:08 | For example, here are a few large
data sets that I recently came across.
| | 05:13 | The National Institutes of Health has a
thousand genomes project and they have
| | 05:17 | made the data freely available to
the public, but it is 200TB of data.
| | 05:22 | Also, CalTech astronomers have been
measuring the brightness histories of
| | 05:26 | 200 million stars and celestial
objects, resulting in over 20 billion
| | 05:31 | independent measurements.
| | 05:32 | And then a few years ago, Google
gathered language statistics from live
| | 05:36 | webpages and the resulting dataset, while only
24GB, contained data on over one trillion words.
| | 05:43 | And so, well, we won't deal with
anything like those in this course.
| | 05:47 | These examples do highlight the extraordinary
demands and opportunities created by
| | 05:51 | modern data sources;
| | 05:52 | as well as, give you an idea of why
methods developed for much smaller datasets
| | 05:56 | may no longer be ideal.
| | 05:58 | With those points in mind I want to
show you some modern data visualizations
| | 06:02 | that were created specifically in Processing.
| | 06:05 | Now I'm doing this not to show you
what we're going to accomplish in this
| | 06:08 | particular course, but as a form of
inspiration and to give an idea of what's
| | 06:12 | possible with Processing.
| | 06:14 | The first two I want to
show you are by Aaron Koblin.
| | 06:17 | This first was called Amsterdam SMS
Messages and it's a way of examining text
| | 06:21 | messages when and where they are sent.
| | 06:24 | After that he created another one,
that's very well known called Flight Patterns,
| | 06:27 | which tracks the departure and arrival
of flights in and out of the United States.
| | 06:32 | And what's interesting is that even
though he has provided no map of the United
| | 06:35 | States, per se, you get a very clear
feel for the outline, simply based by the
| | 06:39 | departures and arrivals of flights.
| | 06:42 | The next three that I want to show
you are by one of the creators of
| | 06:46 | Processing, Ben Fry.
| | 06:47 | This first one is genetics data and
what he's depicting is the genetic
| | 06:51 | similarities between humans and other animals.
| | 06:55 | The next one is a depiction of the
changes in Charles Darwin's Book on
| | 06:59 | the Origin Of Species.
| | 07:01 | It's actually an interactive graphic
that shows you it's a complete text and if
| | 07:04 | you go to the website, you can click
on it and see exactly what phrases and
| | 07:08 | words were added or
subtracted with each edition.
| | 07:10 | The third one from Ben Fry is another,
well-known one called Zipdecode and what
| | 07:15 | it is, it's an interactive graphic
that depicts the center point of every ZIP
| | 07:19 | code in the United States, and all you
have to do is begin typing numbers and it
| | 07:24 | shows you where those zip code show up.
| | 07:26 | So you see on the bottom left here, I
typed 9, which highlights states on the
| | 07:30 | West Coast, California,
New Oregon and Washington.
| | 07:34 | And this is a neat way of doing a quick
interactive and also gives you an idea
| | 07:37 | for population density.
| | 07:39 | You can see for instance, that the
East Coast is much more densely populated.
| | 07:42 | It's practically solid around the
New York area and that most of Nevada
| | 07:46 | is very sparsely populated.
| | 07:48 | The next one I want to show you is by
Brendan Dawes and this is a section of
| | 07:52 | a larger piece, this is called Cinema Redux.
| | 07:54 | And what he's done here is he's taken
a constant stream of still frames from
| | 07:58 | several movies and simply arranged
them in order, essentially re-creating the
| | 08:02 | movie in very small images.
| | 08:04 | Now if you go and see the entire
collection, you can see very clear differences
| | 08:08 | from one director to another.
| | 08:10 | You see for instance here that Alfred
Hitchcock had a much lighter palette and
| | 08:14 | a much warmer palette than did William
Friedkin in The French Connection, which
| | 08:17 | was cooler and darker.
| | 08:18 | You can also see that the vertigo was longer.
| | 08:21 | This next one is by Casey Reas, the
other major creator of Processing and is
| | 08:26 | called Aura, it's a depiction of the
same data set from several different
| | 08:29 | perspectives and gives you an idea of
how you can approach a single collection
| | 08:34 | and get a diversity of
representations out of it.
| | 08:38 | After that we have two by Jer Thorp
who is the Data Artist in Residence of
| | 08:42 | the New York Times.
| | 08:43 | This first one is based on Twitter and
it's called Just Landed and it's simply
| | 08:48 | collecting public tweets that included
the expression, Just Landed and where
| | 08:52 | they took off and where they ended
up, and it connects them that way.
| | 08:56 | After that Jer Thorp was commissioned
to produce a graphic of every cover of
| | 09:00 | popular science magazine over its history
and he was able to do that both by
| | 09:05 | grouping it by decade as well as by topic.
| | 09:07 | And you can see the changes
in topics for instance;
| | 09:10 | phylogenetics and celluloid came up early on.
| | 09:12 | Then, we had the V8 in full color in
the 40s and 50s and then we have the
| | 09:17 | microcomputer, the modem, which I see
has dropped off in the recent years
| | 09:21 | and the MP3, which has been one
of the more recent topics.
| | 09:25 | After that is the Max Planck Research
Network, and this is created by Moritz
| | 09:29 | Stefaner and Christopher Warnow, which
simply shows the interconnections of a
| | 09:34 | series of researchers.
| | 09:36 | Next, Neil Banas has created something
called the NPZvisualizer, which is for
| | 09:41 | biological research.
| | 09:42 | This is also an interactive one, if
you go to the original website,
| | 09:46 | you can adjust parameters and
explore the effects of each one.
| | 09:50 | This is the Feltron Report created each
year by Nick Felton who keeps track of
| | 09:55 | essentially every event that happens
in his life and produces an annual
| | 09:58 | personal report each year.
| | 09:59 | He's also created software
from this that you can use at his
| | 10:03 | website feltron.com.
| | 10:05 | The next one is called Similar Diversity
by Philipp Steinweber and Andreas Koller
| | 10:10 | which takes the text of several
major religious books, identifies the
| | 10:15 | major characters and shows where
information about them appears and more
| | 10:19 | significantly, the
interconnections between those characters.
| | 10:22 | This is actually a much larger graphic,
sometimes shown on wall size, which
| | 10:27 | makes it easier to explore
the very small details upfront.
| | 10:31 | The next several are by Reza Ali.
| | 10:34 | The first two are simply library data
about the Dewey Decimal Code System and
| | 10:38 | the interrelationships between them.
| | 10:39 | It's an interactive and beautiful graphic.
| | 10:43 | The next three are depictions of
the Lawrence force from physics.
| | 10:47 | And I personally find them
stunning images of natural science data.
| | 10:53 | Next is Hamlet from
Understanding Shakespeare by Stephen Thiel.
| | 10:57 | And what this shows is a selection of
keywords from Hamlet arranged by scene
| | 11:02 | with the yellow
highlighting the major characters.
| | 11:04 | In this case, it's Hamlet where
Hamlet speaks all the way through.
| | 11:07 | You can see for instance that he doesn't
speak very much in the second scene,
| | 11:11 | but he comes back to the third and so on.
| | 11:13 | And these also are produced wall size
and wonderful ways for getting the general
| | 11:17 | feel of what's going on in a particular story.
| | 11:20 | This one by Victor Vina and Nerea
Calvillo is in the air, which depicts
| | 11:24 | air pollution in Spain.
| | 11:25 | And then finally, SNCF tag cloud by
Xiaoji Chen shows tweets about the national
| | 11:33 | rail system in France and the major
topics we see, for instance fail and late
| | 11:38 | apparently come up a lot.
| | 11:40 | And so, this collection I present
to give you an idea of what can be
| | 11:43 | accomplished in Processing and
the room for creativity and personal
| | 11:47 | interpretation as well as an
insight into data that you can get by
| | 11:50 | using this program.
| | Collapse this transcript |
|
|
2. Basics of ProcessingInstalling Processing| 00:00 | Processing is a free open-source
programming environment that can be installed
| | 00:04 | on Windows, Mac OS and Linux PCs.
| | 00:07 | In addition, its files can be saved
for webpages as both Java Applets and as
| | 00:12 | JavaScript files and for Android mobile devices.
| | 00:15 | In this movie I will show you how to
download and install Processing on Windows PCs
| | 00:19 | and on Macintosh computers.
| | 00:21 | The first step, as you go to the
Processing website, which is Processing.org.
| | 00:26 | And when you come to the homepage,
you simply go to Download Processing.
| | 00:31 | We click on that and what you find is there,
there are currently two
| | 00:36 | versions of Processing available, a
Stable Version is 1.5.1 which was released
| | 00:42 | back in May of 2011.
| | 00:44 | On the other hand, version 2.0 is
nearly ready for release, and in fact,
| | 00:50 | they've been making Public Releases of
the alpha and I've been using those in
| | 00:54 | developing this course.
| | 00:55 | And the most recent, which was released
in August of 2012 is Version 2.0 Alpha 8.
| | 01:01 | And I've been using this with no
problems and I suggest that you simply go
| | 01:05 | straight ahead to that
Version 2.0 for your own work.
| | 01:10 | If you have a Windows computer,
you can use that 32-bit or 64-bit.
| | 01:14 | Now be aware that this is going to
require the Java Runtime Environment to work
| | 01:18 | with it and it will need to
be in a matching 32 or 64-bit.
| | 01:22 | The computer that I'm using right now, we
needed to use Windows 32-bit to install.
| | 01:27 | All you need to do is click on
the link and download the file and
| | 01:32 | double-click to open it.
| | 01:34 | I have already installed
this, so I'll press Cancel.
| | 01:37 | If you have a Macintosh computer,
simply click on Mac OS X, there is a single
| | 01:41 | version that works seamlessly.
| | 01:43 | And if you have a Linux computer, you
also have a choice between 32 and 64-bit.
| | 01:47 | Now, the differences between Versions 1.5
and 2.0 are significant but most of
| | 01:54 | them are under their hood, and will
not be something that you actually had to
| | 01:57 | deal with in creating your
own Processing sketches.
| | 02:00 | For instance, 3D rendering is now done
exclusively with OpenGL, as opposed to
| | 02:03 | processing its own renderer.
| | 02:05 | Video is done with the version of
gstreamer instead of Quicktime for Java.
| | 02:09 | There is a change in the
way that XML data is read.
| | 02:12 | There's a new class for tabular
data that is CSV or TSV files.
| | 02:16 | There's a simpler
interface for installing libraries.
| | 02:18 | And most of these, if you are not
familiar with these terms, that's fine,
| | 02:22 | you don't have to worry about that, many of
these are simply improvements in the way
| | 02:26 | that Processing works.
| | 02:27 | There are a few, however, that
will show up in what you do.
| | 02:30 | There's a JavaScript mode in addition to
standard in Android which allows you to
| | 02:34 | save your sketches as JavaScript files
that can be loaded into webpages, which
| | 02:40 | by extension allows you to
bring them into the Apple iOS world.
| | 02:44 | There is also the possibility of
adding new modes as they are developed.
| | 02:51 | When you install Processing and perhaps
the most significant thing that you need
| | 02:54 | to do is choose where your sketches folder is.
| | 02:56 | I'll open up my copy of Processing and
go to Ctrl+, on a PC or Cmd+, on a
| | 03:04 | Mac to open up the Preferences.
| | 03:06 | And you have the possibility of
selecting a Sketchbook location, that is, sketch
| | 03:11 | is the Processing term for programs or scripts.
| | 03:15 | On my own computer, I put it inside
my documents folder inside a drop-box
| | 03:19 | folder, so I have it
accessible from other places.
| | 03:21 | You can put it wherever you want.
| | 03:23 | All you are going to need know is
that's where your files are going to go and
| | 03:27 | that's where your libraries need
to be installed when we get to them.
| | 03:30 | The installation of Processing is a
straightforward and simple procedure.
| | 03:33 | Now, that you have a working copy of
Processing installed on your computer,
| | 03:36 | let's take a closer look at the program itself.
| | Collapse this transcript |
| Overview of Processing| 00:00 | In this movie I'll introduce you to
Processing and outline some of its key features.
| | 00:05 | The first thing you see when you
open Processing is the Processing
| | 00:08 | Development Environment or PDE.
| | 00:11 | In most other programming applications
this is known as the IDE or
| | 00:15 | Integrated Development Environment.
| | 00:17 | And what you have here at the very
top is the Files Edit Sketch menus.
| | 00:21 | Beneath that you have the Processing
toolbar with a play and stop button
| | 00:26 | as well as a button to get a new sketch, to
Open, Save or Export an application.
| | 00:32 | Beneath that is a tab with the name of the file.
| | 00:35 | Right now it just simply says sketch
and it gives the date and the little
| | 00:38 | section sign at the end means
that there are unsaved changes.
| | 00:42 | When you begin to have sketches that
use, for instance, objects created in
| | 00:46 | various classes, you might have additional tabs.
| | 00:49 | But, many simple sketches
don't have any extra tabs at all.
| | 00:53 | Beneath that the large white area is the
Text Editor, where you type in your code.
| | 00:59 | The next section down is the message
area, where Processing will let you know,
| | 01:02 | for instance, that it has
imported a file or let you know that there
| | 01:07 | are error messages.
| | 01:08 | The black area beneath that is the console,
where it will print out a text of an
| | 01:13 | error message or if you ask it to
print out some text as part of your sketch,
| | 01:17 | that's where it will appear.
| | 01:19 | Now, whenever you run a sketch in
Processing, you'll also get a display window.
| | 01:24 | I'll do a very quick one.
| | 01:28 | All I'm doing here is setting the size
of the display window and I've put size
| | 01:33 | 600 pixels wide, 200 pixels tall,
finish with a semicolon(;).
| | 01:37 | If I hit Run, there's my display window.
| | 01:42 | Right now it's got nothing in
it, except a gray background.
| | 01:45 | But, you see that it has the same
name as a sketch that I just ran.
| | 01:49 | Even if you run a sketch that has
no graphics, you'll always have a
| | 01:52 | display window pop up.
| | 01:54 | If you're doing a graphics-free one
you can simply ignore it.
| | 01:57 | Now, if you're accustomed to using an
external code editor like Textmate or
| | 02:01 | a Notepad ++, you can also arrange
to do that in Processing, by simply
| | 02:06 | changing the Preferences.
| | 02:07 | I'll close this sketch window.
| | 02:09 | And I'll go to the Preferences by
clicking Ctrl+, on a PC or Cmd+, on a Mac,
| | 02:16 | and what you see here is first;
| | 02:18 | the Processing sketchbook location,
set that wherever you want, that's where
| | 02:22 | your sketch is as well as any
imported libraries will need to go.
| | 02:26 | You can change the Editor font size.
| | 02:29 | You have the option of selecting
Use smooth text in the editor window, I did that.
| | 02:34 | You can Increase the maximum available memory.
| | 02:37 | I bumped it up to a 1 GB of memory.
| | 02:40 | And then you see it a few steps where
you can use an External editor if you want.
| | 02:44 | I, on the other hand, prefer to use the
Processing Editor because it does color
| | 02:49 | coding and because it gives
better information on error messages.
| | 02:52 | I'll close this now.
| | 02:55 | Now, one of the neat things about
Processing is that it comes with a really wide
| | 02:59 | selection of sample sketches.
| | 03:02 | All you need to do is go up to File and
down to Examples and then you can click
| | 03:09 | open the examples that you have in here.
| | 03:12 | For instance, I have Lights,
Directional Lights which will be a 3D sketch and
| | 03:19 | I can click Run and then by moving my
mouse I can control the direction of the
| | 03:29 | light in this 3D drawing. I can close that.
| | 03:34 | I can close that sketch and I can open
up another one for instance, Typography.
| | 03:46 | And this loads the fonts that are available.
| | 03:51 | I can also close the sketch by hitting Ctrl+W.
| | 03:55 | When you add external libraries or
collections of code, they will also bring in
| | 04:00 | their own sample sketches in the same
folder as the other ones that we just saw.
| | Collapse this transcript |
| Exploring libraries| 00:00 | Before we get started with sketches
there is just one more thing I want to take
| | 00:03 | care of, I want you to be aware of
the libraries that are available in
| | 00:07 | Processing, both the libraries that
come with Processing, but have to be
| | 00:10 | installed, and the contributed libraries.
| | 00:13 | Just like in other programming in
languages, libraries are resources that can
| | 00:16 | add pre-written code classes or data
among other things that can make your
| | 00:20 | programming life easier.
| | 00:21 | In this movie, we'll take a quick
look at the libraries that come with
| | 00:24 | Processing, as well as where to find
other contributed libraries, how to install
| | 00:29 | them in Processing, and
how to use them in a sketch.
| | 00:32 | The first thing is to look at the
libraries that come with Processing
| | 00:36 | but are not installed by default.
| | 00:37 | What you can do when you're in Processing is
come up to Sketch and then down to Import Library.
| | 00:46 | And what you'll see is that there are
a handful of Libraries that come with
| | 00:49 | Processing but are not installed by default.
| | 00:52 | For instance, the javascript library or
the minim, which is a sound library or a
| | 00:57 | video library at the bottom.
| | 00:59 | All you have to do to use these ones
is come over, click on them and then it
| | 01:05 | automatically paste in the code that
says import, which means you're using
| | 01:08 | library and then the name of the
library Processing.video.*, to import every
| | 01:14 | file within that Library.
| | 01:16 | On the other hand there are even more
libraries than showed up in that list.
| | 01:20 | If we go back to Sketch, to Import
Library, we have this option to
| | 01:25 | Add Library and we click on that that
brings up the new Processing Library
| | 01:30 | Manager this is new in Version 2.0.
| | 01:33 | And here there's a large collection of
libraries that are contributed, meaning
| | 01:36 | they're not built-in, they are
not from the core Processing people.
| | 01:41 | We have a large collection here, one
of the more interesting ones is the
| | 01:48 | Carnivore Library, which is a surveillance
tool for data networks and all you
| | 01:53 | have to do is you click on it to select
it and then click Install, and now it's
| | 01:59 | downloaded and installed.
| | 02:00 | But Processing provides even
more options for libraries of code.
| | 02:04 | If you go to the Processing website at
Processing.org and click on Reference and
| | 02:13 | then Libraries, you first see the
libraries that come with Processing and that
| | 02:19 | we're able to install, for
instance, the Video or the OpenGL ones.
| | 02:23 | So as we scroll down however, you see
there's a huge assortment of contributed
| | 02:30 | libraries in various categories.
| | 02:32 | For instances, there are Sound ones.
| | 02:35 | I'm a big fan of beads by Ollie Brown.
| | 02:38 | There are Import/Export libraries;
| | 02:41 | sDrop allows drag-and-drop implementation.
| | 02:43 | Beneath that is a section on Tools,
for instance, we have layers, which
| | 02:49 | allows you to create sketches with
multiple layers, the way you'd do in
| | 02:52 | Photoshop or Illustrator.
| | 02:54 | Hardware Interface, Animation tools,
which can make a big difference in terms of
| | 03:00 | doing Tweens, the way you're
used to in Adobe Illustrator.
| | 03:04 | Typography tools, Computer Vision, an
area that's of real interest to me,
| | 03:09 | Face Detection libraries or down at the
middle you have openkinect and simple-openni
| | 03:14 | which allows you to use a Microsoft
Kinect Sensor hooked directly of your
| | 03:18 | computer in Processing,
| | 03:20 | something I've used extensively.
| | 03:23 | 3D Tools, Simulation Tools. Graphical
Interface; these allow you give interfaces
| | 03:31 | to your sketches, for instance, sliders
and buttons that you don't have to code
| | 03:35 | manually, we'll be using
those later in this course.
| | 03:38 | And then we have entire collections or
Compilations of libraries and then for
| | 03:43 | working with data and other search protocols.
| | 03:46 | For instance, the ability to access a Yahoo!
| | 03:49 | Search library to work with SQL
files or to work with Arduino.
| | 03:55 | And so you see from this, libraries
can add a lot of functionality to your
| | 03:58 | Processing Sketches and make your
work a lot more efficient and creative.
| | 04:01 | We'll use several of these libraries as
we go through this course on
| | 04:05 | Interactive Data Visualization with Processing.
| | 04:07 | But for now, we're ready to
draw our very first Sketch.
| | Collapse this transcript |
|
|
3. Basics of DrawingBasic setup| 00:00 | We're now at the point that we
can start Sketching and Processing.
| | 00:03 | Now normally when you learn a new
programming language, you begin by writing
| | 00:07 | some code and getting some
text output, like "Hello, World!"
| | 00:10 | Now something we are perfectly capable
of doing in Processing like this, and
| | 00:16 | once I have that I can press Run by
clicking on this button or I can press
| | 00:21 | Ctrl+R on the keyboard for
a PC or Cmd+R on a Mac.
| | 00:25 | And what I get is an empty display window,
because I have no graphical commands.
| | 00:30 | There you see right at the bottom in
the message box, I have "Hello, World!"
| | 00:34 | So I've successfully created
my first Processing program.
| | 00:38 | But the beauty of Processing is that it's
able to do graphical output from the text.
| | 00:43 | And so the simplest way to start in
Processing is to draw some basic shapes,
| | 00:47 | also known as primitive
shapes or geometric primitives.
| | 00:51 | Now not only is this a good place to
start for learning Processing,
| | 00:54 | it's also good Processing for data
visualization, as the shapes form the basis
| | 00:58 | of most visualizations.
| | 00:59 | So I am going to comeback to my Sketch here
and I'm going to set a Sketch Window size.
| | 01:04 | To do that I type size and then in
parentheses () I put the number of
| | 01:09 | pixels wide and the number of pixels
tall, I will do 600 x 200 and then
| | 01:14 | I put a semicolon (;)
| | 01:15 | at the end to say I am
finished with that particular comment.
| | 01:18 | Now you see by the way that Processing
is coloring the commands, print line and
| | 01:22 | size are recognized known commands in
Processing, so put some in orange color.
| | 01:27 | And now if I click Run, you will see
that I have a larger display window,
| | 01:33 | it's still empty, because I am not
putting anything in it, but it is 600 x 200
| | 01:37 | pixels, I'll close that now.
| | 01:38 | Now one important thing to understand
if you're not familiar with programming
| | 01:42 | is that like most other programs, the
counting for pixels in a window starts at
| | 01:47 | 0, 0 like the graphs you're used to,
but they start at the top left and the
| | 01:51 | x-coordinates increase as you go to the right,
but the y coordinates increase as you go down.
| | 01:56 | There are a lot of good reasons for this,
but it can be a little disorienting
| | 02:01 | if you're not accustomed to it.
| | 02:03 | Now there are a couple things that I
want to do here that I always do when
| | 02:07 | I start a new window.
| | 02:08 | First I set the size of the window and
then I turn on anti-aliasing, which makes
| | 02:12 | things a little smoother.
| | 02:13 | In fact, the command for that in
Processing is smooth and then I have to put
| | 02:19 | opening and closing
parentheses () and a semicolon (;).
| | 02:22 | Now the reason I have the
parentheses () with nothing in them is because
| | 02:26 | functions require arguments, smooth is
a function and the empty parentheses ()
| | 02:31 | indicate that while it is a function
there are no arguments or extra information
| | 02:34 | needed for it to do it.
| | 02:36 | However, it does have to have them, so
I put smooth open and close parenthesis
| | 02:41 | () then I finish with the semicolon (;).
| | 02:43 | Now if I want to draw a circle, I'm
going to show you a lot more about this,
| | 02:48 | but I can do it like this, in Processing
there is not a built in circle command,
| | 02:53 | but there is a ellipse command, and if you
want to make a circle you just make them
| | 02:57 | the same height width.
| | 02:58 | So what I am going to do is I am going to
type ellipse then in the parenthesis ().
| | 03:02 | I have to first locate the ellipse,
I'll put it right in the middle so that's
| | 03:06 | 300 pixels over and 100 pixels down, then
I pick the size of the ellipse, this is
| | 03:11 | diameter by the way.
| | 03:12 | So I am going to put it 100 wide and 100
tall, close the parenthesis, semicolon (;)
| | 03:18 | and now if I press Ctrl+R on a PC or Cmd+R
on a Mac to run the Sketch and I get my circle.
| | 03:25 | And in one sense this is the "Hello, World!"
| | 03:27 | For Processing, because Processing is
designed for graphical output and
| | 03:31 | that's what I have here first.
| | 03:32 | I am going to close this again, now one
of the things I can alter in my sketch
| | 03:37 | very easily is the background color.
| | 03:39 | By default the sketch is gray.
| | 03:41 | Let's take another quick look at it.
| | 03:42 | I have a middling gray background and
have a white circle with a black outline
| | 03:47 | if I want to change the color of the
background all I have to do is enter the
| | 03:50 | function background all lowercase.
| | 03:52 | Now please make sure if you enter that
command, to enter it before you draw the
| | 03:56 | circle or the background will cover up
the ellipse. I've mentioned before that
| | 04:00 | the order of operations matters in Processing.
| | 04:03 | So I am going to type in background and
in the parenthesis () I get to put the
| | 04:08 | code for the color I want.
| | 04:09 | Now if I put a single number here, it's
going to give a grayscale, it goes from
| | 04:14 | 0 for Black up to white.
| | 04:15 | Now it is not 100 at the top, it's 255,
that's because it's an 8-bit Color Scheme.
| | 04:21 | If you're not familiar with this, it
can seem a little disoriented to go up to
| | 04:25 | 255, but it has to do with binary
numbers, and it's a very common approach
| | 04:29 | with computer graphics.
| | 04:30 | If I want it to be black, I just put in 0.
| | 04:33 | I close the parenthesis, put a
semicolon (;) and I can hit Run.
| | 04:36 | And now I have a black
background for my white circle.
| | 04:39 | On the other hand, if I want a white
background, I can change the 0 to the
| | 04:44 | maximum value of 255.
| | 04:47 | Now have a white
background with my white circle.
| | 04:49 | Finally, if I want it to be a
color background, I can use a three
| | 04:54 | component coding system, it's the RGB,
Red Green Blue, system that's common
| | 04:59 | in Computer Graphics.
| | 05:00 | In this particular case I'll just make
it Red by putting the Red value at its
| | 05:04 | maximum, and the Green and the
Blue components at their minimum.
| | 05:08 | Please note, I have got the three numbers,
they are separated with commas (,) and
| | 05:11 | they're still in the parenthesis
() and finish with the semicolon (;)
| | 05:14 | now I hit Run and have a brilliant
red background with my white circle.
| | 05:19 | Now there's just one more thing I want
to show you in this particular sketch and
| | 05:22 | that's how to add comments to a sketch.
| | 05:24 | I personally find it's very useful to
comment to indicate what you're doing.
| | 05:29 | Now, I generally comment more than
other people, in my own work I attend to
| | 05:33 | comment every single line, which is
probably excessive, but makes it very
| | 05:37 | easy to read the code.
| | 05:38 | I will not be commenting this much in
this course, because I'll be describing in
| | 05:41 | words to you, what each
program is as I go through.
| | 05:44 | However, I'm going to add a comment
right here, by going to the top I'm going to
| | 05:49 | click a print line and
move that down a little bit.
| | 05:52 | Now I am going to add a comment with
the name of this file, I find that to be a
| | 05:57 | helpful thing in general.
| | 05:58 | Now because this is going to be a single line
comment, what I do is I put two slashes //.
| | 06:02 | These are the slashes that are
down by the question mark (?).
| | 06:05 | Then I put a space here and then I can
put the name of this particular file.
| | 06:09 | And that helps me identify it in
case I have got several files open.
| | 06:13 | And you can see comments are by
default colored gray in Processing, and
| | 06:18 | if I want to add a comment somewhere else, I can
put one for instance, after a line of code.
| | 06:22 | Right here I can put a couple of spaces
with two slashes and put Red background.
| | 06:29 | And that's one way of keeping
track of what I'm doing in this.
| | 06:32 | Now if I'm going to have a comment
that is more than one line long, for
| | 06:35 | instance, I want to put an entire
paragraph in, the way to do that is with a (/*).
| | 06:41 | So I'll come down to the bottom here, I put
(/*), I can go to the next line if I want.
| | 06:47 | This is a very long comment.
| | 06:53 | Once I have the entire comment in, I
can finish with an (*/) and now Processing
| | 06:58 | knows that I'm done with the entire comment.
| | 07:01 | Again, this can be very helpful, both
if you intend on sharing your sketches
| | 07:05 | with other people and for helping you
reconstitute the sketch if you come back
| | 07:08 | to it at a later time.
| | 07:10 | Then as a final note, each
sketch will be saved in the folder with the
| | 07:14 | exact same name as the sketch.
| | 07:15 | So if you go and manually change the
name of the folder, you need to make sure
| | 07:20 | that the sketch has the exact same name,
the only exception is that the sketch
| | 07:23 | will have the .pde Extension on the
file, and with that we're ready get
| | 07:28 | drawing in Processing
| | Collapse this transcript |
| Drawing points| 00:00 | In this next movie we're going to start
looking at the seven primitive shapes,
| | 00:05 | or basic geometrical shapes,
that Processing can draw.
| | 00:08 | The most basic one of these
is a simple point in a field.
| | 00:11 | What I'm going to do is I'm first going
to put a comma (,) to give the name of
| | 00:15 | this particular sketch.
| | 00:17 | I do the two slashes (//) and you can
see when I started typing that we got a
| | 00:22 | section sign at the end of the
name of the file on the tab that indicates
| | 00:26 | that they are unsaved changes.
| | 00:27 | If I just do Ctrl+S to Save
on a PC or Cmd+S on a Mac,
| | 00:32 | now it goes away because I'm saved.
| | 00:34 | So, what I'm going to do right
now is I'm going to draw a point.
| | 00:37 | The first thing I'm going to do is set
the size of the sketch display window.
| | 00:41 | For most of the sketches in this course,
I'll be using a window that is
| | 00:45 | 600 pixels wide and 200 pixels tall,
this is an arbitrary choice;
| | 00:49 | it's just the one that seems to work nicely.
| | 00:51 | So, what I do is I type size for the
function, and then in parenthesis I put
| | 00:55 | the dimensions 600 pixels wide and 200
pixels tall, close the parenthesis, and
| | 01:01 | then put a semicolon (;)
| | 01:02 | to end the function.
| | 01:03 | And so right now, I could Run this
sketch, Ctrl+R on a PC, Cmd+R on a Mac
| | 01:08 | and I'll get my window that's 600
pixels wide and 200 pixels tall.
| | 01:12 | I'm also going to turn on anti-aliasing,
this is something I do on every sketch
| | 01:18 | and that's just smooth with the open and
closing parenthesis (), because there are
| | 01:21 | no arguments for this function.
| | 01:22 | But, it does have to have that
space and a closing semicolon (;).
| | 01:26 | Now, what I'm going to do is I'm going
to drawn a number of points and all I
| | 01:30 | need for a point is an x, y coordinate.
| | 01:35 | The first point is going to be
100 pixels over and 100 pixels down.
| | 01:39 | I'm going to draw a several more and I'm going to
put them 50 pixels away from each other.
| | 01:44 | I'm just going to copy and paste to do this.
| | 01:49 | And then I'll change these manually and
when I draw it, this is what you'll see,
| | 01:55 | is a series of very, very small points.
| | 01:57 | Now, they are small, because they are points.
| | 02:00 | And, in fact, given the compression that we
used, you may not be able to see them at all.
| | 02:05 | In fact, what I'm going to do is change
it to make it so you can see them better.
| | 02:10 | When I close this sketch, and I'm
going to make a couple of changes;
| | 02:14 | Number one is, actually I'm going to
change the color of the background.
| | 02:17 | I'd like to use something else.
| | 02:18 | In this particular case, I'm going to
type in background and I'm going to be
| | 02:23 | using a background with a hex code.
| | 02:26 | Hex codes are hexadecimal numbers and they
are another way of indicating color codes.
| | 02:31 | It's still the RGB Red, Green, Blue
system and its' still on an 8-bit 0 to 255.
| | 02:37 | But, it represents it in a
different way that's a little more compact.
| | 02:41 | And we have to do is
first type the pound sign (#).
| | 02:44 | And then you type the 6-letter
number code that you're going to use.
| | 02:48 | Now, this one is going to be 666666, so now
you see when I draw it, it's a darker gray.
| | 02:55 | Then what I'm going to do is I'm going
to change the color for the dots themselves.
| | 03:01 | I'm going to change this
by using the Stroke command.
| | 03:05 | Now, if this were a circle or a
square, I would use the Fill command.
| | 03:08 | But, a point is just a point that
theoretically doesn't have a Fill in it,
| | 03:12 | it's just an outline of itself.
| | 03:14 | The way I do this is I type in stroke,
all lowercase, and then I'm going to use
| | 03:20 | the hex command for the color that I'm using.
| | 03:23 | In this case, I'm using 607F9C.
| | 03:28 | In case you wonder, I am consulting an
external file with the palettes that I've
| | 03:32 | put together earlier.
| | 03:34 | Also, to make this so you can actually
see these points, I'm going to increase
| | 03:38 | their size substantially, and the way
I can do that is by using strokeWeight.
| | 03:42 | And this is where we get into the
issue of Bumpy Caps or Camel Caps.
| | 03:48 | And what we have here is that the
functions almost always start with lowercase letters.
| | 03:52 | But, if you want to distinguish words in
them, you can then go to capitalization.
| | 03:57 | So, strokeWeight is the name of that function.
| | 03:59 | And then in parentheses () I'm going
to put the number of pixels that I want
| | 04:02 | each of these points to be.
| | 04:04 | I'm going to pick 20 pixels;
| | 04:06 | close the parenthesis and a semicolon.
| | 04:08 | Then I'm going to Save the file
and Run it by hitting Ctrl+R on a PC
| | 04:14 | or Cmd+R on a Mac.
| | 04:16 | And now, what you see is a collection
of points that are now large enough to be
| | 04:20 | circles against a darker gray background.
| | 04:23 | So, this is the very first primitive
geometric shape that we deal with in
| | 04:28 | Processing, is this simple point.
| | 04:30 | And this will serve as an excellent
starting point for the other sketches that
| | 04:34 | we'll be working with
in the rest of the movies.
| | Collapse this transcript |
| Drawing lines| 00:00 | with it.
| | 00:00 | The next of the primitive shapes in
Processing that we're going to do
| | 00:04 | is also a very a basic one.
| | 00:05 | It's just a simple straight line and this
is a very simple thing to do in Processing.
| | 00:09 | All you need to do is provide X and Y
coordinates for the beginning of the line
| | 00:13 | and the end of the line.
| | 00:14 | I'll show you how it can work here.
| | 00:15 | I'll also show you how you can change
the colors and the sizes of the lines and
| | 00:20 | how the drawing order can affect a drawing.
| | 00:22 | The first thing I'm going to do is I'm
going to add a comment to give the name
| | 00:27 | of this particular file, you'll
see the name up there on the tab.
| | 00:30 | I do the two slashes (//) Ex03_03,
then I'm going to Save it again.
| | 00:36 | And what I'm going to do is I'm going to do
my display window, that is 600 x 200 pixels.
| | 00:41 | As that will create the blank window,
you can see what it looks like, right there.
| | 00:46 | I'm also going to turn on anti-aliasing,
always a good idea. Truthfully,
| | 00:53 | I have to admit I wish this were on by
default and I'm also going to change the
| | 00:57 | color of the background of the drawing.
| | 00:58 | I am going to be using the hex
code that I have for this particular
| | 01:04 | background, it's a mediumish gray, I
put pound (#) sign to indicate that I'm
| | 01:08 | using the hex code.
| | 01:09 | Again, that's an abbreviated version
of the 24-bit, Red, Green, Blue color
| | 01:14 | system, 8-bits for each color.
| | 01:17 | This particular color I'm going to be
using is 9F9694, and then I do the closing
| | 01:25 | parenthesis and semicolon (;)
| | 01:26 | to indicate that I'm done with the command.
| | 01:27 | Then what I'm going to do is draw
some lines, and I want the lines to be
| | 01:32 | a different color from the background.
And lines don't have a Fill, because
| | 01:35 | they're solid objects, but they do have a
Stroke that indicates the color of the line.
| | 01:41 | In this one I'm going to be using a
dark Red which is 791F33, and then I start
| | 01:50 | providing the coordinates for each of my lines.
| | 01:52 | What I'm going to do is I simply type
line, then in parentheses you give the X
| | 01:57 | and the Y coordinates for one end and
the X and Y coordinates for the other one,
| | 02:01 | so I go like this, 100, 50.
| | 02:04 | So the one end of the line will be 100
pixels over, 50 pixels down, 100 and then
| | 02:13 | 150, then I close and if I just hit Run,
Ctrl+R on a PC, Cmd+R on a Mac.
| | 02:19 | You'll see my first line drawn right there.
| | 02:21 | Now there is one other thing I
want to make that line a lot thicker.
| | 02:26 | So underneath the Stroke, I'm going
to add strokeWeight with the capital W,
| | 02:32 | capitalization matters here, and I'm
going to make these 8 pixels thick.
| | 02:38 | So now when I press Run, I
have a much thicker line there.
| | 02:42 | Okay, then I'm going to
make several other lines.
| | 02:44 | Now I'm going to copy this command and
then I'll modify it, and what I'm going
| | 02:54 | to do is I'm going to have the same
starting point for each one of these, but
| | 02:58 | I'm going to gradually move over the
bottom lines, and then I'm going to have
| | 03:04 | another series of lines and
I fan out in a different way.
| | 03:07 | So I'm going to go start at 200, 300,
400 and then I'll have their other end
| | 03:16 | where they all meet, it'll be 500 and
I'll press Save, and now when I run it,
| | 03:25 | I get two sets of fanning lines.
| | 03:26 | Now what's interesting about this is
there is a real optical illusion here,
| | 03:30 | where these things do not appear to be
lined up, but if you look back at the
| | 03:34 | code, you see that they do have the
same coordinates all the way through.
| | 03:37 | An interesting way to demonstrate this
is to add reference lines through them,
| | 03:41 | so I'm going to add two more lines,
horizontal lines, one at the top and one at
| | 03:45 | the bottom to show that these are in
fact parallel, I'll close the line.
| | 03:49 | Now drawing order here matters, I
actually want my reference lines to be
| | 03:53 | underneath these, so in fact, I need
to put those earlier in the command and
| | 03:57 | then these are the ones that
will be drawn on top of them.
| | 04:00 | So I'm going to come back up here and
I want them to be a different color, so
| | 04:05 | I'll go back to Stroke, they
also have their own little hex code.
| | 04:08 | Let's see here, E2E1DC, and then
they're going to be lighter weight,
| | 04:16 | so I'm going to put strokeWeight, make
these 2 pixels, then I put it in the
| | 04:23 | coordinates for these lines.
| | 04:26 | They start at the same starting point,
as the first set of lines, and they
| | 04:31 | just go straight across at the same
height and then I draw another line that's
| | 04:37 | at the bottom, it starts at 100, goes
down to 150, then to 500 and 150 there.
| | 04:43 | I Save the sketch and press Run.
| | 04:47 | And now you actually have some
verification that all these points are in fact at
| | 04:52 | the same level of each other, despite
the overwhelming illusion of curvature.
| | 04:57 | So, this is a quick sketch made with
these second of the primitive shapes in
| | 05:01 | Processing, just straight lines and
an idea some of the things you can do
| | Collapse this transcript |
| Drawing ellipses and circles| 00:00 | The third primitive shape that we're
going to deal with in Processing is
| | 00:03 | circles, or more properly ellipses,
because, Processing does not have a built
| | 00:07 | in circle function.
| | 00:09 | Instead, if you want a circle all you
need to do is draw an ellipse that has the
| | 00:13 | same height and width.
| | 00:14 | But let's show you some of the things that we
can do with these basic shapes in Processing.
| | 00:19 | The first thing I'm going to do, like
all the others, is I'm going to put the
| | 00:23 | name of the file as a comment at the top.
| | 00:25 | I'll Save the file by hitting Ctrl+
S on the PC or Cmd+S on the Mac.
| | 00:30 | Then I'm going to put in the size of the window.
| | 00:33 | Like the others, I'm going to use a 600
x 200 window, an arbitrary choice, the
| | 00:37 | one that I'm using for this course.
| | 00:39 | I'm going to turn on anti-
aliasing to smooth in the shapes.
| | 00:43 | Then I'm going to put in a background color.
| | 00:46 | I'm using hex codes from palettes
that I have developed elsewhere.
| | 00:52 | This particular one is 678C8B and be a teal color,
in fact, I can Run it and there you see.
| | 01:03 | Now, what I'm going to do is
I'm going to draw my ellipses.
| | 01:08 | Now, this is the first shape that we're
going to do, first primitive shape that
| | 01:12 | has a border that is separate from
the inside, because points and lines
| | 01:15 | theoretically have no internal
components, at least internal colors.
| | 01:19 | So, if I simply draw an ellipse, the
command is ellipse, remember if I want a
| | 01:24 | circle, I just make the
height and the width the same.
| | 01:27 | First, I need to position it, and
what I've done is I put the center of the
| | 01:33 | ellipse 100 pixels over, 100 pixels down.
| | 01:37 | Then I'm going to make it 150 pixels
wide and just for fun, I'm going to make it
| | 01:41 | 100 pixels tall, so it
actually is going to be an ellipse.
| | 01:44 | If I press Run, what you see is the
default, at white Fill with a black Outline.
| | 01:49 | Now, in this particular sketch, I don't
want the outlines, and the way you get
| | 01:53 | rid of those is by the Stroke command.
| | 01:56 | And actually, now if I want to get rid
of this stroke entirely, instead of just
| | 02:00 | changing its color, there is a
special command for that, it's noStroke.
| | 02:04 | Please notice the BumpyCaps, where I have
to have a capital S in the middle of this.
| | 02:08 | And then because it's a function, I do
need the open and closing parenthesis ()
| | 02:12 | and a semicolon (;).
| | 02:13 | Now in this case, I also want the center
of the ellipse to not be at the default white,
| | 02:17 | I'm going to use a different
color from the palette that I put together.
| | 02:21 | So, I type in the fill command, I'm
using the hex code again, this one is
| | 02:25 | 8FA89B, in parenthesis
with semicolon at the end (;).
| | 02:31 | And actually, if I just Cmd+R right now,
you can see that's really how it looks like.
| | 02:36 | There's a slightly lighter
ellipse on the background.
| | 02:38 | I'm going to do one other thing though,
because, you also have the option of
| | 02:42 | making your shapes transparent
through the addition of another parameter in
| | 02:47 | these, it is called the Alpha.
| | 02:48 | And it starts with 0, which
means it's completely see through;
| | 02:53 | you can't see it all up to 255,
which means it is completely opaque.
| | 02:57 | In this case, I'm going to choose a
mostly opaque value of 200, which means you
| | 03:02 | will actually see some of the
background through it, so it's going to be a
| | 03:06 | slightly different color
than what it was before.
| | 03:08 | Then I'm going to draw a few other ellipses.
| | 03:10 | I'll just copy this text and
make a few changes to these.
| | 03:18 | I'm going to be using
different colors for each one of them.
| | 03:20 | I'm also going to change the
coordinates for each one of these and move them
| | 03:30 | over to just 100 pixels each.
| | 03:34 | Otherwise, they all stay at the same Y
level, 100 pixels down, and they'll have
| | 03:38 | the same height and width.
| | 03:41 | So, I Save it and Run the sketch.
| | 03:44 | And, now we have four overlapping ellipses.
| | 03:46 | You can see that they are slightly
transparent, you can see through each of them.
| | 03:49 | Now, there is one interesting thing I
mentioned earlier; all of these were drawn
| | 03:53 | from their center coordinates, that's
the first two coordinates I give in the
| | 03:56 | ellipse command, are the X and
the Y for the center of the ellipse.
| | 04:00 | There are other ways of placing the ellipse.
| | 04:02 | If for instance, you had a situation
where you wanted to place it by the top
| | 04:06 | left corner, if you drew a bounding box
around the ellipse, you could do that as well.
| | 04:10 | Let me show you how that works.
| | 04:13 | I'm going to come down here and I'm
going to type in ellipseMode and that means
| | 04:19 | how it is positioned.
| | 04:21 | And I put in parenthesis now, I have to
put this one in all caps and put CORNER;
| | 04:27 | and then I'm going to put in the Fill
again for another ellipse and then I'll
| | 04:32 | put the coordinates.
| | 04:33 | But, this time I'm drawing it from
the top left of the bounding box.
| | 04:41 | And this one, I'm going to make circular.
| | 04:43 | I'll Save it all and press Run.
| | 04:45 | Now, you can see a couple
of interesting things here.
| | 04:48 | Number one, it is circular.
| | 04:50 | Number two, it goes off of the display window.
| | 04:53 | You can give coordinates that
are completely off the window.
| | 04:57 | Processing will still draw
them, you just won't see them.
| | 05:00 | Similarly, you have the option of
drawing a display window that's much bigger
| | 05:04 | than your screen, again Processing will
do it, you just won't be able to see it.
| | 05:08 | So you do need to be careful about how
you position things, because it will go
| | 05:12 | ahead and do it, even if
theoretically it wouldn't be visible.
| | 05:15 | Anyhow, this is the third of the
primitive shapes that we're doing with
| | 05:20 | Processing, circles or ellipses
which can also be drawn as circles.
| | Collapse this transcript |
| Drawing arcs| 00:00 | The next primitive shape that we're
going to cover in Processing is closely
| | 00:04 | related to the circles and ellipses that we
just did, it's arcs or sections of circles.
| | 00:10 | The procedure for doing arcs is very
similar to the circles, except we have two
| | 00:13 | extra commands that specify the
beginning and the end of the arc.
| | 00:17 | It can get a tiny bit complicated,
because of the way this is done, but we will
| | 00:21 | walk you through several different
ways of accomplishing this.
| | 00:23 | So, the first thing I'm going to do is
I'm going to put a comment with the name
| | 00:28 | of this particular sketch.
| | 00:31 | And then I'm going to create a window that is
600 x 200 pixels and I'll turn on anti-aliasing.
| | 00:39 | And then I'm going to set a strokeWeight
of 5 pixels to use throughout this sketch.
| | 00:48 | Now, the general form for the arc
command goes like this, it's arc and then in
| | 00:56 | parenthesis you have the x and the y
coordinates for the center of the arc.
| | 01:01 | Then you have the width and the height and
then you have the start and the stop of the arc.
| | 01:09 | Now, the tricky thing about the start
and the stop is that they are measured in
| | 01:13 | the radians, not degrees, but, in
radians and they also start at
| | 01:18 | 3 o'clock on the circle.
| | 01:19 | It is possible to convert
from degrees to radians.
| | 01:22 | I'll show you how to do that.
| | 01:23 | But, truthfully, this is a something that
you can get used to in a little bit of time.
| | 01:28 | I'm going to start by
drawing a quarter of an arc.
| | 01:31 | All I do is arc and then put
100 pixels over 100 pixels down.
| | 01:36 | I'll make it 75 pixels tall, 75 pixels wide.
| | 01:41 | And then I'm going to start it at 0,
which is right at 3 o'clock and then it
| | 01:46 | goes clockwise around.
| | 01:48 | And now, I'm going to do
just a quarter of an arc.
| | 01:51 | Now, if you remember any of your maths
classes, you may remember that a circle
| | 01:55 | is two times pi, to go all the way
around the circumference of a circle.
| | 01:59 | So, half a circle is pi, and a
quarter of a circle, 90 degrees, is one half of pi.
| | 02:07 | Now pi is a built-in function or
it's a built-in variable in Processing.
| | 02:12 | So, you can just write pi and if you
want to, you can divide it by 2 like
| | 02:17 | that or you could multiply it times 0.5,
or there's even a built-in one that
| | 02:25 | is called - I've got to do it in all capitals,
HALF PI, that's another way of doing that.
| | 02:31 | Now, I personally like to do the
multiplication, because then it makes it
| | 02:38 | clear what I'm doing, especially if I
have several that I'm working on, so, okay.
| | 02:43 | So, I have got six things here in this function.
| | 02:45 | First, I say arc, the name of the function.
| | 02:47 | Then the x and the y coordinates for the
center of the arc that I will be drawing.
| | 02:52 | Then I have the width and the height of
the arc, and then I have this start and
| | 02:56 | the stop of the arc.
| | 02:58 | Starting at 3 o'clock and measured in
radians and going clockwise to the end,
| | 03:03 | and so, when I do that I can just
hit Run and there's my quarter arc.
| | 03:09 | It starts at 3 o'clock, it goes
clockwise down to 6 o'clock and it stops.
| | 03:15 | Now I'm going to do a few more arcs, just to
show how this command can work a little better.
| | 03:20 | You saw for instance that the arc
had a fill, let me bring it back up.
| | 03:24 | The arc has a white fill, that's by default.
| | 03:27 | But, most of the time when you do an arc,
you don't want a fill, and so the easy
| | 03:32 | way to get rid of that is with a
special function that is just called noFill.
| | 03:36 | Let's do with lowercase, but with a
capital F, the bumpy caps, and then the open
| | 03:41 | and close parenthesis (), because it's
a function, it needs to have a place for
| | 03:44 | arguments, but there aren't any
arguments in this particular one.
| | 03:47 | And then we close that with a semicolon (;).
| | 03:49 | Now I'm going to specify another arc.
| | 03:52 | I am going to move this one over, 233
pixels from the left side, down 100 again.
| | 03:58 | It will also be 75 wide and 75 tall.
| | 04:02 | This one I will also start at 0, at 3 o'clock.
| | 04:05 | But, this one I'll wrap half way around.
| | 04:08 | So, I'll go to 9 o'clock and that is pi,
halfway through, close the parenthesis,
| | 04:14 | put the semicolon, Save it and Run.
| | 04:17 | And now, I have my half arc, it goes
halfway from 3 o'clock to 9 o'clock.
| | 04:21 | And this one has noFill;
| | 04:22 | you just see the background right through it.
| | 04:24 | Now, let me show you two other things
you can do, maybe you want the Fill and
| | 04:29 | you don't want the Outline, in that
case we simply flip it around another way.
| | 04:34 | What I'm going to do now is I'm
going to specify a color for the Fill.
| | 04:37 | So, I'm going to type in fill and
then I'll make it a nice deep sky blue.
| | 04:42 | I'll use 0, 191, 255.
| | 04:45 | I'm not using the hex;
| | 04:46 | I'm just using the RGB on the 0 to 255 scale.
| | 04:50 | So, there's my sky blue color.
| | 04:52 | Then I'm going to turn off the
outline by going noStroke, and then I'll put
| | 04:58 | the arc command in.
| | 04:59 | I'm going to move it over a little
further to 367, same height, 100 pixels down,
| | 05:08 | same size, 75 pixels for the
width and height of the arc.
| | 05:11 | I'll again start it at 0 at 3 o'clock.
| | 05:14 | And then this one I'm going to show
you how you can measure it in degrees.
| | 05:18 | I want it to go all the way around
up to 12 o'clock, that's 270 degrees.
| | 05:22 | And the way you can work with degrees
here is you use a function called radians.
| | 05:27 | And it's lower case, and then in
parenthesis you put the degrees.
| | 05:30 | And so what this does is it takes that
degrees and then turns it into radians.
| | 05:34 | It'll turn into 1.5 radians for us.
| | 05:36 | And then I'm going to put another
parenthesis, because the first parenthesis
| | 05:40 | closes the degrees for the radians.
| | 05:42 | One of the things is if you move the
cursor, you can see where the adjoining
| | 05:46 | parentheses or bracket is.
| | 05:47 | So, I need 2 parentheses there at the end
and I put my semicolon, I Save it and I Run.
| | 05:55 | And now I have a three
quarter arc with no outline.
| | 05:58 | And then let's just do one more, this
time I'll set the Stroke back to 0 and
| | 06:06 | leaving the Fill in though, if you don't
change an attribute, it just carries down.
| | 06:11 | So, the Fill will be in this one
without me having to specify it again.
| | 06:14 | And I'm going to do one more arc, 500
pixels over 100 down like the others, 75
| | 06:20 | and 75, and this one I'm going to do
little differently, because I'm going to
| | 06:25 | start it at 0, but, this time
I'm going to go all the way around.
| | 06:29 | Just for fun I'll use the built-in
constant 2 pi and I Save it and I Run it.
| | 06:37 | Now, you see it, because, I went all
the way around it would have been easier
| | 06:40 | for me to just use a circle, but I
wanted you to see that the arc function can
| | 06:44 | go all the way around to whatever
degree or whatever angle you want it to.
| | 06:48 | And so that is the end of the arcs
and that part of the primitive function
| | 06:52 | for Processing.
| | Collapse this transcript |
| Drawing rectangles and squares| 00:00 | The next primitive shape that we're
going to work with in Processing is squares
| | 00:05 | or more appropriately, rectangles, because
just as with circles, Processing doesn't
| | 00:10 | have a built-in function for squares,
when it is as rectangles where you draw
| | 00:13 | the same width and height, but let's
take a look at this one, this function is
| | 00:18 | pretty easy to deal with.
| | 00:19 | The first thing I'm going to do, I'm
going to create a comment with my file name
| | 00:25 | then I'll set the size of the window,
turn on anti-aliasing then I'll put a
| | 00:31 | background, it'll be a sort
of a light yellowish color.
| | 00:36 | I'm going to use the hex codes again
and when I save that you can see
| | 00:43 | there's our background.
| | 00:44 | Now I'm going to start drawing some
squares and the way I do this is with rect
| | 00:52 | for rectangle and it draws it
from the top left corner.
| | 00:56 | So what I need to do is I need to set
the coordinates for the top left, in this
| | 01:01 | case I'll use 60 pixels over, 60 pixels
down and then you specify the width and
| | 01:05 | the height of the rectangle,
I'll do it 80 and 80.
| | 01:10 | Now just so you know, there are
choices for this, this is what called the
| | 01:14 | rectMode, in fact, I can
just type it out right here.
| | 01:16 | This is rectMode CORNER, I want to just
mention that that is the default, so I
| | 01:25 | don't actually have to type it, but it
means it places it by the top left corner
| | 01:29 | and you specify the width and height.
| | 01:31 | The other options are to specify the
center point and the width and the height
| | 01:34 | or to specify the coordinates for the
top left corner and the bottom right
| | 01:37 | corner and I'll show you
both of those in just a moment.
| | 01:40 | But right now I'm just
going to draw this rectangle.
| | 01:43 | I hit Run and there's my basic
rectangle with a white fill black border, and
| | 01:48 | I actually like to make the boarder a
little bit thicker, so I'm going to close
| | 01:52 | that and I'm going to come back here
and put in strokeWeight, all lowercase,
| | 01:57 | except for the capital W, I need to do
bumpy caps, because that's the way the
| | 02:01 | functions worked in here
and I'll make it 5 pixels.
| | 02:04 | Now when I Save it and Run it, it's a
little bit thicker that works a little better
| | 02:08 | for me, so I'm going to close out.
| | 02:10 | Now I'm going to draw two other rectangles.
To show you that there are different
| | 02:13 | ways to draw these, I'm going to use
rectMode CENTER, and again, sometimes it's
| | 02:21 | easier to position things by the center
and makes it also consistent with what
| | 02:24 | happens with circles and
some of the other shapes.
| | 02:26 | Sometimes it's easier to
position it by the top left;
| | 02:29 | it depends on the situation you're working with.
| | 02:31 | So, this time I do a rect and then I
have to specify that I'm going 300 pixels
| | 02:37 | over and I'm going to 100 pixels down.
| | 02:39 | Now notice in the one before I was 60
pixels down with an 80 pixel box, so
| | 02:46 | halfway through that will actually be a hundred.
| | 02:48 | So you'll see that these two line up
actually, and I'll make this one 80 pixels
| | 02:53 | wide and 80 pixels tall and I'm also
going to just a little variety, I'm going
| | 02:59 | to turn off the outlines with noStroke
and I'll put in a fill using the hex code
| | 03:08 | CC5C54, it's a sort of a red.
| | 03:14 | I'll Save that and Run it and now you
can see that there are aligned, even
| | 03:18 | though I specified very different
dimensions, because the first one is
| | 03:21 | positioned by the top left corner, the
second one positioned by it's center point,
| | 03:25 | but you do a little math so
you can get them to line up.
| | 03:28 | Then I'm going to do one more to show
you the third way of drawing a rectangle.
| | 03:32 | This one is rectMode CORNERS, please
note it has an S, it make it different
| | 03:38 | from the CORNER above, because what I'm
specify now is coordinates for two of the corners.
| | 03:43 | Now I'll change this one to make it a
look a little bit different, so I'll give
| | 03:47 | it an outline, use my hex codes, it'll be a
slightly lighter orangish color and I'm
| | 03:55 | going to turn off the fill.
| | 03:56 | Then I'm going to position the rectangle.
| | 04:01 | This time I go to the top left corner,
so that's 460 and 60, so you can see they
| | 04:08 | are parallel with the very first one I did.
| | 04:10 | But now instead of specifying and the
width and the height of the rectangle,
| | 04:14 | I simply go to the coordinates for the
bottom right corner in this case 540 and
| | 04:19 | 140, 540 pixels over from the
top left, and then 140 pixels down.
| | 04:24 | I Save it and Run and now you see the
sequence of three squares all drawn with
| | 04:30 | the rectangle function and positioned
in different ways, the left one using the
| | 04:34 | default corner, which I give the
coordinates for the top left coordinate, and
| | 04:38 | then I give the width and height.
| | 04:40 | The middle one is using center, where I
specify the X and Y coordinates for the
| | 04:45 | center of the box, along
with its width and height.
| | 04:47 | And the one on the right positioned
using CORNERS, where I simply give the X and
| | 04:51 | Y coordinates for the top left corner
and the bottom right corner, and that's
| | 04:55 | it, for drawing rectangles
and squares in Processing.
| | Collapse this transcript |
| Drawing quadrangles| 00:00 | The next primitive shape that we're
going to use in Processing, not a very
| | 00:04 | common one, is the quadrangle, and the
idea here as you can draw four-sided
| | 00:08 | shapes that are not
rectangle or squares, for instance.
| | 00:11 | In this example I'll use diamonds.
| | 00:15 | The first thing I'm going to do is put
a comment with the name of this file and
| | 00:20 | then I'm going to put the size of the
window, turn on anti-aliasing, then I'm
| | 00:27 | going to give it a nice dark blue
background, I'm going to use hex codes for
| | 00:33 | this, and let's Save it and make sure
that gets where we want, there we go.
| | 00:38 | Also, I'm going to thicken up the
outlines of these things by taking
| | 00:44 | strokeWeight and change it into 5 pixels.
| | 00:48 | Then I'm going to start drawing my
diamonds with a quadrangle function.
| | 00:52 | Now there are a lot of arguments to it,
but it's very simple, all it is
| | 00:56 | is four pairs of X and Y coordinates, one pair
for each point or each corner on the quadrangle.
| | 01:03 | The function is called quad and then you
start putting in the X and Y coordinates.
| | 01:07 | In this one, I'm giving 150 and 50, 200
and 100, the third point will be at 150
| | 01:14 | and 150 and the last point will be at
100 and 100, and that's over to the right
| | 01:21 | and then down for each one,
finish with the semicolon (;)
| | 01:24 | and press Run and there we have our
initial quadrangle, the diamond, just a
| | 01:29 | short square one with the
default white fill and black border.
| | 01:33 | Now just for fun, I'm going to draw two
other quadrangles, unlike ellipses and
| | 01:39 | rectangles we don't have different
modes for positioning these, because you
| | 01:42 | simply have to give the coordinates
for each corner every time, but I can
| | 01:47 | always make them look different.
| | 01:48 | The second one I'm going to turnoff the
outline with noStroke and I'm going to
| | 01:55 | change the color of the fill to a
light blue A3DOC1, and then I call the quad
| | 02:04 | function and put the coordinates,
and again, the first point will be 300
| | 02:08 | pixels over and 50 down.
| | 02:10 | The next one will be 350 over, 100 down,
300, 150, 250, 100, Save and press Run
| | 02:22 | and there's my second diamond.
| | 02:24 | This time with noStroke no outline
and it has a different color Fill.
| | 02:29 | I'm going to draw the third one, and
just for symmetry sake this one will have a
| | 02:35 | stroke, but no fill.
| | 02:37 | So I go back, I call the stroke
function again, but I don't want to use the
| | 02:42 | default, I'm going to call different
color, which actually is very light one
| | 02:45 | FDF6DD and then I'm going to turn off this
fill, with noFill, call the quadrangle
| | 02:54 | function that's quad, and then give it to
four sets of X, Y coordinates for each
| | 02:58 | of the points, 450, 500 and 100, 450 and
150, and then 400 and 100, Save and Run
| | 03:09 | and there I have my third quadrangle.
| | 03:12 | Not a very common shape, but it is
one of the built-in primitive shapes in
| | 03:16 | Processing and I can imagine there are
situations where being able to draw a
| | 03:20 | diamond or a trapezoid would be useful,
it's nice to have that in our toolbox
| | 03:24 | in Processing.
| | Collapse this transcript |
| Drawing triangles| 00:00 | The last primitive shape that we're
going to use in Processing is a triangle.
| | 00:04 | And what you see is that the
triangle function is very similar to the
| | 00:08 | quadrangle we just did.
| | 00:09 | All it is, is that you specify three
sets of X and Y coordinates, one pair for
| | 00:15 | each of the three corners on the triangle.
| | 00:16 | So the first thing I'm going to do is
add the name of my file in a comment,
| | 00:21 | and I'll set the size of the window,
I'm doing 600 wide 200 tall, turn on the
| | 00:28 | anti-aliasing and then
change the background color.
| | 00:32 | I'm actually going to use a
dark gray color for this one.
| | 00:35 | I am using hexadecimal code, you could
also use numbers on the 0 to 255 scales
| | 00:43 | for these, but this is just a
more compact way of doing it.
| | 00:46 | And then I'm going to give a 5 pixel
width to the borders by using the
| | 00:52 | strokeWeight function.
| | 00:55 | And then all I need to do is call
triangle, this one has no abbreviation,
| | 00:59 | it's just triangle and I put in
three pairs of X, Y coordinates.
| | 01:02 | So in this case I'll go 150 and 50, 200
and 150, 100, and 150, Save it and Run.
| | 01:12 | And there is my default triangle with the
white fill and the black border. All right.
| | 01:18 | Then, again like with quadrangles,
there are no special modes for doing this,
| | 01:23 | you always have to specify the
three pairs of X, Y coordinates.
| | 01:26 | But you can change strokeWeights, you can
change fills and border colors, and so on.
| | 01:32 | So this one, I'm going to turn off the
border using noStroke and then I'm going
| | 01:37 | to change the fill, I can use
the hex code here again.
| | 01:40 | It is just going to be 74AD92, it's
a greenish color and then I call the
| | 01:47 | triangle function, 250 and 50, 300 and
150, 350 and 50, this will make at upside
| | 01:57 | down triangle compared to the other one.
| | 01:59 | Save it and Run it and there we go.
| | 02:01 | And then, again, to follow along the
pattern we had before, I'll just make a
| | 02:07 | third one, this time with noFill,
but with a different border.
| | 02:11 | So I'm going to put on stroke, so this
will draw a border, and I'm going to make
| | 02:16 | it sort of an orangish color by using
F07F47, those are the RGB, close that one
| | 02:25 | and then I'm going to turn off the fill,
then call the triangle function,
| | 02:31 | and put in the 3 coordinates 450
and 50, 500 and 150, 400 and 150.
| | 02:38 | Let's Save it and then Run it.
| | 02:41 | Now I have my three triangles, so again,
this is the final primitive shape that
| | 02:47 | we will be using in Processing, but
you can see how it would be useful as a
| | 02:51 | building block in more
elaborate and larger scale drawings.
| | Collapse this transcript |
| Drawing polygons| 00:00 | The next step in Processing is to
learn how to draw polygons or irregular
| | 00:05 | shapes, this is still with flat sides, but
you can have however many corners you want.
| | 00:10 | And you can have whatever
relationship between them that you want.
| | 00:12 | This one is also a little bit different,
because it has several different lines of code.
| | 00:17 | And let me show you how this works
by creating a new sketch right here.
| | 00:20 | What I'm going to do is begin by
putting in the name of the sketch.
| | 00:24 | Now I will put in the size of the
window, turn on anti-aliasing make things
| | 00:31 | smoother, I'll give it a background color.
| | 00:35 | I'm going to use a hex code and that's
going to be D9C6B0 kind of a tan color,
| | 00:44 | there we go right there.
| | 00:46 | Then I am going to put in a
strokeWeight for the borders of these of
| | 00:52 | 5 pixels, Save all that.
| | 00:54 | Now to be able to draw an
irregular polygon, you need several lines.
| | 01:00 | The first thing it need to do is you
have to have a command that says beginShape
| | 01:04 | and that's all there is to that one.
| | 01:10 | Then what you do is you have to give a
separate line for each of the corners or
| | 01:14 | vertices in this, so you type vertex
and you gave the x and y coordinates for
| | 01:19 | each of the vertices.
| | 01:20 | So in this case, I'm going to go 200
and 150, then just keep typing, I'm going
| | 01:28 | to draw a hexagon, so I've six of these.
| | 01:32 | 150 and 125 and 150 and 75, so
that's number five and then the last one,
| | 01:41 | let's say 250 and 125.
| | 01:47 | Then I began with beginShape, I
need to finish it off with endShape,
| | 01:53 | so Processing knows I'm done adding corners.
| | 01:57 | And when I do that I can Save it and
I can Run it and there you have it.
| | 02:02 | Now you notice a couple of interesting
things, aside from the default white fill
| | 02:05 | and black border, you see also that at
the bottom right, I don't have a black
| | 02:09 | line, there's an open space there.
| | 02:11 | That's because Processing doesn't close
polygons unless you specifically ask it to.
| | 02:17 | So let me show you two things.
| | 02:18 | Number one, I actually, I am going
to change the color of that by going
| | 02:22 | to stroke, 314650;
| | 02:28 | And all you have to do is come down to
the bottom to endShape and type in, in
| | 02:34 | all capitals, the word CLOSE and that
tells it that they you want to go back
| | 02:40 | to the first point.
| | 02:41 | Press Save and Run and
now I have a closed shape.
| | 02:44 | Now I'm just going to add one more
shape, because I can, and to make my life
| | 02:49 | easy, I'm going to copy
this and paste it down here.
| | 02:54 | And it changed the color a little bit
to 45718C and then I'm just moving
| | 03:01 | everything over about 200 pixels.
| | 03:04 | So I go to 400, to 350, to
350, to 400, 450, and 450.
| | 03:13 | This one will also be closed.
| | 03:15 | I Save it and I Run it.
| | 03:17 | And now I have my two hexagons, if I
wanted to make a shape with more sides, say
| | 03:22 | for instance 20 sides or
30 sides, I could do that.
| | 03:26 | I would just need to have one line of
code to give the x and y coordinates for
| | 03:31 | every corner in the shape.
| | 03:33 | And that's how we draw a polygon in Processing.
| | Collapse this transcript |
| Drawing simple curves| 00:00 | In this next movie we're going to show
you how to draw curves using a series of
| | 00:05 | vertices in Processing this actually
allows for some really interesting effects
| | 00:09 | and drawings and it be pretty useful I think.
| | 00:13 | The way this one begins is, we set the
drawing up and by doing what I've done in
| | 00:18 | the other ones, I have first put the
name of the drawing and I put the size of
| | 00:22 | the window turn on the anti-aliasing,
I'm going to set a background color,
| | 00:28 | a rather neutral one C3CCC8.
| | 00:32 | And if I just check that,
there we go a little gray green.
| | 00:38 | Then I'll put in a strokeWeight of 5 pixels,
so that make lines and borders 5 pixels thick.
| | 00:47 | Then what I do is I'm going to color
the strokes; I'm going to draw three
| | 00:51 | different curves on this one.
| | 00:52 | The first one is going to make a
dark brown color and here is how the
| | 00:59 | curve function works.
| | 01:00 | What it is, is it has four pairs of coordinates.
| | 01:05 | Now the first two are the coordinates
for what's called the starting control point
| | 01:09 | and this is something that doesn't draw,
it has to do with sort of a lever
| | 01:14 | action on the curve.
| | 01:15 | The second pair of coordinates are for
the start of the curve proper; the third
| | 01:20 | pair are for the finish of the curve; and
the fourth pair are for the nonprinting
| | 01:26 | invisible control point,
again sort of a lever function.
| | 01:29 | And you'll see how these things work.
| | 01:31 | So I'm going to call it curve and then I'm
going to type in four sets of coordinates.
| | 01:35 | The first one, the control
point would be a 100 and 300.
| | 01:38 | Then I'll do the beginning of the curve
at 100 and 100, then I'll do the end of
| | 01:43 | the curve at 200 and 100 and then the
finishing control point will be at 200 and 300.
| | 01:49 | So eight numbers to get
four pairs of coordinates.
| | 01:52 | Again, two represent the beginning and
the end of the curve and the other two
| | 01:56 | represent the control points which have
an influence on the shape of the curve.
| | 02:00 | In fact if I save that and run it,
you'll see my curve right there just a
| | 02:06 | little upward curve.
| | 02:08 | You'll also see that it
has the default white fill.
| | 02:11 | Again, like arcs, Processing hesitancy
to feel things in even when you didn't
| | 02:15 | expect it to and so you have to
deliberately turn off the fill in the curve
| | 02:21 | to get rid of that.
| | 02:22 | The way you do that is by
coming down and typing in noFill.
| | 02:28 | So we'll make another curve now and
this I will just make a different color,
| | 02:33 | I'll call the stroke and B9961C.
| | 02:34 | And then what I'm also going to do
is change something called the curve
| | 02:43 | tightness parameter and this is
something that lets you really do some
| | 02:47 | interesting manipulations of the
curve separate from the control points.
| | 02:52 | This is really one that works best to
just play around with it for a while and
| | 02:55 | see how it affects the
curves that you're making.
| | 02:58 | So I'm giving this one a value of
positive 3 that can be positive or negative
| | 03:02 | usually not terribly far from the zero
then I'm going to draw the curve; curve
| | 03:07 | 250, 300, 250, 100, 350, 100, 350, 300.
And so what you can see is that the
| | 03:19 | coordinates here are the same as the
first curve except I've shifted them to
| | 03:24 | the right a 150 pixels, but you'll see
because of the curve tightness it gets a
| | 03:29 | very different result.
| | 03:31 | So I'm going to Save and Run and in
fact you see it's flipped around in the
| | 03:35 | other direction and it's starting to
curve around itself making an oval.
| | 03:39 | And then I'll make one more curve
with a different tightness parameter.
| | 03:42 | I'll just copy all of this;
| | 03:46 | give this one a different
color to distinguish it, to 475D1C.
| | 03:51 | And instead of having a curve tightness of
positive 3 and I'll give this one a negative 3.
| | 03:57 | Now the default tightness is actually,
I believe is one, and so you'll see it's
| | 04:02 | not symmetrical around zero even
though I have positive 3, negative 3 the
| | 04:05 | effects are going to be rather different.
| | 04:06 | And this one I'm just
going to move over another 150.
| | 04:10 | So I just take the Xes on each of
these and I make them this one to 400, 400,
| | 04:14 | this one will be 500 and so this one you see.
| | 04:21 | So again the coordinates are the same
just shift it over 150 pixels to the right
| | 04:26 | I'm going to Save it and
Run it and look what we got.
| | 04:29 | Now it's a dramatically different shape,
you see for instance that it goes in
| | 04:33 | the opposite direction the sides of it
are nearly straight with a very strong
| | 04:36 | peak as opposed to the bowl shaped
one that we have in the middle and the
| | 04:40 | default shape meaning default for using
the X and Y coordinates of the endpoint
| | 04:46 | and the control points.
| | 04:47 | And so a lot of interesting things you
can do with curves and we will explore
| | 04:51 | some of possibilities later in this course.
| | Collapse this transcript |
| Drawing complex curves| 00:00 | In this movie we're going to learn how
to draw curves with an indefinite number
| | 00:05 | of points defining them and you see you
can get some very complex sometimes
| | 00:10 | amusing, but always interesting
results out of this one.
| | 00:13 | Now I do need to mention that what
we're drawing are not Bezier curves, that's a
| | 00:17 | whole separate function, and we'll get
to it in the next movie, but you do have
| | 00:21 | some interesting things
you can do with this one.
| | 00:23 | I'll start by naming the file with the comment,
| | 00:26 | I'm setting the size of the
window, turning on the anti-aliasing.
| | 00:32 | And then I'm going turn off the
fill if I leave the fill on it get some
| | 00:36 | unexpected results that we've seen with
some of the other once, let's put in a noFill.
| | 00:40 | And then what I'm going to do is I'm
going to draw a series of curves that all
| | 00:45 | share points, but to make it little
easier I'll draw the points first and then
| | 00:49 | draw the curves underneath them.
We already know how to draw points all
| | 00:52 | I need is the point function.
| | 00:53 | What I am going to do is I'm going to
call strokeWeight and I get that out to
| | 01:00 | about 5 pixels, I'm also going to make
this once a bright red, so what I'm going
| | 01:06 | to do is stroke and then I'll use the
RGB here, I am not going to go all the way
| | 01:13 | on that, I'm going at 200, 0, 0.
| | 01:15 | And then what I'm going to do is I'm
just going to go ahead and put point and
| | 01:19 | the coordinates for each one; I have a
series of them I'm going to get, so I'm just
| | 01:25 | going to copy and paste this
information and move each one of them over.
| | 01:34 | First one is at 100, 100, next one be at
150, 150, next one be at 250 and 50, next
| | 01:46 | one is at 300 and 10, next one will
be at 400 and 190. These by the way are
| | 01:58 | arbitrarily chosen there is so meaning
to this particular coordinates except
| | 02:01 | they're all in the window.
| | 02:02 | Last one will be 500 and 100.
| | 02:05 | All right, and if I just draw the
points there they they are, scattered around the
| | 02:10 | window I may actually make those
slightly larger for this particular exercise,
| | 02:15 | I'll take them up to an eight, there we go.
| | 02:18 | Now what I'm going to do is I'm going
to run curves that go through every one
| | 02:22 | of these points. They're going to be
open curves are not going to loop back
| | 02:25 | around this is going to be a curvy line
that goes through each one of these and
| | 02:30 | I'm going to draw few versions with some
different parameters, but let's do the first one.
| | 02:34 | I'm going to copy this information here,
because I'm going to need it again and
| | 02:39 | I want the same coordinates,
I'm going to paste it right here.
| | 02:43 | Now like we have done with some of the
other ones, because there's an arbitrary
| | 02:47 | number of points that can be included,
you need to let it know you're starting
| | 02:50 | and finishing a particular shape.
| | 02:52 | So what I'm going to do is I'm going
to come up to the top and by the way
| | 02:56 | I'm going to put this as a little
comment here this would be black curve.
| | 03:00 | And so I need to specify that is black by
putting stroke for the color and zero for black.
| | 03:05 | And then I'm going to put the strokeWeight
as 3 pixels and then I can beginShape.
| | 03:14 | So I type it, it's all lowercase
expect for the S which is a capital in shape
| | 03:19 | that makes a bumpy caps.
| | 03:20 | I have the empty parentheses to
indicate that there are no arguments in
| | 03:24 | this particular function, and then
finish with the semicolon, and then what I
| | 03:27 | do is instead of having point here
I need a whole series of arguments
| | 03:31 | called curveVertex.
| | 03:37 | So, it's like when we did polygons
you can make a polygon by adding one
| | 03:41 | vertex to another. This one, it's a
curveVertex indicates it handles it a
| | 03:46 | little bit differently.
| | 03:47 | And I'm just going to copy that
and replace each of these points.
| | 03:54 | Now an interesting thing about the
way the curveVertexes work is that they
| | 03:57 | need a starting point that separate
from the original and one way to do this,
| | 04:03 | or at least it has to be specified
separately, is you can just duplicate the
| | 04:08 | beginning and the ending.
| | 04:10 | So I'm repeating the beginning and the
ending coordinates that is one way of
| | 04:14 | specifying where it starts and stops.
| | 04:16 | And then I end with endShape.
| | 04:20 | Now I'll just put this one down here
and specify that those are the red dots.
| | 04:27 | Now I'm putting the red dots afterwards because
I want them to draw on top of the black curve.
| | 04:31 | Again, the order of drawing matters
here in terms of things that come later get
| | 04:35 | drawn on top of things that came earlier.
| | 04:37 | So I'm going to save this
and there is my default curve.
| | 04:41 | Not particularly exciting in and of
itself, but you see there's some interesting
| | 04:45 | things that you can do with it.
| | 04:47 | Now what I'm going to do right now is
I'm going to add an extra parameter to my
| | 04:51 | drawing right here under strokeWeight
I'm going to put in curve tightness, we've
| | 04:57 | seen what this can do with just a
simple curves earlier, I'm going to put in a
| | 05:03 | zero which you see doesn't really
change it and that serves as a starting point
| | 05:07 | for what we're going to do.
| | 05:09 | But now I'm going to draw all of this over
again with just changing some of the parameters.
| | 05:13 | Now the easiest way to do this for me
by the way is to just copy and paste,
| | 05:18 | so I'm going to copy all the code for the
black curve and I'm going to bring it down.
| | 05:23 | And I'm going to make a gray curve, and
so for that one I'm just going to change
| | 05:28 | the fill to 100 that's a medium gray,
I'll change maybe the strokeWeight, I'll
| | 05:34 | leave that where it is.
| | 05:35 | And the curve tightness is interesting,
well I'm going to change that to a negative 3.
| | 05:39 | Now I Save it and Run it and you can
see that we gotten a much wobblier shape,
| | 05:44 | because of that curve tightness.
| | 05:46 | I should mention that these all have
to do with something called Catmull-Rom
| | 05:49 | Spline and that's a mathematical
formula for determining the shape that the
| | 05:54 | things go through that the flatness
of each line have to do with the point
| | 05:59 | before and after it.
| | 06:00 | But let's draw one more and just to
make things a little more interesting,
| | 06:04 | I'll take the gray curve code paste
it down here, I'll draw one more,
| | 06:10 | I'll draw a white curve.
| | 06:13 | So that one need a 255, that's all the way white.
| | 06:17 | And I'm going to give that one
a curve tightness of positive 4.
| | 06:21 | Save that and Run that.
| | 06:23 | And you can see it actually loops
around backwards through each one, it gets
| | 06:26 | kind of crazy how it goes through.
| | 06:28 | There's a really fascinating thing you
can do in terms of joining elements in a
| | 06:32 | sketch using the curve feature here
and playing with the tightness factor.
| | 06:38 | Anyhow this is just another way of
connecting elements and drawing shapes and
| | 06:42 | processing one of the more interesting ones.
| | Collapse this transcript |
| Drawing Bézier curves| 00:00 | The last shape that we're going to
learn to draw is a Bezier curve which is a
| | 00:04 | very common function in computer
graphics, because it allows you get to get
| | 00:08 | nice smooth flowing lines that
are used in a lot of illustrations.
| | 00:12 | For instance, if you work with Adobe
Illustrator, you'd be doing a lot of Bezier
| | 00:15 | curves there as well.
| | 00:17 | The format of the Bezier function and
Processing is similar to what we've seen
| | 00:20 | already and that you specify what
are called anchor points, those are the
| | 00:24 | beginning and end of the curve and the
X and Y coordinates for each of those as
| | 00:29 | well as control points which are not
drawn, but influence the shape of what does
| | 00:34 | appear, so let me show you
how this works with an example.
| | 00:37 | First, I'll begin by labeling the
drawing, setting the size of the window,
| | 00:45 | turning on anti-aliasing, put in the
background color, I'm going to use a
| | 00:51 | relatively neutral color.
| | 00:52 | Let's see what we've got here,
okay, pretty neutral gray.
| | 00:58 | Then what I'm going to do.
| | 01:01 | Always, I'm going to turn off the fill,
we've seen before leaving that fill on
| | 01:04 | can get some unexpected results.
| | 01:07 | I'm going to draw two curves in
this example, so I'll call this one
| | 01:11 | The First Curve and I actually have here
The curve itself that'll make sense in the moment.
| | 01:18 | What I do here is I'm going to
change the color that it's draw in.
| | 01:22 | It is kind of a dark red and in this
case there is going to be 791F33 and
| | 01:31 | I'm going to give it a strokeWeight of 3
pixels and then the function name is bezier.
| | 01:36 | Now there is technically there's an
accent on the first E, but we don't do that
| | 01:41 | here in Processing, so don't insert
that, and then I give the coordinates,
| | 01:45 | I gave the X and Y for the first anchor
point that's the end of one end of the
| | 01:50 | curve, so this is actually drawn.
| | 01:51 | In this one, I use 150 as an X and Y
coordinates for the first anchor point,
| | 01:56 | then I give the coordinates for
the control point associated with it.
| | 01:59 | The control point is not drawn,
but it influences the shape.
| | 02:03 | This one I'll give 250 and 50, then we
do the control points, which again do not
| | 02:09 | print, don't show, for the second part
of the curve this one I'll do 100 and 150;
| | 02:16 | and then I give the coordinates for
the end of the curve which is drawn 250, 150;
| | 02:20 | and we save that and run it, I get
a nice little S curve in a dark red.
| | 02:27 | Now it can be helpful to actually see
where the control points are and the
| | 02:32 | lines associated with them, so I'm
going to add separate code to draw where
| | 02:37 | those lines would be, but normally
you wouldn't, but it's helpful for this
| | 02:41 | particular purpose.
| | 02:42 | So I'm going to add it right here under
the control points and what I'm going to
| | 02:49 | do there is I'm going to change the
color of the stroke to a much lighter color,
| | 02:53 | I am going to make them slightly
lighter in weight, so they're going to be only
| | 03:00 | 2 pixels thick and then I'm just going
to use the line function, and the first
| | 03:06 | one starts at hundred, so 100
over 50 down and 250 over, 50 down.
| | 03:14 | The second line that I'm going
to draw just moved over slightly.
| | 03:20 | All right, and now when I draw that, and
by the way I put them above the curve,
| | 03:25 | because I want them to be drawn
underneath it, so I save it and I run that and
| | 03:29 | now you can see where the control points
are and how they influence the shape of
| | 03:33 | the curve that they sort of
twist it around with a lever.
| | 03:36 | To make this clear, I'm going to now
draw a second curve and its control
| | 03:40 | points and I come back here and I'll
just copy this information, the Second Curve.
| | 03:50 | And for the Second Curve, it's
control points, I'll leave in the same
| | 03:54 | color in the same weight, they are
going to be in different places though, 350
| | 03:59 | and 75 and then at 500 and 25.
| | 04:07 | The second control line I'm going to
have at 350, 125 and then at 500 and down
| | 04:20 | at 175 then the curve I'm going to
drawn a slightly different color BA3D49,
| | 04:30 | we'll leave it at three points.
| | 04:32 | Then it's going to get a different set
of coordinates there are 350, 75, 500,
| | 04:36 | 25, 175, oh I've lost something
in there 350, 75, 525, oh there we go.
| | 04:50 | I need to have another 500, 175 in there
and then I can finish up with 350 and 125.
| | 05:04 | All right, and then I Save that and Run
that and now you see two very different
| | 05:10 | curves and it has a lot to do with the
control, you see how the control ones on
| | 05:15 | the second one are pointing in on the
same direction and they are twisting it,
| | 05:18 | arching it at in that particular direction.
| | 05:21 | And again this gives you some
interesting possibilities for drawing smooth
| | 05:24 | lines and also for being able to move
points along lines in later sketches.
| | 05:28 | And so that, the Bezier curve, is the
final shape that we're going to cover in
| | 05:32 | our introduction here and how to work
with Processing for interactive data
| | 05:36 | visualization.
| | Collapse this transcript |
|
|
4. VariablesIntroduction to variables| 00:00 | One of the most important and most
useful things that you can learn in
| | 00:04 | programming a computer is how to use variables.
| | 00:07 | A variable is something that can take
on different values at different times.
| | 00:12 | If you've had an algebra class you know
say, let x=12, x is a variable and we're
| | 00:17 | going to do exactly that here in Processing.
| | 00:19 | Now Processing takes several different
kinds of variables, and if you haven't
| | 00:23 | got done computer programming before,
there are some things you have to learn
| | 00:26 | about being rather particular when you program.
| | 00:28 | The first thing I am going to do is I
am just going to give a little comment up
| | 00:33 | here at the top that
repeats the name of the file.
| | 00:36 | It's not essential to saving it, it's just
something that I do to help you think
| | 00:39 | straight in my own mind.
| | 00:41 | The first kind of the variable that we
are going to use is what's called an int
| | 00:45 | variable, I-N-T, and that stands for Integer.
| | 00:47 | Integer is a whole number, no decimal
places, and these are what I called 32-bit
| | 00:50 | variables so they can go to (+)
or (-) two billion, approximately.
| | 00:55 | So they have got a long range,
there's a lot you can do with them.
| | 00:58 | The first step when you work with a
variable is, you need to declare the
| | 01:02 | variable, and what you do for that is
you say what that kind of variable is, the
| | 01:06 | type, this one is an int and then you give
it a name, I'm just going to call this
| | 01:11 | one x, finish with a semi colon (;)
| | 01:12 | and I have now Declared x.
| | 01:16 | The next step is to Initialize the
variable, that means to give it its initial
| | 01:20 | or starting value, and I can just go like
this x=10, and then I can just say that
| | 01:28 | I've initialized x. If I want to check
how things are going, I can do the print line,
| | 01:34 | which is going to take whatever I put
here in the middle and print it down in
| | 01:37 | the console, the black area at the bottom.
| | 01:40 | So I'm going to save this, and I'll press
Play and an empty display window pops up.
| | 01:46 | We always get display windows
because Processing does graphical output.
| | 01:49 | But you see, I have got 10 there at the bottom.
| | 01:52 | If I want to make it slightly more
elaborate, I can copy that and bring it down
| | 01:56 | and I can just add a little bit of text to
it in quotes. I can put X= and then I include the
| | 02:03 | space because otherwise it doesn't do it.
| | 02:05 | And if I save that and press Play, now we
have x=10 so that's our first integer variable.
| | 02:13 | The second kind of variable that we're
going to deal what's called a Float and
| | 02:18 | that stands for floating point.
| | 02:19 | And basically that just
means, it's got decimal places.
| | 02:22 | Integers are whole number,
they don't have decimal places,
| | 02:24 | floating-point variables do.
| | 02:26 | And I'm going to do a
little differently this time.
| | 02:29 | I'm going to declare my variable,
I'll just call it e but I don't have to
| | 02:34 | declare and initialize in two separate steps.
| | 02:36 | I can do them all at once.
| | 02:38 | I can do float e=2.71828 that's the
mathematical constant e. Although, we all
| | 02:46 | know it's got more decimal places than
that, I finish with the semi colon (;).
| | 02:50 | And then I am going to do another
little print line, I am just going to copy
| | 02:54 | that text and bring it down here
and I say this time print e= that.
| | 02:59 | So that part that's in the quotes is the
literal text is going to putting out and
| | 03:03 | then the e without quotes
is the name of the variable.
| | 03:06 | So I am going to save this, and press
run and now you see I have got my display
| | 03:11 | window but in the bottom, I have the
10, I have x=10, and I have e 2.71828.
| | 03:16 | I am going comment this one out by the way.
| | 03:19 | All that means is I am going to come up
here and then on the PC, I am going to
| | 03:23 | press Ctrl+/ or on the Mac I press
Cmd+/ and then that puts two slashes //
| | 03:27 | in front of that which means the
program will now ignore that particular line
| | 03:30 | and it won't print anymore.
| | 03:32 | The next kind of variable that I'm going
to deal with, which comes up less often
| | 03:36 | but still is important as is what's
called a boolean and a boolean variable
| | 03:41 | means a variable that is true or false
and these-- kind of logical statements come
| | 03:46 | up all the time, although what's
funny is lot of the boolean variables and
| | 03:49 | Processing are implied that you don't
actually declare them as boolean but they
| | 03:53 | show up as a boolean operators.
| | 03:55 | You will see what that happens more when we
deal with what are called 'if' statements.
| | 03:59 | But right now, I'm going to declare a
boolean variable and I have to give it
| | 04:03 | its type which is the entire word
Boolean, by the way please note that these
| | 04:07 | types are all lower case.
| | 04:09 | Processing is a case-sensitive
language and these commands need to be written
| | 04:13 | exactly as they appear here and
boolean needs to be all lower case.
| | 04:17 | And than I am going to create a
variable that I call switchVar or switch
| | 04:21 | variable because this is a
situation where I would use a Boolean.
| | 04:25 | And it has to be assigned to either
true or false so I am just going to put
| | 04:30 | this true at first then what I am going
to do is I am going to come down and
| | 04:35 | I am going to copy this a little piece of
text right here and copy the name of my
| | 04:39 | variable, put it right there and put it
right there, save the whole thing and run it.
| | 04:46 | And now you see, it says switchVar is true
because that's what I've initialized it as.
| | 04:50 | Now one of the cool things about
boolean variables is that you can switch them
| | 04:53 | around rather easily.
| | 04:55 | And in fact, all I'm going to do
is I am going to copy the name switchVar
| | 05:00 | bring it down here, and now
because I've already declared the variable,
| | 05:03 | I don't have to put its type in front of it again.
| | 05:06 | In fact, if I did I would get an
error message because it would think I was
| | 05:10 | trying to declare a second
variable with the same name.
| | 05:12 | But what I am going to do now is I am
going to put switchVar=switchVar, I am
| | 05:17 | going to do one of the modification here.
| | 05:19 | I am going to come in front of the switch
var and put them an exclamation point (!.)
| | 05:24 | and that is the not operator as
an opposition to this is not that.
| | 05:28 | And now what you see is if I copy this
line right here, and I bring it down,
| | 05:32 | I'll save it and I run it see you see the
switchVar is no longer true, it's now false.
| | 05:39 | And this can be something that you
can exploit to give you extra power and
| | 05:42 | flexibility in your programming in Processing.
| | 05:46 | Now I've got a couple of other things I
want to show you, I want to show you a
| | 05:50 | char variable, it's so funny word.
| | 05:53 | Char actually means character, a single
character like the letter a because you
| | 05:59 | only have this little part that says
char, it's usually pronounced char and the
| | 06:04 | type is char and I am going to declare
this one, charVar and then I am going to
| | 06:10 | initialize it by giving equals and then
a charVar, you're going to put either a
| | 06:14 | number or you're going to put
a single character in there.
| | 06:16 | I'm going to put a letter in but you
what you have to do is you have to put
| | 06:21 | it in single quotes.
| | 06:22 | I am going to put it in the capital V
from my char variable, close the single
| | 06:26 | quotes ('') and then with a semicolon (;).
| | 06:28 | I am going to come down here.
| | 06:30 | I am going to copy this little text
right here and I'm going to modify it.
| | 06:37 | Now when I save and run the whole thing,
you can see the charVar is down there
| | 06:42 | again and it tells us that it is equal to v.
| | 06:45 | The next one, which I have to admit I
have never used, is a byte variable, b-y-t-e.
| | 06:50 | And a byte variable is an 8-bit number
and it goes only down to -128 and up to
| | 06:59 | 127, it can't go lower or higher than that.
| | 07:02 | But byte variables are used frequently
in one context that I know of and that is
| | 07:06 | in communication with serial ports.
| | 07:09 | So for instance if you've ever heard of
an Arduino, that's a little micro board
| | 07:13 | controller that you can connect your
computer and it hooks up to sensors and
| | 07:16 | actuators out there in the real
world. Arduinos communicate with
| | 07:20 | Processing through a serial port and it
sends in byte variables and so that is
| | 07:25 | one situation where that's handy to use.
| | 07:27 | Anyhow I'm going to declare my
variable by typing byte, and then I am going to
| | 07:31 | call it dozen, and then I am
going to make it equal to 12.
| | 07:36 | That's fair because it's in
between the -128 to +127 range.
| | 07:40 | And then I am just going to copy some
of this print line text, bring that down
| | 07:46 | and I am going to say that dozen=dozen,
I just what to you show you something
| | 07:54 | else that you can do.
| | 07:55 | I have got this little bit of text here,
what if I want to put the name of the
| | 08:00 | variable in quotes ("), what I can do
is-is I can type, the byte variable and
| | 08:04 | then I am going to call it dozen but if
I put quotes in right now, it's going to
| | 08:08 | think I'm done with my string.
| | 08:10 | You see it turned that off.
| | 08:11 | What I have to do is, I have to make
it know that I don't really mean to put
| | 08:16 | quotes in there using what's called an
escape and that's the backslash, that's
| | 08:19 | right above the return key.
| | 08:20 | If I hit a backslash (\), I can
then put quotes and it knows that those
| | 08:24 | aren't literal quotes, meaning I'm not done
with my string, it means I want this to print.
| | 08:28 | And then I have to do it
again for the ones at the end.
| | 08:32 | Here we go, and I'll just type some more
of this phrase and I will go like that.
| | 08:37 | I'll come up and save this again and
press Run and you see there and now it
| | 08:42 | prints in the console and
there word "dozen" in quotes.
| | 08:45 | The last thing that I want to
show you is a color variable.
| | 08:49 | This is an unusual kind of variable
but it comes in very handy in Processing
| | 08:54 | because we do a lot of graphical work.
| | 08:56 | I'm just going to put here color
variable and what I am going to do is,
| | 09:02 | I'm going to type out color and then
I am going to put cherryBlossomPink.
| | 09:05 | It's a very long variable name.
| | 09:09 | And you will see here by the way, that
in this in switchVar and charVar, I am
| | 09:13 | using what's called Camel Case.
| | 09:15 | That is If I start a new word that
smashed in, I can capitalize that as a way of
| | 09:19 | separating the words.
| | 09:20 | I am going to say cherryBlossomPink=
and then I am going to give a code here.
| | 09:25 | This is called a hex code for colors.
| | 09:27 | There are several
different ways to specify colors.
| | 09:29 | This is the abbreviated version and it
tells you how much red, green and blue
| | 09:33 | there is in it, but it does it in a single
unit and it's FFB7C5 that's the hex code.
| | 09:41 | Hex stands for hexadecimal.
| | 09:42 | It means it counts up to 16 as opposed
to counting up to 10 which is why you
| | 09:47 | have an F and F is the 15
before it repeats around.
| | 09:51 | And what I'm going to do here is I am
now going to take the little window that's
| | 09:55 | been popping up each time and
I am going to give it a color.
| | 09:59 | I am going to give it background.
| | 10:01 | I am just going to copy the name
of this variable, paste it in there.
| | 10:04 | Close that off with
parenthesis () and put a semicolon (;),
| | 10:07 | save the whole thing and hit Run and now
I get a little display window that pops
| | 10:12 | up with a 100x100 pixel
swath of cherryBlossomPink.
| | 10:17 | Those are the most important kinds of
variables that we will be working with:
| | 10:21 | the int for integer; the float for
floating point or decimals; the boolean for
| | 10:25 | true/false; the char for single
characters or numbers; the byte variable,
| | 10:31 | usually for communicating with a
serial port; and the color variable in
| | 10:36 | Processing. And between those, we're
going to have a lot more flexibility and
| | 10:39 | power in what we work with and we
will be using these in every sketch
| | 10:43 | from here on out.
| | Collapse this transcript |
| Understanding variable scope| 00:00 | In the last movie, I gave you an overview
of how to use variables within Processing.
| | 00:05 | Again it's a great thing for saving time
in coding for making use of information
| | 00:10 | over and over again.
| | 00:11 | And it's an essential
practice for data visualization.
| | 00:14 | In this movie, I want to give some
more information about creating variables.
| | 00:18 | The first thing I want to talk about
is what's called the scope of a
| | 00:22 | variable, and that is in Processing, a
variable is either a local variable or
| | 00:27 | it's a global variable.
| | 00:29 | And I will demonstrate that by
getting down to a little example here.
| | 00:32 | First I'm going to call this one,
put its name in there as a comment.
| | 00:36 | Now what I'm going to do it I am going to
create something what's called global variables.
| | 00:42 | A global variable is a variable that
can be use anywhere in a sketch,
| | 00:45 | even if you have got a million lines of code,
that variable can be used anywhere.
| | 00:49 | A local variable is one
that has a constrained scope.
| | 00:52 | It can only be used in part of a sketch.
| | 00:54 | For instance, within a
blog of code or within a loop.
| | 00:58 | And I'll give you examples of all of those.
| | 01:00 | Right now I'm going to
create a few global variables.
| | 01:03 | What I'm going to do is I'm going
to create a variable x int x = 0;
| | 01:11 | so there's one global variable, it
will work anywhere in the sketch.
| | 01:14 | I will do another one, y = 50;
| | 01:20 | it's common to put the global
variables at the top, you actually have to put
| | 01:24 | them up before you use them.
| | 01:26 | But I also like to separate
them and make them easier to find.
| | 01:29 | Now I'm going to get into something
that we're going to do it little bit later
| | 01:33 | and that is blocks of code for
what are called dynamic drawings.
| | 01:36 | You don't need to worry about this too
much, but what I'm doing is I am creating
| | 01:40 | a separate blocks of code right now.
| | 01:42 | And a lot of drawings, what you have
as a setup block, I'll explain what all
| | 01:46 | of that means later.
| | 01:47 | Now I'm going to put my
window information in here.
| | 01:50 | I'm going to make the window (600, 200) which
we've done before, turn on the anti-aliasing.
| | 01:59 | Then what I'm going to do is I'm
going to create a local variable.
| | 02:06 | And that is a variable that only
exists within this particular block of code.
| | 02:10 | I'm going to make it a color variable.
| | 02:17 | And that is a darkGray.
| | 02:19 | Once I've created this variable, I can
use it by saying, background and then
| | 02:26 | I'm going to put the name of the variable,
right here, darkGray and now if I hit Run,
| | 02:32 | you can see that my display window is
600 pixels wide 200 pixel tall and it is
| | 02:36 | in fact a dark gray in background.
| | 02:41 | Then, what I'm going to do is I'm
going to just put a print line function,
| | 02:45 | always nice to check what's going on.
| | 02:48 | And what I'm doing here is a
repeat of what it is in the last movie.
| | 02:55 | I'm going to ask it to say darkGray
and then give the variable because it's a
| | 02:58 | hex code, I actually need to put it
within this little hex thing and then with a
| | 03:03 | comment and then say, I
only want six characters in it.
| | 03:06 | I am also putting the hash tag in the
comments because the Processing command
| | 03:10 | doesn't include that one by default.
| | 03:11 | So if I run this now.
| | 03:12 | I get my window and at the bottom,
you can see it says darkGray=333333.
| | 03:20 | So that's working just fine.
| | 03:22 | Let me say something about how I name
variables and I've talked about this
| | 03:26 | before but just to be clear.
| | 03:27 | A variable name has to be one word, and
there can be no spaces in it and it has
| | 03:32 | to start with a letter.
| | 03:34 | Also, it's standard practice
for variables to be lowercase.
| | 03:37 | Although if you want to concatenate
words like darkGray, what you do to use
| | 03:42 | what's called BumpyCaps or
CamelCaps or medial capitalization.
| | 03:47 | And you simply capitalize
the word as it comes through.
| | 03:50 | Part of this is because words that
start with capital letters are reserved for
| | 03:53 | classes which we're going to deal with later.
| | 03:56 | Also, there's no punctuation allowed in a
name with the exception of an underscore (_).
| | 04:00 | You can put underscores and things if you want.
| | 04:03 | Also, there are built-in or system variables.
| | 04:06 | For instance, the word width is a recognized
variable in Processing and there is other ones.
| | 04:12 | And when you use them they'll be colored
by Processing, you can declare your own
| | 04:18 | variable on top of those.
| | 04:20 | But you need to know that your variable
will then replace the system function.
| | 04:24 | And that's usually a bad
idea but it can be done.
| | 04:28 | What I'm going to do now is I'm
going to create another variable
| | 04:31 | called randomFloat.
| | 04:35 | And one of the neat things that I'm
going to show you a little bit later is that
| | 04:39 | you can get random numbers from Processing.
| | 04:41 | randomFloat1 equals,
| | 04:42 | now this is the first one, it'll
be different every time we run it.
| | 04:52 | You see right now it says 9.29, if I
run the sketch again, I should get a
| | 04:57 | different value 1.23, run the sketch again.
| | 05:01 | And you see how it changes each time.
| | 05:03 | That's one of the neat things, it's a variable.
| | 05:06 | And it takes a different value every time.
| | 05:08 | Now what I'm going to do is, I'm going
to show that there is a separate block of code,
| | 05:12 | I'm going to come down and create
another block of code, the draw block is
| | 05:20 | extremely common you'll see.
| | 05:22 | In fact, most sketches will have
the set up block and the draw block.
| | 05:28 | I can define the background color
again in this block if I want to.
| | 05:33 | And you watch what will happen.
| | 05:34 | It freaks out because even though, I
have a variable named darkGray in the
| | 05:39 | previous block, that was a local
variable, and that variable has not been
| | 05:43 | defined in this block and so it
wants to know what's going on.
| | 05:46 | So what I can do is I can simply
create the variable darkGray over again,
| | 05:54 | but I'm going to make it
slightly different this time.
| | 05:56 | I'm going to make it really dark.
| | 05:59 | And now you will see what happens is
that the darkGray variable from this one
| | 06:03 | overrides the earlier one.
| | 06:04 | See it's practically black this time
around. And so these are some general
| | 06:10 | pointers on how to work with variables.
| | 06:12 | Again, information that you need to
declare the variable type, you need to give
| | 06:16 | it a name, you do need to
a usually initialize it.
| | 06:19 | One trick that you can do sometimes is
you can declare a variable globally,
| | 06:24 | like this, without initializing it.
| | 06:28 | And then what you can do is, you can
save the initialization until you get to a
| | 06:32 | later block of code.
| | 06:33 | For instance here, I can now say z=25.
| | 06:38 | And that gives you a little bit of
flexibility in how you deal with things,
| | 06:41 | especially if you need a variable to
be accessible in more than one block of
| | 06:44 | code but you need it to be
able to change as you go through.
| | 06:47 | And so as those are some general
pointers on dealing with variables.
| | 06:50 | In the next movie, we will talk
about modifying each of those.
| | Collapse this transcript |
| Modifying variables| 00:00 | In this movie, I want to talk
about how you can work with variables
| | 00:03 | specifically, modify their values
over time, which of course is the flexibility
| | 00:07 | that variables give you.
| | 00:09 | What I want to demonstrate is how you
can assign values several times to the
| | 00:14 | same variable where the
latest one trumps the previous one.
| | 00:18 | And also, how you can change a
variable from one type to another, and you can
| | 00:22 | also create code to systematically
change variables, as well as constrain some
| | 00:27 | of their flexibility to keep
them within a particular range.
| | 00:31 | So what I'm going to do is I'm going to
start by titling this sketch and then,
| | 00:38 | I'm going to declare a few
variables that we saw in the last video.
| | 00:44 | So I have an integer variable called x,
I'm giving it an initial value of 10.
| | 00:48 | We have a floating-point variable, a
float variable called y, I'm giving it an
| | 00:56 | initial value of 50 and then, we
also have a float variable z.
| | 01:05 | I'm simply declaring it without initializing it.
| | 01:06 | Next I'm going to create a
drawing with two blocks of code.
| | 01:10 | Now, we're going to talk more about the
dynamic drawings in a later movie, but
| | 01:15 | for right now, you need to know that I'm
going to have one block that's called setup.
| | 01:21 | By the way, the reason this says
void at the beginning is because every
| | 01:25 | function, and setup is a function,
needs to have a return value type.
| | 01:29 | If it doesn't return a variable, and
this one doesn't, then you put void to
| | 01:34 | indicate that there's nothing that comes back.
| | 01:36 | Also, it has empty parentheses
because the function is supposed to have
| | 01:39 | arguments and this indicates that there
is a space there, but it doesn't have any.
| | 01:43 | Instead, we're going to put everything
about this function within these curly brackets.
| | 01:47 | The first thing, I'm going to do
is declare the size of the window.
| | 01:50 | So I'm going to do size 600x200.
| | 01:52 | I'm going to turn on anti-aliasing
again to smoothen things out.
| | 01:58 | I'm also going to turn off stroke, so
there's no border outline around shapes.
| | 02:04 | Now what I'm going to do is
I'm going to assign a value to a variable.
| | 02:09 | Watch how we do this.
| | 02:11 | Assign a new value to an existing variable.
| | 02:18 | What I'm going to do is I'm going to
take y, which previously I've initialized at 50,
| | 02:22 | and I'm going to redefine it to be height.
| | 02:27 | Height is a built-in variable and
Processing knows that height is the height
| | 02:33 | of the window, in this case, it's 200
pixels and width is how wide the window is,
| | 02:39 | it would be 600.
| | 02:41 | So right now, I'm just setting y,
changing it from the initial 50 here to be the
| | 02:45 | height of the window.
| | 02:46 | Next, I want to show you something
about what's called casting a variable and
| | 02:51 | that is sometimes a variable comes in
one particular type and you want to change
| | 02:54 | it to a different type.
| | 02:56 | The most common is taking float
variables which are decimal points and
| | 02:59 | converting them to integer variables
or int which don't.And so, the way I'm
| | 03:04 | going to do is I'm first
going to create a float variable.
| | 03:08 | So it says randomFloat and I'll
give it a random number from 0 to 10.
| | 03:13 | Now, the way the random function
works here is it will take any number
| | 03:16 | in-between there, and it uses
decimal, so it's a floating point thing.
| | 03:20 | 0, the lower end is inclusive,
the upper end 10, is exclusive.
| | 03:25 | So you can get a zero, you can't get a 10.
| | 03:28 | You can get anything in-between.
| | 03:30 | If I want to specify the lower value,
if I want it to be like 5, I can simply
| | 03:34 | type it in, 5 to 10 and I'll
show you that in a later movie.
| | 03:38 | What I'm going to do right now though is
I'm going to do this little print line.
| | 03:42 | Now, if I hit Run, you see in the
Console that I have my randomFloat
| | 03:47 | variable, that's good.
| | 03:48 | So that's down there.
| | 03:51 | Now, let's say that I want to get a
random integer from this that I want an
| | 03:55 | actual number from 0 to 10.
| | 03:58 | The way that I would do that is closely related.
| | 04:01 | In fact, I'm just going to copy this
text, paste it right here and then,
| | 04:08 | this time I'm going to create,
instead of randomFloat, I want a
| | 04:11 | randomInteger variable.
| | 04:13 | Now if I want to have 10 be a choice,
the way Processing works, I actually need
| | 04:17 | to go up to 11, because it doesn't
include the 11, it goes up to 10.9999 and
| | 04:23 | what the casting is going to do is it's
going to chop off the decimal places and
| | 04:26 | leave me with the part in front of that.
| | 04:28 | So all I need is this. And then what
I'm going to do is I'm going to come over
| | 04:34 | here, and tell it's an integer variable.
| | 04:36 | I'm going to get an error message
if I run this, see what happens.
| | 04:39 | Because this is a float variable,
random has decimal places, but I've declared
| | 04:43 | an int over here, so
that's just not going to work.
| | 04:45 | So instead, what I do is I need
to cast it into a different type.
| | 04:49 | That's pretty easy.
| | 04:50 | All you need to do in Processing is
I put int and put the rest of this in
| | 04:54 | parentheses, and it says take whatever
is in there and turn it into an integer
| | 04:58 | variable and it does this by
simply chopping off the decimal places.
| | 05:03 | And so now, when I run this code, you see I
now have a random number and it's just a 2.
| | 05:14 | If you want to do something like roll
dice, one option is to do it this way.
| | 05:21 | I simply take this down here and
I'll say I'm going to get a random die.
| | 05:27 | Now, the difference here is that the
dies only go from 1 to 6, whereas the
| | 05:31 | numbers I've been using so far go from 0 to 10.
| | 05:33 | So I want a different range.
| | 05:35 | What I'm going to do is because I don't
want zeros, I want one ones, but I want
| | 05:40 | to have 6 be an option, is if I put
the limit at 6, it'll go from 0 to 5.99,
| | 05:46 | it'll chop off the decimal places
which may means it goes from 0 to 5.
| | 05:49 | All I have to do then is add 1 at the end of it.
| | 05:54 | And then if I take that and run it
like this, you can see now that I have a
| | 06:03 | number from 1 to 6, I can run this a
few extra times and you'll see that I'll
| | 06:07 | get different values, there is
a 2 for the die, and there is 4.
| | 06:11 | It will stay within that range.
| | 06:14 | Now I'm going to show you, you can
actually get much more fancy in how you deal
| | 06:18 | with your variables here.
| | 06:19 | If we go to the top of the sketch, you
will see I declared a variable z,
| | 06:23 | but I didn't initialize it.
| | 06:24 | Right down here, I'm going to get z and
I'm just going to show you that things
| | 06:28 | can get rather fancy.
| | 06:30 | So I might say that z = 3*x, I have a
value for x earlier, then I'm going to
| | 06:37 | also add the arc tangent of the square
root of y, it could come up you don't
| | 06:47 | know and then, I run that variable, run
the whole thing and there I have the arc
| | 06:54 | tangent of the square root of y plus
three times x, there maybe a situation
| | 07:00 | which you need that, I
don't know what it is right now.
| | 07:03 | The next thing is to show how
to increment a variable overtime.
| | 07:06 | What I want to show is in a
separate block of code called draw.
| | 07:09 | So I'm going to draw an ellipse and
actually, if I want the ellipse to show,
| | 07:18 | I need to refresh the background every
time we go through, and then I show the
| | 07:26 | ellipse, and then I'm going to give it
these variable values of x, y and then
| | 07:31 | make the ellipse 40 pixels tall and
when I do this, it will draw a circle,
| | 07:38 | you see my circle there in the bottom-left,
but what I want to do is I want to make
| | 07:42 | it that the circle can move and one way
to do that is through incrementing it.
| | 07:46 | An increment takes a variable and adds a
value to it every time it runs through a cycle.
| | 07:51 | Here the ++ simply means add 1 to it.
| | 07:55 | Also, you can do other kinds of increments.
| | 07:57 | So for instance on this one, I'm
going to take the value for y, the height,
| | 08:01 | and I'm going to multiply it times a
particular time, every time we go through it this one.
| | 08:05 | I'm actually going to do a 0.99 and
what this means is that the height is going
| | 08:09 | to actually decrease.
| | 08:10 | It's going to be 99% of
its initial value every time.
| | 08:14 | And when I draw that, you
see that this now moves.
| | 08:18 | Now it's going to keep
moving until it disappears.
| | 08:26 | If I want to try to keep it in place,
all I need to do then is what's called the
| | 08:31 | constrain and I can go x = constrain(x
-- so x is referring back to itself.
| | 08:41 | I'm going to constrain x, the lowest
value it can have is 0 and the highest it
| | 08:45 | can have is the width of
the window divided by 2.
| | 08:49 | So it'll stop when it gets halfway.
| | 08:51 | I save this and run it, and you see it
goes up until it gets halfway and it's
| | 08:55 | just going bonk into it and stop.
| | 08:57 | Anyhow, these are a few different ways
of working with variables and modifying
| | 09:02 | them to make it, so they can take on new
values and give some flexibility to how
| | 09:06 | you work with your information in your sketch.
| | Collapse this transcript |
| Creating arrays| 00:00 | Up to this point, we've been working
with what are called primitive variables
| | 00:03 | like ints, floats and Booleans that
only hold a single value at a time.
| | 00:08 | You can make an array with any datatype.
| | 00:10 | You can make it with primitives,
you can make an array of int variables
| | 00:14 | of Booleans of colors.
| | 00:15 | You can even make arrays with more
complex things like images or objects or
| | 00:18 | strings that we haven't
dealt with very much yet.
| | 00:21 | However, every piece of data in
the array must be of the same type.
| | 00:26 | If you need data of different types,
an object, which we'll talk about later,
| | 00:29 | would probably be a better idea.
| | 00:32 | In this particular one, I want to show
you how to create arrays and then work
| | 00:36 | with some other values.
| | 00:37 | I'm going to start by putting a little
comment here at the top, put the name of
| | 00:41 | the sketch and then, I'm going to
show you how to create an array.
| | 00:46 | The first thing you need to do, I will
call this one, Manually create an array.
| | 00:51 | What I'm going to do here is, first
like a variable, you have to declare the
| | 00:55 | variable type that's in the array.
| | 00:57 | I'll make an array of int variables
and then, you immediately follow it with
| | 01:01 | square brackets to indicate, that it's an array.
| | 01:03 | You have the opening square
bracket and the closing square bracket.
| | 01:07 | Those are right above the Enter key.
| | 01:09 | One way to think about these is that, this is
like a little box that holds all the numbers.
| | 01:14 | So you create that box with the square
brackets, let me backup, and then you give
| | 01:19 | a name to the array.
| | 01:20 | I'm simply going to call this one "a"
and then say, a = and then, what I'm going
| | 01:25 | to do here, is if you're going to insert
the variables manually in an array, you
| | 01:31 | can do this little shortcut thing,
where you simply put a curly bracket that's
| | 01:35 | right above the square brackets and
I'm going to put five values in there.
| | 01:39 | Close the curly bracket and
then end with a semicolon.
| | 01:46 | And then, what you can see is I'm
going to do a little print line, the five
| | 01:50 | values in a, from 0-4 are, now I'm
going to do the printline in two lines.
| | 02:07 | So this one shows at the top, it's
because arrays get printed in multiple lines
| | 02:12 | and they don't really like having all
the stuff in their print line command.
| | 02:15 | And so here, is what I get.
| | 02:20 | I am going to save it and run it, close
this and I'll open up the -- and there
| | 02:26 | you see, the five values in "a".
| | 02:28 | The interesting thing about arrays
is that they start counting at zero.
| | 02:32 | So the first item the 100 is item 0
in the array, the fifth one is actually
| | 02:37 | labeled item number 4.
| | 02:39 | These are the index numbers and while
that's kind of a weird way of thinking,
| | 02:43 | it actually makes a lot of the
math with arrays much easier.
| | 02:47 | Another way to create an array is to create
an empty array and then fill it in manually.
| | 02:51 | So for instance fill in.
| | 02:57 | What I'm going to do here is I'm
going to create another integer array.
| | 03:01 | So I do int, open and close square
brackets, I'm going to call this one "b"
| | 03:06 | and then, if you're not going to fill
in the values immediately or if you are
| | 03:10 | getting it from somewhere else, you have
to type in new to say that it's a new array.
| | 03:14 | Then you have to put that variable type
again, and then you need to put how many
| | 03:18 | values there's going to be.
| | 03:20 | In this case, I'll just
have three values, a semicolon.
| | 03:24 | And then I'm going to put a little
print line to keep track of things here.
| | 03:27 | I'm actually going to put a blank line
to separate it from the previous one,
| | 03:33 | and I'm going to put "b" has not yet
been filled in, so it's default values.
| | 03:41 | I forgot to put this in quotes back here,
and then I'm going to ask it to print
| | 03:52 | "b" and I'm actually going to comment
these ones out up here, by highlighting
| | 03:58 | them and doing Ctrl+/on the PC
or Cmd+/ on the Mac.
| | 04:02 | So they're still there but they won't run.
| | 04:04 | Now, I save it and run it, and you see
that what it does by default is it fills
| | 04:09 | in the array with zeroes.
| | 04:12 | So it's not completely empty.
| | 04:14 | It has values, it's just not
the ones that I wanted to give it.
| | 04:17 | If I want to assign the values, one
way to do that is to simply indicate that
| | 04:22 | I am going to do "b" and then in square
brackets, I put the index number of the item.
| | 04:27 | In this case, I'm going to say, that
the first item which is b[0] as its
| | 04:32 | index is now equal to 3, that b[1] is equal
to 6, but b[2] the last item is equal to 9;
| | 04:44 | and then I can do another print line,
and say, now the values of b[] are,
| | 05:01 | and then I'll do the print line for the
entire array, I hit that again, and now
| | 05:05 | you see that they filled in, oh, you
know what I made a mistake, I used the
| | 05:09 | wrong slash right here;
| | 05:10 | got to flip that around to the other
slash to make it an escape character.
| | 05:14 | Now when I run it there we go.
| | 05:16 | Now you see that the values are 3, 6, 9.
| | 05:19 | So that's one way to do it.
| | 05:21 | Now, filling in an array like that
would be such an extraordinarily arduous
| | 05:25 | process, you would never want to do that
unless you're just changing one value at a time.
| | 05:30 | A much better way is to fill it in
with a loop and we're going to talk more
| | 05:35 | about loops later, but I just want to
demonstrate a neat way of doing this.
| | 05:39 | What I'm going to do is I'm going to
create a window, 600x200, I'm going to
| | 05:45 | give a white background to the window
by just doing 255, so that's full white,
| | 05:51 | turn on anti-aliasing, and then I am
going to set the stroke because I'm going to
| | 05:57 | draw a bunch of lines.
| | 05:59 | I'm going to make the strokes
relatively dark gray, 100 on the 0 to 255 scale.
| | 06:04 | But I'm also going to make them highly
transparent, that's the alpha value there.
| | 06:09 | If you have just two values, where you put
color, it's a grayscale value and it's an alpha.
| | 06:14 | So these ones are going to be
relatively dark but highly transparent and now
| | 06:18 | watch what happens right here.
| | 06:19 | We're going to tell it that I want to
draw, I'm going to draw a thousand lines
| | 06:25 | and I'm using a variable int to simply
indicate how many I want because that
| | 06:29 | makes it easier to change.
| | 06:31 | And then I'm going to change create a
few arrays of floating variables, that
| | 06:37 | get x-coordinates for lines across the
top and lines across the bottom and all
| | 06:42 | I'm going to do is put xTop as a new array of
float variables and it's going to have "n" in it.
| | 06:51 | You can see by using the variable "n" up
above I don't have to write a 1000 here
| | 06:55 | and if I decide to change it from a 1000,
it's really easy to modify it.
| | 07:00 | And I'm going to do another array.
| | 07:01 | So I'm just going to copy that,
paste it down and those are the top.
| | 07:06 | I'm going to have another
array for "x" values on the bottom.
| | 07:11 | So now, I've got two arrays created.
| | 07:13 | Now I'm going to make a loop to fill those in,
this is one of the best things you can do.
| | 07:20 | And I'm creating a local variable here
called "i" that exists only within the
| | 07:23 | loop and "i" is the most common
variable for loops, I think of it as index.
| | 07:28 | It's going to start at 0 and it's
going to go until it reaches "n".
| | 07:34 | And you can actually see, if I say,
less than "n" but that's okay because
| | 07:38 | even though there's a thousand items because
it starts at 0, the thousandth item will
| | 07:42 | be 999, so this will work as a limit.
| | 07:46 | And then I'm going to
increment through one step at a time.
| | 07:51 | By the way, you may notice, I tend to
put my closing curly brackets and then go
| | 07:55 | back just so I don't lose track of where I am.
| | 07:58 | What I am going to have it do is
execute these lines of code a thousand times.
| | 08:03 | I am going to say, I want you to go to
the array xTop and I want you to go to
| | 08:09 | the index number "i".
| | 08:10 | Now, you saw, early above,
I put b[0], b[1], b[2].
| | 08:14 | This will simply go xTop 0 through xTop 999.
| | 08:18 | And I'm going to tell it is equal to a
random number somewhere between 50 and 550.
| | 08:25 | Then I'm going to do the same thing for xBottom.
| | 08:35 | So what this is going to do is
it's going to create two arrays.
| | 08:37 | We have an array of x-coordinates for
the top and another array of x-coordinates
| | 08:42 | for the bottom and they're all
random values between 50 and 550.
| | 08:46 | By the way, the reason I choose those
is because the window is 600 pixels wide,
| | 08:50 | this just keeps a border of 50
pixels on each side of the window.
| | 08:54 | Then what I'm going to do
is I'm going to draw lines.
| | 08:57 | Remember when you draw a line, you need
the x and y for one end, and the x and y
| | 09:02 | for the other end.
| | 09:03 | What I have here, is I'm going to do an
xTop(i) and I'll put 25, so it's going
| | 09:07 | to start just 25 pixels down from the
top, then I'll go to xBottom(i) and that
| | 09:15 | one will go to 175 which is 25 pixels
from the bottom, and when I run that,
| | 09:20 | we get something very interesting.
| | 09:23 | And what that is, is a thousand lines
drawn with random x-coordinates but all on
| | 09:28 | the same y-coordinates, and you can
see that this would be a lot easier than
| | 09:32 | trying to type in a thousand
y and x coordinates manually.
| | 09:35 | Instead, I use this little loop to fill
in an entire array, and you can see the
| | 09:39 | efficiency we have with that
particular approach and that's something that's
| | 09:43 | going to come very handy in subsequent
movies, where we start dealing with data
| | 09:47 | sets and we want to be able to fill in a
lot of values with a little bit of code,
| | 09:52 | as little as possible.
| | Collapse this transcript |
| Modifying arrays| 00:00 | In our last movie, we learned how to
create arrays of data, that is, a collection
| | 00:06 | of data points that are all of the same
variable type such as ints, floats, but
| | 00:11 | getting an entire collection you're
can to refer to as a single thing.
| | 00:15 | In this one, I want to show you how to
work with arrays and perform a handful of
| | 00:19 | different functions on them.
| | 00:21 | I'm going to start by naming my file here,
just as a comment in my own file,
| | 00:27 | and then I'm going to create an array.
| | 00:28 | It's going to be integer variables
and I put the square brackets to
| | 00:32 | indicate that it's an array.
| | 00:33 | Give it a name, I'll just simply call
this one 'a', and then I'm going to put
| | 00:37 | in curly brackets {7, 0, 4}, and those would be
the three values that are going to be in my array.
| | 00:48 | We can double-check that and you'll
see that the 7, 0, and 4 appear at the
| | 00:53 | bottom with their index
numbers 0, 1, and 2, great.
| | 00:56 | The next thing I want to do
though is I want to copy this array.
| | 01:02 | Now one way to do this, is to
create an empty array, also of integer
| | 01:07 | variables, I'll call it 'b' and then
instead of entering values manually,
| | 01:11 | I'm going to create a new one.
| | 01:13 | It's going to be integers
and then the square brackets;
| | 01:15 | I'll have to put the length of the array.
| | 01:18 | This one is going to eventually be a
copy of 'a', I want it to be the same length.
| | 01:22 | What I can do is I can say 'a' because
that's the name of the other array and
| | 01:27 | .length, and that's a built-in things
that says, find out how many items there
| | 01:31 | are in the array 'a'.
| | 01:34 | And so now I've created this one.
| | 01:36 | Watch what happens if I print 'b'
you'll see that I have zeros in it,
| | 01:42 | because it's not filled in yet.
| | 01:44 | I'm going to comment this one out,
so now all I have is zeros.
| | 01:49 | On the other hand what I can
do here is I can say arrayCopy.
| | 01:53 | And what does this means is to take
array 'a' and copy it into 'b', so you start
| | 02:00 | with the source array and then
you have the destination array.
| | 02:04 | And when I do that, of course, if this
is going to work, I'm going to have to go
| | 02:13 | and 'a' is going to have to show
again, but I don't need to print it.
| | 02:19 | Now that I've got that I can run this through.
| | 02:22 | And you can see that at first the
three values in 'b' are 0, 0, 0 because
| | 02:27 | it was an empty array, and then they got
replaced with the copies of the values from 'a'.
| | 02:32 | Another command is to sort an array.
| | 02:35 | You see that these values are out of order.
| | 02:37 | They're 7, 0, 4, what I'm going to do is,
I'm going to resort 'a', and I'm going
| | 02:42 | to say as 'a', that's the array,
is equal to sort of itself 'a'.
| | 02:50 | Make sure we get an equal sign in
there and then when I click that,
| | 02:54 | now nothing's going to show
different because I haven't printed it.
| | 02:57 | I'm just going to
comment out the print commands.
| | 03:03 | And now you can see what happens is if
I do a print line 'a' and run it and now
| | 03:10 | instead of being 7, 0, 4 now
they're in order of 0, 4, 7.
| | 03:14 | So we have sorted values now.
| | 03:16 | Let's say on the other hand I want it
to be a descending order, what I can do
| | 03:20 | is I can reverse it.
| | 03:23 | And all I have to do for this one is all I
am going to actually work with 'b' right now.
| | 03:28 | Now 'b' still has these original three
values in their unsorted order 7, 0, 4.
| | 03:34 | I'm going to create a new array
called bReverse, and this is pretty simple.
| | 03:40 | And I got to type is in reverse (b),
and when I do that, comment that out.
| | 03:46 | Instead of 7, 0, 4 it says 4, 0, 7.
| | 03:56 | So it has taken the original and
just switched it around in order.
| | 03:59 | The next thing we are going to do, is
we're going to add things in an array with
| | 04:04 | the Append function.
| | 04:05 | What you need to specify
is the destination array.
| | 04:08 | In this case, I'm going to add these
items on to 'a' itself and then the
| | 04:13 | function name is append.
| | 04:14 | You give the source array which is 'a',
and then I'm going to add an 8 to it.
| | 04:23 | And now I'm going to copy this, bring it down,
| | 04:26 | uncomment that, I will comment this one out.
| | 04:30 | Now when I run it, you see that 'a' is
now 0, 4, 7, and one additional value 8.
| | 04:36 | Now append adds an item to the end of the array.
| | 04:39 | Let's say for instance, I want to add
something to these middle of an array,
| | 04:42 | I can use the Splice command.
| | 04:44 | And in this case, I'll take
array 'b' and splice it into itself.
| | 04:53 | So first I say the source array is 'b'
and then I give the value that I want to
| | 04:59 | splice, it's going to be 10.
| | 05:01 | And this says where I want to put it?
| | 05:03 | I want it to be at index number two in
the array, and when I do that, it helps
| | 05:09 | if I do print line.
| | 05:16 | You can see we've gone from
the 7, 0, 4 to 7, 0, 10, 4.
| | 05:20 | Again, it's index number that it went
in, so it would be the third item in
| | 05:24 | the particular array.
| | 05:25 | If I want to combine two arrays I
have the option of concatenating them.
| | 05:33 | And the way that works is I'm going to
create a new array in this particular case.
| | 05:37 | An int array that I'll call 'c' and
it'll be the concat of array 'a' and array 'b',
| | 05:47 | that's all there is to it.
| | 05:49 | You just specify the two
that you're going to deal with.
| | 05:54 | And it will do the print line for that.
| | 05:59 | And now you can see this one's longer
because array 'a' adds three items.
| | 06:03 | I'm going to make this a little taller.
| | 06:05 | I have the 0.7 that I got sorted
earlier than I added an add-on and then array
| | 06:10 | 'b' I had spliced a 10 into
but it hasn't been sorted.
| | 06:13 | Anyhow, there's all of that.
| | 06:16 | Processing actually has several other
functions for dealing with arrays, such as
| | 06:20 | shortening and taking subsets and
you can explore those in the Processing
| | 06:25 | reference, but for right now, I want you
to see that there are ways of modifying
| | 06:29 | arrays of sorting them, of expanding,
rearranging them, they can be helpful in
| | 06:34 | creating our own data
visualizations and other works later.
| | Collapse this transcript |
| Creating strings| 00:00 | In the movies up to this point we have
been dealing with what are called primitive
| | 00:04 | variables, that is variables that hold
just one value at a time or arrays of
| | 00:08 | primitive variables.
| | 00:10 | On the other hand, another very common kind of
variable, if you want to consider it that,
| | 00:14 | is a string. And a string is not a
variable because it actually consists of
| | 00:19 | a number of character variables.
| | 00:21 | So strings are usually used for
analyzing texts, and in this movie, I want to
| | 00:26 | show you how to create strings and in next
one, I'll show you how to work with them.
| | 00:31 | I'm going to start by putting a comment
with my file name here at the top, and
| | 00:39 | I'm going to start by
manually entering some text.
| | 00:42 | This is the easy way to do it.
| | 00:45 | What I do is, first as I need
to declare the variable type.
| | 00:48 | Now this one is String, please note
it's a capital S. This is important,
| | 00:53 | Processing is case sensitive, and also
it's because this one is an object, it's
| | 00:57 | not an individual variable and
that's why it's got this capitalization.
| | 01:02 | I need to give a name to this one,
I'm actually going to use a little line
| | 01:07 | from the movie the Deer Hunter, and type
equals and then in quotes, I'll put, "This is this.
| | 01:18 | It's not something else."
| | 01:23 | If I recall correctly, and then I
finish with quotes and then a semicolon (;).
| | 01:28 | So now I actually have a string of text
that I can use, and what I can do is if
| | 01:33 | I want to double-check on it, I can do
a print line, and that's a long variable name,
| | 01:38 | so I'm going to copy it and I can
run it, and then you see that I have the
| | 01:45 | text showing up down there
in the bottom of the console.
| | 01:48 | On the other hand, a lot of times you
actually want the text to show up somewhere else.
| | 01:52 | And so what I'm going to do is I'm going
to create a window here, 600x200 that
| | 01:59 | we've been using so far.
| | 02:00 | Turn on anti-aliasing.
| | 02:01 | I'm going to give it a light gray
background color, I'm going to give a fill,
| | 02:12 | if you want the text to appear in a
particular color, you need to give it a fill.
| | 02:17 | This one, I'm going to go with the green,
and then I'm going to place the text,
| | 02:24 | use the function text, then give the
name of the variable or the string.
| | 02:29 | It's telling me to put it right there
and then where you're going to position it.
| | 02:33 | In this one, I am going to put 100
pixels over and 140 pixels down, and I press
| | 02:39 | Run and what I get is some bright
green text on the light gray background.
| | 02:44 | By the way, the pixels
determine the baseline of the text.
| | 02:50 | So it has more to do with the
bottom left of the first line of text.
| | 02:54 | That's a little hard to read, I'm actually
going to change it to just straight black.
| | 02:58 | I can do that by just removing the fill.
| | 03:00 | If I just come in back here, I am changing
these two 0, 0s all the way through. There we go.
| | 03:10 | That's the simple version.
| | 03:11 | I do want to show you another thing that
I'm going to do a little bit differently.
| | 03:16 | And that's about reading text from an
external file because that's usually how
| | 03:19 | you're going to get your text.
| | 03:21 | And this is going to be the first movie
where we actually have a file to start with.
| | 03:25 | If you go up to the folder for this
movie, you'll see there is a file there
| | 03:29 | called Szymborska, it's a text document.
| | 03:31 | If you double-click on it, you'll
see it's a poem by the poet Laureate of
| | 03:36 | Poland, Wislawa Szymborska
called A Contribution to Statistics.
| | 03:40 | It's a wonderful piece.
| | 03:47 | And what you can do to add this to
Processing, the easy way is to move over your
| | 03:52 | whole folder window here and just
drag the file onto the Processing window.
| | 04:00 | And you can see right here, it says, one
file added to the sketch on the bottom,
| | 04:04 | and back in the window over here, you
see that we now have a new folder called data,
| | 04:09 | and we have this
Szymborska text within that one.
| | 04:13 | Now normally, you would be dragging
the text in from another place and of the
| | 04:16 | same folder as the sketch already,
but Processing creates a data folder and
| | 04:19 | that's where it puts text, that's where
it put images or fonts or other things
| | 04:23 | that it needs to deal with.
| | 04:24 | It just automatically, if you just drag
the file into the Processing window,
| | 04:28 | so I can close that one now.
| | 04:30 | And what I want to show you is how to
access that text and to read it a little bit.
| | 04:37 | What I'm going to do is I'm going
to create another string variable.
| | 04:41 | And this one, I'll call it poemLines.
| | 04:44 | When you have a text file, each line of
text is its own string, and so actually
| | 04:48 | we're creating an array here
because we have many lines of text.
| | 04:52 | So I'm calling it poemLines, it's an array.
| | 04:54 | And then the function that we want
to use is loadStrings, and then in
| | 04:59 | parentheses, and in quotation marks,
we put the name of the text
| | 05:03 | ("Szyborska.txt"), well, I'm missing a letter.
| | 05:15 | And then what I can do is I can do
print line, and if I do poemLines, now what
| | 05:21 | it's going to do is it is going to
print the entire contents of the array which
| | 05:27 | is the entire text file, so you don't
want to do this if you have a huge thing.
| | 05:31 | But this one isn't real long, so I
can just hit Run, I get my Deer Hunter
| | 05:35 | quote here, and then down here you can see that
we have our array with every line of the poem.
| | 05:46 | It does a couple of funny things.
| | 05:47 | Number one is, it's putting
quotes around every line which is a
| | 05:51 | little distracting.
| | 05:52 | The other one is that there are blank
lines in the poem and it's putting quotes
| | 05:56 | with a blank there also, which isn't
exactly what we want, but what we can tell
| | 06:00 | is that it has successfully read the file.
| | 06:03 | And I want to just a
little something else here.
| | 06:05 | I want to show you how you can read
just one line at a time if you want.
| | 06:11 | So right here, I have poemLines and
that's going to read the whole entire thing.
| | 06:16 | Comment that one out.
| | 06:18 | Let's read just a few lines, so
for instance let's read zero and one.
| | 06:23 | I can put index numbers in square brackets.
| | 06:26 | If you want to refer to just one
item in an array, that's how you do it.
| | 06:31 | And I'm going to copy that, I'm going
to put it on a separate line, and what
| | 06:35 | this is telling is that I want to
print the very first line which is index
| | 06:39 | number zero and then the next
line index number one in the poem.
| | 06:43 | And now when I run it, there you
can see I've got my first two lines.
| | 06:48 | And so this is the
initial way of creating arrays.
| | 06:50 | You can either enter them manually, like
I did with my example of this quote, or
| | 06:55 | you can load an external text file
which is the most common way of doing this
| | 06:59 | and then dealing with an array
of strings that result from it.
| | Collapse this transcript |
| Modifying strings| 00:00 | In the previous movie we learned how
to enter string data either manually by
| | 00:04 | typing it into the sketch or
by importing the text file.
| | 00:08 | If you want to be able to work with strings,
Processing has a wide array of functions.
| | 00:12 | I'm going to demonstrate
a few of them to you here.
| | 00:15 | But you should know that there is a lot
more that's available, specifically in
| | 00:19 | terms of searching for functions
and that one uses Regular Expressions.
| | 00:22 | In fact, if you're interested in
learning more about Regular Expressions,
| | 00:26 | you should see Lynda.com's course
on that topic specifically.
| | 00:30 | It would come in particularly
useful for working with string data
| | 00:33 | in data visualization.
| | 00:34 | What I want to show you now
is just two functions.
| | 00:37 | One is on trimming empty space from the
beginning and end of strings and another
| | 00:42 | one is for converting numbers into strings.
| | 00:45 | I'm going to start by simply putting the
name of this file up here as a comment.
| | 00:53 | And then I'm going to first
demonstrate the trim function.
| | 00:56 | And the way this works, is you take a string.
| | 01:00 | I'm creating a new string here I'm
going to call it quote and you see I've got
| | 01:05 | some extra space at the end
and at the beginning.
| | 01:08 | I am actually going to fix
the capitalization in there.
| | 01:10 | And if I do a print line on that one,
you'll see that, it prints with the extra space.
| | 01:20 | You can't tell that there's space after it,
but you can certainly see the space before.
| | 01:24 | The Trim function is a
great way of dealing with that.
| | 01:28 | In this case, what I'm going to do is
I'm going to simply say that the quote
| | 01:31 | because I'm going to modify
the string itself trim(quote);
| | 01:39 | and when I runs that, the empty space is now
disappeared at the beginning and in the end.
| | 01:44 | Now in an ideal world, you would have
done this cleaning before you brought in
| | 01:48 | any text from an external source.
| | 01:50 | But sometimes it slips through so this
is a way to solve the problem once the
| | 01:54 | data is in Processing.
| | 01:56 | The other thing, I want to show you
is how to take a number, a numerical
| | 01:59 | variable and turn it into a string
which sometimes is necessary for some of the
| | 02:04 | visualizations that we would be creating.
| | 02:06 | Processing has several
functions for dealing with this.
| | 02:09 | I'm only going to show you the most
basic one, because all the others have very
| | 02:13 | slight variations on it.
| | 02:14 | And what I'm going to be doing is using
one called nf and you can think of that
| | 02:18 | as number format or numerical format.
| | 02:20 | I'm going to create a variable, an
integer variable, that I will call a and
| | 02:25 | I'll give a number 798.
| | 02:30 | I can print line and there's
my variable there at the bottom.
| | 02:37 | Now if I want to make it a
string, what I do is this.
| | 02:40 | I do String and I'm actually going to
create a new variable, I am going
| | 02:44 | to call it Capital A. Processing is case
-sensitive so I can do this, and then I
| | 02:50 | can you put nf, for a numerical format
give the variable name for the original
| | 02:54 | number which in this case is a. And then the
number of digits I want in this particular string.
| | 02:58 | I want to 3 because
there are three digits in it.
| | 03:01 | I am going to do a little print line (A);
| | 03:05 | and you can see what it looks like.
| | 03:07 | Now what's interesting here is it looks
exactly the same, except the second one is a string.
| | 03:11 | The first ones is a number,
the second one is a string.
| | 03:14 | I can show you, I can make it very different.
| | 03:17 | If I make it, so that it's 10 digits.
| | 03:21 | And now we have a bunch
of leading zeros onto this.
| | 03:24 | Processing has other functions for
adding positive or negative signs and for
| | 03:29 | dealing with decimal places and
padding on and off, and I simply am going to
| | 03:34 | direct you to the reference, they
work exactly the same way as this one.
| | 03:37 | But the idea here is that you can take
a number and turn into a string which
| | 03:41 | makes it useful for the other
operations you can be doing with text.
| | Collapse this transcript |
|
|
5. Drawing AttributesIncorporating randomness| 00:00 | One of the great things about
Processing is that you can incorporate
| | 00:03 | randomness into your sketches.
| | 00:05 | This actually makes them seem much more
alive and much more interesting,
| | 00:09 | and I am going to show you how to use the
randomness functions in a few different ways
| | 00:13 | to create a more interesting sketch.
| | 00:15 | First thing I am going to do is I am
just going to come and put a comment here.
| | 00:21 | Then I am going to create a sketch.
| | 00:23 | Now what I want to do is I want to
create a what's called a dynamic sketch and
| | 00:27 | I'll talk more about this little bit later.
| | 00:29 | But I need to have two blocks of code.
| | 00:32 | The first one is a block that provides
some setup information, this is the stuff
| | 00:35 | that runs only once in the code.
| | 00:37 | And in this, is where I am going
to put the size 600x200 again, do the
| | 00:43 | anti-aliasing, I'm actually going to do
no fill on the shapes I am going to draw.
| | 00:51 | I am going to be using
ellipses, circles actually.
| | 00:56 | And I'll do stroke weight, I am
going to make them a little thick,
| | 01:00 | to 5 pixels, we have done that before.
And I think that's the essentials of
| | 01:03 | my information here.
| | 01:04 | What I am going to do next, is come
down and create a block for draw, and
| | 01:08 | this is code that cycles through up to 60
frames per second, until you tell it to stop.
| | 01:14 | And what I'm going to do on this one,
is I'm going to draw ellipses but what
| | 01:22 | I want to do is I want to put them in
random places, and I want to have them have
| | 01:27 | randomized diameters and even random colors.
| | 01:30 | So the way I am going to do this is,
I am going to create a few different
| | 01:34 | variables, I am going to have x and y and d
and d, I'll show you how I will create those.
| | 01:39 | First thing I'll do is I am going
to create a floating variable.
| | 01:44 | Float is for decimal places and since
the random function produces decimal
| | 01:47 | places, I am just going to
leave it exactly as it is.
| | 01:50 | I am going to have the variable called
x and I enter the function random and
| | 01:54 | if you want to go from 0 up to particular value,
all you need to do is put the higher limit.
| | 01:59 | And in this case, since x gives the
across values on the drawing,
| | 02:03 | I am just going to put width.
| | 02:05 | So it means anywhere on the x values
from 0 up to as big as the window is.
| | 02:10 | In this case, it's 600 pixels.
| | 02:12 | I am going to do a similar thing for the y.
I am going to put random, so at this
| | 02:18 | time I put height and so that also
starts at 0 and goes up to the maximum value
| | 02:23 | of the height of the window.
| | 02:25 | And then for the diameter, I am going
to do a little differently because I want
| | 02:30 | to specify both a lower and an upper limit.
| | 02:32 | I think I am going as small as 30
pixels in diameter and as large as 300
| | 02:38 | pixels in diameter.
| | 02:39 | And you may recall, that guarantees
me that, those larger ones will be drawn
| | 02:42 | at least partly off the screen.
| | 02:44 | Processing doesn't mind, it
will draw it wherever you want it.
| | 02:47 | That is enough to draw with black and so I am
just going to save this and run it as a test.
| | 02:53 | Okay, I have got few things is, it's
really fast and so what I am going to do,
| | 02:58 | again Processing runs up to 60 frames
per second, but I can slow down here
| | 03:03 | with a command called frame rate and
I'll put at about five frames per second
| | 03:07 | and we'll try it again.
| | 03:08 | Okay, now it's a little
slower but it is black on gray.
| | 03:13 | Now there's a few ways of working with that.
| | 03:16 | What I am going to do is I am going to
put random colors in and I'm going to
| | 03:21 | do that with stroke.
| | 03:22 | And what I need is three components,
an r for Red and Green and a Blue and I am
| | 03:27 | just going to put random
values in for each one of them.
| | 03:30 | I am going to do random 255 that's for Red,
random 255 for Green and random 255 for Blue.
| | 03:40 | And then I have a second parenthesis () to
close off the whole thing and it semi colon (;).
| | 03:44 | And now every ellipsis, every circle
will be drawn with a different color.
| | 03:53 | Cool. So now we have some colors.
| | 03:55 | On the other hand, what we have is
completely unregulated color variation, it
| | 04:00 | may be that you want just a
few different colors to show up.
| | 04:03 | And to do that there's a neat little
trick that involves using random integers
| | 04:08 | and arrays of colors.
| | 04:10 | So I am going to close that and what I
am going to do is, I am going to come
| | 04:15 | up to the top of the sketch and I'm going to
create an array of colors that I am going to use.
| | 04:20 | So color is the variable type, I'll
put the opening and closing square
| | 04:24 | brackets [] to indicate that it's an
array, and this particular palette, I've
| | 04:28 | found is called rainbow.
| | 04:29 | It's actually muted colors actually.
| | 04:32 | And what I'm going to do, I got
the equals in the wrong place, sorry.
| | 04:36 | So I have color, that has the variable
type, the brackets indicates an array.
| | 04:41 | Rainbow is the name of the array, then
equals and then I am just going to put
| | 04:46 | right here and curly brackets several hex codes.
| | 04:49 | So the first one is ffffcd, it's a
very light color in the background.
| | 04:57 | The next one is CC5C54 next one is
F69162 and one after that is 85A562 and
| | 05:15 | the last one I am going to have is 7AB5DB.
Great, and so now I have got five different
| | 05:23 | colors in my array, I can
close that with {} and put (;).
| | 05:28 | And now what I am going to do is I am going
to start calling on those particular colors.
| | 05:33 | Now, the first ones are very light-colored.
| | 05:35 | I am going to make that my background color.
| | 05:37 | So I am going to come down here and I am
going to put in lower case, background.
| | 05:41 | Now, I don't have to copy that code.
| | 05:43 | I could if I wanted but a neat way
to do it is to use the array function.
| | 05:48 | So I put rainbow, and then to indicate
that I want the first one in there,
| | 05:52 | I put square brackets and then 0, that's
its index number and that will give me
| | 05:56 | that color background.
| | 05:58 | And then if I want to draw on the index
numbers one, two, three and four, I can
| | 06:02 | use a random function to get from those.
| | 06:04 | So I am going to actually comment that
one function out, and instead what I'm
| | 06:09 | going to do is, I'm going to use a
stroke and I need to put a color in here.
| | 06:15 | I need to put the Hex code.
| | 06:17 | What I'm going to do though is I'm
going to say that I'm going to use the
| | 06:21 | rainbow and then I need
to give the index number.
| | 06:25 | Now the index number is going to be
a random number from one to four, and
| | 06:29 | the way I get that, this is going to
involve just a little bit of back and forth here.
| | 06:33 | As I put random, and to get 1 to 4, I
can do 1 and I am going to do up to 5, now
| | 06:39 | that's because 5 is an exclusive limit,
it goes actually from 1.000 to 4.999.
| | 06:45 | And then what happens is, if I cast
the variable, because for index numbers
| | 06:50 | I need integers, I come back here and I
put the whole thing in parentheses ()
| | 06:56 | like that and if I go here, you can just
see, which ones these correspond to.
| | 07:01 | On the other hand, I see that for
index numbers, it needs to be in
| | 07:05 | square brackets [].
| | 07:06 | So I need to take that one and put it
in a square bracket and close this one
| | 07:10 | with a square bracket and then I need one
more closing parenthesis for the color function.
| | 07:14 | So it's kind of a mishmash there with
parenthesis, parenthesis, square bracket
| | 07:18 | parenthesis but as that's the
way it needs to do to get nested.
| | 07:22 | As so what that will do, is it will
pull one of those palette colors down
| | 07:26 | and the ellipses would be in those colors.
| | 07:28 | I am going to save this and I
am going to run it like this.
| | 07:32 | And now you see there's only four
different colors that are showing up and this
| | 07:36 | is kind of nice because they're all
chosen to be coordinated with the background
| | 07:39 | color and with each other.
| | 07:42 | And that's the general idea of
Processing the random function.
| | 07:46 | In the next two videos, I am going to
show you a couple of variations on this.
| | 07:50 | One is a very short one about how to
shuffle information using a Java command
| | 07:54 | and another one is a different kind of
randomness, it's called Perlin Noise.
| | Collapse this transcript |
| Using Perlin noise| 00:00 | In this movie, I want to introduce you
to a special kind of random function in
| | 00:04 | Processing called noise and this is
actually what's called Perlin Noise.
| | 00:09 | And Perlin noise was developed in the
movie industry as a way of creating a very
| | 00:14 | realistic and organic looking textures.
| | 00:17 | In this example, I'm going to be using a very
simple one-dimensional version of Perlin noise.
| | 00:23 | Just to draw lines of different
heights that you can also use it to create
| | 00:27 | two-dimensional and three-dimensional
shapes and textures as well.
| | 00:31 | So, for this one, I'm just going to
start by putting little comment up at the top
| | 00:35 | and then I'm going to
introduce a few variables.
| | 00:38 | I'm going to have an integer variable
that's going to determine the number of
| | 00:43 | lines we draw in a picture.
| | 00:44 | Then I'm going to have the height variable
called X and we will simply declare
| | 00:50 | without initializing.
| | 00:52 | Then I have the variable Y that will
be a float variable, and that's .05.
| | 00:56 | Then I'll have another float
variable that we will call noiseY.
| | 01:04 | Okay so, these are some variables
that are going to go in to the drawing.
| | 01:08 | I'm going to create my window, 600x200 pixels.
| | 01:12 | And I'm going to just put a very basic
white background, and I'm going to have
| | 01:17 | relatively light gray, well, medium gray strokes.
| | 01:20 | Now, what I'm going to do here is I'm going
to create a for loop to create the drawing.
| | 01:25 | We will talk more about
for loops a little bit later.
| | 01:28 | But, it's a great way for something that
repeats and saves you a lot of coding time.
| | 01:33 | So, what I'm going to do here is I'm
going to create a little loop, that says for
| | 01:38 | and then int i that's a local
variable that I'm going to use for counting.
| | 01:42 | I'm going to start at zero,
actually I'm going to start at one.
| | 01:45 | And, then I'm going to go until I'm one
less than my number up top and then we're
| | 01:49 | going to advance one step at a time.
| | 01:51 | And then I put curly brackets {}.
| | 01:53 | What I did is I decided
that I want the for loop to do.
| | 01:57 | I wanted to take the variable Y
which earlier I initialized at 0.05.
| | 02:01 | And I'm going to have it increment every
time it runs through just by small amount 0.02.
| | 02:06 | And this is something that
helps set up the noise function.
| | 02:09 | Then I'm going to create an X-variable
because I'm going to be drawing a
| | 02:12 | bunch of vertical lines.
| | 02:13 | And I'm going to have this, so that x is equal
to i. So, it starts at 1, it goes through 99.
| | 02:19 | But, I'm going to multiply it times
the width of the window divided by the
| | 02:24 | number of bars I am going to put in.
| | 02:26 | All this does is, it evenly
distributes them across the window.
| | 02:29 | So if I change the number of lines I
want to draw, or if I change the size of
| | 02:34 | the window, it'll adjust
automatically to spread them at evenly.
| | 02:36 | Then I'm going to take the variable
that I declared above noiseY and this is
| | 02:40 | where I actually bring in the noise function.
| | 02:44 | And I'm going to do it on the
variable Y which I earlier declared and
| | 02:49 | initialized at 0.05.
| | 02:50 | And then here in the loop, I have
an increment of 0.02 every time it
| | 02:53 | goes through the loop.
| | 02:54 | I am going to do noiseY and I'm
going to multiply that times the height.
| | 02:59 | The reason for that is noise
gives a number between zero and one.
| | 03:03 | And I want this to be able to go all
the way up to the top or to the bottom of
| | 03:08 | the window as need to be.
| | 03:10 | So, it's really is turning it into a
proportion and then I multiply that times
| | 03:13 | the height and that makes it work.
| | 03:15 | Then I put in how to draw a line.
| | 03:17 | Each line starts at X and I'm going
to have them start at the bottom of the
| | 03:21 | window, which is why I'm putting height.
| | 03:23 | So, that's the one end of the line.
| | 03:25 | Then they're going to go straight up
so the X is the other end.
| | 03:28 | And then I'm going to have to do noiseY.
| | 03:32 | So, that's actually going to
be a distance down from the top.
| | 03:35 | And now I'm going to save
this and I'm going to run it.
| | 03:38 | And you see what we have here are
lines that vary one from another and it's a
| | 03:42 | random sequence, but you can tell it
looks like hills, it looks like the
| | 03:46 | mountain profiles in the 'Tour de France'.
| | 03:48 | And if I run it again, I
get a different profile.
| | 03:51 | But, you can see that each one of them
really does have an organic look to it.
| | 03:59 | And that's one of the big advantages
of the Perlin noise is that you are able
| | 04:04 | to create random sequences that are
unpredictable but, have a natural and
| | 04:08 | organic feel to it.
| | 04:09 | I'm doing a one-dimensional one here where
all I'm varying is the height of the line.
| | 04:13 | But, if you do a two-dimensional
one, you can get textures.
| | 04:16 | At three-dimensional one, you can get
more complex textures and shapes as well.
| | 04:20 | So, the noise function is one
of great things in Processing.
| | Collapse this transcript |
| Shuffling with Java| 00:00 | The last function I want to show you
that deals with randomness in Processing
| | 00:03 | is how to shuffle the items in an array.
| | 00:06 | Now, you would think that this would be
an easy thing to do, but unfortunately
| | 00:09 | Processing does not have a built-in
shuffle function and I've seen a number of
| | 00:14 | people create rather long Byzantine
complicated functions that can do shuffling.
| | 00:19 | On the other hand, there is a shortcut
for this and it is because Processing is
| | 00:23 | based on Java and while Processing
does not have a built-in shuffle function,
| | 00:28 | Java does and so what I'm going to show
is you is how to import a little bit of
| | 00:34 | Java code and run it to
shuffle items in an array.
| | 00:36 | Let's start by simply putting little
comment up here at the top, with the
| | 00:41 | sketch name and then I'm going to put
-- I have to import a library and it's
| | 00:48 | the Java utilities and so I write
import and then java.util.* and that brings
| | 00:55 | in all of the files within that
particular folder and once I get that in,
| | 00:59 | I can then define my array.
| | 01:02 | Now I'm going to use a set of integers,
but Java variable names work a little
| | 01:06 | bit differently than in Processing, so
if in Processing if I want an array of
| | 01:10 | integers I would do int like that,
but in Java, I have to do it slightly
| | 01:15 | differently, I have to use a capital I
and I have to spell integer out all the way.
| | 01:20 | Otherwise, it's the same.
| | 01:21 | I do the opening and closing square
brackets, I give the array a name, I'm
| | 01:25 | I can going to call it nums for numbers and
then I can do equals and then in curly
| | 01:29 | brackets I'm just going to put
five numbers, and so there's the array that
| | 01:33 | I'm going to work with.
| | 01:38 | We can just check how this array
looks by using the print line command and
| | 01:42 | you see at the bottom, I'll close this,
we don't need that front of this one,
| | 01:48 | we have 1, 2, 3, 4, 5.
| | 01:50 | Now what I'm going to do is call on the
special Java function and this one needs
| | 01:54 | to be typed exactly as it appears.
Again, capitalization is important.
| | 01:58 | We start by doing Collections and then dot (.)
| | 02:03 | shuffle and then the thing that we are
going to shuffle is the array, so we need
| | 02:08 | to do parentheses and then we do
capital A for Arrays and then dot (.)
| | 02:12 | as capital L List and then I put the
name of the array that I want to shuffle,
| | 02:18 | in this case it's nums, I close that.
| | 02:21 | That's the parentheses for the name of
the array and then I close that for the
| | 02:24 | function and then finish with the semicolon (;)
| | 02:26 | and when I do that I can do print line
again for nums, this will print it before
| | 02:32 | and after shuffling you'll see how it
looks and now it's printed out twice.
| | 02:38 | The first one shows the 1, 2, 3, 4, 5,
the second time is 5, 4, 2, 3, 1 if I run
| | 02:44 | it again I'll get a different shuffle.
| | 02:45 | Then this 4, 2, 5, 3, 1 and so forth
and so this is in fact the easiest way to
| | 02:52 | shuffle an array in Processing and it
also gives you tip about using Java.
| | 02:56 | Now I should mention, if you want
to get some really strong skills in
| | 03:01 | Processing, using some Java would be a
wonderful thing and Lynda.com has two
| | 03:06 | courses that would be
particularly useful in learning Java.
| | 03:09 | The first one is the Java Essential
Training, and this would give you a lot of
| | 03:14 | the information that you could then
import into using with Processing.
| | 03:17 | And the second one is Up and Running
with Java Applications, and with the two of
| | 03:22 | those, I'll be able to bring in some
much stronger skills into Processing and
| | 03:26 | have even a broader range of
possibilities than you would otherwise.
| | Collapse this transcript |
| Specifying line attributes| 00:00 | In this next video, we're going to
look at some of the ways that Processing
| | 00:03 | allows you to modify the way that
lines are drawn as well as circles and
| | 00:08 | rectangles, with some pretty fundamental
things like stroke weight, the ends of
| | 00:13 | strokes and the way things are joined
together as well as methods for placing
| | 00:16 | rectangles in the circles.
| | 00:18 | Let's start by drawing a few lines and
show some functions that you may have
| | 00:22 | already seen a few times.
| | 00:23 | I'll start by putting the name of the
file as a comment and them I'm going to
| | 00:29 | put in a palette and I call it
rainbow, I've used this one before.
| | 00:34 | And so it's an array of colors, I'm
just going to put in FFFFCD, CC5C54, F69162,
| | 00:41 | 85A562 and the last one is 7AB5DB.
| | 01:00 | Okay, this is a palette I've
used previously. All right.
| | 01:04 | Now what I'm going to do is
I'm going to draw a window.
| | 01:08 | I'll make it 600x200, and we'll
just pull that up really quickly.
| | 01:12 | It's got a gray background.
| | 01:13 | So what I'm going to do is I'm going to
adjust the background, to be the first
| | 01:17 | color in the palette, and that one
will just be rainbow[0], like that.
| | 01:25 | Now, we've got our tan
color back there. All right.
| | 01:28 | The first thing I'm going to do is I'm
going to explain something I've used in
| | 01:32 | nearly every drawing that is the anti-aliasing.
| | 01:34 | We have the opportunity to draw lines.
| | 01:37 | Let me draw a line for instance that
goes from 50 pixels in divided by 2,
| | 01:43 | over to 550 pixels and still the height
divided by 2, we should make this a thicker line.
| | 01:50 | So I'll just stroke 20 pixels.
| | 01:53 | I'm also going to adjust to fill here,
I'm sorry that should be strokeWeight
| | 01:58 | because the stroke is going to be
one of the colors, now I'm going to use
| | 02:04 | rainbow[1], there we go.
| | 02:07 | Now by default anti-aliasing is not
turned on and the funny thing is it's really
| | 02:13 | hard to tell that it's not going on
except sometimes, it seems like a little
| | 02:17 | fuzzy at the ends, where they
are circular or they are diagonals.
| | 02:20 | This one is just a tiny bit fuzzy, and
so what I'm going to do is what we've
| | 02:24 | done in basically every other one, is
I'm going to turn the anti-aliasing on
| | 02:28 | that's the first attribute that we're
looking at, do that with smooth and it's
| | 02:32 | slightly sharper there you can tell.
| | 02:34 | Now, if for some reason you ever
wanted to turn anti-aliasing off,
| | 02:39 | the complimentary function to this is noSmooth.
| | 02:43 | And since, I have it coming second,
the anti-aliasing will get turned on and
| | 02:47 | then right back off and we have the
slightly fuzzy ends again, a little easier
| | 02:51 | to see this time, but I'm going to
close that and I'm going to comment that one
| | 02:56 | out, I don't want that anymore.
| | 02:57 | The next thing I'm going to show you is well,
I've already showed you, it's the strokeWeight.
| | 03:02 | You can change the thickness of these
strokes by designating the number of pixels.
| | 03:06 | This one is designated 20 pixels.
| | 03:09 | You can make it as thick as you want.
| | 03:10 | I can make it, let's make it
just for fun, 180 pixels wide.
| | 03:14 | So now it's really big.
| | 03:15 | Now, the important thing to realize
about this is how it positions the strokes
| | 03:19 | and how it measures them.
| | 03:21 | You may see here that the line
doesn't start until it's 50 pixels in.
| | 03:25 | On the other hand, the line that's
drawn here goes off the screen at both ends.
| | 03:29 | What happens is, is at the round cap at
the end is in addition to the length of
| | 03:34 | the line, it's the lines coordinates
in this case 50 and halfway down the
| | 03:38 | height, determine the center of the round cap.
| | 03:42 | Also, it determines the center of the line.
| | 03:45 | So if you're trying to get things lined
up, you need to understand that you're
| | 03:47 | having the position of the line plus
half of the thickness of the line on either
| | 03:52 | side as a function to deal with.
| | 03:54 | I'll get that back to a more reasonable
value, 20 works and there's that one line.
| | 03:59 | In fact, right now I'm going to talk
to you about how to do the stroke caps.
| | 04:03 | You see how these are circular on the end.
| | 04:06 | What you can do right here is the
function is strokeCap and the default is ROUND
| | 04:13 | and it has to be in all caps like that.
| | 04:17 | But you have some other options.
| | 04:18 | In fact, let me copy this and I'll paste
it and show you some of the other options.
| | 04:23 | So the first one will be ROUND, the
second one will be SQUARE, and the third one
| | 04:31 | will be PROJECT, looks like
project, but it's project.
| | 04:34 | And then I'm going to put these things
at different places on the lines,
| | 04:37 | I'm going to make them all the same length.
| | 04:39 | I'll just do this one at a height of .25,
I can just copy that down here.
| | 04:50 | That one can still be in the middle and
this one, we'll do height times .75 and
| | 04:58 | so they should be one
above another, and there we go.
| | 05:03 | And so the first one has the round
endings, that's the default and you can
| | 05:07 | see how it's longer than the one that simply
as a square ending that stops, where the x is.
| | 05:12 | The bottom one project is kind of a
funny one because what it is is it's still
| | 05:16 | a square cap, but it's a square cap that
goes the same distance that a round one would.
| | 05:22 | So, if you need to have a square cap
and a round cap, that are exactly the same
| | 05:26 | length, you would need to use project.
| | 05:28 | And understanding that both of them
are actually, slightly longer than the
| | 05:32 | designated line coordinates.
| | 05:34 | So that's one attribute of
lines that you can modify.
| | 05:37 | Next thing I want to show
you is about rectangles.
| | 05:40 | So I'm going to take this information
here, I'll just comment these lines out,
| | 05:44 | and I'm going to come down and draw a
few rectangles and this one I'm going to
| | 05:49 | leave the strokes the same. What I am
going to do though, is I'm going to turn off
| | 05:53 | the fill and I'm going to draw a
rectangle, I'll put it near the middle.
| | 05:57 | Actually I'll just go 100 pixels in,
50 pixels down, this will not be near,
| | 06:04 | I know this would be near the left and
I'll make it 100 pixels wide and 100 tall.
| | 06:08 | And so there I have my rectangle,
it's drawn in the same colors, it has no
| | 06:12 | fill, it's got the same thickness of 20
pixels and again, what this means also,
| | 06:17 | is that the actual coordinates for the
rectangle are slightly to the inside of the line.
| | 06:21 | The coordinates are running
down the middle of the line.
| | 06:24 | So when you are placing things on the
edge, in fact, the easiest way to see that
| | 06:28 | is if I move this right to the origin
to 0, 0 and what you'll see there is that
| | 06:34 | you only get half of it because the
actual coordinates are running down the
| | 06:37 | middle of the line and that's
how it got placed on this one.
| | 06:41 | So when I run it back out to where it was
before, I just hit Undo to get those back.
| | 06:46 | There it is with its square corner.
| | 06:48 | Now, one thing is you can change
the way that their corners are drawn.
| | 06:51 | This is actually, what's right here,
the function I want to use here is called
| | 06:56 | strokeJoin, it's for drawing
corners and any shape that has corners.
| | 07:00 | And the default which we've been using
is a MITERED or a MITER edge, that's the
| | 07:07 | default, but we have a few other choices.
| | 07:09 | Let me copy this and I'll do to two others.
| | 07:13 | I'm going to comment this one out for a moment.
| | 07:15 | The other one that we can do is a
beveled edge and please note, again,
| | 07:20 | Processing is case-sensitive so these
things need to be written exactly this way.
| | 07:23 | I'll comment out the second one, so now
we can see what the rectangle looks like
| | 07:27 | with our beveled edge.
| | 07:28 | It's chopped off the way that you often
do university varsity jacket letters and
| | 07:32 | then the other choice, we can comment
out the bevel and the third one is rounded
| | 07:37 | corners, just do ROUND, I'll save it
and run it and there you can see that one,
| | 07:44 | it makes the same sense and again,
what you can tell is that the center point
| | 07:48 | for the radius is where the
coordinates for the corners actually are.
| | 07:51 | And so what you you've seen here are
some of the basic ways of drawing lines for
| | 07:55 | individual lines and for shapes in
Processing to give a little more variety to
| | 07:59 | your drawings and some more visual interest.
| | Collapse this transcript |
| Changing placement modes| 00:00 | Processing also gives you several
functions for positioning shapes such as
| | 00:05 | rectangles and ellipses.
| | 00:07 | And in this movie, I want to show you
what some of your options are for doing that.
| | 00:11 | I'll begin by simply putting a comment
at the top with the name of this video.
| | 00:16 | Then I'm going to create a window that's
600x200 and I'll turn on anti-aliasing.
| | 00:22 | Then I am going to draw a rectangle.
| | 00:25 | I'll go 250 pixels over and then come 50 pixels down
then I'll make it 100 wide and 100 tall.
| | 00:34 | I'll also makes these strokes,
strokeWeight of 20 pixels and so there's my
| | 00:43 | default shape right there in the middle,
just a default white fill with a black border.
| | 00:50 | Now, note where it is.
| | 00:51 | It's smack in the middle.
| | 00:52 | This is the default positioning.
| | 00:55 | I did this because I knew that it would
be 100 pixels wide, and I put the corner
| | 01:00 | it positions by the top left corner
250 pixels over and 50 pixels down.
| | 01:05 | On the other hand, you have an
option of using different placement modes.
| | 01:10 | The one that I just used and by
the way they are called rectMode.
| | 01:14 | The one I just used as the default is
called corner, uncomment that out, because
| | 01:18 | I don't need that right
now but I'll leave it there.
| | 01:21 | Now I'll show you the next one that
you're likely to use and that is center.
| | 01:26 | And in this case, for the X and Y
coordinates you put this center of the rectangle.
| | 01:30 | So in this case, what I would want to
do is I want to do it just like this.
| | 01:34 | In fact, if you want to put it right in
the middle of the drawing, width divided
| | 01:38 | by two and height divided by two
and it should look exactly the same.
| | 01:45 | Except now you see, I have
different X and Y coordinates.
| | 01:48 | Previously, I provided the
coordinates for the top left corner.
| | 01:51 | Now I provided the coordinates for the
very middle of it, that's rectMode center.
| | 01:55 | There's a third mode that can come in
handy and what that one is, is rectMode
| | 02:02 | corners with an S. It's plural and
what you do in this case is, instead of
| | 02:06 | specifying the starting point with X and Y
coordinates and then giving the width
| | 02:12 | and height, you simply give the X and Y
coordinates for one corner, and then the
| | 02:16 | opposing corner in that case
I'll do it like this, 250 and 50.
| | 02:22 | If I want to make it 100 wide and 100
tall, I'll go like this, so I have the
| | 02:27 | X and the Y for the top left corner and
the X and Y for the bottom left corner
| | 02:31 | and again it's going to look exactly
the same, but all three of them were drawn
| | 02:35 | with different commands.
| | 02:36 | There are similar commands that can be
used with ellipses, I'll close this and
| | 02:40 | I'll comment those out for a moment.
| | 02:42 | If you're drawing an ellipse, the
default mode the ellipseMode is center.
| | 02:52 | However, there are a few other modes,
let me just copy this down for a moment.
| | 02:58 | The other choice is corner, corners
and finally, radius and that's not
| | 03:08 | really positioning one.
| | 03:10 | I'll explain how each one of these works.
| | 03:11 | I'll come down here, let me comment
out the three of these and I'll draw an
| | 03:16 | ellipse and we'll put this one in the
middle and I'll do that by going width
| | 03:22 | divided by two, height divided by two
and then I specify the diameter and I'll
| | 03:27 | make it a 100 wide and 100 tall, and
there we have these circular analogue to
| | 03:33 | the rectangles that we had earlier
it's positioned right in the center.
| | 03:37 | Now I'm going to specify
its position with the corners.
| | 03:39 | Now, this is little tricky.
| | 03:41 | When you use a corner, it's not an
actual corner of the circle, it's the
| | 03:45 | corner of the bounding box that you
could draw around the circle, so if it had
| | 03:49 | a perfect square around it, then you're
drawing the top left corner of that square.
| | 03:53 | So I'm going to uncomment out that one
and bring this one back in, and to do
| | 03:57 | that maybe I'll bring this up here and
leave it right there, and do a similar
| | 04:02 | thing for these ones.
| | 04:04 | Okay I'm just going to make it so
they'll have their own commands there and now
| | 04:09 | I'll comment each of those out.
| | 04:12 | Okay, and this one we're going to
specify the same way we did the first
| | 04:16 | rectangle and I'm going to take that
and when I go to 250, and then the corner
| | 04:22 | needs to not be in the middle, but it's
need to be at 50 pixels and when I run that,
| | 04:27 | we get our circle again, but
with the different coordinate system,
| | 04:30 | it's now being positioned by an invisible
dot that's on the top left of where the
| | 04:34 | boundary box would be.
| | 04:36 | Okay, the next one is corners and
this is just like with the rectangles.
| | 04:41 | This is where you specify
the top and the bottom corners.
| | 04:44 | In fact I'm just going to come up here
and I'm going to grab those coordinates
| | 04:48 | right off of there, bring them down
to here uncomment that and run it.
| | 04:55 | Again, a very different set of parameters
that I put in, but you get the same result.
| | 05:00 | The last one that I'm going to show
is the radius function and as you might
| | 05:05 | guess that all that is, is that the same thing.
| | 05:08 | It positions it by the center, but
instead of specifying the diameter,
| | 05:14 | you specify a radius.
| | 05:16 | So I'll turn those off and I'm going
to change this one, instead of being 100,
| | 05:20 | 50 to 50 and it's my magical
unchanging drawing even though I've changed the
| | 05:28 | modes every time it has come out the same way as
long as you make adjustments in the parameters.
| | 05:33 | And so you see that you have several
options on how you position and size the
| | 05:37 | shapes and depending on the situation,
that you're using, especially with
| | 05:41 | different variables, each one of these
will come in useful at different times.
| | Collapse this transcript |
| Understanding color attributes and functions| 00:00 | Processing was created for graphical
output and as such it has a number of ways
| | 00:04 | of working with colors.
| | 00:06 | In this movie, I'm going to show you
just a very few things about how colors
| | 00:10 | are specified in Processing.
| | 00:12 | I'm going to start by just putting a little
comment in here with the title of this sketch.
| | 00:18 | I will create a window, 600x200,
and I'll turn on anti-aliasing.
| | 00:23 | I'll turn off strokes, no borders on the shapes.
| | 00:30 | I'm going to be drawing a few rectangles.
| | 00:32 | I'll be doing rectMode center
in this particular case.
| | 00:39 | And, then also I'll have a
background that's dark gray.
| | 00:43 | Let's see if we just draw that, wonderful.
| | 00:46 | What I going to do now is I'm going to draw a
few rectangles and I'm going to draw like this.
| | 00:51 | Well actually, I'm going to use a few
variables to specify where the rectangles go.
| | 00:54 | The first one is how many rectangles do I want?
| | 00:57 | In this particular case I want 4.
| | 00:59 | And then I can use an equation to
determine where the centers of each of those
| | 01:04 | rectangles should be.
| | 01:05 | When I want the shapes to be spread out
evenly, what helps is to take the width
| | 01:09 | and then split it up into dividing lines
and I can do that by taking one more
| | 01:13 | than the number of things that I have.
| | 01:15 | So, I'm going to go like this.
| | 01:17 | I'm going to take the width of the
window and divide it by n+1 and that'll give
| | 01:22 | me sort of where they dividing lines would be.
| | 01:24 | It won't draw dividing lines.
| | 01:26 | But, it gives me the coordinates
that I need to spread things out evenly.
| | 01:29 | Then what I'm going to do is I'll draw
rect and I'll go to X. I am going to do X * 1.
| | 01:35 | Then I'm going to draw
this right down in the middle.
| | 01:37 | So, the height divided by 2
it'll make that 100x100.
| | 01:40 | Now, you can draw the first one and
just see it on there, there we go, good.
| | 01:45 | Now, what I want to do is I want to
specify the fill for this in the middle.
| | 01:51 | And, while I'm going to start, even
though I've done this several times already,
| | 01:55 | I just want to make it clear that when
you specify fill or stroke and you put
| | 01:59 | just a single number, you're using gray scale.
| | 02:02 | And it goes on 0 to 255 scale,
where 0 is black and 255 is white.
| | 02:08 | The 116 here is a middling gray.
| | 02:10 | And in fact, if I press Run,
you see it right there on the box.
| | 02:14 | Okay, now, if I want to modify this a
little bit, I can copy it and I can add a
| | 02:21 | second parameter to it.
| | 02:23 | When you put two parameters in the
specification for fill or stroke,
| | 02:28 | what you're doing is grayscale.
| | 02:29 | But, the second number is now as
alpha or transparency level, where 0 is
| | 02:33 | completely transparent and
255 is completely opaque.
| | 02:36 | So, this one would be on
the transparent end of things.
| | 02:39 | I'm just going to have it draw on
the next space, Save it and Run.
| | 02:45 | And now what you see is it appears to be darker.
| | 02:47 | What's interesting is that the
coloring of the rectangle is actually
| | 02:50 | specified in the same way.
| | 02:52 | They're both on 16 on a 255 scale.
| | 02:55 | But, because the background is
darker, this one is letting some of the
| | 02:58 | background through, so
it appears darker that way.
| | 03:00 | And so, that's a grayscale with alpha.
| | 03:03 | And now, what I'm going to do is I'll
extend that again, I'll add a third parameter.
| | 03:08 | This time I'll go to 116 to 173, to 146,
and when you specify three numbers in there,
| | 03:17 | you're working in an RGB color system.
| | 03:20 | And this in fact, is going to be green.
| | 03:23 | And so now I have a green box
right next to the other ones.
| | 03:26 | So, that's when I have three factors or
three numbers within the fill function.
| | 03:31 | And then by extension I can go one more.
| | 03:35 | And if I had a fourth parameter in here,
what I've included now is color with an alpha.
| | 03:40 | So, there's going to be
transparency to this color.
| | 03:43 | I'll just move it out a little bit,
Save it and I'll Run it.
| | 03:47 | And now you can see that it's green
but is darker and that's because it's
| | 03:51 | letting some of the darkness of the
gray background in the way through.
| | 03:54 | Otherwise, it's specified with the same
shade of green, but, is tinted because
| | 03:58 | of the darker background.
| | 04:00 | Anyhow, and so, those parameters;
| | 04:02 | the 1, 2, 3, or 4 parameter system
for fill and for stroke are ways of
| | 04:08 | specifying colors, both on grayscale,
color, and transparency levels in
| | 04:12 | Processing and these can be very
useful tools in your own sketches.
| | Collapse this transcript |
| Exploring color spaces| 00:00 | Processing allows you to specify colors in
several different systems or color spaces.
| | 00:06 | Now the most common one is the RGB, Red,
Green, Blue, or you can use either a
| | 00:11 | three numbers on a 0 to 255 scale
or you can use a single hex code.
| | 00:16 | The other of choice is what's called
an HSB system, which stands for Hue,
| | 00:20 | Saturation and Brightness which is also common.
| | 00:23 | Although it tends to use a different
scale system where the Hue part is
| | 00:26 | specified on the 360 degree circle
and the Saturation and Brightness are
| | 00:30 | specified on 100% scale.
| | 00:33 | In this movie I want to show you how to
use each of these different color spaces
| | 00:37 | to get what you want in your drawings.
| | 00:39 | I'm going to start by just putting a
little comment with the name of this sketch.
| | 00:45 | Like the last movie I'm going to start
by specifying the size of the window,
| | 00:52 | I'm also going to turn on anti-aliasing.
I'm going to turn off the strokes on the shapes.
| | 00:57 | I'm going to put in a background,
let's say relatively dark gray and
| | 01:06 | I'm going to position the
rectangles by their centers.
| | 01:11 | Then I'm going to use two variables
that help me position the rectangles.
| | 01:14 | The first one is the number of
rectangles that I want to draw.
| | 01:18 | I want to use four in this case and then
I'm going to use a float variable for X
| | 01:22 | to help me get the positions for
each one of this, and that'll be the width
| | 01:26 | of the window divided by n+1, that'll give me
the center points for each of the rectangles.
| | 01:32 | Then what I do, because I put in the
code for the rectangles, I'll do X times 1
| | 01:41 | and we'll put them the center halfway
down and I'll make them 100 pixels wide
| | 01:45 | and 100 pixels tall.
| | 01:46 | Now what I'm going to do though is I'm
going to start specifying the colors.
| | 01:50 | I'm going to use a green that I had
from the previous movie and I'll specify
| | 01:54 | this in the default RGB way that we
normally like to use in Processing.
| | 01:58 | So what I'm going to do is I can
specify fill and I'm going to put in 116, 173, 146.
| | 02:02 | And when I do that I get a
green box here on my gray background.
| | 02:10 | Now as you've seen a number of times,
you can also use hex code to specify these.
| | 02:16 | Now if it turns out that you have a
color that you like and you know either
| | 02:20 | the three RGB codes or you know the hex code,
there is a way to get from one to another.
| | 02:24 | What you do is you come up to Tools
and you come to Color Selector and what
| | 02:31 | you can do here is you can enter the
colors that you have, so right now my RGB
| | 02:35 | is 116 and the G is 173 and the Blue
component is 146 and then you see that
| | 02:45 | that's the same one that I have up
here on the top and right down here is the
| | 02:49 | hex code that I need.
| | 02:51 | It's 748092, so I'm just going to copy that,
I'll put it down here for a second,
| | 02:56 | because now I'm going to copy this, the
rectangle information and I'm going to
| | 03:02 | specify fill by putting in this hex code,
I can delete this line, and I'll move
| | 03:09 | this over to the next space.
| | 03:11 | So, what I have here is the same color
specified two ways, this is the three
| | 03:16 | number RGB code, and the next one is
the unitary hex code, which actually is
| | 03:22 | a version of the RGB code.
| | 03:24 | And so when I press Run, I get to
identical squares right next to each other.
| | 03:32 | Now it turns out that there is an
interesting alternative, you saw also that
| | 03:37 | there was the HSB system, if I can go
back to that window, that's where hue,
| | 03:41 | saturation and brightness, and when I
put that in here, what I have to do is
| | 03:47 | I have to tell Processing that I'm
using the HSB, Hue, Saturation, Brightness
| | 03:53 | color mode, so I put in
colorMode and I'll put in HSB.
| | 03:58 | Now, by default it's RGB, and if I
wanted to, I can copy that and put it up here
| | 04:04 | earlier, and put RGB, but that is
the default, I don't need to do that.
| | 04:10 | What I'm going to do down here is
I'm going to put in HSB, but HSB uses a
| | 04:15 | different set of dimensions.
| | 04:17 | Now by default, Processing will try to
use the 0 to 255 system, even though on
| | 04:22 | the color selector it gave me the hue
in terms of degrees around in a circle,
| | 04:27 | and the saturation and brightness
in terms of 0 to 100%, so you need to
| | 04:30 | actually specify that and what you can
do here is when you put the color mode,
| | 04:34 | you put HSB, you can then put numbers
to specify what is the maximum value for
| | 04:40 | each of the components.
| | 04:42 | In this case, I say that the Hue, it
has a maximum value of 360, Saturation and
| | 04:46 | Brightness, each of them maximum 100.
| | 04:49 | Then what I can do is I can come down and
I can specify the fill using those numbers.
| | 04:54 | If I go back to the Color
Selector, I see they're 151, 32 and 67;
| | 04:59 | 151, 32 and 67, and then I'm going to
draw a rectangle again, and put that down
| | 05:09 | right here and then I've a third
rectangle with an identical shade of green.
| | 05:15 | Now I'm going to show you one other trick,
there is a fourth way of working with
| | 05:19 | colors that is similar to the color selector.
| | 05:21 | If you go up to Tools in the menu and
go to the bottom to Add Tool, one of the
| | 05:28 | choice is, is what's called the Color
Selector Plus, if you click on that and
| | 05:33 | click Install, let me close that.
| | 05:35 | Now we come back to Tools and the Color
Selector Plus is an option near the bottom.
| | 05:41 | This is a similar tool, but you see it's
got a lot more choices and it let's you
| | 05:46 | to do some other things
that you couldn't do otherwise.
| | 05:49 | What I'm going to do here is I'm going
to take the hex code that I have for the
| | 05:53 | color and I'll just paste it in
right there and it brings up the one.
| | 05:57 | And now what you see here is we have
the RGB codes, the 116, 173 and the 146,
| | 06:01 | that's the same.
| | 06:04 | And then we have Hue, Saturation and Value.
| | 06:06 | Now what's interesting is this one is using a
slightly different system here to do the things.
| | 06:11 | This one is actually using a 0 to 255
scale for the Saturation and the Value,
| | 06:16 | so what I'm going to do now,
actually I'll just copy all of this.
| | 06:21 | It's still an HSV and HSB are the same
thing or Value and Brightness, just two
| | 06:27 | different terms for the same thing, so
I can leave it as HSB, but I do need to
| | 06:31 | specify that I'm on a 255 scale for this.
| | 06:35 | It would be nice if that were indicated
more clearly on this, but we have what we have.
| | 06:40 | And so the Hue is still 151, but the
Saturation goes from 32 to 84, because I'm
| | 06:48 | on a different scale, and the
brightness or Value goes from 67 to 173,
| | 06:55 | and otherwise, I draw in my fourth rectangle,
I can close this, it floats and stays
| | 07:00 | on the top of everything.
| | 07:01 | I'm going to Save this
and Run, and there you go.
| | 07:05 | And I've noticed that some times you
get very slight variations in color,
| | 07:09 | because I assume things like rounding
errors, but these are different ways of
| | 07:14 | specifying the same colors, four
different ways these three number RGB system,
| | 07:18 | the hex code for the RGB. You can
specify the Hue, Saturation, Brightness using
| | 07:23 | Processing with 360, 100, 100 system
or you can use the Color Selector Plus,
| | 07:29 | which also uses the HSB or
HSV with 360, 255, 255 system.
| | 07:35 | Anyhow, these are different ways
of specifying colors, and depending on
| | 07:38 | your purposes, each one of this can
be very useful in producing your own
| | 07:41 | images and visualizations.
| | Collapse this transcript |
| Using color palettes| 00:00 | In the last movie I showed you some of
the ways that Processing allows you to
| | 00:04 | work with colors in your sketches,
specifically the ways to specify colors,
| | 00:07 | both Grayscale and on RGB and HSB systems.
| | 00:11 | In this movie I want to talk to you
about color palettes or collections of colors.
| | 00:15 | Now I've already been using these in a
number of the sketches by specifying an
| | 00:19 | array of colors, but I want to show you
some of the resources that are available
| | 00:23 | for creating and examining
color palettes in your own sketches.
| | 00:26 | I'll begin by creating a sketch here,
putting the sketch name, I'll do a window
| | 00:34 | 600x200, turn on anti-aliasing, I'm
going to turn off the Stroke, because I'm
| | 00:41 | going to be a number of circles.
| | 00:43 | And then what I will do is I'll put
ellipse and I want four circles in there,
| | 00:47 | so they're going to be 120
pixels apart from each other.
| | 00:53 | That will draw the first ellipse.
| | 00:59 | Then I'm just going to
update each of these, here we go.
| | 01:05 | All right, so now I've got a code for
four circles, and in fact, I can just
| | 01:10 | make a drawing right now, and
there's my four white circles on my gray
| | 01:13 | background, but what I want to do is actually
create a palette here that I can use with these.
| | 01:18 | So the first thing I'm going to do is I
want to show you some of the resources
| | 01:22 | for determining palettes that
you can use in your own research.
| | 01:25 | There are three in
particular that I find useful.
| | 01:27 | I'm going to go to a webpage now and
one of them is called Color Brewer,
| | 01:32 | it's colorbrewer2.org.
| | 01:35 | Now this one was specifically written
for cartography for doing maps and
| | 01:40 | you may know about the famous four-color
problem where they found that you can use
| | 01:44 | just four different colors to separate
any map, but this gives you ideas on how
| | 01:49 | to separate things, as well as different
palettes, and options like colorblind safe.
| | 01:57 | And from these you can get the codes for the
colors that you're using in each of the systems.
| | 02:01 | These are RGB codes for the three
colors that are showing on the map right now.
| | 02:05 | You can also get the CMYK which is used
for printing, that's the cyan, yellow,
| | 02:09 | magenta, and key color, that were black
as well as hex codes for each of these.
| | 02:14 | Another option that's available is
called Color Scheme Designer and that's
| | 02:19 | colorschemedesigner.com, which allows
you to specify a particular color and you
| | 02:24 | can start looking at ways
of combining those colors.
| | 02:27 | For instance, you can get a
compliment to those colors.
| | 02:29 | In this case it's a blue or a triad
or a tetrad or an analogic one, or the
| | 02:37 | accented analogic, and so a
different combinations of colors.
| | 02:40 | What's one of the more interesting
things about this is you can actually preview
| | 02:44 | it as it would look on a webpage.
| | 02:45 | So if you come down to the bottom
you can see what it will look like a
| | 02:50 | little lorem ipsum text.
| | 02:51 | You see we have our accent color
there at the bottom, right, or the dark
| | 02:56 | page example, that one's a little bit
overwhelming, but it is automatically generated.
| | 03:00 | Okay, and that's one of the nice things
about the Color Scheme Designer, is it
| | 03:06 | allows you to see an idea of what
these color palettes would look like in
| | 03:10 | place on a webpage.
| | 03:12 | But the one that I prefer is the Kuler.
Kuler from Adobe, and this is the
| | 03:19 | servers where people create palettes and
they register them, and they place them
| | 03:24 | online, and what you can do is you can
simply go there and click on them, and
| | 03:29 | see a variety of different kinds of palettes.
| | 03:33 | Among the Crowds, Gypsy Tent, and
aside from just seeing these, you can also
| | 03:43 | click on this right here and you
can get at all the codes for them.
| | 03:47 | Click in the HSV, which is also the
HSB the RGB codes that we usually use.
| | 03:52 | The CMYK which is used for printing
and the LAB system, that is also used
| | 03:57 | occasionally, and the Hex codes for each one.
| | 04:00 | Now truthfully what I find most useful
is to come to Kuler, find a palette that
| | 04:04 | I like and then copy each of the Hex
codes over to Processing, and I end up with
| | 04:09 | something like this.
| | 04:12 | So I can take this one, and let's
just try looking at another one.
| | 04:15 | How about backstage?
| | 04:18 | And what I can do here with backstage
is I can get the first color, just copy
| | 04:26 | that and I'm going to go over to my
Processing drawing, and I'm going to
| | 04:31 | create an array and it's going to be a color,
it's an array, and I'm going to call it backstage.
| | 04:37 | So I don't put it here, the equals there,
put backstage, and then in curly
| | 04:44 | brackets I can start putting the codes.
| | 04:46 | I like to start with the background
color or the base color, and I can kind
| | 04:51 | of get the - no, actually I'll start with
this one here, go from darkest to lightest.
| | 05:04 | Great.
| | 05:04 | And if you want to, you can also sign
in and download this as an Adobe color
| | 05:10 | file that can be used in other programs as well.
| | 05:13 | So I've got an array here, I'm going
to close it with the curly brackets and
| | 05:17 | with a semicolon (;).
| | 05:18 | Now I'm going to do something
that may seem a little funny.
| | 05:20 | I'm going to create a second array,
color and then I'm just going to call it
| | 05:25 | palette, and that one is equal to
backstage and the reason I'm going to do it
| | 05:32 | that way is it allows me to create a
standardized references to colors and I can
| | 05:37 | change the palette if I want to.
| | 05:39 | And so now what I can do is I can
come down and put a background color for
| | 05:43 | my sketch and I can simply specify that I
want the first color in the array palette.
| | 05:52 | If I were to change to a different
palette, I could copy it in here where
| | 05:54 | backstage is and then simply
change the name here and then all of the
| | 05:58 | reference functions would remain the same, and
I'd still know the name of the original palettes.
| | 06:02 | So I found this is a helpful way to do things.
| | 06:05 | So that sets the background, and then
what I can do is I can then put in the
| | 06:09 | fill for each of these colors, and
I can use that in a similar system.
| | 06:13 | I'll just call palette, because I now
have a duplicate array named palette, and
| | 06:19 | I can go through them in order.
| | 06:22 | So what I'm going to do is just
go palette [1], [2], [3], [4].
| | 06:29 | I'll Save that and run it.
| | 06:31 | And now you can see I've taken the
palette that I got from Adobe's Kuler and I'm
| | 06:35 | able to integrate it into my sketch here.
| | 06:37 | You can decide whether this is one
that you would want to use for one of your
| | 06:41 | own visualizations but it is
better than a random choice.
| | 06:44 | Anyhow, these are some of the tools and
some of the functions that are available
| | 06:48 | for dealing with colors and then
assembling an entire palette for pleasing
| | 06:51 | combinations in your own sketches.
| | 06:53 | And I encourage you to explore each of
those Web resources, the Color Scheme
| | 06:57 | Designer, the Color Brewer,
and the Adobe Kuler, also.
| | 07:00 | That's the way of seeing the kinds of
palettes and combinations that might be
| | 07:03 | useful for your own sketches.
| | Collapse this transcript |
| Transforming the grid| 00:00 | In this movie, I want to show you
some of the methods that Processing gives
| | 00:03 | you for manipulating the grid on
which you make your sketches, that is the
| | 00:08 | invisible grid that exists inside the
window of pixels across and pixels up and down.
| | 00:13 | Let's start this by putting a little
comment here at the top of the drawing,
| | 00:17 | at the top of the sketch and I'm going to
bring in a color palette as an array,
| | 00:22 | this one is called chemistry and what I
have is OC2550, I am to remove the space
| | 00:31 | and turn on the capitals to do this.
| | 00:34 | Next one is A3DOC1, next one is FDF6DD,
after that is FEE406 and the last one is a F4651.
| | 00:53 | I close with a curly bracket, and
that's the palette that I'm going to be using
| | 00:57 | can be using for this particular
design, and then I'm going to introduce a
| | 01:00 | secondary palette, just
to keep the name. Great.
| | 01:06 | Now what I'm going to do, is
I'm going to create a size window.
| | 01:10 | I'm going to do 600x200, I'm going
to turn on smooth, I'm going to turn
| | 01:16 | off the strokes and I'm going to make the
background, the first color in the palette.
| | 01:23 | We can just check that up by seeing,
yep, there we have a dark blue.
| | 01:29 | All right, now there's two other
variables that I want to introduce into this
| | 01:32 | one, that are going to be helpful in
creating the shapes I use for this one.
| | 01:37 | I'm going to have one that is the
size of some of the shapes, "s" is for
| | 01:41 | size, I'll make that 80;
| | 01:43 | then I have another one "d" that'll
also be used in specifying the size of some
| | 01:48 | very small circles within the drawing. OK.
| | 01:52 | So now I've got my two
arrays for the color palettes.
| | 01:56 | I have two integer variables that are
used for determining the sizes of objects
| | 02:00 | in the drawing and then I have some
specifications for the window itself.
| | 02:04 | Next, I'm going to come
down and draw a rectangle.
| | 02:07 | What I'm going to do, is I'm going to
put that one with a fill of the first item
| | 02:12 | from the palette, then the rectangle and
then I'm going to start by putting this
| | 02:17 | one way up in the corner 0, 0 starts
in the origin of the top left and then it
| | 02:22 | will be "s" or 80 pixels
wide and 80 pixels tall.
| | 02:26 | I'm using the variable "s" for that;
| | 02:27 | so when I do that there is my
rectangle, right up there in the corner.
| | 02:34 | And what I'm also going to do, is I'm
going to draw a small dot to indicate
| | 02:38 | where the origin is because as you see
on some of these, the origin is going to
| | 02:41 | be moving around a little bit.
| | 02:43 | So I'm going to do fill, actually I'll
just copy this and this one, I'm going to
| | 02:51 | make palette the fourth color and
I'll put ellipse, and the ellipse will be
| | 02:56 | right on the origin and it is going
to be "d" for diameter across and down.
| | 03:01 | So now, when I draw it, you see at
least a quarter of a small orange circle at
| | 03:07 | the 0, 0 origin point in the drawing.
| | 03:10 | Now what I'm going to show you is that
you can translate, that is you can move
| | 03:14 | over the origin point.
| | 03:16 | So if you don't want to origin at the
side of the top, say for instance, you
| | 03:20 | want it in the middle, you can move it around.
| | 03:23 | So we're just going to show how to
translate and what I'm going to do right here
| | 03:28 | is I type in the function translate and
then, I specify how many pixels over and
| | 03:33 | down I want it to move.
| | 03:35 | If you wanted to go straight to the
center of the drawing, you can do like this
| | 03:39 | width/2 and height/2 and what that
would do is it would put the origin right at
| | 03:46 | the middle of the sketch.
| | 03:47 | What I'm going to do however, is I'm
going to move it over not quite so far.
| | 03:52 | I'm going to move it over just
40 pixels over and 90 pixels down.
| | 03:56 | And then what I'm going to do, is I'm
going to copy these commands right here.
| | 04:00 | The only thing I'm going to do is I'm
going to change the palette color for the
| | 04:06 | rectangle, I save it and run that and now,
you can see I have a second rectangle
| | 04:10 | a second square, that's drawn lower and
slightly to the right of the first one.
| | 04:14 | However, the orange dot for this
one is still on the 0, 0 origin point.
| | 04:18 | And so, I haven't moved the rectangle
per se, I've shifted the entire grid for
| | 04:22 | the drawing and now this is going to be
a very helpful way if you have an entire
| | 04:27 | collection of shapes that together
form an object and they can stay in
| | 04:30 | orientation this way.
| | 04:32 | The next transformation we're going to
do is to change the scale of the grid
| | 04:36 | that we're dealing with.
| | 04:38 | I'm going to do this one, by copying some
of this text up here and bringing it down.
| | 04:44 | We're going to translate again, to
move the origin over because I want to be
| | 04:48 | able to show exactly, where
the origin is at each point.
| | 04:51 | We'll go 140 to the right and then, we'll
go -70 to bring it back up a little bit.
| | 04:56 | But then I'm going to add
a second transformation.
| | 04:58 | I'm going to put a scale and I'm just
going to put a 2 to make it all twice as big,
| | 05:03 | 2 and now it'll be twice as big
and I'm going to switch the palette to get
| | 05:08 | to the third color for the rectangle.
| | 05:10 | I save that and press Run, and now I
have yet another rectangle and please note,
| | 05:14 | I'm using the exact same parameters for
the rectangle, it is still located at 0, 0
| | 05:19 | with a size of "d" on both sides,
that's the same on all of them.
| | 05:24 | What I'm doing is I'm moving the origin point,
and I'm also changing the size of the grid.
| | 05:29 | Now there is one interesting thing here,
you may have noticed that not only did
| | 05:32 | the square get twice as big, the circle
got twice as big, and it's possible that
| | 05:36 | you don't want the circle to get bigger.
| | 05:39 | And so what you can do is you can
actually undo the transformation of scale,
| | 05:42 | before you draw the circles,
I'm going to do that right here by
| | 05:46 | copying this part scale and all you
need to do to get back to where you are
| | 05:51 | is use the reciprocal.
| | 05:53 | So the reciprocal of two is one half.
| | 05:56 | I'm going to write that as .5 and what
we get is that the dot stays the same
| | 06:02 | size even though the rectangle has changed.
| | 06:05 | This can be a good way of maintaining
some of the cohesion between the
| | 06:09 | elements in your design.
| | 06:10 | The last thing that I want to show
you is, that you can actually rotate the
| | 06:14 | grid as well.
| | 06:16 | So I'm going to copy this code right
here, I'll change this one to rotate,
| | 06:22 | I'm going to translate this one more time,
to move the point of origin over from
| | 06:26 | where it is on the large yellow circle.
| | 06:28 | To do that, I'm going to go translate.
Instead of 140, I'm going to move it over
| | 06:32 | a fair amount to 280 and I'm going to
add 10 and again, this is relative to the
| | 06:38 | last transformation to that point of origin.
| | 06:41 | I'm going to change the scale a little bit.
I'm going to change it to 1.33 and then,
| | 06:46 | I'm going to add another command here,
where we rotate and then what
| | 06:51 | rotating does, is it rotates the entire
grid from the 0, 0 origin point and it
| | 06:56 | rotates it clockwise.
| | 06:58 | And when we dealt with arcs a
while ago, you remember that we had to
| | 07:01 | specify things in radians.
| | 07:04 | And radians work on units of PI.
| | 07:07 | So halfway around the circle is PI and
all the way around the circle is 2x PI
| | 07:12 | and 90 degrees is .5 PI and so on.
| | 07:16 | What I'm going to do in this one, is
I'm going to make just a small rotation.
| | 07:19 | I'm going to type in PI which needs
to be in capital letters, I'm going to
| | 07:23 | multiply times .5, so I'm going to do
just a quarter PI, a small rotation.
| | 07:28 | Now, if you want to, you do have the
option of writing that out in degrees.
| | 07:33 | You can do rotate and then, you can use a
radians function and you can take 90 degrees
| | 07:40 | and that will take 90 degrees translate into
radians for you either way, it works,
| | 07:44 | I'll comment that out just for right now.
| | 07:46 | And then I'm going to look at my palette,
I'm going to go to back to color 1 on
| | 07:52 | this, and still 0, 0 and s, s and I can
hit draw and but first I see that I've
| | 08:00 | missed a semicolon up here, to finish that off.
| | 08:03 | All right, and now I can hit draw and
what you see is that this last rectangle
| | 08:08 | has rotated itself and it's done it not
by rotating the angle per se, I didn't
| | 08:13 | need to use a quadrangle
functions instead of the square.
| | 08:16 | I was able to rotate the entire grid for this.
| | 08:19 | Now if I continued to add more squares, they
would be on the same rotated and rescaled grid.
| | 08:24 | But this lets you know that sometimes
instead of changing the shape that your drawing,
| | 08:27 | it's easier to change the
entire grid on what it is drawn and your
| | 08:32 | shape will follow it, that's one of
the interesting pieces of flexibility in
| | 08:35 | Processing, and something you
can exploit in your own sketches.
| | Collapse this transcript |
| Exploring the attribute matrix| 00:00 | Once you've gone through the effort of
creating transformations in your drawing
| | 00:04 | by translating the origin or changing
the scale of the grid or rotating or
| | 00:09 | you've gone through working on the
attribute by changing the color or dimensions
| | 00:13 | or methods of joining objects in your
drawing, you want be able to save those
| | 00:17 | things even if you want to temporarily
suspend them and bring them back without
| | 00:21 | having to code all over again.
| | 00:23 | Fortunately, Processing gives you an
easy way to do this with what's called the
| | 00:26 | pushMatrix and popMatrix commands as
well as the pushStyle and popStyle.
| | 00:31 | And I'll show you how each of those
things works in this particular drawing.
| | 00:35 | We are going to start by putting a
little comment with the name of the sketch
| | 00:41 | and then I've previously entered a color array.
| | 00:44 | I am just going to paste that in right
here and then I'll create a new array of
| | 00:49 | colors that I'll just called
palette and copy the one called crowds.
| | 00:54 | This lets me use palette as a
generic reference in my drawing.
| | 00:58 | I'm going to have one
variable that I use as s for size.
| | 01:01 | It specifies the dimensions of the
squares that I'll be drawing in this.
| | 01:05 | Then I'm going to start going
through some of my setup material.
| | 01:08 | I'm going to do size for the window, 600x200.
| | 01:12 | Then I'll be using anti-aliasing.
| | 01:13 | I'm going to turn off the stroke, no
border on it for right now and I'm going to
| | 01:20 | put in the background that is
the first color in the palette.
| | 01:27 | Now from there I'm going to draw my
first rectangle and going to fill palette,
| | 01:35 | and then go in rectangle.
I'm going to put it right up in the origin.
| | 01:40 | The top-left corner will be right at the
corner and that's going to be my first rectangle.
| | 01:45 | So it's drawn right up there in the corner.
| | 01:47 | Its top left is 00 and then it is 80
pixels wide and 80 pixels tall. So that's fine.
| | 01:53 | So that's my first one.
| | 01:55 | Then what I'm going to do is I'm going to
push the matrix and I'm going to push the style.
| | 02:05 | What this is going to do is going to
save the matrix that I have that has no
| | 02:09 | transformations on it.
| | 02:11 | So the origin still at the top left and
the scale is the same, there's no rotations.
| | 02:15 | It's also going to take the fill and the
stroke settings that I have so far and save those.
| | 02:21 | It's just pushing them off to the side
and then what I can do is that I can
| | 02:25 | start making some transformations.
| | 02:26 | So for instance I'll translate the origin
230 pixels over and 25 down and then
| | 02:33 | I'll rescale things and make them all
twice as big by doing scale 2 and then
| | 02:38 | I'll rotate and then I'll do radians
function because, I want to do just 45
| | 02:44 | degrees and this is an easy way to specify it.
| | 02:47 | Now I'm going to change this stroke to
the third color on the palette and I'll
| | 02:53 | change the strokeWeight as
well and make it 15 pixels.
| | 02:58 | Previously, I had this
stroke turned off entirely.
| | 03:00 | Then I'll change the fill to the second
color on the palette and then I'll draw
| | 03:07 | my rectangle and again it will be at 0, 0, S, S.
| | 03:14 | It has the same arguments
as one what I had earlier.
| | 03:17 | I could have just copied
it and pasted it down here.
| | 03:19 | I save that and now you see that
I have a very different drawing.
| | 03:23 | This rectangle is rotated, it's
much larger, it's got a border.
| | 03:26 | It's a different beast
than what we had previously.
| | 03:28 | Now here's an interesting thing
that I can do is I can actually pop the
| | 03:33 | matrix back to where it was before
and what that does is the matrix has do
| | 03:39 | with the translation moving the origin, the scale,
changing the size of grid, and the rotation.
| | 03:44 | So now I'm going back to what it
was before and it was untransformed.
| | 03:48 | So it's undoing all those things.
| | 03:49 | So now I can do a rectangle.
| | 03:52 | I'll just copy that information.
| | 03:54 | I'm going change the dimensions a little bit.
| | 03:56 | I'm going to change location manually
to 380 pixels over and 20 pixels down and
| | 04:03 | when I run that you see what happens is
I've gone back to the same orientation,
| | 04:08 | but you see that the fill and
the borders are still the same.
| | 04:12 | Now the borders look smaller, but
that's also because the scale is only
| | 04:15 | half as big at this moment.
| | 04:16 | Then I'm going to finish by changing
back to what we had with the original
| | 04:21 | styles by using popStyle.
| | 04:26 | In this case, I'm going to draw one
more rectangle and I'm going to specify it
| | 04:30 | a little differently.
| | 04:31 | I want it to be down in the bottom
corner so I'm going to do that its top corner
| | 04:36 | is the width-s, that's the
size and its height of that.
| | 04:40 | It's going to be the
height-s, and I believe that
| | 04:44 | that should do it and get his
back to the mirror image of the
| | 04:48 | original rectangle.
| | 04:50 | So what I've done is I created with
one set of attributes and the grid in a
| | 04:53 | particular way, I changed its grid, I
changed the attributes, and then I was
| | 04:58 | able to restore what I had previously by
having used pushMatrix and then popping
| | 05:02 | the matrix back and then
pushStyles and popping the style back.
| | 05:05 | This is one way to save the work
that you've done and go into it.
| | 05:08 | Now you can also know that you can nest these.
| | 05:11 | If you want to push the matrix more
than once, you can. All you have to remember
| | 05:15 | is it's the last in-first out method
that when you reach back in into popMatrix
| | 05:20 | it's going to bring back the
matrix it was the last one used.
| | 05:24 | So with these tools, the pushMatrix
and popMatrix and the pushStyle and
| | 05:26 | popStyle, you can save a lot of time
in setting up your drawings and getting
| | 05:30 | them to be exactly the
way that you want them to.
| | Collapse this transcript |
|
|
6. Dynamic DrawingsBuilding code blocks| 00:00 | One of the tools you have for arranging your
code and Processing is putting it into blocks.
| | 00:05 | Now most dynamic drawings actually
include two blocks every time and that
| | 00:09 | is what's called the setup and the draw and
you've seen me do those a number of times.
| | 00:13 | In this sketch I am going to show you a
few other kinds of blocks that you can
| | 00:18 | use and how they work in Processing.
| | 00:20 | I'll begin by putting a comment up
here at the top with my sketch name.
| | 00:23 | Then I am going to insert a color palette.
| | 00:26 | Now I've decided to save a little bit a
time and I've included a text file that
| | 00:30 | has all the color palettes on it and I am
going to be using this one right here, styleyou.
| | 00:35 | I want to copy that and paste
it right here into my sketch.
| | 00:40 | Then I am going to define two variables
that I'll be using in this the sketch.
| | 00:45 | One is an incrementing variable and
another one is of X coordinate variable and
| | 00:52 | now that I've created these two global
variables, I can go down to the first
| | 00:55 | block of code that we will be using.
| | 00:57 | Traditionally, that is void setup.
And let me explain what's going on with
| | 01:02 | this particular block.
| | 01:03 | The void is the return type for the
function, setup is the name of the function,
| | 01:08 | and every function has a return
type that is if it were to calculate a
| | 01:12 | floating-point number, it would say float setup.
| | 01:15 | If it would were to create a
Boolean value, it'd say Boolean setup.
| | 01:19 | However the setup actually doesn't return a
value at all, but you have to have something.
| | 01:23 | You have to specify return type.
| | 01:25 | So you say to void.
| | 01:26 | It doesn't return anything.
| | 01:27 | That explains a curious term and
also the empty parentheses (), because
| | 01:31 | every function needs to have a place where
you could at least potentially put arguments.
| | 01:36 | The setup doesn't have any arguments,
but you do need the parentheses () there
| | 01:39 | because it's a function.
| | 01:40 | Instead, all the information we're
going to do goes in the curly brackets that
| | 01:44 | indicate a block of code in this case.
| | 01:47 | So what I am going to do is I am going
to start inserting some code in here.
| | 01:51 | This is where I put the size.
| | 01:53 | This is where I can put the anti-aliasing
to where I can put the stroke.
| | 01:59 | Actually, I think for the stroke I'll
use the palette and I'll use the 4th one and
| | 02:07 | I can put the strokeWeight.
| | 02:10 | In this case, I will use 5 pixels.
| | 02:12 | So that completes a block of code.
| | 02:14 | Now I didn't create any variables in there.
| | 02:16 | If I had, they would have been local
variables that applied only to that block
| | 02:19 | of code or their values
would've applied only to that.
| | 02:22 | Next I am going to go to the second
standard block of code in most Processing
| | 02:26 | sketches and that's the draw.
| | 02:27 | So I go void draw, and again it has
void because it's a function, but it
| | 02:32 | doesn't return a value.
| | 02:33 | So the void means there's no value to return.
| | 02:36 | The open and close parentheses (),
that's the space that's mandatory to allow
| | 02:41 | parameters to be input, but we don't
have a parameters for this, but we have to
| | 02:44 | have that there as a marker.
| | 02:46 | Then I do the curly brackets, the open,
and then I am going to bump down to
| | 02:50 | closing curly brackets.
| | 02:51 | Then inside there I can put information
about the background color and what I am
| | 02:56 | going to do here for the background,
I am going to do palette put, the 0 color.
| | 03:03 | Then I am going to fill in.
| | 03:05 | Then I'm going to change to the letter
i and that refers to the global variable
| | 03:12 | that are defined up above.
| | 03:13 | And the reason I put it up there,
because I am going to be using that variable
| | 03:17 | in more than one block of code.
| | 03:19 | So it has to be outside of the
code where things can get to it.
| | 03:22 | Then I am going to draw a small rectangle.
| | 03:25 | I am going to start it at x which I
defined as 0 earlier up above, 75 pixels down,
| | 03:29 | and then I'll make it 50
pixels wide and 50 pixels tall.
| | 03:32 | Now if I'd simply go like this, I can
hit draw, you can see I've got a pretty
| | 03:38 | shocking rectangle there,
but that's the basic idea.
| | 03:41 | Now what I want to show you is that
Processing entry actually allows for several
| | 03:44 | other blocks of code.
| | 03:45 | I'm going to use two in this particular one.
| | 03:48 | The one I'm going to use
is what's called keyPressed.
| | 03:51 | Now with keyPressed and with a similar
one mousePressed, those can be used as
| | 03:55 | functions within the draw block or they
could be put as separate functions out here.
| | 04:00 | They work little differently
depending on this, too.
| | 04:03 | But I am going to have this one out here.
| | 04:05 | Again it's void, because it
doesn't really return a dataType.
| | 04:08 | I am going to put the curly brackets and
what I can say is when I press the key,
| | 04:12 | I want x, the location for the
rectangle, to be incremented 3 pixels.
| | 04:17 | So each time I press the key x
will be incremented 3 pixels.
| | 04:21 | So I can press that press run and now I
can just press a key, I'm pressing the
| | 04:27 | Spacebar, and it's moving over.
| | 04:29 | If I hold it, it moves faster.
| | 04:31 | But I am going to add just one another
block of code to show what can be done.
| | 04:36 | I am going to void mousePressed, and
again it doesn't have a dataReturnType,
| | 04:42 | so I put void it doesn't have any arguments there.
| | 04:45 | So I have the empty parentheses () and
then I put the curly brackets where I am
| | 04:49 | going to put my code.
| | 04:51 | What I am going to do is each time I
press the mouse here, I am going to take
| | 04:55 | the variable i, which I earlier used
for the palette and I am going to have i
| | 05:00 | take on a random value.
| | 05:01 | I am into random (1, 5) from the palette.
| | 05:05 | Now remember that the way random works
is that the bottom limit is an inclusive
| | 05:10 | so 1.00 is an option, but
the top limit is exclusive.
| | 05:14 | So it never goes to 5, it goes to 4.99
and when you take the random variable and
| | 05:19 | you cast it into an integer,
it just chops off the digits.
| | 05:22 | So you're going to get 1, 2, 3, or 4 from this.
| | 05:26 | Now I can run this.
| | 05:27 | I'll save it and I'll run it.
| | 05:29 | If I hold down the Space key, it'll
move over and if I hit the mouse, the
| | 05:35 | color of the box changes.
| | 05:37 | And it's a silly kind of interaction,
but it lets you know that these different
| | 05:41 | blocks of code function in a modular
sense, and especially if you want to be
| | 05:46 | able to use the same variable in
different codes, and it needs to be declared as
| | 05:50 | a global variable so more
than one block can get at it.
| | 05:53 | And that's how we can organize
some of the code in these sketches.
| | Collapse this transcript |
| Writing a while loop| 00:00 | Processing provides you with several
different ways of repeating code and
| | 00:05 | automating elements of your sketch.
| | 00:07 | One method for doing this is
what's called a while loop.
| | 00:11 | Now the while loop in Processing
seemed a functional differently than others
| | 00:15 | where you can say for instance, while the
water level is below 10 feet, do this;
| | 00:20 | when it's above, do this.
| | 00:22 | I'm going to show you an example of
how you can use a while loop to produce
| | 00:26 | a particular drawing.
| | 00:29 | I'm going to copy in a palette.
| | 00:31 | I'm going to use this one up top.
| | 00:35 | This is from the palette text document
that's included in the exercise files.
| | 00:40 | So there I've got my color palette and
I'm going to also put in a variable,
| | 00:45 | a float variable that I'm calling the limiter.
| | 00:48 | Then I'm going to create my
first block of code which is set up.
| | 00:50 | I put the size of the window, 600x200.
| | 00:56 | I'll going to put in the background
color which is palette the first color
| | 01:02 | which has index number 0.
| | 01:04 | I'll turn on the anti-aliasing.
| | 01:05 | Then I'm also going to change
this strokeWeight to 5 pixels.
| | 01:12 | I'm going to have noFill in the
shapes that I'm going to draw and then
| | 01:16 | I'm actually going to adjust the frameRate
for the sketch, although that may not
| | 01:21 | make a difference in how it works.
| | 01:22 | The second block is the draw and this
is where I'm going to put the while.
| | 01:28 | What I do is I specify while=(limiter<100).
| | 01:33 | So it starts at 0 and I'll go up to 100.
| | 01:36 | It will stop when it gets there.
| | 01:38 | While it is less than a
hundred execute this other code.
| | 01:41 | Now you notice I actually have a nested loop.
| | 01:43 | I have second inside of curly
brackets within the draw. That's fine.
| | 01:46 | You can have as many as you want
going in and out as long as you remember
| | 01:50 | to close all of them which is why I draw the
closing one as soon as I draw the opening one.
| | 01:55 | So what I'm going to do now is I'm
going to set the stroke to come from the
| | 02:00 | palette, but I'm going to use a random
value here where I do the (1, 5) and when
| | 02:05 | that gets truncated as cast into an
integer that will become (1, 4). There we go.
| | 02:12 | It takes a little while to close all of
those markers and then I'm going to put
| | 02:16 | in random variables for the coordinates.
| | 02:19 | I want the X to be anywhere
in the width of the drawing.
| | 02:24 | I want the height to be anywhere
in the height of the drawing.
| | 02:29 | I want to size, the diameter, to be
somewhere between (20, 200) and then
| | 02:35 | I'm going to put ellipse centered
on X, Y, D, D as its dimensions.
| | 02:42 | Then I need to include an update for
the limiter variable that the condition
| | 02:46 | that the while is running on.
| | 02:48 | In this case I'm going to put limiter is
plus or equal (+=) to a random increment.
| | 02:54 | So it's going to add a certain amount of every
time, but its not going to be the same amount.
| | 02:59 | I'm going to say somewhere between (-1, +2).
| | 03:04 | So we will generally go up and hit
the limit of a hundred eventually.
| | 03:07 | When I save this and run it we're not
going to see anything until it's finished,
| | 03:11 | because what's going to happen is the
draw is not going to go through until this
| | 03:15 | while loop has completed.
| | 03:16 | So we're just going to take a moment and
it's going to pop up with a finished drawing.
| | 03:21 | And there we go.
| | 03:23 | What is drawn is a number
of circles. It maybe a 100.
| | 03:27 | It depends on how the random increment went on.
| | 03:29 | But it just kept calculated more and
more circles positions on until the limiter
| | 03:35 | reached a particular value, which
I set to 100, and then it stopped.
| | 03:39 | So that's one way of using
a while loop in Processing.
| | 03:42 | It's a way of automating and repeating
a particular function that you want to
| | 03:46 | use a number of times and it lets you
get more elaborate drawing than you would
| | 03:50 | be able to do by hand-coding everything.
| | Collapse this transcript |
| Using for loops| 00:00 | One of the most common ways of repeating
code within Processing and then almost
| | 00:05 | every other computer language is with
something called a for loop, and this is
| | 00:10 | a structure that allows you to specify how
often the particular code is to be repeated.
| | 00:14 | I'm going to show you a quick example of how
this works in creating a drawing in Processing.
| | 00:20 | I'll begin with comment there.
| | 00:24 | I'm going to import a palette from the
palette.txt file that's in the Exercise File.
| | 00:28 | This one, I'll be using this palette right here.
| | 00:32 | I'm going to copy it, paste it in.
| | 00:35 | I'm also going to create a variable
called s for the size of the squares
| | 00:39 | I'm going to be drawing.
| | 00:40 | I'm going to make them 50 pixels on the side.
| | 00:43 | Then I'll do the setup.
| | 00:47 | In the setup I'm going to put the
size, 600x200, the background, I'll be
| | 00:54 | putting in, turn on the anti-aliasing and
turn off the borders by using no stroke.
| | 01:05 | So there's the setup.
| | 01:06 | Now normally at this point I would
finish the setup and go onto draw,
| | 01:10 | but for this particular one I want to actually
go through a couple of loops to fill in
| | 01:15 | the background with some squares.
| | 01:17 | In fact I'm going to be using two loops.
| | 01:19 | Now the way a loop works is you write
the word For and then in parentheses,
| | 01:23 | you put a number of pieces of information.
| | 01:25 | The first one is you initialize a
variable usually as i, but in this case I'll
| | 01:30 | be using x, because I'm actually going
to be incrementing the x variable on this
| | 01:34 | one and I start by saying
the initial value of x is 0.
| | 01:39 | Then you give a test limit and only
run through the loop as long as x is less
| | 01:44 | than the width of the window.
| | 01:46 | Every time you run through the loop,
take x and add on to it the value of s,
| | 01:52 | which is in this case is 50.
| | 01:55 | So that is the for loop.
| | 01:56 | Now what I'm going to do here is I'm
going to come down and create the curly
| | 02:01 | brackets to that block, but I'm
actually going to nest another for loop
| | 02:04 | inside this one, because I want to do a grid
that goes across and also goes down the window.
| | 02:09 | So that will be for, but this time y
because this is going to be going down.
| | 02:15 | Y needs to be less than the height and
Y gets incremented by a similar amount.
| | 02:23 | So what this is going to do is it's
going to take the line of x and then go down
| | 02:28 | each step in y. Then it'll go to the
line in x and go down each step in y and so
| | 02:33 | forth until it's filled up the entire grid.
| | 02:35 | What it's going to fill it up with
is squares of randomly chosen colors.
| | 02:40 | We're going to use the random palette selection.
| | 02:42 | We've done this a few times already
where I specify a fill and then I want to go
| | 02:46 | back to the palette array.
| | 02:48 | Then I need an index number from the
array, but I want to use a random number.
| | 02:52 | I have to cast it as an integer variable.
| | 02:55 | That gets a little complicated, and
right now I'm just adding the closing
| | 03:00 | parentheses and brackets to finish that off.
| | 03:04 | Then I specify a rectangle.
| | 03:07 | Now this is the easy part.
| | 03:08 | You see that this one, because of the
loops I just say drive it x, y and make
| | 03:12 | it s wide and s tall.
| | 03:14 | And it's going to start with an x and y
of 0 and then cycles through 50 pixels
| | 03:19 | at a time, first across
the width and then the height.
| | 03:23 | And when I press here's what I get.
| | 03:26 | I get a grid of squares of
different shades of blue.
| | 03:30 | If I were to click Play again,
it would be a different grid.
| | 03:35 | You see how it's changing each time.
| | 03:37 | But a really cool thing that we can do
is once it's filled in is we can go to
| | 03:41 | the draw block, down below, and
I can just add this code here.
| | 03:47 | Now the emphasis in this particular
movie is on the for loops and you see that
| | 03:51 | we these nested for loops and how they fill in
the grid, and it's a really nice thing to do.
| | 03:55 | This one, I'm also going to get a random
fill so I'm going to copy it from right
| | 04:01 | here and then what I'm going to do is I'm
going to randomly select values of x.
| | 04:09 | So you see actually I have to declare
these again, because the Xs in the for loops
| | 04:12 | were local variables and I made
a different block of code.
| | 04:20 | What I'm doing now is I'm setting up a
slightly complicated calculation that
| | 04:26 | will randomly select s, but make it at the
beginning of one of the squares in the drawing.
| | 04:33 | I get it by finding how many
squares fit in the drawing.
| | 04:36 | That's why I do the width divided by 50
and that's actually going to be 12 and
| | 04:40 | then I get a random number from 0 to 12
and then I turn it into an integer and
| | 04:46 | then multiply that times s to get
back up to the original s. It's a little
| | 04:50 | complicated, but it works for what we're doing.
| | 04:52 | I'm going to do a similar calculation
for y where I just change it to y and
| | 04:58 | I change the word width to height, and
then finally I'm going bring this code for
| | 05:05 | drawing a rectangle again.
| | 05:06 | And you'll see what this one does is it
randomly updates the color of one of the
| | 05:12 | squares in the grid every time.
| | 05:14 | So I'm going to just save this and run
it, and it filled in the first time and
| | 05:19 | now it's randomly updating
continuously as it goes through.
| | 05:21 | But it was their for loops, the two
nested for loops, one for X and one for Y
| | 05:26 | that made it possible to draw the
squares at regular intervals in the grid in
| | 05:30 | the very first place and that's one
of the great timesavers when you're
| | 05:33 | learning to code.
| | Collapse this transcript |
| Creating conditionals| 00:00 | One of the great things in
programming is the ability to make what happens
| | 00:03 | conditional on user input or
some other computer function.
| | 00:07 | In this movie, I want to show you
several kinds of conditional statements that
| | 00:10 | you can use in Processing to alter
the way that your sketch is executed.
| | 00:14 | Now, what I'm going to do in this one
after I put in a little comment here,
| | 00:19 | is I'm going to bring in a number of color
palettes so I have choices for these and
| | 00:25 | I'm actually going to do it, I'm
going to grab five of them from the
| | 00:28 | palettes.txt document
that's in the Exercise folder.
| | 00:32 | And I'll just paste that in here, then
I'm going to delete a little bit of text,
| | 00:36 | I don't need that information
or that information or that.
| | 00:43 | I'm just getting down to the
list of the colors themselves.
| | 00:48 | And then I'll leave this last one like that.
| | 00:50 | What I'm going to do now is create a
number of variables that will be used to
| | 00:54 | help set up some of the
conditional statements in the sketch.
| | 00:57 | For instance I'm going to have one
here that's call choice, which is going to
| | 01:00 | allow people to choose which
palette is used in a particular drawing.
| | 01:04 | I see I missed one right here, there we go.
| | 01:07 | And if you really want to,
you can line things up.
| | 01:10 | By the way, spacing doesn't matter in
Processing it doesn't care if you put
| | 01:15 | things on the same line on different
lines, as long as you remember use your
| | 01:18 | semicolons and set things apart; otherwise so.
| | 01:21 | But if you need to have things
lined up, you can do it like that.
| | 01:25 | So I am going to have a variable, an
integer variable for choice to indicate
| | 01:28 | which palette people have
chosen for this drawing.
| | 01:30 | I'm also going to have two variables
called p1 which I will initially set to 1.
| | 01:39 | And another called int p2 which I'll
set to 2, I'll explain these a little bit
| | 01:44 | later in the drawing.
| | 01:45 | Then I'm going to have a few other
coordinates, I'm going to have a float for the
| | 01:49 | x position, and then I'm going to have
another float for y then, then I'm going
| | 01:54 | to have another variable of float
for d and that's for the diameter of an
| | 01:59 | ellipse I'm going to draw.
| | 02:01 | Then I'll have another one for b, and
that's going to be for the size of the
| | 02:05 | border of the ellipse that I'm going to draw.
| | 02:07 | Okay, and with that introductory
information in place what I can now do is
| | 02:11 | start the actual sketch.
| | 02:12 | I'm going to first create the setup block.
| | 02:15 | I'm going to go void setup.
| | 02:20 | The first thing I'm going to do is
create the size of the window, size 600x200.
| | 02:27 | So 600 pixels wide 200 pixels tall, I'll turn on
the anti-aliasing to make it a little smoother.
| | 02:33 | I'm also going to set initial values
for x and y. I'm just going to put
| | 02:40 | x = width/2 and y = height/2.
| | 02:42 | Okay, then I can go down
and setup the draw block.
| | 02:49 | Void draw, again void because there is
no return data on this one and then the
| | 02:58 | empty parenthesis because there are no
arguments for the draw function, but I do
| | 03:01 | have code inside the block.
| | 03:03 | This is where I put information on the
background, which I'll be using from the
| | 03:09 | palette that is selected.
| | 03:12 | Then I'm going to do it
couple of other color things.
| | 03:15 | I'm just going to copy that and paste it.
| | 03:17 | I'm going to make this one
the fill and this one the stroke.
| | 03:23 | And now I'll make that index 1,
and index 2 in the selected palette.
| | 03:29 | And then stroke weight will be based on
the variable b, that I defined up ahead
| | 03:35 | and make it another global variable.
| | 03:37 | And then, finally I'm going to draw an ellipse.
| | 03:40 | I'll center it on the x, y which I
defined up above and setup and it will have
| | 03:45 | a diameter of d, that's a
global variable I defined up top.
| | 03:48 | And so we can save this and see if
it actually draws something at the
| | 03:52 | moment, there we go.
| | 03:55 | So what I have right now is a
static drawing and right now, it has no
| | 03:59 | conditional statements it's
not responsive to anything we do.
| | 04:01 | But is based on large series of variables.
| | 04:04 | And what I'm going to do is create a
series of statements that allow us to
| | 04:08 | change the way these variables each work.
| | 04:11 | So I'm going to come right back to here.
| | 04:13 | The first thing I'm going to do is
right after I have ellipse, I'm going to
| | 04:18 | put an 'if' function.
| | 04:19 | And if is one of the most
common conditional statements.
| | 04:22 | And I'm going to say, if this
is the case and then do this.
| | 04:26 | Actually, I'm really going to use an if else.
| | 04:29 | If this is the case then
do this otherwise, do this.
| | 04:33 | Now what I'm going to do is I'm going to
use the variable mouseX and that is the
| | 04:38 | x-coordinate for the cursor at the
moment, so that changes constantly.
| | 04:42 | And we say if mouseX > width/2 so if
it's on the right half of the screen,
| | 04:51 | then we're going to execute this particular
piece of code and what I'm going to ask
| | 04:55 | you to do is to increase the diameter
slightly, just half a pixel every cycle
| | 05:03 | through every time it loops through.
| | 05:04 | So d += .5 is a way of saying, take d
and add .5 onto it, each time I go through.
| | 05:13 | So if it starts at two then it will be 2.5
then it will be 3 then, 3.5 and so on.
| | 05:19 | On the other hand, if the
mouse is not on the right side.
| | 05:22 | You don't have other
choice that is on the left side.
| | 05:25 | I'm going to put this expression, else.
| | 05:27 | I don't have to say that it's on the right
side because, I see no other possibility.
| | 05:32 | In that case let's have d gets smaller
with each loop, also by .5.So now, I can
| | 05:39 | run this and you can see that as I
move the cursor to the left and the right,
| | 05:44 | the size of the circle changes and
there's no dead place, it's going to always
| | 05:49 | be growing or shrinking depending on what I do.
| | 05:51 | I'll press Escape and quit that.
| | 05:53 | So that is an if statement and then an if else.
| | 05:56 | So the first kind of interaction the
condition I have is with the mouse position.
| | 06:00 | Alright, I'm going to do a similar
thing for vertical position, changing the
| | 06:06 | width of the border.
| | 06:07 | But I want to show you there's
a shortcut kind of statement.
| | 06:10 | Processing simply calls it a conditional
with a question mark and then other
| | 06:14 | places call it a ternary statement.
| | 06:17 | And it's a way of writing an
entire if else statement in one line.
| | 06:22 | So it's very compact
although it can be a little cryptic.
| | 06:24 | So that's why I did a
regular if else statement above.
| | 06:27 | The way a ternary works is I'm going to
take b, which is the size of the border,
| | 06:31 | and you say b is equal to and then
you put the condition that must be met.
| | 06:37 | And I'm going to put mouseY is a
greater than I will put height/2.
| | 06:45 | So that's my conditional statement.
| | 06:47 | And what I am going to say is, if
that is then I put a space and a question mark.
| | 06:52 | So if that is true then do this, b + .1,
then I do a space and a colon, not
| | 07:01 | a semicolon, a colon.
| | 07:03 | If that statement is not then do this,
b - .1 and finish with a semicolon.
| | 07:11 | So that's an entire if else statement
in a single line, you probably wouldn't
| | 07:14 | guess it by looking at it.
| | 07:16 | It is equivalent to what we have above.
| | 07:18 | There is a few things I need to point out.
| | 07:20 | Number one, I have the height/2 in
parentheses in this one that appears to be
| | 07:24 | necessary, can't explain that one.
But more importantly, you see that where
| | 07:29 | previously ahead d += .5, so that
was called an additive increment.
| | 07:36 | On this one I simply put b + .1.
| | 07:38 | Now if you put the += you get an error message.
| | 07:42 | The ternary statement to conditional was
it simply written as b + this, or b - that.
| | 07:47 | Okay, the other thing that we are going
to see in this one is that the b could
| | 07:52 | potentially go negative and that would
actually be a real problem with this one.
| | 07:55 | Interesting for the ellipse, it's not a problem.
| | 07:58 | But for the stroke it can't go negative.
| | 08:00 | If the ellipse goes negative, it
just starts looping around the other way
| | 08:03 | and there's no problem.
| | 08:04 | But the border cannot be negative
otherwise, the computer freezes and you'll
| | 08:09 | have to Ctrl+Alt+Delete to quit it or
you'll have to do a force quit on a Mac.
| | 08:14 | The way to deal with that is to put
in a constraints statement, I think
| | 08:17 | we've seen this before.
| | 08:18 | And what I am going to say is b is
equal to and then the function is
| | 08:23 | constrain and what I'm constraining
is the variable b, so I'm constraining
| | 08:27 | itself and I'm going to put it here,
that it cannot go less than 0 and it can't
| | 08:32 | go greater than 50.
| | 08:34 | And the reason I can do this afterwards
is because the draw looks at the entire
| | 08:38 | code in the draw block before it
executes it, it only executes it once each
| | 08:42 | time it runs through.
| | 08:43 | So this is a safe way to do it and this
will keep the program from crashing and
| | 08:48 | us having to do a force
quit or Ctrl+Alt+Delete to get out.
| | 08:51 | So now I can save this and run it.
| | 08:56 | And you can see the border gets
thicker, when I'm on the bottom.
| | 09:00 | Now it's really thick, now it's thinner.
| | 09:02 | And so just depending on what quadrant
I an in, we get different patterns of
| | 09:05 | growth, and let's see what happens
when the border is still there but the
| | 09:09 | ellipse can go negative, it
just comes around the other way.
| | 09:13 | But the border will stop at 0,
because that's the way I have it set up.
| | 09:17 | Okay, great, but now I'm going
to show you one other kind of
| | 09:21 | conditional statement.
| | 09:22 | This one gets a little bit long, but
that's because it's four long conditionals
| | 09:27 | and that's what's called the switch
statement and it's when you have more than
| | 09:31 | one possible choice here.
| | 09:33 | Now I'm actually going to put this
switch statement in a separate block of code.
| | 09:36 | We have a setup block and we have a draw block.
| | 09:39 | I'm also going to add a key
pressed block, it works the same way.
| | 09:43 | It's void because it doesn't return a data type.
| | 09:46 | And so I have keyPressed, that's the
name of the function, it has no argument
| | 09:50 | so I have the empty parentheses because
every function has to have their parenthesis.
| | 09:55 | Then I'm going to put my
curly brackets in their.
| | 09:58 | And then what I'm going to do is you
may remember that I've created this
| | 10:01 | variable up top, I am
going to go up top to show you.
| | 10:05 | Add these are variables choice p1
and p2, those are going to be useful in
| | 10:11 | my switch statement.
| | 10:13 | And here's what I'm going to do.
| | 10:14 | I'll press it p1, is a random variable
random, it's going to randomly select the
| | 10:19 | color from the arrays that I have above.
| | 10:22 | And so what I need is to cast the
random, because the random will get me
| | 10:29 | a floating-point number and what I
actually needs is an integer to make this work.
| | 10:33 | But if I do it like that, it will get a
random number from 1 to 4.999 it'll chop
| | 10:37 | off the decimals and then it will turn
into an integer 1, 2, 3 or 4 and that's
| | 10:42 | perfect for what I need.
| | 10:43 | I'm going to duplicate that for p2.
| | 10:46 | These will determine the fill
and the border as we go through.
| | 10:49 | Then, what I'm going to do, is I'm
going to create another block, that has to
| | 11:00 | do with the choice variable that I
created and the choice variable is going to
| | 11:05 | be based on the key code. I'm going to
have people type in a 1, 2, 3, 4, 5 to
| | 11:11 | choose the palette.
| | 11:12 | Then what I'm going to do
is I write a switch block.
| | 11:15 | So I put switch and the thing that
drives the switch is the choice which in turn
| | 11:20 | is based on the key.
| | 11:22 | And so I type switch choice and then
it gets its own curly brackets because
| | 11:26 | it's a nested code block.
| | 11:29 | And then I want to start putting is
I put case, and this is going to say,
| | 11:33 | depending on what the value of choice is,
choice is a thing that's driving the
| | 11:37 | switch, now I need to put the actual value.
| | 11:39 | Now it's going to look a little weird,
the first choice is 49, that's because
| | 11:43 | the ASCII code for that one key and the
numbers across the top is 49, it's not
| | 11:48 | 1, it's 49 that's the ASCII code.
| | 11:51 | And so I put 49 and then, I
put a colon not a semicolon.
| | 11:54 | And what this says is if the person
types key number 49 which is the 1, then
| | 12:00 | I want to do two things.
| | 12:01 | I want to put palette =, and let's
see what my five choices are here, my
| | 12:06 | first one is rainbow.
| | 12:08 | So I am going to palette = rainbow
and that's how I'm going to be switching
| | 12:15 | with this variable.
| | 12:16 | So now I need to tell that I'm done
with the stuff when case = 49 and I put
| | 12:21 | break with a semicolon.
| | 12:23 | Now what I can do is I can repeat this
code for the other choices so I'm going
| | 12:29 | to paste that in a couple of times.
| | 12:31 | All right, the ASCII code for the number 2,
on the top of the keyboard is 50, for 3
| | 12:41 | it's 51, for 4 it's 52 and for 5 it's 53.
| | 12:48 | I know this is totally counterintuitive,
it's really easy to get an ASCII code
| | 12:53 | chart off the Internet to see what
ASCII codes correspond with what keys.
| | 12:57 | But these are the ones
for the first five numbers.
| | 13:00 | and then I just need to
switch what the palette is.
| | 13:02 | So the first one I had was rainbow, the
second one will be chemistry, the third
| | 13:11 | one will be kitties;
| | 13:19 | the fifth one will be beach.
| | 13:21 | Excuse me, that's the fourth one.
| | 13:26 | And the fifth one will be cottage.
| | 13:28 | I actually see that I have
more than I need up here.
| | 13:32 | So I'm going to comeback in just one second.
| | 13:36 | Well, you know what I'll do,
is I'll add a sixth choice here.
| | 13:39 | I'll just make 54, so this will be
choice number 6, I'll come back to get Minard.
| | 13:47 | There we go.
| | 13:54 | And then that should be adequate.
| | 13:57 | So what's this is going to do, is I've
already set it out so that the size of
| | 14:02 | the ellipse and the size of the border
vary according to the mouse position on x
| | 14:05 | and y. I'm also going to set it up so
that the palette can be determined by the
| | 14:11 | 1, 2, 3, 4, 5, 6 keys.
| | 14:12 | I've also made it so that every time
you press a key, it will choose randomly
| | 14:16 | within that palette.
| | 14:17 | So this one is going to get a little busy.
| | 14:19 | But here we go, I'm going to press run.
| | 14:22 | And if I press 2, I have a different palette.
| | 14:26 | But look if I just keep
pressing the keys, it changes within.
| | 14:34 | So that is my interactive, it's
depending on mouse position, on the keys I press
| | 14:39 | and it gives a lot of
interaction for this particular drawing.
| | 14:42 | Now this kind of a silly example, but
it does give you an idea of the sorts of
| | 14:45 | things that you're able to do in your
own work, in your own visualizations at
| | 14:49 | a later point.
| | Collapse this transcript |
| Working with easing| 00:00 | One of the more interesting dynamic tricks
that you can do in Processing is to have an
| | 00:04 | object follow your mouse.
| | 00:06 | Now, this is pretty easy to do, because when
you specify, for instance, the center of an
| | 00:10 | ellipse, instead of using X and Y, you can
simply use the built-in Processing commands
| | 00:14 | mouseX and mouseY.
| | 00:16 | However, the problem with that, they end of
following too quickly, and it doesn't seem natural.
| | 00:22 | It's a little jerking in motion.
| | 00:24 | Instead you can use an adaptation
of this that's known as easing.
| | 00:28 | Now, there's not a
built-in function for easing.
| | 00:30 | It's something you have to code, but it's a
simple adaptation, and it allows things to
| | 00:34 | gradually follow with some lag where the
mouse, for instance, is going. And that's what I'm
| | 00:40 | going to show you in this particular sketch.
| | 00:45 | Put a comment in with the name.
| | 00:46 | Then I'm going to bring it in a color
palette from the palette text file.
| | 00:50 | I'll use this one down here at the bottom.
| | 00:55 | Then what I am going to do is I am going to
do kind of an interesting thing for the way
| | 00:58 | we set these things up.
| | 01:00 | For easing there's a lot of variables that
need to be set up ahead of time, so I am going
| | 01:04 | to go through this. The first one is I'm going to create a
variable for the width of the window.
| | 01:10 | Now, I can use the word width, but I
find it easier to just use a related one.
| | 01:15 | I can say "wide" and then
I can refer back to it.
| | 01:18 | So I'm going to do 600 pixels right here.
| | 01:19 | I can do int and then high, and I'll do 200,
because I am going to using those a little bit later.
| | 01:27 | Then what I want is I want a variable for the
diameter of one of the ellipses I am going to be drawing.
| | 01:33 | That's going to be a 20.
| | 01:35 | Then I need a series of floating variables,
because what I am going to be drawing in this
| | 01:39 | is one ellipse and then three
rings that are following it around.
| | 01:43 | To get the rings, what I need to do is this.
| | 01:46 | I need to create a floating variable for the X
coordinate for the first one, and it's going
| | 01:51 | to start in a random position. And then I
need to do the same thing for its Y variable,
| | 02:00 | so I'm in a create y1, and that's going to
be at random(high). And then I am going to
| | 02:06 | create a variable that's used in calculating
the easing, or the degree to which there is
| | 02:11 | a lag in following the mouse.
| | 02:14 | So what I am going to do is I create float,
and then I will just simply call it easing1.
| | 02:19 | And I put this little coefficient in here,
which I'm choosing as (.1), and you'll see
| | 02:23 | how you can change the coefficients and it
affects the degree of easing that you have.
| | 02:27 | But right now I am going
to use this small number.
| | 02:29 | Now I have three rings that are
going to be chasing the circle.
| | 02:32 | So what I can do is I can just copy this code
and I can change x1, keep both as 2s, and just
| | 02:44 | change the numbers in here as I go
through, and that facilitates some of the code.
| | 02:50 | I am also going to use
different values for easing.
| | 02:53 | So the middle one I am going to change from 01 to
03, and the last one I am going to change to 05.
| | 03:02 | Now what I'm going to do is I am
going to into the setup block.
| | 03:07 | So these are all global variables
that I have created ahead of time.
| | 03:14 | The first thing I am going to do is I am going
to set the size of the window, and because
| | 03:17 | I created these global variables that corresponded to
width and height, I can simply use those ones over again,
| | 03:24 | so in case I change those values at the top,
the actual size of the window will follow it.
| | 03:29 | I am going to turn on the anti-aliasing, and I
am going to put a strokeWeight of 3 pixels.
| | 03:39 | Now, actually, I am going to show you what the
drawing looks like with the default cursor
| | 03:42 | beforehand, and I'll show you some of
the options for dealing with that.
| | 03:46 | Now what I need to do is I
need to go down to draw block.
| | 03:54 | This one gets a little long, because I need
to repeat the code for the easing of each
| | 03:57 | of the variables.
| | 03:59 | The first thing I'm going to do is I'm going to
draw a dot that that the rings will be chasing.
| | 04:04 | So I'll just call that one Dot and that's
where the cursor is going to be.
| | 04:10 | For that one I don't an outline;
I just want it to be a red dot.
| | 04:15 | So it's going to be no stroke, and its
fill is going to come from the palette.
| | 04:20 | It's going to be color number 4, which is a
dark red. And then I use the ellipse, and this
| | 04:26 | one stays right on the mouse,
| | 04:29 | by using these built-in variables mouseX mouseY
and d and d, our global variables for the diameter
| | 04:34 | that I defined earlier.
| | 04:36 | Now let me show you what we can do right now.
| | 04:38 | This will draw at the moment
just showing following the mouse.
| | 04:43 | Now, what I haven't done is I'm
not refreshing the background.
| | 04:47 | So you just see a trail of
where the mouse has been.
| | 04:50 | I can close that now.
| | 04:52 | So one of the things I am going to do is I
am going to come back up to the top of draw
| | 04:55 | and I am going to put in background, so
that will refresh now, every time we draw.
| | 05:00 | And that's going to be the first color and now when
I do that, you'll see that we don't have a trail.
| | 05:10 | It just follows the mouse.
| | 05:11 | Now I can move quickly, but it ends up
right where the mouse is, very quickly.
| | 05:16 | Now there's one problem here, and that is you
saw that the arrow was right on top of the mouse.
| | 05:21 | It's a little intrusive.
I don't really want it right there.
| | 05:24 | Processing gives us a few options on how we
deal with the cursor, and I am going to come
| | 05:29 | back up to setup for just a moment and
show you what some of those options are.
| | 05:34 | There is a cursor function,
and the default cursor is the arrow.
| | 05:40 | That's one we have been using,
but it gets in the way.
| | 05:42 | I just want to show you what
the other options are for right now.
| | 05:44 | I've got several options.
| | 05:46 | So I'll put a few of these down here.
| | 05:50 | The next one is across.
| | 05:52 | The one after that is a hand.
| | 05:56 | The one after that there is
text and there is weight.
| | 06:02 | I'll delete these last two.
We don't need those.
| | 06:04 | And here's what happens is I
go through each of these and
| | 06:06 | I can comment them out and look
at the effect of the others.
| | 06:09 | So you remember what it was like with
the arrow right on top of the red dot.
| | 06:14 | Now when I run it, I have that cross. Slightly
less intrusive, but still, it seems more like
| | 06:20 | a design element and it's in the way.
| | 06:22 | So I can comment that one out
and I can try the hand.
| | 06:25 | It looks like a cute little thing.
| | 06:27 | Now I'm dragging it around with my finger, but still,
it seems like it's an intrusive design element.
| | 06:32 | I don't want that. I can use text.
| | 06:36 | Now, what this means is it brings in the
IBM cursor that's used for inserting text.
| | 06:41 | So, less intrusive, still not what I want.
| | 06:44 | And if you want to mess with people, you can use
WAIT, which is otherwise known as the spinning
| | 06:48 | beachball of death, as you go through, but that
really could just serves to cause anxiety in people.
| | 06:56 | So I am not going to use that one.
| | 06:57 | I do have one other option though, and this
is the one that I want to use for this one,
| | 07:01 | and that is no cursor at all.
| | 07:05 | So what this does is it simpl--there is no
cursor, but since the red dot follows the
| | 07:09 | cursor, the red dot itself becomes the cursor,
and that is a much better way of doing this,
| | 07:15 | because then I don't have this
extraneous element that's mucking it up.
| | 07:18 | So now I've got that one figured out. I have
got my dot that follows the mouse, and it is
| | 07:23 | itself the cursor.
| | 07:25 | Now we're going to add some repetitive code
for three rings to chase the dot around.
| | 07:30 | I actually am going to put them before the dot,
because I want them to be underneath it.
| | 07:35 | We will put Circle 1 here, and
here is how I am going to draw this one.
| | 07:40 | I am going to put stroke(palette), noFill.
| | 07:45 | Now, it's going be in the
ellipse. Put x1, y1 and d+15.
| | 07:54 | I want it to be slightly
larger than the original dot.
| | 07:58 | Then we're going to add this
thing that calculates the easing.
| | 08:02 | Now this ellipse is going to start at a random
position on the screen, and what I am
| | 08:06 | going to do is I am going to update it so
that every time--so it's going to say the new
| | 08:10 | value of excellent is going to add on a
fraction of the difference between the target, which
| | 08:16 | is the mouse, and the current position.
| | 08:18 | So what we do is we do mouse x-x1, so that
gets the difference between the mouse and
| | 08:26 | the current position, and then it multiplies
times this little coefficient that we put
| | 08:31 | in earlier, and that's the easing number.
| | 08:35 | So for number of Circle 1, the number was
.01, and what that means is it's only going
| | 08:42 | to approach it a little bit each time it loops
through. But it loops through 60 times a second,
| | 08:47 | so it will get there pretty quickly.
| | 08:49 | Then I can copy that and then
I do a similar thing for y.
| | 08:54 | Just need to hit that back up in the right place,
put this one down, and change those Xs to Ys. Great.
| | 09:04 | So that will do the will do the first circle.
| | 09:07 | Now what I am going to do is I am going to
copy this code and I am going to paste it
| | 09:12 | and do it for circles 2 and 3.
| | 09:14 | All I need to do is go through
and change the numbers. x2, y2.
| | 09:21 | I am going to make this
one a little bit smaller.
| | 09:25 | So instead of adding 15 pixels
onto the diameter, I'll only add 10.
| | 09:29 | It has its own value of easing, and we
refer back to its own values here. Great!
| | 09:35 | Then I am going to come down to
Circle 3 and do the same thing.
| | 09:44 | This one is going to be, again, a little
smaller. Nearly there. Okay that's it.
| | 09:59 | So now what we have here is a rather long
string of code, but a lot of it is just copy
| | 10:04 | and paste and adapting for the three different circles,
and here's what it looks like when we run it.
| | 10:09 | I am sure I am missing a
semicolon right there. There we go.
| | 10:13 | So thank you, there, for my error message.
| | 10:15 | Now I will run it again, and this time you
can see how the three circles chase the red
| | 10:22 | dot at different speeds, and if I leave the dot
stationary, they will all catch up eventually,
| | 10:31 | gradually, gradually, until I move it.
| | 10:34 | Anyhow, the nice thing about easing is it
provides a more organic response to movement
| | 10:40 | as opposed to the immediate responsiveness
of the mouse, and this can be a nice way of
| | 10:45 | depicting change over time in a way that's
a little easier for people to perceive and understand.
| | Collapse this transcript |
| Creating spirals| 00:00 | One interesting shape that shows up in a number of
sketches in Processing and in data visualizations is a spiral.
| | 00:06 | Now unfortunately, there is no built-
in function for spirals in Processing,
| | 00:10 | so we actually have to get
down to some bit-by-bit coding.
| | 00:14 | But it turns out it gives you some extra flexibility,
and there's a lot of fun that could be had with this.
| | 00:18 | Let me start by simply putting
a comment with the file name,
| | 00:24 | and then let me insert a color palette.
| | 00:26 | I'm going to use this one up here, from the
palettes text file that's in the exercise
| | 00:32 | files. I'll paste that in,
and there we have that.
| | 00:36 | So we have our palette all determined.
| | 00:40 | I need to create a couple of
variables to make this work.
| | 00:43 | The first thing I need to do is I actually
need to show how to draw a circle without
| | 00:49 | using the ellipse function.
| | 00:51 | What I'm going to do is I'm going to draw--
I need x and y coordinates and I need
| | 00:57 | a variable to indicate
the radius of the circle.
| | 01:00 | I'm going to put 100,
and now I'll draw the box.
| | 01:06 | And this particular one I'm
going to be using a square.
| | 01:09 | I'm going to be using a square window,
even though I've used rectangular in all the others.
| | 01:13 | It's going to be 400 x 400.
| | 01:16 | And what I'm going to do is I'm going to move
the origin right to the middle of the box.
| | 01:24 | So the 00 will be right there, because I'm
going to be using some trigonometry, and it's
| | 01:28 | a whole lot easier when
it starts in the middle.
| | 01:32 | Then what I'm going to be is I'll just set
the background color to the palette, the first
| | 01:37 | color in the palette, and I'll
turn on the anti-aliasing.
| | 01:40 | Okay, now if I press this, I'll just get
a square that pops up. There we go.
| | 01:47 | The first thing I'm going to do is I'm going to draw
a circle, just using the standard ellipse command.
| | 01:55 | However, I do need to switch
it over to the radius mode.
| | 02:00 | So I do ellipsemode, then RADIUS, because I'm going to
be using the RADIUS for everything else I'm doing.
| | 02:08 | I'm going to give this one a
stroke, a color from the palette.
| | 02:13 | I'll just give it the first index number.
| | 02:15 | I'll turn off the fill, and then
I'm going to draw my ellipse.
| | 02:19 | It's going to go 0, 0.
| | 02:22 | I've moved the origin to the center of the
window so I can center this right there, and
| | 02:27 | then I'm going to use this radius circle.
| | 02:29 | I'm just going to copy that,
bring it down, and that's my radius.
| | 02:34 | And when I do that I should get a nice
smooth circle right there in the middle.
| | 02:39 | Okay, so that's sort of a reference point, a
starting point, that's using the built-in
| | 02:43 | ellipse function.
| | 02:45 | However, now for the spiral we're not able
to use the ellipse function, and so I want
| | 02:50 | to show that you can actually draw a circle
by using a little trigonometry to calculate
| | 02:56 | each point on it, and then we're going to go back
through and modify it to get to a spiral pattern.
| | 03:01 | Okay, so I'm going to put
here, draw a circle with points.
| | 03:07 | Okay, now to do this one, I'm first
going just change the color of the dots.
| | 03:12 | I'm going to go to the last color in the palette,
and since I'm drawing points, I want to fluffen
| | 03:22 | them up enough so you can actually see them.
| | 03:26 | So let me go to 5 pixels, and then I need to introduce
a for loop that does a little bit of trigonometry.
| | 03:32 | Now you may or may not recall the sine
and cosine functions from trigonometry.
| | 03:39 | These come in, in terms of trying to draw a circle
of a given radius with x and y coordinates.
| | 03:46 | Don't worry about it. I'm actually going to show you the
functions and you'll be able to see how they work.
| | 03:51 | What I do is I'm going to create a new
variable, a float variable called angle, because we
| | 03:57 | are going to be angling, we're
going to be cycling through this.
| | 04:00 | We're going to start 0 and then angle
is going, as long as it is less than 2*PI,
| | 04:08 | because that would be an entire trip
round the circle and anything after that's redundant.
| | 04:11 | And the, we are going to update the angle
just a small amount, incrementing it .1.
| | 04:17 | By the way, this is in radians.
| | 04:19 | We've been dealing with radians before.
| | 04:20 | And the radians start at 3 o'clock and they
go clockwise around, until we come back up
| | 04:25 | to 3 o'clock point.
| | 04:26 | So this is my trigonometry function.
| | 04:28 | I'm going to put on my curly brackets
and in them, I'm going to put that x--
| | 04:35 | actually, I'll just let you know right here.
| | 04:37 | Here's what I'm doing.
I'm going to be drawing points at x and y.
| | 04:42 | But what I need to do is get the points so
that they form a circle. And I'm kind of be
| | 04:46 | basing these on the angle, as I go
through, as I rotate through, in radians.
| | 04:51 | So what I do is I take x and I get the cosine
of the angle. By the way, one of the reasons
| | 05:00 | to work in radians is because this is an
easier function if I use radians; otherwise there
| | 05:04 | are some transformations that have to be done.
And then I just copy this one, the radius of the circle.
| | 05:11 | If I want a bigger circle then
that'll make it a bigger on the outside.
| | 05:14 | And then I do a similar function for the y,
except this time instead of the cosine, I use the sine.
| | 05:26 | And between the two of those I can get a
circle, and you'll see how it works right here.
| | 05:31 | You see that my gray dots now fall
exactly on the ellipse as they go around.
| | 05:35 | I have re-created the essential shape of a
circle by using points and using the sine
| | 05:41 | and cosign functions as they relate to radians, as
we go around the circle. I know it's technical,
| | 05:46 | but here you see, it makes a pretty picture.
| | 05:49 | What I'm going to do now is show that we
can take those dots and instead of having
| | 05:53 | them be exactly on the circle,
we can have them go out into a spiral.
| | 05:58 | So the first thing I'm going to do, by the way, is I
don't want to draw those particular points anymore,
| | 06:05 | so I'm going to comment those out for right now,
and I'm going to come down to a spiral pattern.
| | 06:09 | Now, I need to copy those, draw dots in a
spiral. That's what we are going to do now.
| | 06:18 | I'm going to paste that in there, and I'll
take the comments of off this one. And I'm
| | 06:23 | just going to modify this.
| | 06:24 | Now I do need a new variable here.
| | 06:28 | What I'm going to do is I'm going to come
in and create float and then radiusSpiralDots.
| | 06:35 | And this is going to give the radius
that I start off with for the spiral.
| | 06:40 | Now this one is important because the
radius changes over time, so I go to 10.
| | 06:43 | That's just 10 pixels out.
| | 06:45 | And then the stroke, I'm going to
change to a just a different color.
| | 06:49 | And then from there, I need
to use a different function.
| | 06:52 | I can leave the strokeWeight
right there, and that's fine.
| | 06:55 | And the float I started angle of 0, but instead
of going to angle of 2 PI, which is one trip around,
| | 07:02 | I'm actually going to have
it go four times around.
| | 07:04 | So I do 8 PI. And then I increment at .1, but
then I have to add another thing right here.
| | 07:11 | The radius needs to increase
continually as we go through.
| | 07:16 | And I'm going to increase it just a
small amount, of 0.5 pixels at each step.
| | 07:23 | And then I copy the radiusSpiralDots
and place the functions right here.
| | 07:31 | And if press Run, that should give us a spiral.
| | 07:36 | I've left the circle on as a reference point
underneath, but you can see how it circles
| | 07:40 | around now, and there's a lot of
things that you can do with that shape.
| | 07:43 | Now, one of the things I'm going to do here is
I'm now going to turn off the original circle.
| | 07:49 | I've just got to find the
code first. There we go.
| | 07:53 | I'm going to comment that out, and I'm going
to one more modification. Just to make things
| | 08:00 | slightly more complicated, but to get
us closer to what you probably want to do,
| | 08:04 | you probably weren't looking to draw a
spiral with dots, but really just wanted a line to
| | 08:09 | go around. Draw a spiral line.
| | 08:15 | Now, unfortunately, the way we have to do this is by
using the dots and simply connecting the dots,
| | 08:22 | but we have to include a few extra things.
| | 08:25 | We are going to have to create a variable
for the current positions of x and y, but
| | 08:28 | also the previous positions of x and y, because
then we draw very short lines to connect those.
| | 08:32 | We are going to need, however, to create some
new variables for the previous versions now.
| | 08:39 | What we can do is I'm going to
create impossible values for these.
| | 08:42 | I'm just going to put 999 so they're about a mile off
of the sketch, and it's just going to ignore those.
| | 08:48 | So that's going to be for px.
| | 08:50 | That's for previous value of x. And then I'm going
to do another one for the previous value of y.
| | 08:58 | Then I'm going to change this one to
radiusSpiralLine, and I'm going to copy that and paste it through,
| | 09:06 | right here and right here and right here,
so that's consistent all the way through.
| | 09:10 | And I've got the 10 here. I'm going to
change my palette to a slightly different color.
| | 09:15 | And now I'm going to change the strokeWeight
to a much smaller one. Because I'm drawing
| | 09:18 | a line, I want it to be smoother.
| | 09:20 | What I'm doing now is I'm actually going
to take the angle and I'm going to make the
| | 09:24 | change in the angle smaller as we go through,
and then I'm going to make the corresponding
| | 09:30 | change in the spiral line half as big as well.
| | 09:33 | Then we have the x and y in then cosines.
| | 09:36 | But before we draw the points, I'm going
to need to add a little if statement.
| | 09:40 | I'm going to say if px is > -999--and what
that means is it won't do this the first time
| | 09:49 | it goes through, which is good because we don't
have a previous value that would work for anything.
| | 09:55 | I'm just going to put this one right
here, bump this one over a little bit.
| | 09:58 | I'm going to say if that happens then don't draw a
point; draw a small line that connects the
| | 10:05 | current x and y at one end of the line
and the previous x and y at the other
| | 10:11 | point of the line.
| | 10:12 | And then when you are done with that, we're
going to update so that the previous x
| | 10:18 | and y take on the values of the current. That way we
can keep cycling through and connecting the old ones.
| | 10:24 | And so I'm going to save this one and run it,
and now you see that we have a red spiral
| | 10:30 | on top of the white dots. In fact, I'm going to
run it one more time without the white dots.
| | 10:36 | All you really have to do is comment
out that one. And then I have a spiral.
| | 10:43 | And so it's a little rough, but if you use
smaller increments, you can make it a smoother
| | 10:47 | shape as you go through.
| | 10:48 | But again, a spiral is a shape that's been
showing up more and more in data visualizations
| | 10:52 | and more and more in generative art, and you
simply have to have a little bit of code and
| | 10:56 | a little bit of trigonometry to make this work,
and you can come up with some very interesting
| | 11:00 | and compelling designs.
| | Collapse this transcript |
|
|
7. InteractionMouse tracking| 00:00 | In this movie, I want to show you a little
bit more about how you can use the mouse to
| | 00:05 | create the drawings and to
interact with your sketch.
| | 00:08 | This one, after I put a little comment in here
with the title in it, is a pretty simple sketch.
| | 00:15 | I'm going to first create my setup block.
| | 00:17 | So I put void setup, and then in curly brackets
I'm going to put the size of the window.
| | 00:28 | I'm going to turn on anti-aliasing.
| | 00:32 | I'm also going to change the frame rate,
because I don't want this one updating too often.
| | 00:37 | I'm going to slow it down just a
little bit; maybe I'll put it to 8 frames.
| | 00:41 | This is frames per second.
| | 00:42 | Processing by default will try to run at 60
frames per second, although there are some
| | 00:46 | sketches where that just won't be possible.
| | 00:48 | And then I'm also going to put the
background in, and this one I'm going to give a bright
| | 00:53 | white background.
| | 00:55 | So there's my setup.
Then I'm going to create my block for draw, do a void draw.
| | 01:05 | And what I'm going to do here is I'm going
to turn off the stroke. So I don't want any
| | 01:09 | outline on the shapes that I'm going to draw.
| | 01:13 | Then I'm going to give a
bright-red fill but still not totally red.
| | 01:18 | I am using the RGB codes 220, 0, 0.
| | 01:22 | And I'm going to draw a circle here.
| | 01:26 | And the circle is going to be at the current
position of the mouse. So I just put mouseX
| | 01:30 | and mouseY and I make it
10 pixels in diameter.
| | 01:35 | So I can show you what this one
will look like. There we go.
| | 01:39 | So I've got red dots
wherever the mouse is, currently.
| | 01:43 | Then what I'm going to do is I'm going to
change the fill to a medium-dark gray. That's 120.
| | 01:52 | And again, the way you can tell it's gray is
because I only have a single number here in
| | 01:54 | the fill, whereas for the red I have a three
numbers, which means that I'm doing an RGB.
| | 01:59 | And then I'm going to draw the ellipse again,
except this time I'm going to use a different thing.
| | 02:05 | I'm going to use pmouse, and that is the
position of the mouse in the last frame.
| | 02:09 | And I am going to do that
for pmouseX and pmouseY.
| | 02:16 | And so what this is going to do is the mouseX
is going to draw this red dot and then this
| | 02:20 | is going to put a gray dot right on top of it,
if that is as an old position.
| | 02:26 | And then I'm going to add
a line to connect things.
| | 02:28 | I can use the same medium-dark gray.
| | 02:31 | And I'll just put line, and I'm going to
connect mouseX and mousey to pmouseX and pmouseY.
| | 02:43 | Now, please note, the background statement is
in setup, which means that the drawing here
| | 02:49 | will not get erased as it goes through.
| | 02:51 | So you'll be able to see every previous thing.
| | 02:54 | The one interesting thing is that the red
dots for the current position will be covered
| | 02:58 | up by the gray dots as soon
as those are old positions.
| | 03:01 | Otherwise, nothing gets replaced.
| | 03:03 | I'm going to add just one more line of code here,
and in case things get a little busy online,
| | 03:08 | I'm going to put a mousePressed command,
because this is all about mouse interaction.
| | 03:15 | And what this says is if any mouse button
gets pressed at any point, execute this code,
| | 03:22 | and this one is going to be really simple.
| | 03:24 | All I'm going to do is I'm going to copy that one,
the background statement, bring it down to here.
| | 03:30 | And so what this means is if you press the
mouse, erase everything with a bright-white
| | 03:35 | background and then just keep
doing what you were doing before.
| | 03:37 | So I'm going to save that now,
and we're going to run this one.
| | 03:41 | And you can see how it moves around.
| | 03:43 | I am going to press the mouse button, press
the mouse button again, and you can see how
| | 03:49 | it just moves around.
| | 03:49 | And that is a very simple form
of the mouse-based interaction.
| | Collapse this transcript |
| Hovering and clicking| 00:00 | Another very common form of interaction with
the mouse is to hover over an object and have
| | 00:06 | it change or to click on the object and have
it change, and in this I want to show you
| | 00:10 | how both of those are going to work in Processing.
| | 00:12 | I'm going to start with a comment here, and then
I am going to start by putting in a palette.
| | 00:21 | Come back to my list of palettes here.
| | 00:23 | I think I'll use this one, copy
that, and paste it back where I was.
| | 00:30 | And then I am going to create a few
different variables that it will be using as part of
| | 00:34 | the mouse interaction.
| | 00:36 | What it is is I am going to be drawing two
shapes. I'm giong to be drawing a circle and
| | 00:40 | a square, and I am going to be changing the
colors of them depending on whether we hover
| | 00:44 | or click on them.
| | 00:46 | So what I am going to do is create an integer
variable here for the fill of the left shape,
| | 00:52 | so left fill, lf. And that one is going to
be the index number 2 in the palette.
| | 00:58 | Then I am going to do a similar thing.
| | 01:02 | I am just going to copy that and do the
right fill, so rf is for right fill, and again,
| | 01:10 | that will be the same color.
| | 01:11 | Then I am going to have another variable
that determines the size of the objects that I
| | 01:15 | am going to draw, int s is for size.
| | 01:18 | I am going to make these 120 pixels. So it
will a circle of 120 pixels in diameter and
| | 01:23 | a square of 120 pixels on the side.
| | 01:26 | Then I am going to do the setup block,
and in there I put the size of the window.
| | 01:36 | I also turn on the anti-aliasing.
I am going to be using the rectmode center.
| | 01:42 | I want to be able to position this square
the same way that I positioned the circle,
| | 01:46 | so I have to put in rectmode, and then in all
caps I put CENTER. So when I give the X, Y
| | 01:52 | for the rectangle, it will
just be the middle part.
| | 01:56 | Then I am going to put a border around shapes.
| | 02:01 | Now, they'll come from the first color in the
palette. And I am going to make the borders
| | 02:09 | five pixels wide, so strokeWeight (5).
And that completes my setup. Save that.
| | 02:17 | The next block is draw.
| | 02:23 | The first thing I am going to do is I am
going to put in the background, the idea is that
| | 02:28 | this refreshes every time it goes through.
| | 02:30 | It doesn't preserve the previous stuff.
| | 02:32 | I will put background, and this would be
index 0 in the palette, the first color.
| | 02:42 | Then I can put some code to draw a circle.
| | 02:49 | So this would be on the left side. And what I
am going to do is I am first going to specify
| | 02:53 | the fill color, which is lf.
That's for the fill,
| | 02:57 | except that needs to be in
standard parentheses. Great!
| | 03:02 | Then I put the code for the ellipse.
| | 03:07 | I am going to put the ellipse
one third of the way over.
| | 03:11 | If you want to evenly space two objects, you put
each of them on the dividing lines for the thirds.
| | 03:16 | So width/3. I am going to have it be right
in the middle from top and bottom, so center
| | 03:22 | it on the halfway through the height,
and then the diameter will be s and s.
| | 03:26 | That's for the size that I put earlier.
That's 120 pixels.
| | 03:30 | So that's the code for the circle.
| | 03:32 | Then what I am going to do is I am
going to draw a square on the right side.
| | 03:40 | This one is also going to have a fill.
| | 03:42 | It's going to be rf, for the right
fill, and then I will draw a rectangle.
| | 03:49 | And because I have put this rectmode (CENTER), I can
specific the center point, and I am going to do width.
| | 03:53 | I want this to be two-thirds over,
so I am going to put width*2/3.
| | 03:59 | I also want it to be in the middle between
top and bottom, so I put height/2, and s and
| | 04:06 | s are the width and height of the square.
| | 04:08 | This is also 120 pixels, so it would
be the same size of this circle.
| | 04:12 | So that should actually be enough to
draw the two shapes, so there they are:
| | 04:18 | circle on the left, square on the right.
| | 04:19 | I think I have a little
green fill and brown border.
| | 04:23 | But what I am going to do is make it so that
when we hover over them, or later when we click
| | 04:27 | on them, they will do something.
| | 04:29 | This requires a rather lengthy if statement,
because what I have to do is detect the position
| | 04:36 | of the cursor relative to each shape.
| | 04:39 | So the first thing I'm going to do is I am
going to put Detect hovering over the circle.
| | 04:48 | And the way this works is I put if and
then I can use a function called distance.
| | 04:55 | It abbreviate as dist, and it looks at the
distance between the mouse and between another point.
| | 05:00 | And what I am going to do is I am going to
specify the center of the ellipse, and so
| | 05:04 | all I have to do, really,
is copy this right here.
| | 05:10 | That specifies the center of this circle,
and then I give the coordinates for the mouse,
| | 05:15 | mouseX and mouseY, built-in
variables that track the mouse.
| | 05:20 | So if that distance is less than the radius,
I can put is less than s/2. So that actually
| | 05:29 | means 60 pixels because the total diameter
is 60. So I say if the distance between the
| | 05:36 | current mouse position and the center of the
circle is less than the radius, then that
| | 05:40 | means we are hovering over it.
| | 05:43 | And so I can close that off, and I can now
put curly brackets for a block of code.
| | 05:49 | So what I am saying is if this is true, then
do this. And what I am going to put is if you
| | 05:55 | are hovering over, I want you to
change the fill, so lf, is equal to palette 4.
| | 06:02 | We are going to go to a different position
in the palette. And then I am going to make
| | 06:08 | an else statement in case we are not hovering, so
we put else. And it gets its own curly brackets.
| | 06:15 | I am going to copy this to make it just a
little bit simpler here. And if it's not hovering,
| | 06:23 | leave it where it was at 2.
| | 06:25 | So we can run this real fast and look, as I
move the mouse over, it changes the color.
| | 06:34 | It's detecting the hovering of the mouse,
and this is really nice because Processing has
| | 06:38 | this dist function that makes that easy to do.
| | 06:41 | Now it turns out though, with a square or a
rectangle it's a little different, because
| | 06:44 | you can't just use a radius, because the
corners are father away than the midpoints are.
| | 06:51 | And so to detect hovering over a square,
we have to use a slightly more complicated approach.
| | 06:57 | Let's put Detect hovering over square.
| | 07:04 | What I am going to do here is I am going to
type if, and I need to see if the mouse is
| | 07:09 | to the right of the left border, to the left
of the right border, above the bottom border,
| | 07:15 | and below the top border.
| | 07:16 | And so I actually need to have
four separate statements here.
| | 07:19 | What I am going to do is I am going to first
going to see whether the mouseX, so its X
| | 07:24 | position, is greater than the left border,
and since all of these are positioned two-thirds
| | 07:32 | of the way across the width--
that's the center point--
| | 07:34 | I just need to subtract a
little bit to get the left border.
| | 07:38 | So if mouseX is greater than the left border,
which is from the center 2/3rds minus the
| | 07:43 | half of the width, then I
put a conjunction here.
| | 07:46 | I have used two ampersands to indicate
that this other condition must also be true.
| | 07:51 | What I am going to do now is to say it
needs to be the left of the right border.
| | 07:55 | That has a similar way of going, except I have to
use the different direction, and I put width*2/3,
| | 08:03 | and this time I put plus one
half of the size of this square.
| | 08:09 | That gets me to the right border.
| | 08:11 | Then I need to add the top and bottom borders.
| | 08:14 | I am going to put my double smpersand
and then just go to the next line.
| | 08:18 | I am going to put mouseY this time--and when
this mouseY is greater than the height/2,
| | 08:27 | so that's the center point where
the squared is positioned, -s/2.
| | 08:35 | And to get the next border I put
mouseY is less than the height/2+s/2.
| | 08:46 | This looks at whether the
mouse is above the bottom border.
| | 08:49 | Again, the way I am doing this is by height/2
represents the center point where the box
| | 08:54 | was positioned, and then the +s/2 simply gets me
to the border, because that's half of the size.
| | 08:59 | And so I close that, and once I execute this,
I will just put in the code right here.
| | 09:05 | And what I am going to do is I am going to copy this code
right here, because it's going to be very similar.
| | 09:14 | All I want to do is take this back here and
change that to right fill and right fill, and
| | 09:25 | we should be good to go. I will save it.
| | 09:29 | We can hover over the circle--there it is--and we
can hover over the Square, and there that is.
| | 09:34 | This one only needs a single function to look at
the distance because of the radius is uniform
| | 09:38 | all the way around.
| | 09:39 | This one needs four functions to determine
if it's below the top, above the bottom, and
| | 09:44 | to the left and right.
Anyhow, that's how we can detect hovering.
| | 09:48 | Now I am going to add one more line of code
to show how you can make it that it only
| | 09:51 | does it if you're hovering and you click.
| | 09:53 | It's a very small addition to this.
| | 09:57 | What I am going to do is I'm going to come
over here, over the circle, I am going to
| | 10:02 | just copy that code, and I am going to paste
it right there, because I just don't want to
| | 10:07 | get rid of what I have.
| | 10:08 | I say if this is true, but I am
going to add one more condition to it.
| | 10:14 | So it has to be over the mouse, but it also
has to have mousePressed, and now it won't
| | 10:22 | happen unless the cursor is over the shape and the
mouse is pressed. And then do a similar thing down here.
| | 10:28 | I am going to copy that and
comment it out for right now.
| | 10:32 | I did that by controlling, Ctrl+/
on the PC or Command+/ on the Mac.
| | 10:37 | I paste it in and I simply
add one more condition.
| | 10:44 | This will go to one more line, mousePressed.
| | 10:47 | Oh, sorry, I see that I put
this in the wrong place.
| | 10:51 | I've got to remove that from there. There we go.
| | 10:57 | It goes on the outside of that statement.
| | 11:02 | Now, it's not enough to hover.
| | 11:03 | I have to click at the same time.
| | 11:05 | I hover and I click. And so that's another
way of interacting, so we can do the hovering
| | 11:10 | or clicking on the shape to get it to do
something different, and that's one of the major elements
| | 11:14 | of interactivity in a sketch.
00:11:15.89] | | Collapse this transcript |
| Understanding keyboard interaction| 00:00 | In the last movie I showed you how to use
the mouse to perform certain interactions
| | 00:05 | with the sketch, by hovering and/or clicking
on an object to get it to trigger some change
| | 00:10 | in the attributes of that object.
| | 00:11 | In this movie, I simply want to show you
how to do the same thing with the keyboard.
| | 00:16 | This one is almost identical to the previous
one, so I'm actually using the last sketch
| | 00:21 | as the starting point for this one, and
I'm just going to make a few small changes.
| | 00:25 | First I'm going to change that
we're down to, we're on 03 instead.
| | 00:29 | Then what I'm going to do is everything else
stays the same, down to here, and what I'm
| | 00:39 | going to do is change the
hovering to click l key.
| | 00:43 | It's a lowercase l, not a 1.
| | 00:47 | And then it's going to be clicking
that key that produces the differences.
| | 00:50 | Then I'm going to do the same thing here;
it's going to be click the r key. Great!
| | 01:02 | I can remove that aAnd then all I need to do for
this circle, we're going to nest an if statement.
| | 01:11 | First one I'm going to is I'm going to
put here Detect if any key is pressed.
| | 01:17 | So that's going to be the first
condition: Was there a key pressed?
| | 01:20 | The way we do that is if (keyPressed).
That's all you have to do on this one is because
| | 01:31 | it just assumes if keyPressed
is true, the true is assumed.
| | 01:35 | And I'm just going to bump the rest of
these things up because now they are nested in,
| | 01:42 | and I find that the indenting makes it
a lot easier to keep track of things.
| | 01:52 | And then I'm going to put the curly
bracket that corresponds to the keyPressed.
| | 01:56 | You see how when I typed it the curly
bracket to the right of the keyPressed lit up?
| | 02:00 | That's how you can keep
track of what goes with it.
| | 02:01 | So the first thing is whether any key was
pressed, and then we're going to see whether
| | 02:06 | it's the l key. And all we have to do is
we take out this big statement right here.
| | 02:12 | I'm going to delete all of that and the only
thing we need is to know whether the key is
| | 02:17 | equal to--please notice I have to do
two equals; there's a difference.
| | 02:21 | A single equals is an assignment indicator.
So for instance, right beneath it says lf = palette(4);
| | 02:27 | that can be read as it gets;
the left fill gets or is gets to be this.
| | 02:34 | This one I'm asking to whether key is
equivalent to, or whether it matches exactly--you have to
| | 02:39 | use two equal signs for that.
| | 02:40 | And then I'm going to look
for a single character l.
| | 02:43 | That's a char variable.
It's a single character.
| | 02:45 | So I have to put it in single
quotes, 'l'. That's a lowercase l.
| | 02:52 | Then what I do down here is a similar thing.
| | 02:58 | All I want for this one is to know whether
the key is equivalent to the lowercase r, and
| | 03:04 | that's in quotes also.
| | 03:06 | And I can save that. I hit Ctrl+R to run
on a PC or Command+R to run on a Mac.
| | 03:13 | Now you see that hovering has no effect, and
neither does clicking, because I've removed
| | 03:18 | all of that code.
| | 03:19 | However, if I type the l,
you see that the left one changes.
| | 03:23 | If I type an r, the right one changes, and
if I type any other key, they both go back
| | 03:29 | to what they were before.
| | 03:30 | So if l, I'm doing the Spacebar, r space else r,
and you can see that now I'm using the keyboard
| | 03:38 | to change the appearance of these objects,
| | 03:41 | and that is another major form of interaction in
the sketches that we'll be using in Processing.
| | Collapse this transcript |
|
|
8. MediaSpecifying fonts| 00:00 | Up to this point I've shown you how to include
shapes and colors into your sketches in Processing.
| | 00:05 | On the other hand, there may be times
that you'll actually want to include text.
| | 00:09 | To this point we most have been showing text
in the console beneath, but I want to show
| | 00:12 | you how to actually include it
in the sketch window itself.
| | 00:16 | I'll start by just putting a little comment
here at the top. And what I'm going to do is
| | 00:20 | create a window, 600 x 200; I'm going to give
it a black background; then I'm going to type
| | 00:27 | in a string for the text
that I want to include.
| | 00:30 | I put string with a capital S,
because it is actually an object.
| | 00:34 | Then I give the String variable a
name. I'm going to call it wordText.
| | 00:38 | It could be anything you want. And equals
and then I put it in double quotes. Strings
| | 00:43 | go in double quotes, char
variables go in single quotes.
| | 00:46 | I'll put here "A word is worth 1/1000th of
a picture." So that's my text, and I finish
| | 00:54 | with a semicolon. And then all I need to do is
position the text, and I use that with the text function.
| | 01:01 | So, first I need to tell Processing what text
it is that I want to position, because I may
| | 01:04 | have more than one string.
| | 01:06 | So I say I'm going to use in a wordText. Then
I give it the X and the Y for the baseline
| | 01:12 | of the first line of the text.
| | 01:13 | In this case I'll just do 50 pixels over and
I'll put it halfway down, and that is sufficient
| | 01:21 | to put some text in. And what you
have here is the default font and size.
| | 01:25 | Now, it may be that there are times when you
want to be able to change that stuff, and
| | 01:29 | so I'm going to show you how to do a
slightly more elaborate version that allows you to
| | 01:33 | customize the font, the color, the size,
as well as some options on placement.
| | 01:38 | And in fact, what I'm going to do is I'm going
to save this one right here as the basic version,
| | 01:45 | and then we will copy that, put it down here,
and I'm just going to comment that out so
| | 01:51 | it doesn't run right now.
| | 01:52 | We'll have the elaborate
version right beneath.
| | 01:55 | Again, we're going to keep a
lot of this stuff the same.
| | 01:57 | I'm going to give this one a different color.
I'm actually going to put in a little hex
| | 02:01 | code here 302F2F. Great!
| | 02:06 | And then what I'm going to do is
I'm going to choose a font to use.
| | 02:09 | Now fonts work a little differently in Processing
than in other programs you use, so you just kind
| | 02:13 | of pick them and use the GUI dropdown.
| | 02:16 | You actually have to create the font, or rather, you
had to create a font file to be used with this.
| | 02:21 | And so what we do is we need to come up here
to Tools, and the first choice there is Create
| | 02:26 | Font, and these are the choices that
we have on this particular computer.
| | 02:31 | Your choices may be different. So you just
select one and you'll get some sample text.
| | 02:38 | So for instance, here is GilSansMT, and I
think what I'm going to do is I'm going to
| | 02:42 | make this one not 48 point,
but 20 point. Here we go.
| | 02:46 | And what it is going to do is it is going
to create a file called GillSansMT-20.vlw,
| | 02:53 | and that's going to be a
font file for Processing.
| | 02:56 | So, I'm going to hit OK, and where that's going
to show up is in the Processing data folder.
| | 03:02 | So now, for instance, if I go back to the
desktop and I go to the folder for 08_01, you see
| | 03:11 | I now have a data folder. And when I click
open that data folder, there's my font file.
| | 03:16 | And actually, I'm going
to need that fonts name.
| | 03:20 | So I'm going to copy all of that with the
extension, and I am going to go back to the
| | 03:24 | Processing sketch,
| | 03:26 | because what I am going to do here is I'm now
going to create another object, or a composite
| | 03:30 | variable PFont. Please note
the capital P, capital F.
| | 03:35 | Again, where Processing is
case-specific, these things matter.
| | 03:39 | Now this is going to be a variable.
| | 03:40 | It's actually not--it's like a variable.
And what we need to do is I'm declaring the
| | 03:44 | variable and I need to give it a name,
and I'm going to give it sampleFont.
| | 03:48 | You can call whatever you want.
| | 03:50 | You could call it GilSans20.
| | 03:53 | Now using fonts is a several-step process in
Processing. You saw for instance that I had
| | 03:57 | to create a font. I've created my PFont object, or
composite variable here, but that simply declared it.
| | 04:03 | Now I need to initialize it by loading the
font. And so what I do is I put in sampleFont
| | 04:09 | is equal to loadFont, so I'm going to load
a font into that, and then I put in quotes
| | 04:17 | the full name of the font with the extension
that I got earlier, and that's "GilSansMT-20.vlw."
| | 04:24 | And I think it's always easy is to simply
copy and paste these things, so you get all
| | 04:29 | the capitalization and the spacing correct.
And it has to be in quotes, in parentheses,
| | 04:33 | and then I finish from the semicolon.
| | 04:35 | After that I can then specify that I want to
use that particular font in my next piece
| | 04:41 | of text, so now I'm calling it.
| | 04:44 | I also want to change the color of
the font, and for that you use fill.
| | 04:48 | I'm going to use a hex code FFE224,
and then I'm going to place the text itself.
| | 04:56 | The way we do that it's
the way we did here early.
| | 04:59 | I'm just going to copy that and bring it back
down, and that should be sufficient to show
| | 05:05 | it with a font and the colors. Perfect!
| | 05:08 | So I'm in GilSans. It's in
yellow on a dark gray background.
| | 05:12 | I've changed the size.
| | 05:13 | I want to show you a few other
things that you can do at the same time.
| | 05:17 | Let's say I want to have
a slightly longer text.
| | 05:20 | I can put it here.
| | 05:21 | I could position it as a separate line, but I
can also use the little sneaky Java commands.
| | 05:26 | I can do a blackslash that's right
above the Enter key and then an n, and I can put
| | 05:31 | a second line of text. And then let's also say
that I want to change the alignment slightly.
| | 05:39 | What I can do then is I can enter
the text align function, so textAlign.
| | 05:45 | Now, textAlign gives you a number of options.
| | 05:48 | You can type in left, which is
the default, or center or right.
| | 05:52 | I may just type in left. And the reason I would
do that, even though it's the default, is because
| | 05:56 | that's the horizontal line.
| | 05:57 | You can also modify the vertical alignment,
but there has to be a second argument, and
| | 06:02 | that one gets to be either centered, top to
bottom; or it can be along the baseline, which
| | 06:07 | is the default; or it can be top or bottom.
| | 06:09 | This one, I'm going to do CENTER, and
you'll notice that these are in all caps.
| | 06:13 | That's necessary.
| | 06:14 | You can also change the leading,
which is like the line spacing.
| | 06:18 | If I wanted to, I could do that like this.
| | 06:20 | Now I'll put like 50 points in
there and I can run that all now.
| | 06:26 | And you see now I have two lines.
They're spaced out.
| | 06:28 | They're centered vertically, and this is a
way to give you some of the options that you
| | 06:32 | have for working with text in Processing to
integrate them--especially useful for labels
| | 06:36 | and axes when you start doing data visualizations.
But there is another element to add some information
| | 06:41 | and some interest here on sketches.
| | Collapse this transcript |
| Using images| 00:00 | Processing allows you to integrate images
that have already have been created as, for
| | 00:05 | instance, JPEG or PNG files,
in addition to drawing your own shapes.
| | 00:09 | What I want to show you this is two different
ways to work with images. The first is how
| | 00:13 | to integrate an existing file that you have
on your own hard drive, a local file, and
| | 00:18 | also how to use a
web-based file with just a link.
| | 00:21 | So I'm going to start by putting the title
of this one as a comment, with a 600 x 200
| | 00:28 | pixel window, and then what I'm going to do is
I'm going to load an image from the hard drive.
| | 00:33 | Now, I have an image that's available in the
Exercise folder. I am going to move this over
| | 00:37 | for just a moment and there you see,
I have a spaceinvader picture.
| | 00:42 | Now what I can do is a just grab
that and drop it onto here.
| | 00:46 | Now you don't get to see it, but you can see down
the bottom it says One file added to the sketch.
| | 00:50 | And if we go to the Sketch here, I now have
a data folder, and there's a picture in the
| | 00:54 | data folder. I'll maximize this again.
| | 00:57 | So now I've made that file
available to the sketch.
| | 01:01 | What I do is I am going to
be using a PImage variable.
| | 01:05 | That's actually an object, but this is a
PImage that's for Processing image.
| | 01:09 | And I am going to just call it spaceInvader.
And then what I have to do is I need to load
| | 01:14 | that file into the variable, so I type
spaceInvader, because in the last line l just declared it;
| | 01:21 | I didn't initialize it.
| | 01:22 | This is basically initializing. And then
I'll use the function loadImage. And then what
| | 01:27 | I need to do is I need to put the name of the
image, complete with its extension, in quotes.
| | 01:32 | So I'm going to come into space, and again,
you have to get the capitalization exactly
| | 01:38 | how it was in the original.
| | 01:39 | This one is .jpg. Make sure this not .jpeg,
because then it's not literally on the dot.
| | 01:46 | Put that in quotes, put in
parentheses, and finish with a semicolon.
| | 01:49 | And so what that does is it loads the image into the
variable, so it's basically initializing the variable.
| | 01:55 | And then what I can do is
I can place the variable.
| | 01:57 | I use the image function, and I go by the name
of the variable that I created, spaceInvader.
| | 02:03 | I am not using the name of the file.
And then I put the x and y for it.
| | 02:08 | This is going to be based
on the top-left corner.
| | 02:10 | So for this one, I'll just put it as 00.
| | 02:13 | Now, I should mention that this file is
already appropriately sized to be 300 pixels wide
| | 02:19 | and 200 pixels tall.
| | 02:20 | If your file is a different shape or a
different size, you have the option of resizing it.
| | 02:25 | And so let me show you what this like
if I just press Run. There you go.
| | 02:29 | Now, my spaceInvader, I have already got it
on the left half because I'm going to put
| | 02:32 | something else on the right half.
| | 02:33 | It's appropriately sized.
| | 02:35 | If it were a different size, I could change
that by adding a fourth and fifth argument
| | 02:39 | to this file right here.
| | 02:41 | Say I wanted to make it 200
pixels wide and 150 tall.
| | 02:45 | I can do it that way, and it will resize it.
| | 02:48 | It might get distorted in the process,
but that's something that Processing is able to do.
| | 02:52 | But mine is appropriately sized already, which
is handy, so I'll leave it right like that.
| | 02:56 | Now I want to show you how you can use not
just a local file, but you can also use files
| | 03:01 | straight off of the web
without first loading them on.
| | 03:03 | This is handy in particular if you're going
to be using Processing to build a web page,
| | 03:08 | as long as this is going to be one where you know that
image is going to be there for least a little while.
| | 03:11 | In this case, I just need to
declare another key PImage variable.
| | 03:15 | I'm going to call is one of webInvader.
And then I have a String here, a string variable
| | 03:21 | that's going to have the URL.
| | 03:23 | I'm actually calling the string URL.
| | 03:25 | You can call whatever you want; you can call
it you know webInvader location on the web
| | 03:29 | or whatever. And then we're going to put in
quotes the complete URL for just the image.
| | 03:35 | Now I am going to show you, I have
the image open on the web here.
| | 03:39 | This is one I got from Creative Commons
off of Flickr, so this one is okay to use.
| | 03:45 | I highlight the entire address and go
back to where I was, and I can paste it in.
| | 03:51 | Its long, but that's the whole thing. And then
I finish with a semicolon, so that's the
| | 03:55 | URL for the image.
| | 03:57 | Then what I can do is I load that image into
the variable. So I go webInvader=loadImage,
| | 04:05 | just like I did up above, except this time
all I have do is put URL. And then I can place
| | 04:11 | it the same way I did earlier, image.
| | 04:14 | This was called webInvader.
And I am going to move it over to the side.
| | 04:18 | I am going to move it over 300
pixels and keep it at the top.
| | 04:21 | Now, let me show you, this one
actually is a different size.
| | 04:24 | So when I press Run, you see it's actually
too big over here, and that's where I can
| | 04:28 | do the manual resizing.
| | 04:29 | What I am going to do right here is tell it that
I wanted to be 300 pixels wide and 200 pixels
| | 04:34 | tall. Save that and now
they show up side by side.
| | 04:37 | Now, you should know that Processing
actually has a lot of functions that allow you not
| | 04:42 | only to place the images,
but it allows you to modify them.
| | 04:45 | I am going to show you just two of them really fast,
and I am going to let you explore the others.
| | 04:50 | First one I'll put up here, and I am going
to use a filter, and filters give you a lot
| | 04:56 | of different options.
I am just going to do one
| | 04:58 | that is kind of fun, and that is I am going to blur
it. And when I do that, it's counterintuitive.
| | 05:03 | You put the command after the image, because
what it's doing, is it is like superimposing
| | 05:07 | the filter on top of the image.
| | 05:09 | And so because things go in the order on
which they are drawn, the filter needs to
| | 05:12 | come after the thing you want it to be on.
| | 05:15 | So now when I draw it, the spaceInvader on
the left is blurred, but the one on the right
| | 05:18 | is not, because the filter came before it.
| | 05:20 | Now I can come down to the bottom, and I am
going to put on another filter and because
| | 05:24 | this one is at the bottom,
it will affect both of the images.
| | 05:27 | This one, I am going to do a GRAY.
| | 05:29 | And what it's going to do is going to
turn both of them into grayscale images.
| | 05:34 | Now, there are a lot of other options here.
| | 05:36 | You can posterize.
You can invert the images.
| | 05:38 | There is a ton of stuff you can do.
| | 05:40 | And you can also in fact save
the images in their new format.
| | 05:44 | We will cover that in a later movie.
But for right now, this gives you an idea of how you
| | 05:48 | can do some work with images in Processing.
| | Collapse this transcript |
| Playing a video loop| 00:00 | One interesting feature of Processing
is the ability to play video files.
| | 00:05 | Now, there are actually several
things that you can do with these.
| | 00:07 | You can actually create video files, you can
bring them in and you can transform them in
| | 00:12 | one way or another, or what I'm going to do
in this particular example is you can bring
| | 00:16 | a video and you can just
kind of loop it to repeat.
| | 00:20 | To do this though, I first need to import a
library that's included with Processing
| | 00:25 | but is not installed by default.
| | 00:27 | So what I need to do is I need to go up to
the menu to Sketch, click on that, and then
| | 00:31 | come down to Import Library. And then from over
there, you'll see that there is a video halfway down.
| | 00:37 | I need to come down to video
and click on that. Perfect!
| | 00:42 | And it pastes in a small amount of code
that says import--that means it's importing our
| | 00:46 | library--and the library is nothing more than a
collection of code that we don't actually have to look at.
| | 00:52 | It's now operating in the background.
And it's bringing in Processing.video.*, which
| | 00:57 | actually inserts several files, but since they
all begin with that, it brings in all of them.
| | 01:02 | So what I'm going to do is I'm actually going
to bump that down a little bit, and I'm just
| | 01:05 | going to put my little comment up here.
Then I'm going to come down--I'll save this--and
| | 01:11 | I'm going to start typing in some commands.
| | 01:13 | Now, what we're dealing with here is a little
bit complex, because we're actually dealing
| | 01:17 | with classes and objects, in that a movie
can be addressed--you can talk about that
| | 01:23 | the way you talk about a variable--but since
it actually is composed of a large number
| | 01:27 | of frames and other things, it's more
than just, like, a number 12 or something.
| | 01:31 | That's why we're using
what's called an object.
| | 01:33 | An object allows you to do package a whole
bunch of information and related behaviors
| | 01:38 | into a single thing and
treat it like a variable.
| | 01:40 | Now, an object comes from a class.
The class is the template for the object, or the
| | 01:45 | object is the instantiation of the class.
So what I'm going to do here is instead of
| | 01:50 | typing "int" or "bling" or "float" of variable types,
I'm going to type the name of the class, and
| | 01:55 | in this case it's Movie with a capital M.
| | 01:58 | Remember, Processing this case-specific.
| | 02:00 | Then what I'm going to do is I'm going to name my
object, or you can think about it as a variable.
| | 02:06 | I'll go trainMovie. Finish with a semicolon.
I'm going to bump down and do a setup block, and
| | 02:14 | in that block I'm going to define
the size of my window, 640 x 480.
| | 02:18 | I'm doing this one a little bit differently
because that's a common size for a video. I am going
| | 02:23 | to put a black background on there.
| | 02:26 | And then what I'm going to do is I'm going to
load my movie file into my trainMovie object.
| | 02:33 | Now, to do this, you need to actually get the
file into the program first, and if you come
| | 02:38 | to the folder, this is the folder for the
sketch, but you see right next to it--
| | 02:42 | it's not in the folder; it's next to it--
| | 02:44 | I have a small video clip called station,
and all you need to do is take that and drag
| | 02:50 | it onto the Processing window.
| | 02:52 | And now you see, near the
bottom, in the message area,
| | 02:54 | it says, One file added to the sketch, and in
fact, if I click on the final folder right
| | 02:59 | now, I now have a data folder.
| | 03:00 | If I click on that, the station
movie has been added into it.
| | 03:05 | So now I can come back to my sketch, and I'm
going to tell it that my trainMovie object,
| | 03:11 | or variable, I need to load in that this is
a new instantiation of the class movie, and
| | 03:18 | I want to put in--this is
a funny little phrase here,
| | 03:21 | I want to put in "this," and that's referring
back to my most recently created object, which
| | 03:26 | is the trainMovie. And I'm going to go station.mov.
And remember, you've got to be exact in your spelling.
| | 03:34 | I put that in quotes, I close the parentheses,
put a semicolon, and then right after,
| | 03:38 | that I'm going to give it a command.
| | 03:41 | One of the functions or behaviors that's
included in the movie class is the ability to loop,
| | 03:47 | so I'm going to put trainMovie.loop.
| | 03:51 | And what that is is the dot operator is a way
of applying a behavior or you can think of
| | 03:56 | it as a function or method, and applying it
to a particular object or variable in this
| | 04:00 | case; you can think of it that way.
| | 04:02 | I put the open and close parentheses, and I finish with
the semicolon, and that finishes my setup loop.
| | 04:07 | Then I go down and I'm going to type another
loop, but it's not drawn yet; instead, it's
| | 04:12 | this curious little thing
that has to do with the movie.
| | 04:15 | I to void and then lowercase movie,
capital Event, and then in parentheses
| | 04:22 | I put Movie--that's the name of the class--and I
put the name of my object, which is trainMovie,
| | 04:29 | and then I close the parentheses. And then in curly
brackets--I'm just going to put one line here--
| | 04:34 | I'm going to put trainMovie.read, so
that's something I need to put in there.
| | 04:40 | Then I'm going to drop down and I'm
going to do just a little bit more here.
| | 04:43 | I'm going to do void draw, like we've done a
lot of other times, and in the curly brackets
| | 04:49 | here, I'm going to put image.
| | 04:50 | Now what's interesting here is even though
this is a video, we are using the same function
| | 04:54 | that we do for a still image.
| | 04:56 | So I'm putting image and then trainMovie, and then
I need to position it by its top-left corner.
| | 05:03 | I want it to fill the screen,
so I'm going to do 0, 0.
| | 05:06 | And in effect, I will tell it to fill the
entire screen, regardless of the size of the
| | 05:10 | original clip, and so I'm
going to put width and height.
| | 05:14 | And once I do that, I can save the whole thing and
I can run, and we will get a looping video clip.
| | 05:21 | Okay, and by the way, the reason it's fuzzy is
because the clip is actually smaller than this.
| | 05:26 | This is not its native size. In fact, if I
just come back here for a moment and cut that
| | 05:31 | stuff ou, and then run it again, you'll see
that it's a lot smaller than that natively.
| | 05:36 | So I've stretched it out. An interesting thing
though, is you can run more than one instance
| | 05:41 | of the movie if you want.
| | 05:42 | So for instance, I can put one right here.
| | 05:45 | I can have one running up in the corner and
the other one, I'm not quite sure why you would
| | 05:49 | want to do this, but I want you
to know that it's available.
| | 05:52 | Now we have the movie running twice, once up
in the corner and once staying on the mouse.
| | 05:59 | And because we're not refreshing the background,
every previous version stays there as well.
| | 06:04 | Anyhow, that is one of the things
that you can do in Processing
| | 06:08 | that's a really good trick, and that is being
able to bring a movie clip into Processing
| | 06:12 | and in this case just using the basic
functionality of being able to run a video clip and loop
| | 06:16 | it through, and that opens up a
lot of creative potential for you.
| | Collapse this transcript |
| Exporting video| 00:00 | If you've created a dynamic drawing in Processing,
you may want to be able to save your results
| | 00:05 | and export them as a movie that you can then save
as a movie file and share with other people.
| | 00:11 | Previously, to do this you needed to export
the files and you needed to stitch them together
| | 00:16 | in a video editing program
like Premiere Pro or Final Cut.
| | 00:20 | But Processing now has built in a special tool called
MovieMaker that greatly facilitates this process.
| | 00:27 | To do that, I'm going to use a sketch that I
used on tracing the mouse just a few movies ago.
| | 00:32 | This is the movie from chapter, the
first one, about tracking the mouse.
| | 00:35 | I'm just going to run the program right here, just
for a few seconds, and then I'm going to quit it.
| | 00:43 | What you'll see is I've added one
important line, and it's this one down here.
| | 00:48 | And what this line does is it saves a still
image of the display window every time it
| | 00:54 | goes through the loop.
| | 00:55 | So that saveFrame is the function.
| | 00:57 | And then what I've done here is I've given it a
specific way that I want to save the frame.
| | 01:01 | So first what I've done is I say I
want it to create a folder called Frames.
| | 01:05 | That's what the first part is.
| | 01:06 | And then the slash is I want it to go through
and sequentially number every image that it
| | 01:11 | puts in there with a four-digit number, so
it will show as 0000, 0001, and so forth.
| | 01:17 | Also, by putting the extension on there, .PNG,
it saves them as PNG files, which are good
| | 01:22 | for a lot of image processing.
| | 01:24 | And so, if we go back to the Sketch folder--
let me just move this over for a second--
| | 01:29 | you'll see that now we have a Frames folder.
| | 01:33 | And in there, the sketch
didn't run for a very long.
| | 01:36 | It ran for 44 frames, and
you can see how it fills up.
| | 01:39 | Now, what I want it to do is take those and
stitch them back into a single movie.
| | 01:42 | I just come back to Processing and
go to Tools, to MovieMaker.
| | 01:47 | Now, if you're experiencing any technical
difficulty in trying to get this open, if
| | 01:51 | you get an error message, one possibility
is that you check to see if there are any
| | 01:55 | spaces in the file path
that lead to the MovieMaker.
| | 01:59 | Sometimes that can fix problems.
| | 02:01 | With MovieMaker, all you need to do is get
the folder that contains all of the frames.
| | 02:05 | Now, if I go back to my Sketch folder and
I just back up one step, there I've got my
| | 02:10 | Frames folder, and I can just drag that and drop
it in, and it populates with the file path.
| | 02:15 | Now, by default, it assumes that I'm doing a
640 x 480 movie, and that's usually a good choice.
| | 02:21 | But that is not what I had in this particular
case. You may recall I actually had it 600 pixels
| | 02:25 | wide by 200 pixels tall.
| | 02:27 | All I have to do is come right here
and do the same size as the original.
| | 02:30 | Also, my frame rate for the
drawing was 10 frames per second.
| | 02:34 | Now, normally, you would want to do faster
than that, but I actually wanted to have some
| | 02:37 | space up here between the dots,
so I slowed it down on purpose.
| | 02:40 | So, I'm going to return
that to 10, just like that.
| | 02:44 | Then I'll click Create Movie.
| | 02:45 | Actually, you do have the choice
of dragging in a sound file now.
| | 02:48 | If you're trying to do a movie, this will not
be synchronized; they will just be independent
| | 02:53 | coexisting files.
| | 02:54 | So, I'm not going to worry
about that one right now. But that is an option.
| | 02:57 | I'm just going to click Create Movie, and
now it's going to ask me where I want to put
| | 03:01 | it and what I want to call it.
| | 03:02 | Now, by default, it opens up the same folder
that had the original Images folder in it.
| | 03:08 | I'm going to call this
one dots and press Save.
| | 03:11 | What you see is I immediately get two files
over on the right side, in the Sketch folder:
| | 03:15 | one is a TMP file, and the other
one is an actual QuickTime file.
| | 03:19 | If I double-click on that, I get a QuickTime window,
and when I press play, I get a repeat of my sketch.
| | 03:26 | Now, normally, for something like simply
following a mouse around, this may not be the one that
| | 03:29 | you want, but if you have created an animation
in Processing, especially one that's responsive
| | 03:34 | to the user input, then this would be a very
good way to go. And it's certainly easier than
| | 03:38 | having to take things to an external program
like Final Cut or Adobe Premiere and try to
| | 03:42 | put them together there.
| | 03:43 | It's one of the big advantages,
I find, in the Processing 2.0.
| | Collapse this transcript |
| Adding sound| 00:00 | One of the lesser-used functions of
Processing is its ability to work with sound, both in
| | 00:06 | terms of creating sound synthesis, sound
Processing, and the exporting and playing of sounds.
| | 00:11 | In this movie, I just want to show you the
simplest-possible thing where we actually
| | 00:15 | have just a sound file that has
played as part as the Processing sketch.
| | 00:19 | Start by putting a little comment
here at the top of my sign.
| | 00:23 | Now, in order to do this,
we're going to need to import a library.
| | 00:26 | It's one that comes with
Processing, but it needs to be added.
| | 00:29 | So, I come up here to Sketch, to Import Library,
and we're going to use this one right here.
| | 00:34 | It's called minim.
| | 00:35 | I am going to add that, and I will put my
little comment back up at the top. And it
| | 00:39 | brings in several blocks of code that it's
going to be working with. That's fine.
| | 00:43 | Now all I need to do is I
need to create a minim object.
| | 00:46 | That's something that's
going to have the actual sound in it.
| | 00:48 | I am going to put soundCode.
| | 00:52 | Minim is like the variable type,
and soundCode is what I'm declaring it as.
| | 00:56 | Then we're going to do this little AudioPlayer
function that we call birdSong; that will be the variable.
| | 01:03 | Then I do the standard void setup,
and I don't need a lot here.
| | 01:08 | I'm going to make this window a
little different. I will do 400 x 250.
| | 01:14 | Then I'm going to bring in a picture.
| | 01:15 | I have a picture of a bird
that I'm going to put in here.
| | 01:18 | So, that declares the variable that I have a image,
the variable type. Actually, the object is PImage.
| | 01:25 | I am declaring bird, and then I'm going to
put bird = loadImage, and then in parentheses
| | 01:31 | and quotes, I need to put the exact
name of the file.
| | 01:37 | Although it occurs to me, I actually
haven't added this one to the folder yet.
| | 01:41 | I'm going to scoot this Processing window over
for a moment. And these are the files that
| | 01:45 | exist in the Exercise folder, but
they're not yet added to the sketch.
| | 01:49 | I have an image file and I have a WAV file.
| | 01:51 | So, I'm going to take just the both of those
and drag them onto the Processing sketch.
| | 01:56 | Now, you will see that it says
2 files added to the sketch.
| | 01:59 | In fact, if I click on the Sketch folder, go to
data, they've both been copied into there.
| | 02:03 | So, that's exactly what we need.
| | 02:04 | I will come back to the
Processing window and open it up again.
| | 02:07 | Then I need to place the image,
image(bird and I'll put it on top-left corner.
| | 02:11 | I'm going to make it go the width of
the window, and the height. Great!
| | 02:16 | And now I just need a little
bit of code for the sound.
| | 02:20 | So earlier, at the top, I said I have
created a minim object called soundCode.
| | 02:24 | So, I'm going to refer back to that one right now,
and I have to do new Minim and then I use (this).
| | 02:31 | It's kind of a funny way to do it, but that
refers back to the most recently created object.
| | 02:36 | Then I'm going to call it birdSong = soundCode,
and then what we're going to do with that
| | 02:42 | object that I've created now is we're going
to do the loadFile command, and we're going
| | 02:47 | to load in there ("bird.wav"). That's the name of the
file, so quotes and parentheses and a semicolon.
| | 02:55 | I need to add one line of
code here, birdSong.play,
| | 02:58 | so it will actually play on launch.
And that finishes that block of code.
| | 03:04 | Now, there is one other block that we're
going to need to do that's a little unusual.
| | 03:07 | Interestingly, we have a setup block here, but
we're not going to have a draw block because
| | 03:10 | we don't need anything that cycles.
But the developers of Minim are very clear that you
| | 03:14 | need to add a special block
to stop all the functions.
| | 03:17 | So, I'm going to type in one here called void
stop, and I'll put in those curly brackets.
| | 03:24 | This one has three commands. First, there
is the birdSong.close is our first one, and
| | 03:30 | then the second one is soundCode.
| | 03:33 | That's another one of the things I declared.
| | 03:35 | That one I need to do stop.
| | 03:38 | And then the last one goes by the
humorous title of the super.stop.
| | 03:43 | This is necessary because the Minim library
can't connect with external hardware like
| | 03:47 | MIDI equipment, and it needs to make
sure that all the channels are shut off.
| | 03:50 | So this is just something
to always add at the end.
| | 03:53 | I'm going to save that, and I'll press Ctrl+R to run on
a PC, or Command+R to run on a Mac.
| | 04:00 | (music playing)
And there we go!
| | 04:06 | I have a picture of a
bird and I have a birdsong.
| | 04:09 | And now I'm going to stop
it all and do my stopping.
| | 04:13 | Let me just mention one thing: Minim is a very
well-developed library for sound Processing.
| | 04:18 | Even though that's not something that happens
very often with Processing, it is still something
| | 04:21 | very capable of it.
| | 04:23 | I do want to recommend that you take a look
at another library that's called Beads, and
| | 04:30 | it's at beadsproject.net.
| | 04:32 | It's also a very well-developed
sound library for Processing.
| | 04:36 | And in fact, there is even a book that's
available in hard copy or electronically, by Evan Merz,
| | 04:42 | called Sonifying
Processing: The Beads Tutorial.
| | 04:45 | And if you're interested in using Processing
with sound, I suggest you take a close look
| | 04:49 | at that one as well.
| | Collapse this transcript |
|
|
9. Grouping CodeCreating functions| 00:00 | One of the great ways of writing your code
is to use shortcuts, such as functions.
| | 00:05 | Now, we've been using a lot of
functions up to this point.
| | 00:07 | For instance, setup and draw and
mousepress are all functions.
| | 00:12 | But you can also have what are called custom
or user-created functions, where you create
| | 00:17 | your own shortcuts, and they allow you to use modular code,
and it can save a lot of time in repeating things.
| | 00:23 | So the first thing that I am going to do I
this sketch is just put a little comment
| | 00:27 | at the top with the sketch name.
| | 00:30 | And then I'm going to
create the setup function.
| | 00:33 | Let's do a void setup,
small amount of text in here.
| | 00:38 | I am going to do a size,
600 x 200, turn on the anti-aliasing.
| | 00:45 | And I am als, going to set the frame rate
to be a little slow on these. I'll leave it at
| | 00:50 | 2 frames per second.
| | 00:51 | So that's the first part of this sketch.
| | 00:53 | I am going to save that.
| | 00:56 | And then what I'm going to do is I'm not
trying to create two different functions.
| | 00:58 | I'll show them to you, each one at a time.
| | 01:01 | The first one I'm going to do, I'm
going to put these in the draw block.
| | 01:05 | So I do void, draw, which we've
done many times before.
| | 01:11 | And what I'm going to do in here is I'm
going to have a background refresh and then I'm
| | 01:18 | going to make my life very easy and
I'm going to draw a little pacMan shape.
| | 01:23 | And I'm going to create a pacMan function where
this is all the code that I need to make it run.
| | 01:27 | I'm going to save this for a moment.
| | 01:29 | Now I can do the code directly beneath,
| | 01:31 | but one of the interesting things that you
can do also is that Processing allows you
| | 01:35 | to create several tabs.
| | 01:36 | You see that we already have one tab
here, this Ex09_01; that's the main one.
| | 01:42 | And if you want to, to emphasize the
modularity and facilitate the keeping of the code, you
| | 01:48 | can add a second tab to this one.
| | 01:50 | So for instance, I'm going to come over here
to this arrow, click on that, and create a
| | 01:56 | new tab. And this new tab,
it's asking me for the name.
| | 02:00 | I'm going to call it PacMan. Actually, I want to
give it a lowercase pacMan so that it matches.
| | 02:08 | And I see I have a second tab open, and this
is where I get to define the pacMan function.
| | 02:19 | And here's what I'm going to do.
| | 02:20 | The first thing you need to do is
you need to give the return type.
| | 02:23 | Now, in this setup in the drawing and all that,
it's been void, and since this pacMan function
| | 02:28 | isn't returning any data, it's going to be
void also. And then I give the name of the
| | 02:33 | function, which I call pacMan, and I'm
going to put it here in some curly quotes.
| | 02:40 | And then what I need to do is I start
putting in the code to draw the pacMan.
| | 02:44 | So, for instance, I don't want
any outlines, so I do no stroke.
| | 02:50 | And then what I want is some random
variables to position the shapes.
| | 02:54 | So I'm going to have a floating-point variable x,
and that's just going to be a random, anywhere
| | 03:01 | in the window width will do it.
| | 03:05 | I also want it to be
anywhere from top to bottom.
| | 03:10 | These are just going to be the
center points for the shape.
| | 03:14 | I can do a random height.
| | 03:19 | And then I want to have
different diameters for the pacMan,
| | 03:23 | so I'm going to do that
one as d, for diameter,
| | 03:25 | and random, except that one I don't want going down
to 0. I'll make it so they go from 20 to 100.
| | 03:33 | So I've got three variables
that are going to be generated randomly.
| | 03:36 | And then I specify the fill. A nice
bright yellow is going to be FFEF00.
| | 03:47 | And then finally, to draw the pacMan
shape, all I need is the arc function.
| | 03:53 | And for the arc, you specify this center point,
and that's going to be x and y, which are going
| | 03:57 | to be randomly generated right above this.
| | 03:59 | And then the diameter, so the width and the
height, I want to be the same, so it's circular.
| | 04:04 | So that's the variable d that I defined above.
| | 04:07 | And then I need to define where the
shape starts and where it stops.
| | 04:10 | And what I'm going to do is I'm going to start it at
PI*0.2. That's just around 4 o'clock on the circle.
| | 04:20 | And then it's going to go around
clockways till it gets to about 2 o'clock.
| | 04:25 | So that's going to be PI*1.8,
and then that is my function.
| | 04:32 | So now, when I go back to my first
tab, this is all the code I need.
| | 04:37 | All I need to say is draw a pacMan.
| | 04:40 | And then over here, I have all this code
and if I want to, I can use that again later.
| | 04:44 | In fact, let me show you one thing that happens in
this sketch folder when you create a separate tab.
| | 04:48 | I move this over to the side.
I've got my sketch folder open.
| | 04:53 | There's the sketch folder and now you see
that we actually have two files in there.
| | 04:57 | These are PDE files.
| | 04:58 | The first one is the main tab with the exercise,
but the function, when I put it on a separate
| | 05:03 | tab, got its own little file here.
| | 05:05 | And that's one of the things that makes it
really easy to copy and paste this into other
| | 05:08 | sketches in the future.
| | 05:09 | Anyhow, I'm going to
come back and maximize this one.
| | 05:13 | And I'm simply going to
run it by pressing Ctrl+R.
| | 05:18 | And now what I have is randomly sized pacMan figures,
popping around at random places on the screen.
| | 05:24 | It's not an exciting function, but it does
give you an idea of how you can create code
| | 05:29 | that is modular and very simple to maintain.
| | 05:33 | I'll close that by hitting Escape.
| | 05:35 | All I had to do for that one was call on
the pacMan function. And it's operating at
| | 05:41 | 2 frames per second, and that's how it works.
| | 05:43 | Now if you want to see something interesting--
I'll just turn off the background for a minute.
| | 05:46 | So now, each previous pacMan will remain,
and pretty soon we'll get all full. Anyhow.
| | 05:56 | And what I want to show you though, is that you can
actually draw something more sophisticated than this.
| | 06:00 | This is an example
I chose because it was really easy,
| | 06:04 | but I want you to see that you can do
something that's more relevant to data visualization
| | 06:07 | with this as well.
| | 06:09 | What I'm going to be doing in this case is I'm
going to be drawing a function to make a bar graph.
| | 06:14 | So I'm just going to come over and create
my bar graph function on a new page first.
| | 06:20 | First, I'm going to click to create a
new tab, and this one I'll call barGraph.
| | 06:28 | And now what I have, barGraph function.
| | 06:34 | I can save that. And I'm going to create a
function that allows people to enter some
| | 06:40 | values on the original page, and then
it will integrate them automatically.
| | 06:43 | So I'm going to call void, because
it doesn't return any calculations,
| | 06:48 | and I'm just going to call it bar.
| | 06:50 | The first thing I'm going to want is
an indication of where it should go--
| | 06:54 | that's going to be the I--as well,
as how many there are in total. int
| | 07:00 | I'm going to put here for the outcome. That is
going to be, really, how tall does the bar need to be?
| | 07:04 | And then I'm going to have a string
variable also, for the label of the bar.
| | 07:09 | So those are the parameters
that are going to be going into it.
| | 07:12 | They need to be provided by the users.
| | 07:14 | So I put in my curly brackets. And then the
first thing is we're going to calculate the
| | 07:24 | values for the bars.
| | 07:26 | And in this case, what I am going to do is
again create a little function that calculate
| | 07:30 | the x coordinates for the bars.
| | 07:32 | So it's going to be x is a function of--we are
going to take the width of the window times i.
| | 07:43 | We are going to divide that by n+1.
| | 07:47 | This is going to help just determine where
each of the bars should go. And I'll put here
| | 07:54 | "calculates the x coordinate for each bar."
| | 07:58 | The next line, I'm going to decide how
much space to put between the bars.
| | 08:05 | I'm just going to make this a constant for
all of them, and that's going to be 20 pixels.
| | 08:12 | Sets space between bars and pixels.
| | 08:19 | Next, I'm going to have a calculation to decide
how wide each one of the bars should be, depending
| | 08:23 | on how many there are, and
the space between them.
| | 08:26 | So I'm going to do float for any variable
wide is equal to the width of the window minus
| | 08:36 | the space between the bars,
times and plus 1, divided by n.
| | 08:45 | It's a kind of complicated-looking formula,
but it's just a way of spacing things out.
| | 08:48 | Then we need a little code to draw the bars.
| | 08:52 | What I'm going to do first is I'm going
to create rectangles, but I want to center
| | 08:57 | them; it makes it little easier to
place them with these formulas.
| | 09:00 | I am going to then turn off the outline.
| | 09:02 | I'm going to put the fill in, a red color.
| | 09:10 | And then we are going to put in rectangles.
| | 09:14 | These are formulas that I use to determine where
they should go and how high they should be.
| | 09:21 | I'm also going to have labels on these.
| | 09:25 | I am going to center the text. I'm going to put
a fill on there that's relatively light.
| | 09:39 | And then we are going to replace the text by
using the label that it gets from above.
| | 09:43 | It goes to the same center position as the bar,
and it's going to go near the top of the
| | 09:51 | bar on the inside.
That's what this formula does.
| | 09:57 | Then we are going to have a little black text
| | 10:01 | that will be the value for what it goes on,
so that's going to be called outcome, x and
| | 10:07 | height - outcome.
| | 10:08 | The one it before actually
goes slightly above the bar.
| | 10:11 | This one actually goes inside it.
| | 10:14 | So that's my function.
| | 10:16 | Now let's go back to here.
| | 10:18 | I'm going to comment out the
pacMan function for right now,
| | 10:23 | and instead I'm going to ask
for a few bars to be drawn.
| | 10:27 | And all I have to do is say bar. And I could
say this is going to be the first of 6, and
| | 10:33 | the outcome value is 150, and it is for
Region 1. I need to have a string variable there.
| | 10:40 | And once I get those, I'm just
going to copy that, one, two.
| | 10:44 | And this will be second of 6, the third,
the fourth, the fifth, and the sixth.
| | 10:52 | Now I'm just change the
value for each one of these.
| | 10:55 | I'll make that one 130,
| | 10:57 | this one 122, this one 109, this one 87, and
this one 42, and then I just change the region
| | 11:10 | names to region 2, 3, 4, 5, 6.
| | 11:16 | And there are ways that you can have Processing
actually calculate the counts and which each
| | 11:20 | bar is. But for right now, I'm just going
to leave it like that and when I press Run,
| | 11:24 | now I have bar charts that are spaced automatically
and have their labels and the values above them.
| | 11:29 | This is a very simple kind of chart, but the
idea here is you see how I used a function
| | 11:33 | to create something that could be repeated
again and again, with the small variations
| | 11:37 | that I specifically requested. And functions
are going to be a big part of being able to
| | 11:41 | create customs,= sketches and visualizations,
make your life little bit easier, and
| | 11:46 | have some fascinating results.
| | Collapse this transcript |
| Creating classes and objects| 00:00 | In the previous movie, we discussed how you
could use custom functions, or blocks of code,
| | 00:06 | to save time and to allow you to
reuse code in later sketches.
| | 00:11 | In this movie, I want to take that several steps
further, by explaining to you classes and objects.
| | 00:17 | Now, a function is usually something that
you use in a static drawing, and every piece
| | 00:23 | of information that you enter into it has to be of the
same type, so all integer variables or all floats.
| | 00:29 | In a class, however, you can throw in any kind
of information you want, and more significantly,
| | 00:35 | you can specify the operations that occur, the
things that the drawing actually does with the class.
| | 00:40 | Now, a class is a template.
| | 00:43 | It's a general category. And then when you
instantiate something in a class, it becomes an object.
| | 00:49 | So, you have a template and the realization.
That's--the class is the template and the object
| | 00:56 | is the realization of that
class in your particular sketch.
| | 01:00 | In this example, I'm not going to type the code in
front of you, because there's a fair amount of code.
| | 01:04 | I am, however, going to open it
up and walk you through it.
| | 01:08 | So here, in the Exercise folder, in
Exercise 09_02, I actually have two files here,
| | 01:14 | and the reason for that is because I created
a class and I've put it on a separate tab.
| | 01:19 | And when you have more than one tab, each of
those tabs gets its own folder in Processing.
| | 01:23 | I'm going to double-click on this one
right here and maximize that one.
| | 01:29 | I decided for this example to create a pie
chart that actually had a fair amount of random
| | 01:34 | generation to it, a couple of user-specified
parameters, and that also, a pie chart that
| | 01:39 | actually grew over time.
| | 01:41 | What I'm doing in this case is I'm
actually creating five pie charts.
| | 01:45 | Because it's modular, you can
do things more than once now.
| | 01:48 | Five is actually really pushing
it for coding it in by hand.
| | 01:52 | Normally, by this point, I would be using an
array of objects, which is actually a very
| | 01:56 | good way to go. But I just wanted to
emphasize the structure here for this one.
| | 02:00 | So, I created an object called PieGrow,
because it's a pie chart that grows.
| | 02:06 | And the first thing I needed to do is I needed to
declare both the class and the name of the object.
| | 02:11 | So, what I have at the top are five
statements of the class PieGrow, and then I have five
| | 02:18 | objects: the pie1, pie2, and so on.
| | 02:22 | So, that's like declaring a variable,
except because it's a class and an object,
| | 02:27 | it's a much more elaborate thing.
| | 02:29 | Beneath that, I have my setup where I do a
600 x 200 window and turn on the anti-aliasing.
| | 02:34 | And beneath that is where I
actually specify parameters.
| | 02:37 | These are the ones that
the user gets to specify.
| | 02:40 | So, I put down, for each
one of them, I put pie1--
| | 02:44 | that's the name of the objects that I
created above--then equals and then new.
| | 02:48 | That's something you have to do with objects.
And then I put the name of the class PieGrow,
| | 02:52 | and then in parentheses, that's where I
put the two user-specified parameters.
| | 02:57 | The first one is the name of the pie
chart, and I just put them A through E.
| | 03:02 | And then the second one is how many
radians around do you want the pie to go?
| | 03:08 | And remember, it starts at 3 o'clock. And one
radian is over to 9 o'clock, and two radians
| | 03:15 | is all the way around.
| | 03:16 | So, for instance, I have one here at 0.75.
| | 03:19 | That's going to be less than halfway.
But the fourth one down is 1.95.
| | 03:23 | That's going to be a nearly complete circle.
| | 03:25 | Anyhow, the nice thing is I don't need a whole lot
of code here. That's all I have in the setup.
| | 03:31 | And then I come down to draw and I put the
background in, and then for each of my pies,
| | 03:37 | I just have two behaviors, or two
functions that each one of them do,
| | 03:41 | and that is they update--that's to change the
calculations--and then the display it--that is
| | 03:46 | actually draw it--and I do each
one of those things in turn.
| | 03:49 | And the Processing sketch will cycle through this, up
to 60 frames per second, and see how it can adapt.
| | 03:54 | Now, I did this so you can see how clean this
can be when you use objects that you really
| | 04:00 | don't have a lot of code in
the drawing here per se.
| | 04:03 | Instead, I have a fair amount
of code here under PieGrow.
| | 04:06 | That's the name of the class.
| | 04:08 | So, at the top, it says class--that's all lowercase--
and then PieGrow. Class names actually start
| | 04:14 | with capital letters. And then in the curly
brackets, I put down all the variables that
| | 04:18 | go into my pie chart.
| | 04:20 | There is the x and the y that position
it. There is the d for the diameter.
| | 04:24 | There is the angle for the start.
| | 04:27 | That's where the slice
of the pie chart begins.
| | 04:29 | And then I have a angle for the middle as
it goes around, and then I have an angle at
| | 04:34 | the end where it stops. And the speed is how
fast I want it to move. And then I actually
| | 04:38 | have RGB for color. And then I have the
string for the title that the user provides.
| | 04:46 | Next, you have something called a constructor.
| | 04:48 | And again, this is kind of a funny bit of
logic, but what it is is this is something
| | 04:51 | that takes the arguments that the user's provided, and
it puts them in here to initialize the variables.
| | 04:58 | What's curious is that it has to actually use
temporary variables for the initialization
| | 05:03 | of anything the users provide.
| | 05:05 | Now, if it's not based on a user-provided
parameter, he don't need to use the temp stuff.
| | 05:10 | So, you see, for instance, at the beginning,
I have three variables here that are based
| | 05:14 | on random numbers.
| | 05:15 | The diameter of the pie is a random number
between 50 to 250, so that's the diameter in
| | 05:21 | pixels, and then the X and the Y
coordinates for the center of the pie,
| | 05:25 | those are also random coordinates.
| | 05:27 | I did diameter first because I want to keep
this from going completely off the window.
| | 05:30 | This will keep them on a little bit.
| | 05:32 | Then the angle for the start is always going
to be 0, and then the angle for the middle
| | 05:36 | is temporarily at 0.
That's going to change.
| | 05:39 | And then the angleEnd is provided by the user,
and I put that in there and multiply it times
| | 05:45 | pie, because everything
has to be in units of pie,
| | 05:47 | so that's what that's for.
| | 05:49 | Then I created a variable called speed,
which would be different for each one of the pies.
| | 05:53 | It would be somewhere between 0.005 and 0.005,
and that is the change in the angle, measured in
| | 06:00 | radians, as the pie sort of unravels.
| | 06:03 | Then I have random components for the red,
green, and blue components of the color, and
| | 06:08 | then I have the title.
| | 06:09 | And then I finish the constructor there--
that's the initial values--and then I describe
| | 06:13 | what my two methods are:
the update and the display.
| | 06:17 | For update, I want it to
slowly move around the circle.
| | 06:22 | So, it starts the angleMid, which currently
is set at 0, will add on a small amount, and
| | 06:27 | it will go around and circle clockwise.
| | 06:30 | However, I don't want it to go too far.
| | 06:32 | I want it to stop when it gets to the end,
and the easiest way to do that is to just
| | 06:35 | use a constraint. Say that the Angle Middle
can't be less than 0, because that's where
| | 06:40 | it starts, and it can't go past
the user-specified ending value.
| | 06:44 | Also, I've got this curious little block of
code here, which is going to allow me to
| | 06:48 | click on the pies and move them around, because
they are randomly positioned and they almost
| | 06:53 | always end up covering one another.
| | 06:54 | This allows me to move them a little bit.
| | 06:57 | And then finally, I have the code displayed
that actually draws the pies with Processing's
| | 07:02 | built-in arc function.
| | 07:04 | I just turn off the stroke.
| | 07:06 | I specify the fill with the random RGBs.
| | 07:09 | For arc, you need the X
and the Y for the center.
| | 07:11 | You need the diameter, both
in terms of width and height.
| | 07:14 | You need the starting point and the ending
point, and that's what I've got in there.
| | 07:18 | And then I've also decided to put some
titles on with the user-provided title.
| | 07:22 | I turn those black and move those
slightly below and to the right of the center.
| | 07:27 | Anyhow, let me show you how this one works.
| | 07:29 | It's a little silly, but here we go!
| | 07:33 | I press Run, and what I get are five pie
charts that are completely overlapping each other,
| | 07:39 | and growing at different rates.
| | 07:41 | But you see that's not something
I could do with just a function.
| | 07:44 | In fact, I'll do it again, so you see that we
get different every time--different colors
| | 07:49 | and different positions and different sizes.
| | 07:53 | Then that little loop I showed to you
them allows me to reposition them--
| | 07:56 | if I get the cursor within the radius of
the circle, I can start moving stuff around.
| | 08:03 | And I click, I can move it there.
| | 08:06 | What's kind of fun is when I get in the
radius of two circles, it moves to both of them.
| | 08:10 | They get locked up temporarily.
| | 08:16 | But the point here is I've prepared a sort of
data visualization, even though pie charts
| | 08:21 | are usually not something you want to work
with; it's because the arc function was easy
| | 08:24 | to deal with in this one.
| | 08:26 | But I was able to take just a small amount of
user information of different kinds of variables--
| | 08:33 | in this case, I got a string and a float
variable from the user--and then I was able to produce
| | 08:38 | this thing that was dynamic and that evolved
as it worked, and allowed me to move it around,
| | 08:43 | too, in a way you couldn't do with the function.
| | 08:45 | And so classes and objects are one of the
huge, huge time savers and most important
| | 08:51 | tools you will have in data visualization
and your programming work, and I strongly
| | 08:55 | encourage you to take the time to play with
them and see how you can make them work in
| | 08:59 | your own Processing sketches.
| | Collapse this transcript |
|
|
10. Reading DataUsing embedded data| 00:00 | In order to do data visualization in Processing,
the first thing you have to do is actually
| | 00:04 | have data in Processing to work with.
| | 00:07 | The simplest version of this is to actually
have the data embedded as an array in the
| | 00:12 | sketch itself, and that's what
we're going to start with.
| | 00:15 | We've actually been doing this for quite a while.
When we've been using the color information,
| | 00:19 | those are arrays that we've put in.
| | 00:21 | I'm going to show you how we can actually use a
data set and then try to draw a depiction of that data.
| | 00:27 | The first thing I'm going to do is I'm going to
just put down the sketch name as a comment.
| | 00:32 | It is not necessary, but I find it handy.
| | 00:35 | Then I'm going to bring in
a palette to work with.
| | 00:37 | I'm going to use this one up here. Just copy
it and go back and paste it in. There we go.
| | 00:47 | First I set the window size, size 600 x 200.
For the background we will use the palette's
| | 00:56 | first color, index number 0,
and we'll turn on the anti-aliasing.
| | 01:04 | Then what I'm going to do is I'm going to
introduce some data in an array, and this is
| | 01:09 | going to be an integer array, because
these are all going to be a whole numbers.
| | 01:12 | So, I put int, and then I put the
open and closing squar to indicate that
| | 01:17 | it's an array.
Then I'm going to give it a name.
| | 01:19 | I'm actually going to use numbers from the
Fibonacci sequence. And so I call it the array Fibonacci.
| | 01:26 | And then because I'm entering the data
directly into the sketch, I just use curly brackets
| | 01:30 | and I start putting the numbers in.
| | 01:32 | I go 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
144, 233, and 377. Of course, it's an infinite
| | 01:52 | sequence, but these are all the numbers in the
Fibonacci sequence that are less than 600,
| | 01:56 | so this is an reasonable place to work with.
| | 01:59 | So, I'm going to use a curly bracket to
close it and a semicolon to finish it off.
| | 02:03 | So, that's my data array.
| | 02:05 | It's a very small amount of data, but
it's enough for our particular purpose is.
| | 02:09 | Then what I'm going to do is I'm actually
going to draw a bunch of marks on my window
| | 02:15 | to indicate the data.
| | 02:17 | I am going to use a for loop for this.
| | 02:20 | That's probably the easiest way to do it.
| | 02:21 | So, I do for, and then I have
my initialization statement.
| | 02:24 | I'm going to use the local variable i, start
at 0. And then as long as i is less than the
| | 02:31 | length of the Fibonacci array--and then I
put in curly brackets what I want it to draw.
| | 02:45 | And once I have my loop set up, I can put
the code inside that I want to repeat for
| | 02:49 | every item in the array.
| | 02:51 | What I'm going to do is I'm first going to
set the stroke to the index number 1 in the
| | 02:59 | color array. Then I'm going to set this
strokeWeight to 2 pixels. Then I'm going to create a variable
| | 03:07 | x to get the x coordinate for each one,
and that's just going to be based off of each
| | 03:11 | item in the array, and I do
that with the index number.
| | 03:19 | And then I put the function in for an ellipse.
And then I save that and run it and there we have.
| | 03:30 | Now, you'll see there are a
couple things going on here.
| | 03:33 | Number one is, the stuff is
really jammed over at the left end.
| | 03:37 | One way of dealing with that is to make the shapes
somewhat transparent, and that can be a neat effect,
| | 03:42 | so I'm going to do that right here. And in
fact, I think what I'm going to do is I'm
| | 03:47 | temporally going to turn off the stroke
and I'll replace that with noStroke.
| | 03:54 | And then we'll get down to the fill.
| | 03:56 | What I'm going to do is I'm
going to specify a fill.
| | 04:01 | Let's make it the second item in the
palette, but let's make it very transparent.
| | 04:08 | So, let's try 50 on the 0 to 255 scale.
| | 04:12 | Now, when we do that, it gets a lot ghostlier, but you
can see that things are building up at the left end.
| | 04:18 | And so there are times when using transparency
can be a very helpful way of allowing people
| | 04:23 | to see layered data.
| | 04:25 | There is probably a better way in
this particular situation though--
| | 04:27 | I'll close this window--and that is instead
of using ellipses, we draw lines. And so now
| | 04:34 | I'll bring in the line function, line x.
I'm going to start at about 75 pixels down.
| | 04:41 | Then we'll go to x. Then we'll go to
125 pixels, and that should be enough.
| | 04:50 | And now what we have is, because of the lines,
they're vertical and they are kind of tall,
| | 04:54 | they still have prominence, but because
they're thinner than the ellipses are, it doesn't
| | 04:59 | have quite that pile-up
problem that it used to.
| | 05:02 | I think though, I might change the
strokeWeight, and I'll just turn this off so it will be
| | 05:07 | back at the default 1, and that
works even a little bit better.
| | 05:11 | And the idea here as you can see how the Fibonacci
sequence is increasing dramatically as it goes through.
| | 05:16 | Anyhow, this is our first way of dealing
with embedded data in a representation of that
| | 05:22 | data, and this is our first
data visualization in Processing.
| | Collapse this transcript |
| Working with appended text data| 00:00 | One very common form of data in most
visualizations is the use of text data, and in Processing the
| | 00:07 | easiest way to use text data is not by
entering it into the sketch itself, but by referring
| | 00:11 | to an external text file.
| | 00:13 | And what I want to show you in this movie
is how to access that text and be able to
| | 00:17 | integrate it into a Processing sketch.
| | 00:21 | And begin by just putting a little comment here
with the name. And the most important thing
| | 00:26 | I need to do is I need to help
Processing locate the file.
| | 00:30 | The first thing I am going to do is I am
going to go up to the folder that has the file.
| | 00:35 | In this particular case, it's called presidents
and it's in the Exercise folder, but it's not
| | 00:39 | in the sketch folder.
| | 00:40 | What I'm going to do is I am going to grab
that and drag it into the Processing window,
| | 00:44 | and now you see down at the bottom it
says One file added to the sketch.
| | 00:47 | In fact, if we double-click on the folder,
we now see that we have the data folder, and
| | 00:52 | it's got the presidents file in it.
| | 00:54 | What I need to do now is I just need to create
my window that I am going to be dealing with,
| | 00:59 | and I need to load the file.
| | 01:00 | The way I do that is as an array of strings.
And what happens is Processing looks at each
| | 01:07 | line as a separate string of text, and so the document is
a collection of lines; it's a collection of strings.
| | 01:12 | So do String and then the open and closed
square brackets to indicate that it's an array.
| | 01:18 | I'll simply call this one presidents. And then
the command we want to use is loadStrings.
| | 01:26 | And then in parentheses and in quotations, we put
the name of the file and then close that off.
| | 01:37 | And then the easiest way to check that we
have this, if the file isn't too long, is
| | 01:40 | just do a print line, which I'll do right now.
| | 01:48 | And I have an empty display window pop up,
but you see that the contents of the file
| | 01:54 | have printed down here below.
| | 01:56 | Now, if I want to put some of this text into a
sketch, the easy way to do it is by calling
| | 02:00 | on the string by its index number and
placing it within the sketch itself.
| | 02:05 | Before I do that, I'm going to do just a
few of the parameters of the sketch. I'm going to put
| | 02:10 | a background color on. In fact, I want to
bring in a color palette, which I'll do by going
| | 02:16 | back to here, and I am going to use this one number, 2,
crowds. Go back to the sketch and place that at the top.
| | 02:24 | Then I'll just use the
first color in the palette.
| | 02:30 | That's the background color.
| | 02:32 | Next, what I want to do is I am going to want to
use a fill color for the text, so I'll do fill.
| | 02:39 | That'll also be palette. I'll just use index
number 1 for that one. And then I can start
| | 02:45 | placing the text.
| | 02:48 | So in this case, I just use the text function, and I
type in "presidents" and then the line that I want.
| | 02:57 | So for instance, let's say I want to put
Jimmy Carter in there. He is on index 40 in the
| | 03:02 | array, and then I need to put
where it gets positioned.
| | 03:06 | Let's go 50 pixels in and 50 pixels down.
| | 03:10 | When I press run on this one,
you could see that it shows up.
| | 03:15 | It's a very light font.
| | 03:16 | We've shown before that we have the ability
to change fonts by creating a font within
| | 03:20 | Processing; in fact, I'll do that right now.
| | 03:25 | Simply go to Tools, to the first one, Create
Font. And all I need here is, oh, that's a good
| | 03:33 | a font as any, so Aharoni-Bold 48.
| | 03:38 | I'll copy that text right there, press OK, and
this will add the font into the data folder.
| | 03:46 | Now, there's a number of variables I need to
add to make it use the font, so what I am
| | 03:50 | going to do is I am going to
actually comment that one out.
| | 03:55 | I've got this fill here, so I've got the background.
I am going to do PFont. That's going to
| | 04:02 | declare a font. I am just going to call it
font. And then I need to load into that variable.
| | 04:10 | I use loadFont. And then in the parentheses
and quotes, I put the name of the font.
| | 04:19 | vlw is going to be its extension.
| | 04:23 | And then I say that I am going to use that
font for this particular text, textFont (font).
| | 04:29 | And let's just change the
color of the font, because we can.
| | 04:33 | I'll go to the next item in the
array. I'm going to save that and run it.
| | 04:38 | And now you see we have a much larger
version of the name that has gone in there.
| | 04:43 | Now I have some other options, in terms of
placing these. One of the more interesting
| | 04:46 | ones can be placing them in a dynamic nature.
| | 04:48 | I need to make this a dynamic
drawing to do that, though.
| | 04:51 | All I need to do is come up here and type in "void
setup" and place this text in curly brackets.
| | 05:01 | I should probably put the font
information up there as well. There we go.
| | 05:11 | And then down here, I can
put this in void draw.
| | 05:18 | And then if all goes well, I can get the text
actually follow the mouse around. I'm going to save that.
| | 05:28 | And I see I need to low
the presidents down here,
| | 05:33 | it appears. there we go.
| | 05:38 | And now I can get the information
to follow me around as I do it.
| | 05:43 | I could even make it so that it brought in
each of the presidents, about one every second
| | 05:46 | as I went through, and I get a sort of a shuffling-
through-history effect if we wanted to do that as well.
| | 05:52 | But mostly I want to let you know that in
terms of working with text, the easiest way
| | 05:55 | is to bring it in as a text file and then
you set up Processing so that it reads each
| | 06:00 | line of text as a string and the
entire file as an array of strings.
| | Collapse this transcript |
| Working with appended tabular data| 00:00 | If you want to do any data visualization in
Processing, the single most important thing
| | 00:04 | to do is to actually get your data into
Processing, and that can also be an unusually challenging
| | 00:10 | procedure, because Processing doesn't really
have any built-in functions for doing this.
| | 00:15 | On the other hand, a number of people have
developed methods to facilitate the integration
| | 00:20 | of external data files into Processing, and
I'm going to show you one of them, probably
| | 00:26 | the simplest, and it's for reading and
external spreadsheet file saved as a tab-separated
| | 00:31 | values, or TSV, file and using those values in
Processing, by using a table class developed
| | 00:39 | by Ben Fry, who is one of the
cofounders of Processing.
| | 00:42 | Now, the good news about version 2.0 of Processing is
that the table class will become part of Processing.
| | 00:49 | And it's not there yet, because we're still
using an alpha right now, but I can only assume
| | 00:53 | that since it's probably going to be written
by the same guy, that it will be very similar
| | 00:57 | to what we have right here.
| | 00:59 | Let's open up our sketch folder, and you
see that we've got a few things in there.
| | 01:04 | Number one is the actual Processing sketch,
and I can show you that I've got that opened,
| | 01:08 | and that's what that looks like right there.
| | 01:11 | The other one is the table.
| | 01:14 | That's a class file that contains special
instructions for Processing on how to read
| | 01:19 | tabular data. And we're not
going to mess with that one.
| | 01:21 | We're just going to say
that pretty much, it works.
| | 01:23 | In case you are worried about not be able to
find this code again, you should know that
| | 01:28 | Ben Fry's table class is available in the
Built-In Examples in Processing; that's what
| | 01:33 | I am showing you right here.
| | 01:34 | The way you get that is by coming up to File,
to Examples, and this window pops up. And the
| | 01:41 | one we're looking for is Book/Visualizing
Data/ch03-usmap, and then the second one, which
| | 01:49 | is step01_fig1_red_dots, if you click on that,
then you see the same table class right there.
| | 01:58 | What I also have in here is a data folder,
and I have two versions of the same data.
| | 02:05 | Now, the reason I did that is because I got
some data from Google Correlate that compares
| | 02:09 | states on relative interest in search terms.
In fact, I am just going to open that up.
| | 02:13 | I've got it in Excel right
now. And here's what we have.
| | 02:16 | We've got Alabama down through Wyoming.
| | 02:20 | We also have Washington D.C. in the mix,
and that's important because D.C. tends to function
| | 02:25 | usually in a lot of statistics.
| | 02:28 | We have the state name.
| | 02:30 | We have the region and the division that
there in. Then we have the percentage of adults
| | 02:35 | in that state with degrees, and we have the
median age of the population. And so those
| | 02:41 | are a couple of descriptive statistics, but
all the rest of that is Google's search terms.
| | 02:45 | And what it is, these signify the relative
interest of that state and that search term
| | 02:52 | compared to other states.
| | 02:53 | So what you see here, for
instance--let's find a good one.
| | 03:00 | That's video games, and what you find is that
Washington D.C. shows a much lower interest
| | 03:06 | in searching on Google for
video games than other places.
| | 03:10 | On the other hand, you find that Hawaii has an
unusually high interest in the show Top Chef.
| | 03:17 | And I'll let you make it that what you will.
But these are based on search patterns nationally
| | 03:23 | and these data from Google. They're a few months old,
but the patterns tend not to change dramatically
| | 03:29 | in short amounts of time.
| | 03:30 | Now, the reason I opened this up in the
spreadsheet is because the way we're going to be working
| | 03:35 | with the data files in Processing is, you
don't want any of the header information.
| | 03:40 | Right here I have four rows on the top.
| | 03:43 | The first one numbers the columns starting at
0, because that's how Processing reads things;
| | 03:47 | it started at 0 and then goes on.
| | 03:50 | Then I have the names of the things that
people search for. By the way, what I have is the
| | 03:55 | percent, the degree, the age. Video games
is a search term, iPhone is a search term,
| | 04:00 | dance, top chef, nfl, nba, mlb for Major
League Baseball and then Major League Soccer.
| | 04:09 | By the way, I included two of those because I
am from Utah and we love the NBA more than
| | 04:19 | anybody else in the country apparently.
| | 04:22 | We also love dance the most, and we also love
Major League Soccer the most. Anyhow, those
| | 04:31 | are little points of regional pride.
| | 04:34 | But I have to prepare this with this
information here, but then you have to delete it to make
| | 04:38 | a very clean file. And so what I have is a
second file that has the data but does not
| | 04:45 | have any of those headers, but I like to
keep the one with them so I can consult it.
| | 04:49 | Let me recommended that you always do that:
keep a copy of the data with the headers with
| | 04:53 | summary statistics, if you want, for your reference
purposes, but also have one that's easy to read.
| | 04:59 | Now the other thing is this is an Excel .xls
file, and while there are libraries that make
| | 05:05 | it possible to read Excel files into
Processing, I find they are complicated.
| | 05:10 | It's easier to just go
with a standard text file.
| | 05:12 | And so what you need to do is you need to
save your file as a text file--actually, a
| | 05:18 | tab-separated value.
| | 05:20 | Now, let me show you how this works.
| | 05:22 | You come up to File > Save As. We're going
to Enable Saving, and then I have a choice here.
| | 05:31 | I can do stateData and then say it's Workbook, and then
I click on that. I get a whole long list of choices.
| | 05:38 | The one that you want is this one
right here, Text (Tab delimited).
| | 05:44 | And when you save that it will come out with a
.txt extension at the end, and you just click
| | 05:49 | on it and you change it manually to TSV.
| | 05:52 | You would think that the CSV, the comma-
separated value, would be a good one, but I encountered
| | 05:56 | some really significant problems in reading
that data into Processing, so I just say stick
| | 06:01 | with the TSV for now and then hopefully the
Table class will get improved and be a little
| | 06:06 | more flexible when the full
version of Processing 2.0 comes around.
| | 06:09 | So I am just going hit Cancel
because I have that one already.
| | 06:12 | By the way, if your data is in Google Docs
spreadsheet, you can do Export or Download
| | 06:19 | as Text and it saves it as a TVS file anyhow.
| | 06:22 | So, I am just going to go back to my
Processing sketch, and here you see my information.
| | 06:28 | I've got a little palette here.
| | 06:31 | And then this is the class. Table is the class,
and then stateData is the object that I'm going to create.
| | 06:38 | That's going to be sort of my Data variable.
| | 06:41 | I'm also creating a variable called
rowCount that will count as it goes through the file.
| | 06:47 | I have the setup. I've got a
window of 600 x 200 pixels.
| | 06:52 | Then I take my stateData object and
I read the data into, by saying New--
| | 06:58 | we have to do a New when you're dealing with
the classes--and then Table is the name of
| | 07:02 | the class and then statesData.tsv
in quotes and parentheses.
| | 07:08 | That's the name of the file, and it needs to
be in the data folder, in the sketch folder.
| | 07:13 | I take the variable rowCount, and now I
initialize it by using one of the Table functions, and
| | 07:18 | that's getRowCount.
| | 07:19 | So I do stateData, because that's now the name
of the object in I am dealing with, .getRowCount
| | 07:24 | and then empty parentheses, and that will
tell me how many rows there are in the data.
| | 07:28 | And in fact, I've got this little thing here
beneath that to say print line and tell me
| | 07:33 | how many rows there are.
| | 07:34 | I know there are 51 because, well, there
should be 51; we'll see if it works right.
| | 07:40 | Beneath that, I have just a
little bit of code to draw.
| | 07:44 | I've got a background for my
palette. I've turned on anti-aliasing.
| | 07:49 | Then I have another palette color for some
dots that I'd be drawing, but I am making
| | 07:53 | them somewhat transparent.
| | 07:54 | That's the 160.
| | 07:55 | That's the alpha, about
halfway between the 0 and 255.
| | 07:59 | And I've also turned off the outlines.
| | 08:02 | Then I have a for loop that does the
important sort of heavy lifting here.
| | 08:06 | And what it says is just go into the data
file, start at row 0. And remember, I got rid
| | 08:13 | of all the headers in this,
so row 0 is a data row.
| | 08:16 | And it says and then go through one
at a time until you get to the end.
| | 08:21 | And what we want to do is we
want to pull out the state name.
| | 08:26 | We're just telling it that
that's what's in the first one.
| | 08:28 | We're also going to get age.
| | 08:30 | We're going to get degrees. I am just
getting those two variables out right now.
| | 08:34 | The other just so going to be there, and what
I am going to do is I am going to create a
| | 08:38 | little scatter plot of median age in the
state to the percentage of adults with a degree.
| | 08:43 | And what I'm doing down under the ellipse,
where I am multiplying things by 12 and 3,
| | 08:48 | that's just a very rough attempt of
getting them to spread out across.
| | 08:51 | You'll see that there is actually big gap on
the left, and I can adjust for that manually.
| | 08:55 | But right now this is just a simple version.
| | 08:57 | And also, because once it gets drawn, it's
not going to change, or at this point it's not
| | 09:02 | dynamic, I am using the noLoop command to
tell Processing it doesn't have to keep going
| | 09:08 | through the draw loop;
just do once and we're done.
| | 09:11 | And let's press Ctrl+R on the PC or
Command+R on the Mac and see what we get.
| | 09:19 | We've got two things. Number one, take a look
down at the bottom of the console, and you'll see
| | 09:22 | that it says rowCount=51.
| | 09:25 | That confirms that Processing was able to
read 51 rows of data from my sheet, which
| | 09:29 | is right because we have the 50
states and we have Washington D.C.
| | 09:33 | And then what you have in the top is an
unlabeled, but you know, slightly picturesque scatter
| | 09:37 | plot that shows the association of median age.
| | 09:42 | That's what goes across the bottom, and that
one that's way down at the left is Utah.
| | 09:46 | We've got a median age of only 28 compared
to most other states. And then going up is
| | 09:53 | the percentage of the
population with college degrees.
| | 09:56 | And so you can see, if you take out Utah and
you take out the other outlier that we've
| | 10:00 | got, there's not a real strong
association between these two things.
| | 10:04 | Nevertheless, the purpose of this exercise
was not so much to produce this one graph;
| | 10:07 | it was to show you how you
can read data into Processing.
| | 10:12 | And the easiest way to do this is to save a
very clean TSV file from a spreadsheet with
| | 10:18 | no headers on it and use Ben Fry's excellent
Table class to import the data into your sketch.
| | Collapse this transcript |
| Reading XML data| 00:00 | One of the most exciting things you can do with
Processing is to be able to access live web data.
| | 00:06 | You can get information from all around the
Internet, all around the world, constantly
| | 00:11 | update it, and bring it into your computer
and use that for your own data analysis, for
| | 00:16 | your own sketch work,
for your own exploration.
| | 00:19 | And the way that you can do this in Processing
is using XML, that's Extensible Markup Language,
| | 00:25 | and combining that with an API, an application
program interface, that allows your computer
| | 00:30 | to talk with the web servers to get the data.
| | 00:33 | Between the two of those, you can get this
information into Processing, and that opens
| | 00:37 | up a whole new world, literally, of data
for you to work with in your own projects.
| | 00:43 | Now what I'm going to show to you in this
one is a very, very simple version here.
| | 00:47 | I want to show you this one web page, a wonderful
project that was created in Processing called We Feel Fine.
| | 00:56 | It's at wefeelfine.org, and this is a project
that was created by a couple of researchers,
| | 01:03 | Jonathan Harris and Sep Kamvar, not
that we really need to see those guys.
| | 01:10 | And I just want to show a little bit
about the methodology, what this does.
| | 01:14 | We feel fine collects data around the Internet,
from a wide variety of places, about phrases
| | 01:20 | that talk about feeling or feel, and it brings them
in and depicts them in several different ways.
| | 01:26 | I just wanted to show down here, as we get to
this, that the application that we're going
| | 01:34 | to be using was created in Processing.
| | 01:36 | So this is an example of the kind of
extraordinary data visualizations that you can create in
| | 01:41 | Processing once you get
the data in there together.
| | 01:46 | Now, the nice thing about this project, if I
back up to the front page, is you see here
| | 01:49 | at the bottom of the pink list, they actually
have the information on their API, with a beautiful
| | 01:55 | quote from Pablo Picasso: "Bad
artists copy and great artists steal."
| | 02:00 | Put that up on your wall and live by that one.
| | 02:04 | And what we have here is
information about how the API works.
| | 02:07 | Basically, it's a kind of web address, a kind
of URL that starts with this phrase up here,
| | 02:12 | and then you can add onto it attributes
for other kinds of information you want, and
| | 02:18 | they give all sorts of examples right here.
| | 02:20 | Now we've already got a sketch
with an edited API call init.
| | 02:24 | We're going to go to that in one second,
but I do want you to have just an idea of what
| | 02:28 | We Feel Fine actually looks like.
| | 02:30 | So I'm going to take a
second and launch this one.
| | 02:32 | It opens up in a separate window, and it takes
a moment to get there. And what we have is
| | 02:38 | an explosion of data from around the web,
and these all represent blog posts or other Internet
| | 02:45 | data where people have mentioned feelings.
| | 02:47 | If I come out here and click on one: "the
Sheffield house is going to feel the love."
| | 02:56 | Click in a blank space and you
can make this poof, out-explode.
| | 03:03 | And there are several
different things you can do.
| | 03:04 | You can check for particular feelings.
| | 03:06 | You can check for feelings for men and women,
their age, their weather, their location,
| | 03:10 | the country, city, the date, and also
different ways of depicting it, of a montage.
| | 03:18 | There we go, the mobs, and so many others.
| | 03:24 | This is just an amazing collection of way of
depicting information and for me, as a social
| | 03:28 | psychologist, it's sort of the jackpot of
people's uncensored feelings and reactions.
| | 03:35 | Anyhow, I want to show you how to get a little
bit of data out of this, into Processing, which
| | 03:39 | would serve as a starting point for
your own data visualization explorations.
| | 03:45 | So what I'm going to do is I'm going to come
back to the sketch for just a moment and show
| | 03:49 | you what we have here.
| | 03:50 | I should put my comment up here.
| | 03:55 | The very first thing we have is that we need to
import a library for Processing called ProXML.
| | 04:02 | That's a way of accessing
this kind of information.
| | 04:04 | It's available for Processing, but it's
not available from within the program.
| | 04:08 | What you have to do is go
to the Processing website.
| | 04:10 | So we are going to go back
to the web for a moment.
| | 04:13 | I'm going to go to this tab, Processing, and
you go to Reference, to Libraries and then
| | 04:22 | we scoot down just a little bit, and then you go, then
right here it says Data and Protocols on the left.
| | 04:31 | And then one we're looking for
is down here, near the bottom.
| | 04:34 | It's called proXML.
| | 04:35 | It allows Processing to
read and write XML files.
| | 04:38 | So I'm going to click on that, and from there,
it brings me to a web page that also serves
| | 04:43 | as the reference for this library. So if you
want to find out about how the bits and pieces
| | 04:48 | of it work, count all children,
there's your information right there.
| | 04:51 | I'm going to back up, and at the bottom of
this page it says download:proxml.zip.
| | 04:57 | You click on that and download it
to your computer, and there it is.
| | 05:02 | And now what you need to do is just take that and
drag it over to your libraries folder in Processing.
| | 05:09 | And once you drag it over there,
you need to go quit Processing and restart.
| | 05:12 | Now I've already done this and already
installed it, so I'm not going to do that, but that
| | 05:16 | is the procedure that you would use.
| | 05:17 | So I'm going to close this now. And I'll close this
page as well. At creativecomputing.cc/p5libs/proxml,
| | 05:29 | but it's linked directly from
the Processing page right here.
| | 05:33 | So I can close the both of these.
| | 05:39 | And then let me explain
what's going on in here.
| | 05:42 | So the first we do is
we're loading the library.
| | 05:45 | This loads the proxml library, which allows
Processing to access this XML information.
| | 05:50 | The second step is we're using the XML InOut
class and creating an XML InOut object.
| | 05:59 | By the way, notice the difference in
capitalization. Classes have capital letters--
| | 06:02 | they start with capitals--but objects start
with lowercase, and that's one of the ways
| | 06:06 | you can tell the difference
between the two of these.
| | 06:08 | Then we have our setup.
| | 06:09 | We have a window that's 600 x 200, although
that's actually irrelevant because the stuff
| | 06:13 | we're going to be looking for is going to show up
in the console, the black area at the bottom.
| | 06:18 | Then we have an instantiation of our object.
| | 06:20 | It says xmlInOut = new, and then class name,
because you see the capital letters, of XMLInOut,
| | 06:29 | with this referring back to the
most recently created object.
| | 06:32 | And then we have what's
called the load element method.
| | 06:35 | You see that it says xmlInOut--that's the
object--and then the .loadElement for the method.
| | 06:40 | And then we have this URL, and that's the actual thing
that we're going to be using to get the information.
| | 06:45 | In fact, you can see that it says api, right
there at the beginning. In terms of api,
| | 06:51 | this is a very brief one, but we're using
this to simply show you what is possible.
| | 06:55 | And in fact, if you want to
see it, you can copy this code.
| | 06:58 | I'm just going to copy that. And I've managed to quit
Firefox already, so I'm going to open that back up.
| | 07:07 | And then I'm going to paste it up
here. And a funny thing happens
| | 07:11 | when you hit it and it opens up a blank page, but
in Firefox here, if I right-click on the page
| | 07:18 | and go to View Page Source, this is the
information that we're going to be pulling into Processing.
| | 07:25 | And what it is is you see that we have, on
the left, it's pulling the feelings and then
| | 07:29 | you see we have the actual
feeling that the people have.
| | 07:33 | We have the post date, when they put it up
there, and we have the sentence that contains
| | 07:37 | the feeling information.
| | 07:40 | I'm going to close that, close that,
and come back here to Processing.
| | 07:45 | Then what we do is we come down and we have
an xmlEvent, and that's where it's going to
| | 07:51 | go through the APIs
information one line at a time.
| | 07:55 | That's the element.countChildren.
| | 07:58 | And we're going to get two things printed out
of that. The first one is it's going to do
| | 08:03 | what's called getting the children, and it's
going to print out the post date: When did
| | 08:07 | the people actually put this
information up on the web?
| | 08:10 | The next thing we're going to do is we're going
to print the actual sentence that they wrote.
| | 08:15 | You'll see there, at the beginning of the second
print line, in quotes, there's a backslash and a t.
| | 08:21 | That is the Tab command, and I am just going
to indent this second line element a little
| | 08:25 | bit to make it easier to read.
| | 08:27 | So this is all ready to go.
| | 08:28 | I'm just going to come up and press Run.
| | 08:31 | I get my empty window. Don't worry about that.
It's this one that we're interested in, down here.
| | 08:37 | And you see that when we scroll through,
there are the 50 entries that it pulled for us.
| | 08:43 | I'm feeling excited and generous.
| | 08:45 | I feel so grateful.
these are wonderful things.
| | 08:48 | And so the point here is is that Processing by
using XML and the We Feel Fine API has been
| | 08:55 | able to go onto the web and pull this
information from a live Internet data source and bring
| | 09:01 | it into Processing.
| | 09:02 | This is simply the first step of what
really has immense potential for your own work,
| | 09:07 | that you can then take this data and start
using it in your own data visualization and
| | 09:12 | your own creative work.
| | Collapse this transcript |
|
|
11. Varieties of Data VisualizationsGenerating dot plots| 00:00 | One of the most basic forms of statistical
graphics, or data visualization, that you can
| | 00:05 | put together is a dot plot.
| | 00:07 | And all it is a single dimension, put a dot
where a person's or unit's score falls on that
| | 00:13 | particular dimension.
| | 00:15 | Now this is a very simple
thing to do in Processing.
| | 00:17 | All you need to do is do ellipses and have
either the X or the Y be driven by the data.
| | 00:22 | One the other hand, I thought I would try to
show you something slightly more interesting
| | 00:26 | than that, and what I've done is I've created
a dot plot using the Google data file that
| | 00:30 | I used in the last chapter.
| | 00:33 | If you open up the folder for chapter 11, exercise
one, what you'll find is a few things in there.
| | 00:40 | First off, you find the actual Processing
file itself. That's one that says Ex11_01.
| | 00:44 | That's the file we are looking at right here.
| | 00:47 | You will also find the Table, with a capital T.
| | 00:50 | That is the table class that we will be using
to help process the data, and you can see for
| | 00:55 | instance, in the Processing sketch on the left, that
we have two tabs. The second one is for the table.
| | 01:00 | You also see the data folder at the top
and if I double-click on that, we've got three
| | 01:06 | files in there. Two of
them we have seen before.
| | 01:08 | There is the stateData, and that's information
I got from Google about different states and
| | 01:14 | their relative interest in
particular search terms.
| | 01:18 | Now, I have the Excel spreadsheet in here
because it also has all the original header data and
| | 01:23 | some of the summary statistics that
are helpful in getting things set up.
| | 01:27 | On the other hand, Processing is much happier
with the TSV, tab-Separated values, spreadsheet.
| | 01:32 | That's a text form of a spreadsheet.
| | 01:34 | I use that, but it doesn't have any header
information, and it's a little harder for me to work with,
| | 01:39 | so I just have in the bottom in there.
The Excel spreadsheet is simply for my reference.
| | 01:43 | The third file you see in there is a font.
| | 01:44 | I have created a font for use in this particular
sketch, and that gets stored in the data file.
| | 01:49 | So let me show you what is in this
particular sketch and how it works.
| | 01:54 | First off I brought in a color palette, like
I have done many times before. Also, I have
| | 01:58 | created a font. I've called it the
labelFont because I use it for the labels.
| | 02:04 | Below that I have Table stateData, and that
is the class is table and the object that
| | 02:11 | I am creating out of the class is called stateData, and
that's what I'm going to be using to read information in.
| | 02:16 | Then I have an integer variable rowCount.
| | 02:18 | That's where we are simply counting how
many rows there are in the spreadsheet.
| | 02:22 | I also have another variable, d, which is for
the diameter of the ellipses that I am going
| | 02:27 | to be drawing, the dots that
I am going to be drawing.
| | 02:30 | Let me scroll down a little bit.
| | 02:33 | Then in the setup block, I have a
window that's 600 by 200 pixels.
| | 02:37 | And then I read in the data. I have the
stateData object and from that I say it's new object
| | 02:42 | in the table class, and it's going
to read the stateData.tsv file.
| | 02:47 | I am also count the rows in it. So rowCount is
equal to stateData.getRowCount. The .getRowCount
| | 02:55 | is a method within that particular object.
| | 02:58 | And then I do print line, just to check how
many lines I have at the botto. In fact, you
| | 03:03 | can see it's down there right now, rowCount = 51.
That's because I have 50 states and Washington D.C.
| | 03:09 | And the last thing in the setup is I
load the font into the font variable.
| | 03:13 | So the font variable I called labelFont.
| | 03:16 | The function is loadFont, and then I put in the name of
the font that I created with the Processing tool.
| | 03:22 | Remember, if I go up to the Tools right here,
to Create Font, that's how I created that
| | 03:28 | tool, by selecting Gill
Sans Bold and then size 18.
| | 03:33 | Next, in the draw block, we have
got a few other things going on.
| | 03:36 | I am going to scroll up a little bit.
| | 03:39 | First, I specify the palette, and I put that in the
draw because I wanted to refresh every time through.
| | 03:45 | Then I load the font. So, the text font that I
will be using is from the variable label font.
| | 03:52 | I make a stroke that will be used for
some lines to mark points on the grid.
| | 03:58 | I also have a fill that will be
used for some of the labels.
| | 04:01 | The text here that I see that
I don't need, just comment that out.
| | 04:04 | I am just going to get rid of it.
| | 04:06 | Then I have a for loop, and what this for
loop does is it's going to draw some reference
| | 04:10 | lines vertical, because I am going to actually
have several dot plots going across the window
| | 04:14 | and this little draw points where I can see
what's going on and I put some text labels on them.
| | 04:18 | Maybe I will come back and
explain those in a minute.
| | 04:21 | Then when that loop is finished, I have
smooth. Turned on the anti-aliasing.
| | 04:25 | I have no stroke.
| | 04:27 | Turned off the circles around the dots.
| | 04:30 | Then I go through the data file.
| | 04:32 | So what this is is I am
opening up this stateData files.
| | 04:37 | So I am going to go through one row at a time.
| | 04:39 | That's what we have at the top. Start at row
0, which is the first line of data, and go one
| | 04:44 | at a time till you get to the bottom.
| | 04:46 | And I am pulling out a few variables.
| | 04:47 | First off, I'm getting the state names.
That's a string variable.
| | 04:51 | And that I started the top
row and that's in column 0.
| | 04:54 | It's the very first column,
so the state names are right down there.
| | 04:57 | And that's why it's using getString,
because that's a string variable.
| | 05:01 | Then what I'm doing is I'm getting data about
relative interest in four different sports
| | 05:05 | as Google search terms.
| | 05:06 | I am getting NFL, football; NBA, basketball;
MLB, for baseball--and those ones we actually
| | 05:15 | searched for the abbreviation--I
also have major league soccer.
| | 05:19 | We actually searched for that phrase, Major league
Soccer, but in here I'm abbreviating it as MLS.
| | 05:25 | And for each one of these, what I do as I
have Processing go through, row by row, and
| | 05:31 | pull out the values for
that particular variable.
| | 05:33 | So you see, for instance, under NFL, it says
float nfl, and that's because the float number
| | 05:39 | here is the index number of
relative interest in the Google search.
| | 05:44 | If a state's relative interest is
exactly on the average, they have 0.
| | 05:48 | If they are above the average,
they have a positive number.
| | 05:50 | If they are below, they have a negative number.
| | 05:51 | And so what this is going to do is it is going to go
the ninth row--actually, that's the index number.
| | 05:57 | It's really the tenth row, because it's set to 0.
So it goes to the tenth row of the spreadsheet
| | 06:02 | and then it gets the number there.
| | 06:04 | And then to make it fit in the
window, I do a few different things.
| | 06:08 | Because the range for these numbers goes
from approximately -2 to positive 5, what I do
| | 06:14 | is I add 2 to make everything a positive value,
and that gets me from 0 to 7. Then I multiply it
| | 06:20 | times 65, which approximately
fills up the width of the window,
| | 06:25 | and I add 100 to move it all over, to give me
enough room to add some labels on the left side.
| | 06:31 | So that's what that formula there right is.
| | 06:33 | It's an attempt to take the natural range
of the Google numbers and move it over and
| | 06:39 | spread it out enough to
fill up the entire window.
| | 06:42 | Next, I go to the palette and I pick a number
out for the dots in the NFL, and then I have
| | 06:47 | the ellipse, and that's
what actually draws the dots.
| | 06:50 | It uses the number for NFL, and
that's the Google search terms.
| | 06:53 | It's the actual outcome variable.
| | 06:55 | And then I have the Y position.
| | 06:57 | I am putting this 2/10th of the
way down. And then the ellipse is d.
| | 07:03 | That's 10 pixels tall and 10 pixels wide.
| | 07:07 | And then what I do is I have a
label that I put next to it.
| | 07:10 | It's text, and I put it in quotes because I
want it to actually say that word NFL. And that's
| | 07:15 | going to be 60 pixels over, and it's going
to come down just a little bit farther than
| | 07:21 | the circles, because the circles are positioned
by the midpoint, but the text gets positioned
| | 07:26 | by it's baseline, and so this lines the
baseline up with the bottom of circles.
| | 07:31 | Finally, I have a little if statement,
and what this does is allows me to do a mouse-
| | 07:37 | over and if the mouse is over a particular dot,
it will tell me what state that dot is.
| | 07:44 | It gets muddled up if the states are close,
but at least you can use it to see the extremely
| | 07:48 | high and low numbers.
| | 07:49 | And then I do a similar
procedure for each of the other sports.
| | 07:54 | I just go to a different row in the data.
So instead of going, for instance, to the row with
| | 07:59 | index 9, I go to index 10, and then I use a
different color for the palette; instead of
| | 08:05 | index 1, I use index 2. And then I bumped
the ellipses down another 2/10ths of the window.
| | 08:11 | And just make these appropriate accommodations
all the way through, then I do the exact same
| | 08:15 | thing for MLB and the exact same
thing for MLS, Major League Soccer.
| | 08:19 | Now, I'm confident that there is a more
compact way to do this, through arrays, but I think
| | 08:25 | that for right now, for a pedagogical purpose,
this is really nice because it spells every
| | 08:29 | step out in detail and shows
the repetition as I go through.
| | 08:32 | I am just going to save this,
and I am going to hit Run.
| | 08:36 | That's Ctrl+R on the PC and Command+R
on the Mac. And here is what we get.
| | 08:44 | I get a window, a light-yellow background, and
you can see that I have reference lines going
| | 08:48 | vertically across four different dot plots:
| | 08:51 | NFL on the top, then MBA, then Major
League Baseball, then Major League Soccer.
| | 08:55 | The third line, vertical line from the left, is
0, and that means that's the national average.
| | 09:01 | Any state that's on that has about as much
relative interest in that as a search term
| | 09:05 | as everybody else.
| | 09:06 | So, for instance, we see that in Major League Baseball,
there is one dot that's almost exactly on the zero.
| | 09:13 | And in fact, what I can do is I can bring the
mouse in, and I can hover over, and that's
| | 09:17 | North Dakota. And then what I can do is I can
look at the other states, and you see most
| | 09:23 | of them don't go down really low. One state has less
interest in basketball than the others. That's Montana.
| | 09:29 | They don't have a basketball team.
| | 09:31 | On the other hand, I happen to
know that the highest state--
| | 09:34 | well, that's Utah. That's where I am from.
| | 09:36 | We actually do have a basketball team.
But you do see some of the others.
| | 09:40 | For instance, the state with the highest
relative interest in NFL is South Dakota.
| | 09:43 | They don't have a football team.
But you can see the interest.
| | 09:48 | Wisconsin, North Dakota, Maryland. And if I
get in here, it can just kind of gets jumbled
| | 09:53 | up, and there is--there are ways of dealing with
that, but I'm not going to do those right now.
| | 09:58 | I do point out this last
one, Major League Soccer.
| | 10:02 | You see that we've got
everybody's piled really close right here.
| | 10:06 | You can't even tell who is who.
But you have stragglers.
| | 10:10 | So there's Oregon. And by the way, if you know
statistics, these are standard deviation units.
| | 10:15 | This means that Oregon's relative interest
in searching for Major League Soccer is one
| | 10:20 | standard deviation above the national average,
which is a fair amount. And then there is Washington.
| | 10:26 | There 1 1/2 standard deviations above the
national average. And then way up here, the highest
| | 10:32 | thing we have of any of these variables is
Utah, which has over 3 and a half standard
| | 10:37 | deviations above the mean, which,
statistically, is an extraordinary thing.
| | 10:40 | I will point out that Real Salt Lake, our
Major League Soccer team, won the Major League
| | 10:44 | Soccer cup a few years ago.
| | 10:47 | But otherwise, I don't quite know how to
explain that, but I'm just happy for it.
| | 10:50 | And in this case, this is a dot plot;
this is a simple data visualization.
| | 10:54 | I made it a little more interesting by
altering the colors, by throwing in several dot plots
| | 10:59 | at once, providing some easy reference points,
and by making it possible to do a hover, to
| | 11:04 | get some detailed information about the extreme
points, and that's the first kind of visualization that we want to cover.
| | Collapse this transcript |
| Building scatter plots| 00:00 | In our last movie, we looked at how we could
create dot plots to represent one-dimensional
| | 00:05 | distributions, and what that is is one variable
at a time just running from lowest to highest.
| | 00:11 | In the example that I had, I actually
showed several variables, but they were all just
| | 00:15 | separate, one-dimensional distributions.
| | 00:18 | In this movie, I want to show you how to do a
scatter plot, a very common two-dimensional
| | 00:23 | distribution for two quantitative variables.
And in this case I'm going to be using a
| | 00:28 | lot of the same information.
| | 00:29 | We are using the same data set, which is based on
Google's search trends, on a state-by-state basis.
| | 00:37 | Because this is a rather lengthy code, I am
just going to walk through this one instead
| | 00:39 | of typing in in front of you.
| | 00:41 | Let me just show you, starting at the top,
| | 00:43 | first, I've got to put that as a comment
or I am going to get an error message.
| | 00:48 | So I'll save that.
| | 00:49 | I have my color palette that I
brought in, and then I've saved some fonts.
| | 00:54 | I created the fonts with
the tool in Processing.
| | 00:57 | If I go up to Tools here in the menu bar and
click on that, down to Create Font, this is
| | 01:03 | where I created the font.
| | 01:04 | Now on your computer the fonts
available, may be different.
| | 01:08 | We've got Adobe CS6 installed on this one, so we
probably have some fonts that most computers won't have.
| | 01:14 | If you have any problem with the fonts, also
just feel free to comment out the fonts that
| | 01:18 | I have got in this example, or just replace them with
other ones that you do have on your computer system.
| | 01:23 | But in the third line, I am declaring the
font variable. Actually, it's an object.
| | 01:29 | Beneath that, I am declaring
the data. That's a data object.
| | 01:35 | Below that, I have a variable
for the rowCount in the data set.
| | 01:39 | Then I have a little global variable for the
diameter of the circles that I'll be using.
| | 01:44 | In the setup block--I'll
scoot up a little bit--
| | 01:46 | I have a window that's 600 x 500, because
normally, I only do 200 tall in this course,
| | 01:52 | but a scatter plot needs to have
enough vertical room to work well.
| | 01:55 | So I've made it nearly square.
| | 01:59 | Then I am calling the data.
| | 02:00 | I'm loading it into the stateData object, by
referring to the stateData.tsv, tab-separated value file.
| | 02:09 | Then I'm also getting the rowCount by referring
to one of the object methods, the getRowCount.
| | 02:16 | Then I'm going to print out the rowCount
just to double-check down in the Console.
| | 02:20 | Then I load the font into labelFont.
| | 02:24 | And then I have the anti-aliasing turned on.
Then we go down to draw.
| | 02:28 | I have got a background which is based on the
first index color in my palette, the array
| | 02:33 | of colors. Then I call on the font, and I load the
stroke and the fill for the shapes in a medium gray.
| | 02:42 | And then I start placing some axes.
| | 02:44 | Now, remember, when you're drawing in Processing,
you want to do things sort of in a reverse
| | 02:48 | order, because the things that come later will
get drawn on top of the things that come earlier.
| | 02:54 | So, a lot of times you want to put the
foundational stuff very first and then other things later.
| | 02:59 | So right now, I'm just doing the
lines and the labels for the X axis.
| | 03:03 | So I'm going to do textAlign (CENTER).
| | 03:06 | I'm drawing a line across the bottom. And then
this little for loop is going to insert the
| | 03:13 | labels across the X axis.
| | 03:15 | You'll see this when we bring them up.
| | 03:16 | And then I'm also calling on the text, just
to put the word Videogames underneath that,
| | 03:22 | because what I'm looking at in this one is
the relative interest in Google searches
| | 03:25 | for the term videogames.
| | 03:27 | Below that, I do a
similar thing for the Y axis.
| | 03:30 | Let me roll this up a little bit.
| | 03:32 | I've changed the alignment because I want them
to be a little snug on the right to the axis.
| | 03:38 | I draw the vertical line for the axis,
| | 03:41 | and then I use another for loop that places
the markers and the numbers along the side.
| | 03:47 | And then I have the word dance that appears to the
side of the whole thing, because on the Y axis
| | 03:52 | we're depicting the state's relative
interest in the search term "dance" in Google.
| | 03:58 | Beneath that, we have a for loop
within the draw loop that loads the data.
| | 04:04 | So it goes through the data set, one row at
a time, and first it loads the state names
| | 04:12 | into a string variable called state.
| | 04:14 | Then it loads the video game data. It says
float, because it's a floating point variable.
| | 04:19 | It has decimal places. Then we have the name
of the variable, videoGames, and then it gets
| | 04:22 | it from the stateData object using
the .getFloat method for the object.
| | 04:29 | And then it just says go one row at a time,
because we're using the row variable from
| | 04:32 | above, and then it is in the fifth row.
| | 04:35 | It's actually in the fifth index,
so it starts at zero.
| | 04:38 | And then I tell it to map it.
| | 04:41 | Now, you may recall that in the last example
when I did the dot plots, I did some rather
| | 04:46 | Byzantine calculations on how to
get things spaced out correctly.
| | 04:51 | That was one way to do it.
| | 04:52 | Another way to do it that actually can make
things a lot simpler is to use Processing's
| | 04:56 | Map function, and what this does is it
changes the scale between two things.
| | 05:00 | So on this one, I said I created a new
variable called x because I am using x coordinates.
| | 05:05 | And I said I want you to map the videoGames
variable, which has a naturally occurring range
| | 05:10 | of about -3 to +3 in this data set, and I
want you to change that so it goes from 100 to
| | 05:17 | 555, because that's a multiple
of the labels on the bottom.
| | 05:22 | So I don't have to figure out that
a score of 1.477=417 or something.
| | 05:28 | This will just do that automatically for me.
| | 05:31 | It's even better on the next one, dance,
because I'm dealing with axes that go in different
| | 05:36 | directions. Because when you do a scatter plot,
you want to start with zero at the bottom.
| | 05:40 | Now we want the numbers to
get bigger as you go up.
| | 05:43 | The problem is, however, in a computer, zero
is at the top and the numbers get bigger as
| | 05:48 | it goes down, and by using the Map function, I'm able
to flip that around without any math on my part.
| | 05:54 | So I say I have a new variable, a floating
variable called y, and then I'm using Map to
| | 06:00 | take the dance variable and to take its
naturally occurring values of -3 to +4 and map those.
| | 06:07 | It starts at 400 and then goes to 50.
| | 06:10 | I am actually trying to even flip the order
in which things go, but this one makes life
| | 06:14 | much easier than having to figure out by hand
what the adjustment should be for the calculations.
| | 06:20 | After that, I turn off the stroke and then
I put in a fill color for the ellipses.
| | 06:25 | I also make them somewhat
transparent. That's the 180.
| | 06:28 | There is the alpha. Because I have an x variable,
a y variable, and a d variable for the diameter
| | 06:33 | up above, I just put x, y,
d, d for the eclipses.
| | 06:37 | Then what I have is a small amount of text
that enables rollovers, to see what the states
| | 06:43 | are for the data points.
| | 06:45 | Now, it gets a little crowded in the middle,
but this does work well for extreme cases.
| | 06:50 | And then on this one, what I have used is
Processing's Distance function. And what I
| | 06:54 | have said is if the distance between the
midpoint of a dot--because this is going through one
| | 07:00 | dot at a time--if the difference between a
dot and the mouseX and mouseY is less than
| | 07:06 | the half of the diameter of the
dot, the diameter is 10/2 gets 5,
| | 07:11 | I added one on so we have just a little bit
extra room for that one, because sometimes
| | 07:17 | five pixels can be hard to hit.
| | 07:19 | And then I say but if the mouse is that
close to the center of a dot, then bring up the
| | 07:24 | state name and put it just off to the side.
| | 07:28 | Also, you see I have a second tab.
| | 07:29 | We have used this one before.
| | 07:31 | That has Ben Fry's Table
class. Rather lengthy here.
| | 07:37 | Again, I'll just point out that you can copy
it from here, but you can also find the Table
| | 07:43 | class in the Processing's built-in
examples. So I show you really quickly.
| | 07:47 | We go File, to Examples, click
that Open and then go to Books.
| | 07:56 | That's the fourth one down. Go to
Visualizing Data, the third one down, and then just go
| | 08:04 | to usmap, the first one.
It says chapter 03 usmap (ch03-usmap).
| | 08:08 | And then the second one, starting here, when
you click that open, you will find the same
| | 08:13 | Table class information.
So you can also get it from there.
| | 08:16 | So it's built into the
Processing program as well.
| | 08:19 | And we fully anticipate that
with version 2.0 of Processing
| | 08:23 | this will be a native part of Processing that
you won't require any special installation.
| | 08:27 | So anyhow, back to where we were,
We hit Run and there is our scatter plot.
| | 08:35 | You see we have Videogames scores across the
bottom. 0 indicates that that state's relative
| | 08:40 | interest in that search term
is at the national average.
| | 08:44 | If they have a positive number, it
means they're above the national average.
| | 08:46 | If they have a negative
number, they are below.
| | 08:48 | Similarly, Dance going up and down the side,
zero is at the national average, positive
| | 08:53 | numbers are higher, And we have a few
interesting cases right here. We got a bunch of
| | 08:58 | cases just right here in the middle.
| | 09:00 | There's Montana, there is Missouri,
there's Texas. Nothing particularly special.
| | 09:04 | They are close to the
national average on both of them.
| | 09:07 | We do have one right here.
| | 09:09 | Iowa is the highest of all in searching for
Videogames, and they are at the national average for Dance.
| | 09:16 | Down at the very bottom-left is Virginia,
which is three standard deviations below the mean
| | 09:22 | on both of them. And I don't have any
explanation; if anybody here is from Virginia, I'd love to
| | 09:27 | hear what your theories on that one are.
| | 09:29 | And then way up at the tippy
top is Utah, my home state.
| | 09:33 | You see there's a huge difference between
them and everybody else on search for Dance
| | 09:37 | terms; in fact there is over two standard
deviations in between them and anybody else.
| | 09:41 | I have some theories about that.
Performing arts are very popular in Utah.
| | 09:45 | But anyhow, it's an interesting thing,
and this is a very easy form of interaction.
| | 09:50 | All it is is a rollover.
Don't even have to do anything.
| | 09:56 | And that is how you can create an
interactive scatter plot in Processing.
| | Collapse this transcript |
| Making line plots| 00:00 | If you have a variable that changes over time,
one very good way of looking at this is what's
| | 00:08 | sometimes called a time plot or an
area chart or just a line chart.
| | 00:13 | And in this movie, I am going to show you how
to produce a variation on the line chart that
| | 00:17 | does a really good job of joining changes and
interest and a particular Google search term over time.
| | 00:23 | Now in this one, I've got my palette there at
the top, and then I called two fonts because
| | 00:28 | I'm going to be using one for the
titles and one for the labels.
| | 00:33 | Then I'm calling up some data about art.
| | 00:35 | What I did is I went to Google Correlate and
I got the search trends over time for the
| | 00:41 | French Cubist painter Georges Braque, who is
known for his Nude Descending a Staircase.
| | 00:48 | So that's going to be the
data that we are going to use.
| | 00:50 | In the Table class I'm
creating an object art data.
| | 00:54 | After that I have a row count. Snd then I
have to do an interesting thing because I
| | 00:58 | have two forms of interaction here:
| | 01:00 | I need to create a secondary variable that
can also record the mouse position, but I
| | 01:06 | start it just slightly
off of the visualization.
| | 01:10 | After that, I have the setup block, I have
a Window that's 600 x 200, and then I take
| | 01:15 | my art data objects that I created earlier in the Table
class and then I load the braque.tsv file into it.
| | 01:23 | That's a tab-separated value file, and the
easiest way to get there is by opening a file
| | 01:28 | in Excel and saving it as a tab-separated
value text file and then manually changing
| | 01:35 | the extension after you've saved it.
| | 01:37 | Then I have a Table function,
where I get the row count.
| | 01:41 | Then I print the row count at the bottom.
| | 01:43 | It's a way of double-checking
that I'm reading things correctly.
| | 01:45 | Then I load two fonts, a Bold 18 pt GillSans
for the titles and a regular 12 point GillSans
| | 01:53 | for some of the labels.
| | 01:54 | And again, I created these
with Processing's Font tool.
| | 01:57 | If you go up to Tools, we have Create Font.
| | 02:02 | And as I mentioned before, the fonts
available on our computer and the fonts available on
| | 02:06 | your computer might be slightly different.
| | 02:09 | If you don't have GillSans, don't worry.
| | 02:10 | You can either comment out those lines
completely or you can replace them with fonts that you
| | 02:15 | create using the ones available on your
computer. Either way would work fine.
| | 02:20 | And then the last thing in the setup block is
I turn on the anti-aliasing with the smooth
| | 02:24 | function. I'm going down to draw.
| | 02:27 | One of the interesting things I do here
is I turn off the cursor completely.
| | 02:31 | You can have a choice of the arrow cursor, a
hand cursor, a crosshairs cursor, the text
| | 02:38 | I-beam cursor, the spinning-beachball-of-
death weight cursor, and you also have the option
| | 02:43 | of turning it off completely.
| | 02:44 | Actually, you can also load
an image file as a cursor.
| | 02:48 | But I decide for this one to get rid of it, and
I'll explain that. When you see it, it'll make sense.
| | 02:52 | Then I put the background color in, I call up
the text font, and then I put in some color
| | 02:57 | information for stroke and the fill.
And I'm going to center the title across the top.
| | 03:01 | It says Google searches for Georges Braque.
| | 03:04 | Then I'm going to start aligning some
other information for the labels.
| | 03:07 | Let me come down here.
| | 03:09 | Then I have a for loop that goes
through and reads the data file.
| | 03:14 | So I tell it first that I want to go through,
row by row, starting at tippy top, because my
| | 03:19 | tsv file doesn't have any header information.
| | 03:21 | It just starts with the data.
| | 03:22 | That's one of the reasons that I save
an additional version of the file--
| | 03:26 | it's either CSV or XLS file--that has
the headers for reference purposes.
| | 03:31 | But it says to go through
and to first read the dates.
| | 03:34 | I have date information with the month and
year, because when I went to Google Correlate,
| | 03:39 | you can download either information on a
week by week or month by month. The month by month
| | 03:42 | will look cleaner for this one,
so that's what I choose.
| | 03:45 | So that comes in as strings,
and then I use the get string method.
| | 03:49 | Then I go to pull out the popularity data, and that's
the actual Google search relative interest in it.
| | 03:57 | Below that, as I showed in the last movie on
scatter plots, I create x and y variables
| | 04:02 | using Processing's map function.
| | 04:05 | And what that does is it's able to take the
two variables about the row numbers and about
| | 04:10 | the popularity numbers and it's able to convert
them from their existing scale--for instance
| | 04:14 | for the rows it goes from 0 to 104 and I'm
able to change that to a 30 to 575 scale to
| | 04:20 | spread things out evenly.
| | 04:22 | Similarly with the popularity, it's able to
take a -2 to +4 scale and it's able to spread
| | 04:27 | it out from 150 to 20.
| | 04:29 | It's actually is changing the direction,
because I want higher numbers to be higher up on the
| | 04:33 | window, whereas conventional computer numbering
starts with low numbers of the top and gets
| | 04:38 | higher as it goes down.
| | 04:39 | So this flips it around for me automatically.
| | 04:41 | Then what I have is a couple of lines that
are currently commented out that I use just
| | 04:45 | to check that this is working correctly.
| | 04:48 | So for instance, this line right here will
print out 104 lines of the popularity data
| | 04:55 | formatted with one digit on the right and three
decimal places and with a plus or minus in front of it.
| | 05:03 | And then I've got off to the right, it'll do
a semicolon. Then it will do the converted
| | 05:08 | version of the popularity, where
it's mapped onto the 150 to 20 scale.
| | 05:12 | And so that's just something I
did to check that it was working.
| | 05:15 | I also turned on no loop because I didn't
want it to just keep repeating and repeating
| | 05:18 | in the console, but both of
those are commented out.
| | 05:23 | Then I used something called slicing for the
interaction, and what that does is it let's
| | 05:27 | me move the cursor from left to right behind
the data. And I've got it set up to bring in
| | 05:32 | a line, and when the line gets close to one of the data
values, it pops in some information about that one.
| | 05:40 | Now, in a later movie where I talk about forms
of interaction, I am going to talk about the
| | 05:44 | slicing a little bit more,
but you'll see how it works.
| | 05:48 | Mostly, I am saying only do it when we're in
the data window, and I want you to draw a line
| | 05:52 | of a certain height. And then if it's within
two pixels of a data point, then I want to
| | 05:58 | fill in this information that kind of
floats like a flag at the top of line.
| | 06:03 | Beneath that I draw the lines and the dots.
| | 06:06 | What I'm doing is I'm actually drawing the
dots at each data point as they go across
| | 06:10 | and then I am in drawing
vertical lines from the bottom up.
| | 06:13 | So this is somewhere in between sort of like
a bar chart and an area chart, but I think
| | 06:18 | it makes it clear and easy to read.
| | 06:20 | Also, because I have this stuff set in,
I don't need a line across the bottom.
| | 06:25 | Then I have something that reads the dates,
and then what it's going to do is it's going
| | 06:29 | to put in the January date. It's starting on a
January because the days that starts on January.
| | 06:35 | Then it skips to every 12th row.
| | 06:37 | So it let me know when the
first of the year starts.
| | 06:40 | Right down here,
that's where it places the dates.
| | 06:43 | I have to re-create the variables here,
but I do them for only every 12th case.
| | 06:47 | And then what this does is this changes the
way that the lines are drawn for each January.
| | 06:52 | It's the same color and everything, but it
is a thicker line and also, it puts a square
| | 06:56 | cap on it. And I don't
draw the ellipses anymore.
| | 07:01 | And so it makes it a way of
telling where the year starts and stop.
| | 07:05 | Then finally, below that I have two
blocks that are used for interaction.
| | 07:09 | The first one is about keyPressed, and then it
actually makes it so that I can manipulate
| | 07:15 | my little interaction thing with the
left and right arrow keys on the keyboard.
| | 07:20 | The other one is a function we haven't
seen before; it's mouseMoved and that says
| | 07:25 | this one only kicks in if the mouse
is not clicked and it starts moving.
| | 07:29 | There is other ways you could have
done this, but this is a shortcut one.
| | 07:32 | And between the two of these, you see they both affect
the variable mx. That stands for mouseX.
| | 07:37 | And they both affect the same way of
gliding through the data to get the values.
| | 07:43 | With that, I'll scroll back up to the top
and I'll click Run, and there's my data set.
| | 07:51 | Google searches for Georges Braque, and you
see it starts at January of 2004 and it goes
| | 07:57 | through July or August of 2012.
| | 08:00 | And I've got a thicker
red line for every January,
| | 08:03 | so it's easy to tell what each year starts.
And there's a couple things you can see here.
| | 08:07 | The most important one is you see that people
search for George Braque when school is in session.
| | 08:12 | The summer months are a
huge dip every single year.
| | 08:16 | Also, for reasons that are not clear, it looks
like Georges Braque's general popularity is
| | 08:21 | going down over time, at least slightly.
And we also have a few big spikes. For instance,
| | 08:27 | in 2007 there is a big spike in interest, and
there's a couple of others. But now let me
| | 08:33 | show you how we can interact with this.
| | 08:34 | I'm going to bring the mouse over.
You see I've got the mouse here on the side.
| | 08:38 | But as soon as it hits where the
bars are, the mouse will disappear.
| | 08:42 | And now I just have a line coming through,
with the information for each month as it
| | 08:49 | matches up that line.
| | 08:52 | So, for December of 05, the interest in Georges
Braque was at .559, so that's slightly above average,
| | 09:00 | whereas during the summer, August 06,
it's a standard deviation below average.
| | 09:06 | And here we got this spike, and
we've got another spike over here.
| | 09:10 | I don't really know what to make of those,
but I also want you to see that right now
| | 09:14 | I'm driving with the mouse, but if I let go
of the mouse and just hit the left key on
| | 09:19 | the arrow, on the keypad, now I'm driving in
with the keyboard. And there's the right arrow,
| | 09:24 | and I can stop and I can start moving the mouse,
and it picks up exactly where it left off.
| | 09:30 | And that's a really smooth form of interaction,
especially because it lets them go from one to the other.
| | 09:36 | It also works really well to have the cursor
just be completely absent so that people can
| | 09:41 | see just the data and
what needs to be in there.
| | 09:44 | Anyhow, this is one way to create a form of
line plot or a time plot as a way of showing
| | 09:51 | the prevalence of a single
quantitative variable as it changes over time.
| | Collapse this transcript |
| Creating bar charts| 00:00 | In the previous movies, the data that we were
charting was quantitative, that it measured
| | 00:05 | something that was more or less, and often it was
floating-point data, so we would have decimal places.
| | 00:10 | On the other hand, sometimes you're counting
discrete events or categories, but you're
| | 00:16 | counting the frequency of occurrence in
those categories. And when you have that kind of
| | 00:21 | data, it can be very
helpful to use a bar chart.
| | 00:23 | Now, bar chart is a very common kind of chart,
and it's done in Excel a million times a day,
| | 00:28 | but I'm going to show you how you can bring
some extra life and interest to a bar chart
| | 00:33 | by giving some interaction in Processing.
| | 00:37 | Now, the first thing I'm going to do is I'm going
to get a dataset about Olympic medal counts.
| | 00:41 | I went to databaseolympics.com, and I actually
got some information about the early 1900s
| | 00:46 | Olympics, when it turns out that
the tug of war was a team sport.
| | 00:50 | And what I have here is a complete list of
countries that won medals in the men's team tug of war.
| | 00:57 | There was only a men's event.
| | 00:58 | It was only a team event. But we have
all the countries that won medals.
| | 01:02 | Just as an interesting little note, the gold
medal in 1900 was won by a team with people
| | 01:06 | from both Sweden and Denmark.
| | 01:09 | Sweden went onto win another medals, Denmark
never won any other, so I've just attributed
| | 01:12 | that one went to Sweden.
| | 01:14 | Anyhow, but because I have my data in a
summary table, I'm actually able to put it straight
| | 01:19 | into the sketch. I'm able to embed it, and I'm
using a few arrays that are relatively short.
| | 01:25 | The first one gives the name of the countries,
gives the three letter abbreviations that
| | 01:29 | appeared in the dataset.
| | 01:30 | Those are also really good to use
as labels underneath the bars.
| | 01:34 | The second array is integers, and that simply
indicates how many medals each country won in this event.
| | 01:41 | And the third string is the full names of
each of the countries, which can be helpful
| | 01:46 | for when we do a rollover, to get
extra information about what happened.
| | 01:50 | Now, please note, I don't have the Table class
on a separate tab that I've had in several
| | 01:55 | of the other ones.
That's because I don't need it.
| | 01:57 | The data that I have is all right
here at the top, in these arrays.
| | 02:02 | That makes things a little bit simpler.
| | 02:03 | So now I'm going to scroll down to the setup, and I've
got a window that's 600 pixels wide, 200 pixels tall.
| | 02:09 | I've loaded two fonts, a titleFont and a
labelFont, by using Processing's FontCreator. And again,
| | 02:16 | you may or may not have the exact
same fonts available on your computer.
| | 02:20 | If you don't, you can either comment these fonts
out or you can create your own and replace them.
| | 02:23 | I've also turned on anti-aliasing, and I'm placing
the rectangles, because each bar is a rectangle,
| | 02:29 | I'm centering them so I can use the same coordinates for
placing the rectangles and for placing their labels.
| | 02:34 | In the draw loop, the first thing I do
is I'm placing the background. Also,
| | 02:39 | instead of using the palettes, like I've done
in most of the others, this time I am just
| | 02:42 | entering hex codes directly. And the
background is a dark gray and I've also turned off the
| | 02:49 | outline for the shapes.
| | 02:50 | Then what I do, I'm creating some variables that I
will use for calculating borders around the fence.
| | 02:56 | I have one called bb for the bottom border.
| | 02:58 | That means I want to have a, sort of a buffer
there of 40 pixels, and lb for the left border,
| | 03:03 | 75 pixels. And then I have a for loop.
| | 03:06 | I'll scroll that one up a little bit.
And what this does is it goes through the arrays one
| | 03:12 | item at a time, starts at zero.
And I do the length of the tug countries.
| | 03:18 | That's the one that have the three letters.
| | 03:20 | But since all of the arrays are the
same length, I can use any of them.
| | 03:23 | It's just counting to the same point.
| | 03:25 | In there, I also put in a variable w for the
width of the bars that I chose and how much
| | 03:30 | space I want between the bars, and then I
pull in an array of variables t, and that's how
| | 03:36 | tall each bar should be, and that comes from
how many medals they won multiplied times
| | 03:42 | 20 pixels to get it it's about
the right height for the window.
| | 03:46 | Then I have another one where
I calculate the X position.
| | 03:49 | That's going to be the left-right of the bar, and
then I have got a kind of complicated formula there.
| | 03:54 | What it is is I start by putting in the lb.
| | 03:58 | That's the buffer on the left.
| | 03:59 | So push everything over to a certain extent,
and then I want you to take the letter i,
| | 04:03 | and that's the increment. It starts, it goes
from 0 to 1 to 2 to 3, and I want to add on
| | 04:08 | .5 to that, so the first one gets 0.5, the next
one gets 1.5, and then I want to multiply
| | 04:14 | that times the combined width of the
bar and the space between the bars.
| | 04:19 | So what that does is it takes that unit and
just multiplies it and it gets me the midpoint
| | 04:24 | of every bar that I'm going to need.
| | 04:26 | So that's going to be the X
position, the left-right of every bar.
| | 04:29 | I'm also going to use that for the labels.
| | 04:31 | After that, I create a new array for Y,
and what that does is it gives me the coordinates
| | 04:36 | for the center of each bar going up and down,
because that's how we're positioning them.
| | 04:42 | And that one again, I have to get the full
height of the window, which is 200 pixels, and
| | 04:47 | then I subtract the bottom border, which is--I
recall, how big is the bottom border? It's 40.
| | 04:55 | So that's 200 minus 40.
| | 04:58 | There we are, back in the middle. And then from
that, I subtract half of the height of each
| | 05:03 | of the bars as I go through,
to get to their midpoint.
| | 05:06 | Again, a little bit of complicated algebra here,
but it makes it so I can place these things
| | 05:09 | using the center function.
| | 05:12 | Then what I have is I've got another if set,
and this is actually to use for rollovers.
| | 05:19 | And because I'm dealing with rectangles here,
I have to have these four if statements to
| | 05:25 | determine if the mouse is within the
rectangle for a particular country. And that's why I
| | 05:31 | do that mouseX is greater than the left border
of the bar, less than the right border, greater
| | 05:37 | than the top of the bar, and less than the
bottom of the bar in between. And if it does
| | 05:42 | all that then I change the
fill to a bright yellow.
| | 05:46 | Interestingly, you have the option of importing,
for instance, the image files or the flags
| | 05:51 | of each country and having those
pop up. That gets a little busy.
| | 05:54 | It's a little more complicated. Aesthetically,
| | 05:56 | it's not my first choice, but it's
something that you could do if you wanted.
| | 06:00 | Also, I'm going to, when we do the mouseover,
I'm going to bring up some extra information:
| | 06:05 | the full name of the country, along
with its medal count right next to it.
| | 06:10 | You'll see that I have a few
lines commented out at the bottom.
| | 06:13 | That's something I'm going to show a little
bit later, and that allows me to make it so
| | 06:17 | that the extra information
appears only if you click on each bar.
| | 06:21 | But right now, all you've got to do
is roll over and hover on them.
| | 06:25 | And then I have some code that says if you're
not hovering over it, leave it a light-gray--
| | 06:30 | that's the CCCCCC--and then I have the
actual draw the rectangle for each one.
| | 06:36 | So they all have their own x and y positions.
| | 06:38 | They're all the same width, so the w doesn't
need to have an index number. But they do
| | 06:43 | have different heights.
| | 06:46 | Beneath that is to place the labels, the
short three-letter versions of each country
| | 06:50 | name, beneath the bars.
| | 06:54 | The next little block of code is to put labels on
the left side of the axis, going up, to count off,
| | 07:02 | these are tick marks of 0, 1, 2, 3,
4, 5 medals that country has won.
| | 07:08 | And then the very last thing is
the title that goes across the top.
| | 07:11 | Now, I do want to mention something:
in earlier versions of this, I had that title a little
| | 07:16 | higher up in the code.
| | 07:18 | It was in the for loop, and it came up very
fuzzy, and it was because it kept overwriting
| | 07:23 | it several times during each draw loop.
| | 07:25 | It's still in the draw block, but I've taken
it out of the for loop that's in the draw
| | 07:30 | block, and that helps sharpen things up.
| | 07:32 | Anyhow, I'm going to scroll back up to the
top here, and I'll hit the Play button, and
| | 07:41 | there is our bar chart. And you see, for instance,
I didn't actually have to insert an actual
| | 07:45 | line across the bottom, because we have a very
nicely implied line by the bottom of the boxes.
| | 07:50 | We got a nice amount of separation. It's clean.
| | 07:52 | You can tell that Great Britain has won more
than Sweden and USA, who won more than any
| | 07:57 | of the other countries.
| | 07:58 | And as we bring the mouse over, you see each
one turns a bright yellow, and then we get
| | 08:03 | the full name of the country, along with the
indication, again, of how many medals that country won.
| | 08:11 | So it's a very basic form of interaction,
and what I'm going to do right now is I'm just
| | 08:15 | going to come back and I am going to make one little
switch here, because I have mentioned this one.
| | 08:22 | I am going to make it so that
you actually have to click.
| | 08:24 | I'm going to uncomment those, and I'm going
to comment that one and turn it off, and now
| | 08:31 | I'll run the chart again. And now when I mouse
over, it turns yellow, but the actual information
| | 08:36 | doesn't show up until I click on
the mouse, or I click on the bar.
| | 08:41 | So, if you want to have a two-stage interaction,
that's another choice on how you can do that.
| | 08:48 | Anyhow, a bar chart is a very basic chart,
but hopefully what you've been able to see
| | 08:52 | here is that we can get some more control
over the aesthetics and the arrangement and
| | 08:57 | a whole lot more control over the form of
interaction than you could in, for instance,
| | 09:00 | a standard spreadsheet program.
| | 09:02 | So, Processing can take even a very basic kind
of chart and make it something more interactive
| | 09:08 | and more interesting and
I think more informative.
| | Collapse this transcript |
| Checking out examples of maps, hierarchies, and networks| 00:00 | In the last several movies, we've introduced
you to a number of ways to create graphics
| | 00:05 | in Processing, both based on the formulas in
your sketches and also based on references
| | 00:10 | to external data.
| | 00:12 | We've also shown you how to create the basic
elements of interaction, by, for instance, being
| | 00:17 | able to click on shapes and drag them, being
able to roll over, have them change, respond,
| | 00:22 | provide extra information, being able to slice
through, being able to rotate, to zoom, to slide.
| | 00:27 | These really are the basic forms of interaction
for the great majority of data visualizations,
| | 00:33 | and I think you'll find that as you take those
elements, you'll be able to build almost everything
| | 00:38 | that you want to do.
| | 00:39 | However, I did want to show you a few kinds
of more elaborate data visualizations and
| | 00:46 | user responsiveness that because they
are rather lengthy, very time consuming,
| | 00:52 | I wanted to show you the code from the built-in
examples in Processing, really, so that you're
| | 00:58 | aware that they exist, and you can take a look
at them and see if they provide any kind of
| | 01:03 | inspiration or direction for your own work.
| | 01:05 | The three examples that I'm going to show
you all come from one book by Ben Fry, one
| | 01:09 | of the co-creators of Processing.
| | 01:10 | They are from his book Visualizing Data.
| | 01:13 | It's an excellent resource, and I
strongly encourage you to take a look at.
| | 01:17 | It's relatively advanced, but it is very
careful and steps through all the way.
| | 01:23 | I want to show you three of the examples
that come in the Processing example folder.
| | 01:27 | So, for instance, if you have Processing open,
you simply go to File, to Examples, and then
| | 01:35 | this window here pops up, Standard Examples,
and you go to Books, down to Visualizing Data.
| | 01:42 | And the two that I want to show you are first
from the one that says ch03-usmap where he
| | 01:48 | shows every step of a build of a map that
has some data that's responsive on it.
| | 01:53 | I wanted to show you number 16, step 16, very
quickly. And what you have here--I'll pull
| | 02:02 | that out--is that he's been taking step by
step of getting a map of the United States and
| | 02:07 | then superimposing what are actually random data points
in the middle of each state, along with a rollover.
| | 02:13 | This is great work.
| | 02:14 | This is where the Table class
that we've been using comes from.
| | 02:17 | And I want you to see some of the things that he is
able to do to serve as an inspiration in your own work.
| | 02:21 | I'm just going to hit Run here. And what we
get is a map of the United States, with a dot
| | 02:27 | in each central location.
| | 02:29 | And there are two things that happen. Number
one, if I press the space key, those dots change
| | 02:34 | to other random values, where the colors
indicate positive and negative and the size indicates
| | 02:40 | the magnitude of the number.
And they're totally random.
| | 02:42 | These look like voting results,
but they're just random numbers.
| | 02:46 | And what happens is first off, he has this nice
little compression thing that refers to
| | 02:52 | as the integrator, that makes it possible for
these to change slowly from one to the other.
| | 02:57 | The other one is if you hover over one of
these, it actually gives you the name of the
| | 03:02 | state and the current random number.
| | 03:05 | Also, he's got a wonderful bit of code that
makes it so that even when things are closed
| | 03:10 | into each other, you don't accidentally
queue the other state's information.
| | 03:14 | Anyhow, this is a way of working with latitude
and longitude, as well as data values, and providing
| | 03:20 | levels of interactivity.
| | 03:21 | I suggest you look at it. Again it's in the
Standard Examples of Processing, under Books/
| | 03:27 | Visualizing Data/ch03-usmap.
| | 03:31 | This one is step16_lethargic.
| | 03:35 | The next one I want you to take a look at,
if we close that, is from hierarchies, and
| | 03:42 | what this is is a way of looking at how things
are apportioned and groups that are contained
| | 03:46 | within groups, contained within groups.
| | 03:48 | In this particular example, what we're going
to be looking at is the filetreemap, and that's
| | 03:52 | the one that I have open right here.
| | 03:54 | A treemap is a space-filling diagram
that shows hierarchical relationships.
| | 04:00 | Now, in order for this one to run,
you're going to have to go and download a folder
| | 04:07 | from his own website.
| | 04:08 | You're going to need to download the treemap
library and the place you go for that--I'll
| | 04:13 | just show it you in a web browser--is to his
own web page, benfry.com/writing/treemap, and
| | 04:22 | that brings up this page
that says Treemap Library.
| | 04:26 | What you need to do is go to the second
paragraph and click on where it says library zip.
| | 04:31 | That will download a folder for you and put
it in your Downloads, and it shows up first
| | 04:36 | at library, but if you double-click on that,
it says treemap. And then what you need to
| | 04:40 | do is need to go to your Sketchbook folder
in Processing and find your library folder.
| | 04:47 | Mine is right here.
| | 04:48 | I have it under Documents/
Processing. And then you just drag it in.
| | 04:51 | Then you need to quit and reopen Processing, and then
the treemap library will be functional in there.
| | 04:57 | And what you find, when you open that one, is
you get this program that's going to look
| | 05:02 | at the size of files on your computer
disk in the folder that you designate.
| | 05:07 | Now, it also runs at a rather high
resolution natively, 1024 x 768.
| | 05:12 | So, for right now I've just bumped it down
to 800 x 600 so it all fits on the screen.
| | 05:17 | And here's how it works.
| | 05:19 | You click Run, choose a folder.
| | 05:21 | I'm going to go--so I'm going to go to the
desktop here and just choose my Exercise Files
| | 05:27 | folder that I have created for
this course, and I'll press Open.
| | 05:32 | What you see is that it looks at each of the folders
and it draws a space for each of them proportioned
| | 05:38 | to the amount of size
that that folder requires.
| | 05:40 | What you see from this one is I've
got a lot of little tiny ones.
| | 05:43 | There is Chapter 3 (Ch03), Chapter 4 (Ch04),
Chapter 5 (Ch05), 6, 7. 8 is big, 9 is miniscule,
| | 05:50 | 10 is tiny, and it's Chapter
14 (Ch14) that's huge.
| | 05:54 | And the reason for that is that's the one
where we actually saved Mac, Windows, and Linux
| | 05:59 | applications, as well as
JavaScripts of things.
| | 06:02 | I'm going to click on that one, and you see it
highlights and it shows me what else is in here.
| | 06:08 | There we have 14_02, 14_03. And I'm just going
to double-click on this one. And this breaks
| | 06:16 | it up into its constituent pieces, and you can see how
big each of the files is relative to each other.
| | 06:22 | So, this is--again, it's called a treemap.
| | 06:24 | It's an interesting way of looking at relative
sizes and how things are nested within each other.
| | 06:29 | It is, however, very complicated coding.
| | 06:32 | You'll notice that we have 1, 2, 3, 4, 5 separate
tabs in this one, as well as an external library.
| | 06:39 | That's why instead of me demonstrating how
to create it, I simply want you to be aware
| | 06:42 | that it exists, and I'd encourage you to look
at Ben Fry's book and add the sample code
| | 06:47 | that he has provided in
Processing to figure that one out.
| | 06:50 | The last one I want to show you
very quickly is under graphlayout.
| | 06:55 | A graph means also a network diagram. And I'm
going to show you this one that, right now
| | 07:00 | it bounces around a fair amount.
| | 07:02 | It's little weird. But what it's doing is
it's taking the text from Huckleberry Finn
| | 07:06 | and it's showing the
relationship between the words.
| | 07:09 | Again, this is another
wonderful piece by Ben Fry.
| | 07:11 | It's from his book, and it's included in
the Standard Examples in Processing.
| | 07:16 | And all I want to do is run it and
show you how it connects things.
| | 07:22 | Now, we think there maybe some little funky
right here, that's I'm just clicking and dragging
| | 07:26 | each of these pieces around, but it
shows the relationships between words.
| | 07:31 | Anyhow, this is a network diagram.
| | 07:33 | It can be used with social networks.
It can be used with telephone calls.
| | 07:36 | It can be used with anything that connects
with other things: scientific publications
| | 07:41 | that connect through referencing to other ones,
people who register in same courses together.
| | 07:46 | Anyhow, this is an elaborate version, and really
an advanced topic, but something that I want
| | 07:50 | you to be aware that it exists and that you
can explore, especially in consultation with
| | 07:55 | Ben Fry's excellent book, Visualizing Data.
| | Collapse this transcript |
|
|
12. Elements of Design for VisualizationIntroducing some principles of 2D design| 00:00 | In this movie, I want to talk to you not so
much about Processing in and of itself, or
| | 00:05 | even about data visualization per se, but I
want to talk to you about some of the principles
| | 00:09 | of design that can help you make more compelling
sketches and more informative data visualizations.
| | 00:15 | The first thing you need to know is that
informativeness is the major goal, and that is best achieved
| | 00:21 | when you try to keep
things as clear as possible.
| | 00:23 | The idea is that complexity is the enemy of
comprehension, and the complexity is not a
| | 00:29 | matter of the size of the data set--for
instance the number of observations--but has more to
| | 00:34 | do with the number of design elements that
you are trying to incorporate into a single
| | 00:37 | sketch or visualization.
| | 00:39 | And so what you generally want to try to do
is keep the design elements to a minimum and
| | 00:44 | try to maximize the size of the data set and
try to maximize the attention that your audience
| | 00:50 | is able to give to the data.
| | 00:52 | The less effort they have to spend in coding
and trying to simply wrap their heads around
| | 00:57 | your visualization and the more time they can
spend focusing on the data and its message,
| | 01:02 | the better you will have
achieved your particular goal.
| | 01:05 | Now, one of the interesting ironies here
is about the nature of interactivity.
| | 01:10 | Interactivity is part of what this
particular course is about, and interactivity makes a
| | 01:15 | lot of things possible that otherwise you would
have to spend days or hours trying to work through.
| | 01:21 | On the other hand, interactive elements do
take time and cognitive effort from the user.
| | 01:27 | They can also serve as a distraction.
| | 01:29 | They can lead people away from the data, and have
them spend time playing with the interactivity,
| | 01:35 | and so they're just focused on the
medium and not on the message per se.
| | 01:39 | Also, there's the problem that if you have
an interactive visualization, you can't just
| | 01:43 | print it on a piece of paper and hand it to
somebody; you need to give it to them in some
| | 01:47 | sort of digital dynamic way,
which can be a logistical challenge.
| | 01:52 | You want to keep things as simple as possible;
include the interactivity that is essential
| | 01:56 | to your storytelling mission,
but leave out the rest of it.
| | 01:59 | I like to think about the lessons of
one of my favorite pieces of design.
| | 02:04 | It's Apple's old white 2 1/2 button remote.
| | 02:07 | It's a very small piece, and it does all the
remote-control functions that I could possibly
| | 02:12 | want with my radio, and it's the only remote I
have that I can use without looking at it.
| | 02:18 | They also won a Red Dot Design award for
their product in 2006, one of over 60 that Apple
| | 02:23 | has won, which is extraordinary successful.
| | 02:25 | And a lot of it has to do with the clarity and
the simplicity and also really, the invisibility
| | 02:31 | of the user interface.
| | 02:33 | Back to data visualization.
You're trying to be clear.
| | 02:37 | You're trying to do your data justice, but
you want to do it in a straightforward manner.
| | 02:42 | So one thing to think about is how much
information are you trying to encode?
| | 02:47 | And how many values does each of
these pieces of information have?
| | 02:51 | So for instance, a 3D position of an object
is very communicative, very easy for people
| | 02:56 | to understand. A two-dimensional positioning
is probably the next most communicative, and
| | 03:02 | in a flat environment like a computer screen,
| | 03:05 | that's easy to deal with.
| | 03:07 | After that, the straight one-dimensional length or
height of something is among the most informative
| | 03:13 | and easiest to read.
| | 03:15 | Color and shape are intriguing and people
want to do a lot with them, but the trick
| | 03:19 | is, color is actually best used
as a qualitative indicator.
| | 03:23 | It's hard to read something continuously.
Even though you can put a picture of a color
| | 03:29 | spectrum it's not how people interpret color.
| | 03:32 | We will talk more about this in the next
movie, where we specifically focus on color.
| | 03:37 | And then also you want to make it as easy
as possible for people to compare values.
| | 03:42 | So for instance, length or unidimensional
measurement is just about the easiest way to compare values.
| | 03:49 | On the other hand, judgment of area and angles,
especially along curved lines, are notoriously difficult.
| | 03:57 | And what that tells us, more than anything, is
that pie charts are very hard to read, because
| | 04:01 | pie charts require that a person read both
an angle and the area of a pie in order to
| | 04:06 | compare with other pies.
| | 04:08 | And unfortunately, this means that Florence
Nightingale's rose diagram that I produced
| | 04:13 | at the beginning of this course is
actually one of the hardest-to-read diagrams.
| | 04:19 | It was very persuasive, but it's very difficult
to get the exact numbers out of that one because
| | 04:23 | it revolves on circular segments that project
in and out, so both angle and area, and it does
| | 04:29 | make it difficult.
| | 04:31 | Another principle is that redundant
encodings can make perception easier.
| | 04:36 | So for instance, if you're trying to separate
two groups in your picture, you can do them
| | 04:40 | with different colors or you can do them a
different shapes or you can do them with simultaneously
| | 04:46 | different colors and shapes.
| | 04:47 | So you have two methods of
encoding the differences.
| | 04:50 | Now, that makes it easier
to spot the difference.
| | 04:52 | There is a trade-off though; sometimes it means
that you've induced unnecessary complication;
| | 04:57 | other times it means that you've now lost one
potential method of distinguishing other variables,
| | 05:03 | and so there is a cost
associated with a redundant encoding.
| | 05:07 | And speaking of encodings, when you have a
graph, you need to make sure that you have
| | 05:12 | labeled things as clearly as possible and
that the labels and legends are as close as
| | 05:17 | possible so that people don't have to extend
across the paper, across the screen, to see
| | 05:22 | what they need to do.
| | 05:23 | There are a few other factors that come in
with just any kind of graphical representation.
| | 05:29 | If you have scales on your diagram, like a
scatter plot, try to maintain equal scales.
| | 05:33 | Also, start at 0 and don't have breaks in the
order unless there is compelling reason to do that.
| | 05:39 | If your data have a natural order,
try to keep that and work within it.
| | 05:42 | So for instance, I once had some students
who were making a bar chart of the number
| | 05:46 | of children in their family, and they thought
it wasn't important to put the most common
| | 05:51 | category first and then go to
the least common categories.
| | 05:54 | And so we ended up with the first bar was
for 2 to 3 children, the next bar was for zero
| | 05:58 | to one, the next bar after that was
4 to 5, and it was all out of order.
| | 06:02 | They just felt that the descending order in
terms of the height of the bar was useful,
| | 06:06 | but there's a natural order to
have in the number of children.
| | 06:09 | You want 0 at one end.
You want a whole bunch at the other end.
| | 06:12 | Similarly, with distance traveled, you want
to keep those things in the natural order.
| | 06:17 | Also, sometimes there's an implied order, or you
have to watch out particularly with association
| | 06:23 | charts about an implied
cause-and-effect relationship.
| | 06:27 | Now, sometimes you want to be very clear about
cause and effect, so for instance, if you're
| | 06:30 | doing a scatter plot, you want to make sure
that you put the cause on the bottom going
| | 06:34 | across the X axis, and you
want the effect going up the Y.
| | 06:38 | You flip it around. It can be very, very hard
for people adjust to that.
| | 06:43 | Also, when you have your scatter plot,
give your titles and label your axes. Identify
| | 06:47 | the source of your data if possible and when
it was gathered. You might want to include
| | 06:52 | what the actual questions were or the methods
that were used for gathering the data, because
| | 06:57 | that helps in judging the
representativeness of the data and the results.
| | 07:00 | If there are unusual data points anywhere in
your chart, you want to either point them
| | 07:04 | out yourself or make it very easy for
people to figure out what they are.
| | 07:08 | Similarly, if you did any transformations or
exclusions or other manipulations on your
| | 07:13 | data, you're going to want to make that clear.
| | 07:17 | Next, you want to consider ways to lead the eye
of the person looking at your visualization.
| | 07:23 | You want to highlight important bars, dots,
and cases, and you want to deemphasize or even
| | 07:28 | delete unimportant information.
| | 07:30 | So for instance, if you do a rollover and
you have decimal places, try not to use the
| | 07:35 | number of decimal places that your analysis
software can put out. Sometimes I have software
| | 07:41 | that puts out seven or eight decimal places
when all you need is one, or maybe even none.
| | 07:46 | Earlier, I showed that you can use one of
Processing's functions, the nf function, which
| | 07:51 | is a way of taking numbers and turning them
into a string format where you can specify
| | 07:56 | the number of digits, and that can reduce it to
a meaningful amount and keep it from getting
| | 08:01 | overly complicated.
| | 08:03 | Processing has other functions, like casting
into an integer or a ceiling function, a floor
| | 08:08 | function, a rounding function
that can deal with these things.
| | 08:11 | I also remember when I did tables of
correlation coefficients, sometimes I would make a point
| | 08:16 | of not even printing the correlations
that were not statistically significant,
| | 08:20 | so they simply didn't appear.
| | 08:21 | Instead of having to look at significance
tests or look for asterisks, the simple
| | 08:26 | presence of a correlation was enough to
suggest that it was statistically significant, and
| | 08:31 | then people would go ahead and try to decide
whether they felt it was substantively significant.
| | 08:36 | Now, there are some very important critiques
of data visualization, mostly by the author
| | 08:42 | Edward Tufte, who spends a lot of time
talking about what he calls chartjunk, and that is
| | 08:47 | stuff that's in the chart that is
either uninformative or even misleading,
| | 08:52 | so to give you an example, putting a false
third dimension on a bar chart. I know it
| | 08:57 | makes it look prettier, but it
separates the data from the axis.
| | 09:02 | It makes it harder to read.
| | 09:03 | Also people start doing things like judging by
depth or by volume, which can be very misleading.
| | 09:09 | Similarly, avoid things like drop shadows or
gradients or textures or other tricks that
| | 09:15 | provide some sort of flash but tend to
distract people and make it harder to read things.
| | 09:22 | Also, don't provide too
much detail on the axes.
| | 09:24 | It is okay to break it down and provide
occasional reference points on the axes. It's enough.
| | 09:30 | It's also even okay to have nothing on there if
interaction is able to provide the data for you.
| | 09:36 | Then again, I do want to say it's okay to
design something that's pretty, that's catchy, in
| | 09:41 | an effort to get somebody's attention, as long as you
can also be informative once you have their attention.
| | 09:47 | Now, I've got just a couple
words about typography.
| | 09:51 | There is a long and ongoing debate about whether
you should use serif fonts or sans serif fonts.
| | 09:56 | They have to do with the ease of
reading or the clarity of printing.
| | 10:01 | And I'm not going to get into that one.
Safe to say there are opinions on both sides.
| | 10:05 | I can tell you, there are a lot of people
who really hate Comic Sans font, and you might
| | 10:10 | want to avoid that, just so people don't
try to throw your stuff against the wall.
| | 10:14 | Also ornamental fonts, shaded fonts can be very
hard to read, and you want to use those hardly ever.
| | 10:21 | Also, don't put text on a complex
background that's got different shades of colors.
| | 10:26 | This reminds me of an Austin Powers movie
where they used this comic effect with
| | 10:30 | subtitles that would
selectively disappear and appear.
| | 10:33 | Try to reduce the amount of
text as much as possible.
| | 10:36 | Whenever possible, don't even have the text
there and have it come up when the person
| | 10:41 | interacts with the diagram.
| | 10:43 | Finally, as far as typography goes, avoid the
temptation to write things in all capitals.
| | 10:49 | It's difficult to read, and it
comes across as aggressive.
| | 10:53 | The moral of this particular lesson is not
that I am trying to teach you to be an expert
| | 10:57 | designer, but simply to avoid some common
errors and to give you some recommendations
| | 11:01 | on other places that you
can learn more information.
| | 11:04 | I think everybody has a pretty good sense of
design, and I find one of the best exercises
| | 11:09 | for this is to walk into a grocery store
and just go up and down the aisles and look
| | 11:13 | at the product packaging, and you can very
quickly identify which ones were well designed,
| | 11:19 | which ones were poorly designed, and which
ones people just didn't seem to care when
| | 11:22 | they are doing it.
| | 11:24 | And you can see that that sort of transfers
over to your own work in computer drawing,
| | 11:29 | in you're sketching, and in
your data visualizations.
| | 11:32 | With that in mind, I want to point you towards a
few references that give you much more information
| | 11:38 | and much richer examples,
and I strongly suggest them.
| | 11:41 | First, for anybody who is interested in
statistical graphics and data visualization, there are
| | 11:46 | the foundational books by Edward Tufte.
| | 11:49 | The first is his book The Visual Display of
Quantitative Information, which despite a very
| | 11:54 | dry title, is an astoundingly beautiful book
and absolutely worth your time to look at.
| | 12:00 | He has three other books that are also wonderful
and relevant to anybody who's trying to produce
| | 12:06 | graphics that convey information.
| | 12:08 | The next one is
Envisioning Information, from 1990.
| | 12:12 | Then Visual Explanations, in 97, and Beautiful
Evidence, 2006. And I strongly encourage you
| | 12:18 | to take at least a brief look at any of these.
| | 12:21 | Also, the O'Reilly Press has
several wonderful books.
| | 12:24 | They have for, instance, Beautiful Data: The
Stories Behind Elegant Data Solutions, by Toby
| | 12:29 | Segaran and Jeff Hammerbacher, and Beautiful
Visualization: Looking at Data Through the
| | 12:34 | Eyes of Experts, by Julie
Steele and Noah Iliinsky.
| | 12:37 | A third one that's directly relevant to what we
are doing is called Designing Data Visualizations,
| | 12:43 | also by Noah Iliinsky and Julie Steele.
| | 12:46 | And then finally, one of my favorites is a
website called FlowingData by Nathan Yau, who
| | 12:51 | has a wonderful book called Visualize This.
| | 12:54 | I strongly encourage you to take
a look at any and all of those.
| | 12:58 | And then, in closing, I also want to recommend
that you take a look at a wide range of courses
| | 13:03 | that lynda.com offers on design principles.
| | 13:07 | For instance, Shane Snow has several
short courses on creating infographics.
| | 13:13 | Nigel French has several on print designs,
such as designing a poster, a brochure, a
| | 13:18 | restaurant menu, et cetera, which would
be wonderful for layout and color use.
| | 13:23 | Don Burnett has a course
on typographic principles.
| | 13:28 | And then of course there are several on color--
| | 13:30 | I will mention those in the next movie--and
then a nearly limitless selection of courses
| | 13:34 | on web graphics and web design, all of which
would be relevant and useful for a person creating
| | 13:40 | online interactive data visualizations.
| | Collapse this transcript |
| Understanding color theory| 00:00 | In this movie, I want to introduce you to some
very basic concepts of Color Scheme management
| | 00:06 | and introduce you also, to some resources
for learning more about how you can work with
| | 00:10 | and use color in your own
sketches and your own visualizations.
| | 00:14 | The first thing I want to do is introduce
you to three different web-based tools, all
| | 00:18 | of which have fabulous resources and you
can try each one for different purposes.
| | 00:24 | The first one that we've looked at before is
Adobes Kuler and it's at kuler.adobe.com,
| | 00:31 | and what you get here when you first click in,
is you see a bunch of Color Schemes and
| | 00:36 | in fact, you can just come and click on
one and it fills up the entire page.
| | 00:39 | Click back and you see that you have a whole
collection of palettes that you can try. What's
| | 00:45 | more significant is that you can click on one of
these and you can get all sorts of information
| | 00:50 | you need, for instance; the Hex
codes, the HSV, the RGB codes.
| | 00:54 | But watch also what you can do.
| | 00:55 | One of these is set as the base color.
| | 00:56 | It's this color right here.
| | 00:58 | And if you want to you can start playing
around with Common Color schemes, for instance we
| | 01:03 | have an Analogous color scheme.
| | 01:04 | It's going to take all colors
that are very close to each other.
| | 01:08 | And truthfully these are very soothing.
| | 01:10 | You can often get a reasonable amount of differentiation
with an Analogous color scheme without being too jarring.
| | 01:16 | Or you can do a Monochromatic, you see on the
color wheel they are all in one straight line.
| | 01:21 | A Triad on the other hand is a temptation,
but unfortunately Triads often have too much
| | 01:26 | contrast in them, and it can make it feel
disjointed when you're looking at a picture. Complementary
| | 01:33 | has two different sides, and that can give you
sort of a main color with small variations
| | 01:37 | and highlight color.
| | 01:40 | Compound starts to introduce a lot of colors
and you want to be aware of the risks of that.
| | 01:44 | Again, you're trying to convey an impression
of cohesion and of coherence and you don't
| | 01:49 | want to have too many colors, just enough
to highlight the things you need to do.
| | 01:54 | And this one Shades, all
shades are the same color.
| | 01:56 | Again, there may even be enough contrast
within this to be useful for what you want to do.
| | 02:01 | But one of the most interesting things about
Adobe's Kuler is this one right over here. If
| | 02:06 | you come to Create and From an Image because
what it can do is it, can take a picture and
| | 02:12 | allow you to highlight parts of the
picture and get the palette from that picture.
| | 02:17 | You have five little dots in here and you
can move them around and you can see how the
| | 02:22 | color changes as you go through.
| | 02:25 | And you can go to Flickr and just
choose all sorts of different pictures.
| | 02:29 | So let's go a few pages in. So we've got a photo
right here and you can just start identifying
| | 02:36 | the palette in it or the things you
would like to have in a palette.
| | 02:40 | Even more importantly, you can upload your
own photos by clicking on here, putting your
| | 02:45 | own photos and identifying the colors in them.
| | 02:47 | It's a great way to just get
the Hex codes or the RGB codes,
| | 02:51 | but also for ways of looking how you
could incorporate other colors into it.
| | 02:55 | Plus you see here on the left we have the
Select a Mood, and what that's going to do
| | 02:58 | is it's going to take the colors that are in
the picture and suggest color schemes that
| | 03:03 | might go with that.
| | 03:05 | So we have the colorful one, the bright one.
| | 03:09 | This is a very monochrome picture. I am
not getting much variation on these.
| | 03:12 | In fact, I better go get a different picture.
| | 03:15 | And so now what I do is we have the Colorful
by default and we do have very bright colors
| | 03:19 | down. The Bright, the Muted--you can that
we're getting different parts of the same
| | 03:24 | photo. The dots are moving
around to show us what it's getting.
| | 03:27 | And so this is one of the really great
things about the Adobe Kuler system.
| | 03:31 | The next one I want to show you
is the Color Scheme Designer.
| | 03:34 | And this one also has some
great color theory tools.
| | 03:37 | You can for instance, specify the complementary
scheme were we get a bright apple green in there.
| | 03:41 | It's kind of overwhelming. The triad which is extremely
overwhelming. The tetrad which is even more so.
| | 03:47 | So, the analogic, those are very bright colors
for an analogic, but we can rotate them around
| | 03:53 | and maybe get something
that's less overwhelming.
| | 03:55 | So for instance maybe right there.
| | 03:58 | An accented analogic includes a bright
contrast there, and so there may be situations which
| | 04:02 | want to do that, but the really cool thing
about the Color Scheme Designer is on the
| | 04:07 | bottom right, where you get
to pick the page examples.
| | 04:11 | It'll show you a mockup web
page with those color examples.
| | 04:14 | You can also pick a dark page.
| | 04:17 | For me the ability to see it in context is one of
the great things about the Color Scheme Designer.
| | 04:21 | Also, I should mention that you can check
for Colorblind and then you can
| | 04:27 | adjust appropriately or you
can specify different Color spaces.
| | 04:30 | For instance using what
are called web safe colors.
| | 04:33 | The third tool I want to
show you is Colorbrewer.
| | 04:36 | This one was specifically
developed for cartography.
| | 04:39 | But what it really does that's neat, is
it allows you to specify categories.
| | 04:42 | How many different categories
do you need to have?
| | 04:45 | That's the number of classes on
your map. It's on the top left.
| | 04:48 | Right now we have 3, but let's say you need
5, and then what you can do is this says the
| | 04:52 | nature of your data and this is trying to get
a sequential more to less, and you'll notice
| | 04:57 | it's not fading in from one color to another.
| | 04:59 | It's using the same shade.
| | 05:00 | People are pretty good at
reading the same shades.
| | 05:03 | I am going to come down for just a moment.
| | 05:05 | I am going to turn off the borders and so
that's a sequential one and you can pick different
| | 05:11 | colors for that if you want.
| | 05:13 | But you also have the option of getting what's
called a diverging. It's where it's like going
| | 05:17 | into the positive and the negative only a
little bit and strongly in both cases, and
| | 05:22 | that's not too difficult to read, but
the bottom part does get overwhelming.
| | 05:27 | And the other one is qualitative where it's
simply trying to create different distinctions,
| | 05:31 | and I got to tell you, this one's kind of a
disaster. It looks like Easter eggs and that's
| | 05:35 | just too much going on for five groups.
| | 05:38 | Three you might be able to manage, but
that's the neat thing about this one.
| | 05:43 | Colorbrewer is also able to specify colorblind
safe palettes. I like this one, the photocopy-able
| | 05:49 | palettes, because sometimes things get totally
destroyed in photocopies or even just a printer
| | 05:53 | friendly ones and it gives
more information about each one.
| | 05:57 | So those are some of the things you
can do with the Colorbrewer tool.
| | 06:00 | I encourage you to take a look at each one of
these as you try to figure out color schemes
| | 06:03 | that it would work for
your own visualizations.
| | 06:06 | And with that, I want to refer you to three
different courses that are also offered by lynda.com.
| | 06:12 | The first one is Working with Color which
is produced by Bruce Heavin, and this one is
| | 06:18 | a wonderful background of the general
principles of color. We talk about the relative value,
| | 06:23 | the relationships, and so on.
| | 06:26 | The second one is Color Management Essential
Training where you learn about the workflow
| | 06:32 | in various programs, as well as the different
versions of what is called color space. I like
| | 06:38 | color management in Mac OS X, working with
Adobe, and so on, and then the last one is a
| | 06:43 | short course by Mordy Golding on using Kuler,
which I showed you just a moment ago, and so
| | 06:49 | this one is great.
| | 06:50 | It's only 47 minutes total and teach you
everything you need to know about using Kuler to it's
| | 06:56 | full power and designing your own sketches and your
own online data visualizations, and between those
| | 07:02 | I think you should have an excellent start
and working with your own judgment and your
| | 07:05 | own experience, I think you'll be able to
produce some spectacular illustrations that
| | 07:09 | are both attractive and
informative to your audience.
| | Collapse this transcript |
|
|
13. Elements of InteractionInteracting with zooming, rotating, and sliding| 00:00 | When you create a data visualization or
any other sketch in Processing, one of the
| | 00:04 | great joys is being able to interact with
the sketch and take a look at it personally
| | 00:09 | to explore it, to rotate it, to walk around it, and
to see how it looks from different perspectives.
| | 00:14 | And for data visualization
this is a critical component.
| | 00:16 | In fact, that's why the course is called
Interactive Data Visualization with Processing.
| | 00:21 | And what I want to introduce you to is some
of the most fundamental and most important
| | 00:26 | kinds of data visualization
interactions that you can have.
| | 00:29 | There are also very simple ones.
| | 00:31 | In fact, I'm going to show you with a very
simple sketch of a few circles, how you can
| | 00:35 | introduce some really easy
interaction, but also very productive.
| | 00:41 | Now this one, I just want you to open up
the code. I'm going to walk you through it.
| | 00:44 | So this is exercise 13_01, and this is
simply to introduce some forms of interaction.
| | 00:50 | The first thing I have at the top is I'm
going to be drawing some circles and so I have a
| | 00:53 | variable for their diameter; D is for diameter,
the circles are going to be 40 pixels in diameter.
| | 00:58 | Next, what I have are a few variables that
are directly relevant to the interaction.
| | 01:03 | I'm going to be allowing people to shift the
sketch around and that could be a form of
| | 01:09 | translation. We've talked about that before.
| | 01:11 | And so what I have here are two versions of
the "x" and "y" with the "o" for origins, so
| | 01:16 | the x-origin and the y-origin.
| | 01:19 | Those are variables that can be altered.
| | 01:21 | The next one is for zooming in.
| | 01:23 | That's going to be working on the scale
function and transformation, and the default value
| | 01:28 | is 1, the original scale.
| | 01:31 | And then the last one of those four is
float and I've got an angle variable here.
| | 01:36 | And what this is going to do is for rotating, and
it's going to start at the default value of zero.
| | 01:42 | So I have variables here that are going to
work into zooming, into rotating, into shifting
| | 01:47 | the sketch around.
| | 01:49 | So now what I want to have is a
pretty quick setup statement.
| | 01:51 | I have a window that's 600x200 pixels, and
I am centering the origin in the middle of
| | 01:58 | the sketch to begin with.
| | 02:00 | So while we're still in setup I'm taking the
origin from the top-left and bringing it to
| | 02:04 | the very middle of the sketch.
| | 02:06 | And the reason I'm doing that is because
otherwise that the zoom and the angle do very funny
| | 02:10 | things if you leave the origin off to the sides,
so centering it can be really critical for this.
| | 02:16 | Then I have the anti-aliasing turned on with
smooth, and I've turned off the outlines for
| | 02:20 | the circles with no stroke.
| | 02:22 | Then we go down to draw, and I have sort of a
steel blue background, and then I have the
| | 02:27 | translation variables here again, and the
reason they're appearing is because I'm going to
| | 02:32 | make it so that those can change.
| | 02:35 | So they got declared globally at the top.
| | 02:38 | They got initialized in the setup statement, but
here they are made so that they can be dynamic.
| | 02:43 | The same is true for the scaling
variable and for the rotating variable.
| | 02:48 | And then what I have is I'm going to
draw five circles, five ellipses.
| | 02:52 | They're all 40 pixels in diameter.
| | 02:54 | They're all straight down the middle.
| | 02:56 | They're at just 100
pixels apart from each other.
| | 02:58 | And all I'm doing here is I'm
changing the fill slightly.
| | 03:01 | They're going from darker to lighter as they
get to the middle, so medium dark, medium
| | 03:06 | light, rather light, and back again.
| | 03:09 | And then beneath that I have the code
that makes the interaction happen.
| | 03:14 | And here's what's going on here.
| | 03:16 | Two of these forms of
interaction revolve on key presses.
| | 03:20 | It's a very simple kind of interaction, and
first what it means is if a key is pressed
| | 03:25 | then look at this block, and
then I have nested if statements.
| | 03:28 | It says an if that key is coded, because if
I'm just asking for the 'A' or the 'B' key,
| | 03:34 | those aren't coded, if those are just regular
ASCII key and they stand for themselves, but
| | 03:37 | I'm going to be using the arrow
keys and those are coded ASCII keys.
| | 03:41 | And so if a key is pressed and if it's coded,
and if the key code is up, and by the way
| | 03:47 | please notice the two equal sides, so we get
the equality statement there, and then if
| | 03:52 | it's up then I want you to
zoom in just a little bit.
| | 03:56 | Every time you cycle through
and the button is held up,
| | 03:59 | I want you to increases the zoom by just .03.
| | 04:03 | You can change that if you want, but
I found that one works pretty well.
| | 04:06 | Then I put an "else if".
| | 04:07 | On the other hand, if it's the down
one then I want you to zoom back out.
| | 04:12 | And if it's the right one, I want you to
increase the angle and rotate clockwise, and if it's
| | 04:18 | the left arrow I want you to decrease
the angle and rotate counterclockwise.
| | 04:23 | So that gets in the shifting to the left and
the right, and it gets into the rotating.
| | 04:28 | And then I have another one down below that's
included in the key code and that is if key
| | 04:33 | is equal to an empty
space, that's the spacebar.
| | 04:37 | What that's going to do is it's going to reset
the drawing back to the center on everything.
| | 04:41 | So a spacebar will reset, and then I've got one
more little piece of information down here.
| | 04:46 | We actually have a
function we haven't used before.
| | 04:48 | It's called mouseDragged.
| | 04:50 | Really it's just saying, if the mouse is
clicked and the mouse is moved then do this, but
| | 04:55 | I wanted to make it so that people could drag
the sketch around and that let's them do it.
| | 05:01 | Now you may remember from earlier "xo" and "yo"
define the origins in their translated
| | 05:07 | form, and what this does is it let's me click
anywhere on the screen and then the origin
| | 05:13 | will follow in the
direction that we're clicking.
| | 05:15 | So I don't have to click right on the origin.
| | 05:16 | I can click anywhere and the whole
thing will translate however I drag it.
| | 05:21 | So this is very simple
interaction, but it's very effective.
| | 05:23 | I'm just going to scroll
back up to the top here.
| | 05:26 | And I'll hit Ctrl+R to run; that's on Windows,
Command+R on a Mac, and there is my five dots.
| | 05:32 | Again, a very fundamental one,
but let me show what happens.
| | 05:35 | First I'm going to hold the Up key and I'm
zooming in, then I will hold the Down key,
| | 05:40 | and I will zoom back out.
| | 05:42 | Turn the right key, rotate clockwise;
left key, I can zoom in and do those.
| | 05:50 | It does one at a time.
| | 05:52 | And then I can also drag with the mouse.
| | 05:54 | I'm going to come over here,
I'll click down and I can drag.
| | 05:59 | And now, I've lost the whole
thing and I don't know where it is.
| | 06:01 | I can just hit the spacebar and it
comes right back to where it was.
| | 06:05 | And so these are very fundamental things, but they
really are the basic building blocks of interaction.
| | 06:10 | The ability to zoom, to select, to focus in on
what you want including rotation, and above
| | 06:16 | all to be able to reset and
get back to where we were.
| | 06:18 | These are critical steps in being able to
visualize and these are some of the most important
| | 06:22 | things you can learn in working
with data visualization in Processing.
| | 06:26 |
| | Collapse this transcript |
| Implementing slicing| 00:00 | One helpful way of interacting with
data is with what's called slicing.
| | 00:04 | Now there's a few different versions of this,
but the version of slicing that we're going
| | 00:08 | to be using is basically a lateral only hover.
That is, you're driving a line over data points
| | 00:15 | from left to right, and when you get to them, it
will bring up the information that you want.
| | 00:19 | It will do the interactivity at that point.
| | 00:21 | Now a couple of chapters ago, we did a movie
that featured some slicing and that was the
| | 00:27 | one on the line plot, and what I'm doing is
I'm bringing up the code on that one again,
| | 00:31 | but I want to show you a little bit more
about how we did the slicing, how it functioned
| | 00:35 | and some of the choices that went into it.
| | 00:37 | So, let me first show you exactly what it
looks like again. So I'm going to just hit
| | 00:41 | the Play button and here we bring up
this Georges Braque Google search data.
| | 00:45 | You see I've got a cursor here. As I
bring it over a couple of things happen.
| | 00:50 | Most significantly, the cursor disappears.
| | 00:53 | Also I have a reference line, the tall tan
line that goes behind all of the red lines
| | 01:00 | and that serves sort of as my slicing cursor,
and then I have some information that pops
| | 01:05 | up on the top. I have the month that's been
depicted and the actual Google search value
| | 01:10 | for that particular month.
| | 01:11 | It's a positive or negative number
and I've got three decimal places.
| | 01:15 | Now I want to explain a couple of choices
here, number one, why I turn the cursor off.
| | 01:19 | That's going to be pretty easy if I just
show you what it's like with the cursor on.
| | 01:22 | All I'm going to do is come back to the
drawing and right here where I have noCursor,
| | 01:26 | I'm just going to comment that out and run
it over again, and now what you see is that
| | 01:32 | the cursor really is intrusive. It takes a big
amount of space and it becomes the dominant
| | 01:37 | visual element. It has nothing to do with the
data and so it just shouldn't do that. It just
| | 01:43 | needs to be out of the way, and in fact, it
turns out that since we're doing just a horizontal
| | 01:47 | slicing anyhow the line source as a
great cursor all on its own, so I'm going
| | 01:50 | to take the cursor out again. And see, there's
no ambiguity about what's being controlled
| | 01:55 | and where it is and that works well.
| | 01:57 | The next thing I want to show you is that I
made a point of putting the tan line behind
| | 02:02 | all the other lines, because I still want
the emphasis on the lines, and I also make
| | 02:06 | sure that the reference line, the slicing line,
was no thicker then. It's actually the same
| | 02:10 | thickness as the lines and it's a much lighter
color, because I want to draw the attention
| | 02:14 | to the data itself and because the slicing
line is moving, it's very easy to find it
| | 02:19 | even if it were much lighter color.
| | 02:22 | Now a couple of things that deserve some explanation;
this line right here and this is the "if"
| | 02:27 | loop that brings up the information, and so
what I'm saying is if the line is right next
| | 02:33 | to a data point than bring up the
information posted on the top.
| | 02:38 | So you see for instance when I'm in between
I don't have anything, but when I get
| | 02:43 | close to one, the data pops up.
| | 02:46 | Now originally, what might seen like a
logical thing is to just say when the mouse is on
| | 02:52 | the data point, but it turns out that sometimes
that's what this one is. It just says if mx which
| | 02:58 | is the mouse x is equal than
it needs to be equal to X.
| | 03:02 | If it is just equal to X, two equal
signs, then run what we're looking for.
| | 03:09 | You see sometimes it's a
little hard. It doesn't register.
| | 03:13 | Part of that is because the red lines are not
necessarily drawn on the pixels themselves.
| | 03:18 | They're done with the floating point, they
could have decimal calculations, and so it
| | 03:21 | turns out that by making it
that has to be exactly the same.
| | 03:25 | It's useless, in fact I'm not getting anything.
| | 03:29 | And so by introducing a little bit of wiggle
room, what I did, let me comment that one
| | 03:34 | back off and turn this one back on, was I said
as long as it's within two pixels to either
| | 03:39 | side, because I know that the bars are about
5 pixels away from each other. It's actually
| | 03:44 | more like 5.47 or something like that, but
as long as I'm within two pixels then it's
| | 03:50 | close enough. I don't need to snap to the
line, I just need the information to pop up
| | 03:55 | obviously for one or the other, so I'm going
to bring that back up, and now you see as
| | 03:59 | long as I'm close to one, I get this information
and there's enough wiggle room that that works well.
| | 04:04 | The last little detail I want to show you
for the slicing here you has to do with the
| | 04:07 | numbers that are coming up, that
looks like a flag on a flag pole.
| | 04:10 | The first one is the string for the date and
that just sort of is what it is, but the one
| | 04:15 | beneath it is the actual value.
| | 04:18 | There are some formatting going on here and I
want to take a look at the code directly beneath.
| | 04:22 | What we have here is this is the code
that produces that text on the flag pole.
| | 04:27 | This does the dates that brings in the string
variable, and places it next to the line and
| | 04:31 | this brings in the actual numbers from Google.
| | 04:34 | Now this function right here is the one
that deserves a little bit of attention.
| | 04:38 | I'm using the processing function nfp and you
can think of that as number format positive
| | 04:43 | negative, and what it does is it takes a floating-
point number and it turns it into a string variable,
| | 04:50 | and the reasons I would want to do that is
because this makes it so that the NFP version,
| | 04:55 | you can remember there are several versions
of NF, NFS, there is bunch of them, but the
| | 04:59 | NFP makes it so that every number has either
a positive or negative in front of it and
| | 05:04 | if you're using a font that has numbers of
uniform spacing than that lines things up very
| | 05:10 | nicely, so the numbers aren't
bouncing back and forth as you move across.
| | 05:14 | Also you get to specify exactly how
many decimal places. In the data set,
| | 05:18 | I know for instance there are some that only
have two decimal places, because the third
| | 05:21 | one is zero, so we include them, and again that
would introduce some jumping into the numbers.
| | 05:26 | That would be distracting from
looking at the data itself.
| | 05:31 | It would be looking as sort of these little
apparitions that are coming up and let me
| | 05:34 | show you what it looks like without it.
| | 05:36 | It's a small difference, but
it's enough I think to matter.
| | 05:39 | So I'm going to just put the popularity number
without the formatting and the NFP, and when
| | 05:45 | I run it now, see for instance,
now there is a positive one.
| | 05:48 | It just shows up and then I go to positive and there is
a negative, and so those are changing around a little.
| | 05:54 | Okay, that one actually does
have the third decimal place.
| | 05:57 | It must have included that one in the text
file, but I still think that the appearance
| | 06:01 | and disappearance of the positive or negative
is a little bit distracting and you can also
| | 06:05 | imagine situations where if you had a dataset
that have seven decimal places, and some of
| | 06:10 | them had one, some of them had
two and some them had seven.
| | 06:13 | It'll be bouncing all over the place. It would
become the visually dominant aspect, the changing
| | 06:18 | of the number of decimal places,
so I'm going to come back here.
| | 06:21 | I'm going to comment that one off and put
this one back on, save that and run it, and
| | 06:27 | now you can see as we go from the positives
to negative, I think it's a smoother position
| | 06:30 | because the initial digits don't
change their position as much.
| | 06:34 | A slicer is a good way of moving through a
one dimensional plane in terms of getting
| | 06:39 | extra information about what you're looking
for and these are some of the details that
| | 06:43 | can make the slicer work a little
bit better in your own visualizations.
| | Collapse this transcript |
| Using rollovers| 00:00 | Another common form of interacting with data
visualizations and sketches in general is
| | 00:05 | by rollovers and clicking.
| | 00:07 | Now so far, we've done zooming and
rotating and sliding and we have done slicing.
| | 00:13 | Rollovers are familiar.
| | 00:14 | We've done them before were you go over
the top of something and it changes.
| | 00:18 | In this example, I am going to be using a
sketch that we did a couple of chapters ago
| | 00:22 | which was on bar charts where I am using the
Olympic data from the early 1900s on the tug
| | 00:28 | of war as an Olympic event.
| | 00:30 | Except this time what I'm doing is I want
to show you a little more detail and also
| | 00:34 | in the last one, I mentioned that you could
use flags to pop up on the bars as a way of
| | 00:40 | highlighting things and that's what we
have actually done in this particular case.
| | 00:43 | So let me just explain the
few things that are different.
| | 00:46 | The font stuff at the top is the same. The
string of the country abbreviations is the
| | 00:50 | same. The array of the medal counts is the
same. The string array of the full names of
| | 00:57 | the countries is the same.
| | 00:58 | The next two are new, PImage is the processing image
format and I've made an array to hold the flags.
| | 01:06 | Now unfortunately, you have to do this in a
multi step process, really Processing only
| | 01:10 | wants me to declare how long the array is, and so
what I did is I simply grabbed the country's
| | 01:16 | list and said if the same length is that.
| | 01:19 | And then what I did is I created a separate
array with the names of the image files.
| | 01:24 | Now in this particular example, I use the
three character abbreviations of the countries
| | 01:28 | and I did all PNG ping files.
| | 01:31 | Ping files are nice because they support
transparency, and we got all of these files and put them
| | 01:36 | into the sketches data folder.
| | 01:37 | In fact, let me show that to you real fast.
| | 01:40 | So here's the sketch. It's in it's own folder
right here and here's the data folder and
| | 01:45 | now you see that I have flags
for several different countries.
| | 01:49 | You also notice that the images are slightly
different sizes and it turns out that that's
| | 01:52 | completely irrelevant because we're going to
have Processing automatically resize and just
| | 01:56 | squish them to fit the bars that they go in, and
I'll show you the code for that in a minute.
| | 02:01 | So the two new arrays here are for the image
arrays where I simply say how long it is,
| | 02:06 | and then I have an array with the
actual names of the image files.
| | 02:09 | Then I am going to scroll down a little bit.
The setup is the same, come down little further
| | 02:16 | and the 4 loop is the same except at the bottom
of it, I've added flags as it's going through
| | 02:22 | the arrays item by item and it's loading and
how tall each item should be based on their
| | 02:29 | medals wins and it's loaded in
the "x" and the "y" coordinates.
| | 02:32 | I also am having it load in the names of the flag files,
so that SWE.PNG for Sweden's into the flags array.
| | 02:41 | Previously I can only see
have how long it is now.
| | 02:42 | I can actually put the names
of those files into the array.
| | 02:46 | Then we go down a little further and this
is the hovering code. This is the key part
| | 02:51 | for what we're doing right now.
| | 02:52 | Because the bars are rectangles I need to
use the four-part conditional. I need to check
| | 02:58 | that the mouse has gone inside the bar, that
it's gone past the left side but it has not gone
| | 03:04 | past the to right side. That it's below
the top and that it's above the bottom.
| | 03:08 | And because I've centered the bars that way I
could use the same x-coordinates for the labels.
| | 03:13 | I have this little thing where first identify
the center of the bar and then I add or subtract
| | 03:18 | half of the width or the height to
specify the boundaries of the bar.
| | 03:23 | We come down a few lines here, I specify the
fill, then I bring in the font, and then I say
| | 03:28 | that I am going to be centering
the text. Then I bring in the text.
| | 03:32 | So if we're hovering over a bar it will bring
in the full name of that country along with
| | 03:39 | it's medal count and it'll put it right above the
bar. That's what the one that says text tugNames is.
| | 03:44 | Also I am going to put the image into the
bar so I'll use imagemode (CENTER) so I can
| | 03:49 | use the same coordinates that produce
the bar where we used Ridgemont Center.
| | 03:54 | And so what I do is I specify the image. What
I need to input is the name of the file and
| | 03:58 | I say go to the array flags and go to the
indexItemI and that will be for instance BL.PNG
| | 04:07 | for Belgium's flag.
| | 04:08 | And then I want you to get the same x-coordinates
and y-coordinates that are used for pushing
| | 04:13 | the rectangle in, and then I want you to adjust
the size of the Ping files so that it's the same
| | 04:18 | width of the bar, that's "w" and that's the same for
all of them, and it is the same height as that
| | 04:23 | particular bar and that's
"t" for the I index number.
| | 04:28 | Also the next one is important. It's to turn off
the fill and the reason for that is because
| | 04:32 | the rectangles are drawn outside of the
hovering loop and if I don't shut off the fill, the
| | 04:39 | rectangles will just draw right over the top
of the flags, and I'll lose the effect, and
| | 04:44 | it's little hard to juggle,
because they're in different loops.
| | 04:47 | But if I simply turn off the fill that will
carry over and the rectangle will draw it's
| | 04:52 | just because it has no
fill and it has no stroke.
| | 04:54 | You can't see it.
| | 04:55 | And so what remains is the flag and
that's the important part of this.
| | 04:59 | So let me show you the final effect.
| | 05:00 | I am just going to come up and press
Run and so far this looks the same.
| | 05:06 | Now in the previous version, if I came over
and I hovered over something it would turn
| | 05:10 | yellow and it would put the statistics above,
now if I hover over I get the country flag
| | 05:16 | along with the full name of the country and
the number of medals they have won in this
| | 05:19 | particular event.
| | 05:21 | And the flags have been
distorted to fit into the bar.
| | 05:26 | By the way, for you history buffs, we're aware
that these are not the historically accurate
| | 05:31 | flags for these countries in the early 1900s,
nevertheless, we thought it would be a more
| | 05:36 | informative to use the flags that were familiar
to people right now and also given the unusual
| | 05:40 | shapes as some of the other flags,
| | 05:42 | these ones just fit better.
| | 05:43 | But you get the idea. As you just roll over,
| | 05:46 | you get a flag for the country and you get
its name and the number of medals they won,
| | 05:51 | and that's a very simple, but eye-catching form
of interaction in this particular visualization.
| | Collapse this transcript |
| Introducing the GUI libraries| 00:00 | Before we leave this section, I wanted to
introduce you to one other topic of things
| | 00:04 | that you can use from your sketches to
facilitate interaction between the user and the data.
| | 00:09 | What there are are several contributed libraries
that exist to provide a former graphical user
| | 00:15 | interface to your sketches.
| | 00:17 | And fortunately, these ones are all
accessible through Processing's Add Library function.
| | 00:22 | So what I'm going to do is, form a Processing
sketch, it's just a blank one,
| | 00:27 | I'm going to come over here to where it says
Sketch and come down to Import Library. From
| | 00:32 | there I go to Add Library at the top.
| | 00:35 | And Processing 2.0 has a new Library
Manager that really facilitates a lot of this.
| | 00:39 | And what I'm going to do is I'm going to come
back up to the top and there are few libraries
| | 00:43 | in particular that I want to look at.
| | 00:44 | The first one, I can just go
straight down to the GUI category.
| | 00:49 | I want to get the first three of these; I
want to get ControlP5 which has a range of
| | 00:55 | controllers to build custom graphical user
interfaces inside a sketch or separate windows.
| | 01:01 | And I click Install, and that one's
going to show up in just a moment.
| | 01:04 | It's downloading and it's installing.
| | 01:06 | By the way, you may have noticed we've got
a lot of red type down at the bottom which
| | 01:09 | would make you think that
things are falling apart.
| | 01:11 | I assume this is due to some sort of
incompatibility between some of the libraries and some of
| | 01:16 | the alpha function in the Processing.
| | 01:18 | Most of this will have no effect of what we're
doing, so feel free to go ahead and just try
| | 01:21 | running your sketches.
| | 01:23 | I haven't had any trouble. I've been
working this way for months.
| | 01:26 | Next is GUI Components, a set of 2D GUI, which
of course stands for graphical user interface,
| | 01:33 | controls and multiple windows support.
| | 01:34 | I'm going to install that.
| | 01:36 | It's starting and downloading. There we go.
| | 01:39 | And the last one is Guido here, because that
starts with GUI and that's a cross mode GUI
| | 01:43 | library, so I'm going to install that one.
| | 01:46 | I just want to show you
examples from each of these things.
| | 01:50 | I'm going to need to quit
Processing and then open it back up.
| | 01:53 | Let's go to File > Quit, and now that we're
back open I can go to File > Examples, get
| | 02:01 | the window here on this side. And now if
| | 02:02 | I hit Contributed Libraries, you'll see that
the three new libraries are all there, and
| | 02:07 | I'm going to show you some very quick examples
from each one of them and what they're able
| | 02:11 | to do for your Processing sketch.
| | 02:13 | And the basic idea here is that all of them contain
classes of objects that can be used, like buttons and
| | 02:19 | sliders and knobs and rotators, that you can
then integrate as objects into your own drawings.
| | 02:25 | So let's take a quick look at ControlP5 first.
| | 02:27 | By the way, P5 is from an old sort of
abbreviation for Processing. At one point, the creators
| | 02:33 | spelled Processing with fives instead
of the Ss and the P5 came from that.
| | 02:38 | But it has been a while since that one.
| | 02:40 | First off, let's look at controllers.
| | 02:42 | We have for instance check boxes, and I'm just
going to click on this example, so you can
| | 02:46 | see what it looks like.
| | 02:48 | And see what we're doing we're importing the
library and then you create the class and
| | 02:52 | an object within that class both for the CP5 and then
we have a check box that gets created in this one.
| | 02:59 | And these are the parameters that can be adjusted,
and voila! You see that when I click on it,
| | 03:06 | it changes the color in the circle.
| | 03:09 | Also we get messages in the console.
| | 03:12 | This makes it possible for you to click on a
box, assign functionality to it, and affect
| | 03:17 | another part of your drawing.
| | 03:19 | Let's come over here and try another one.
| | 03:21 | I will close that and we'll
just look at the slider.
| | 03:26 | And in this case, it's just a matter of being
able to assign values and you see how the
| | 03:31 | background is changing from
black up to white as we go through.
| | 03:36 | Similarly, the slider down here is made to
decode only discrete values as it slides across.
| | 03:41 | Same for this one.
| | 03:43 | And so three different kinds of sliders and
what's kind of nice is they all fit very well
| | 03:46 | with the aesthetics that
usually go in Processing.
| | 03:49 | These are very clear, clean ones, and they
give you a lot of options for incorporating
| | 03:54 | new functionality in your own drawings.
| | 03:57 | I'll close the ControlP5 and take
a quick look at GUI components.
| | 04:01 | What we have here is knob configurations,
and we have some neat arc knobs that we're
| | 04:07 | able to include. By moving these around you'll
see how the values change on the bottom-left.
| | 04:13 | We can also make it so that you actually have
to move it in the angle, and make the code
| | 04:19 | and it appears down at the bottom.
| | 04:21 | So this is a great way of including some
of these controllers in your own things.
| | 04:25 | These are all objects that are
instantiations of custom classes for the knobs.
| | 04:31 | Take a look at one other here, the timer,
kind of a comical one, and what she creates
| | 04:36 | what it calls the Balls of Vesuvius.
| | 04:39 | And what we're able to control
is how fast things fly out.
| | 04:43 | And then they become much faster,
and now they stop.
| | 04:48 | And so an illustration of a way that you can
use the buttons on the sliders to effect the
| | 04:53 | interactive elements of your own sketch, so
I'm going to close both of those, and just
| | 04:59 | run through one more example in the Guido.
| | 05:03 | Let's take a look at button boxes and all this is, is
indicating whether you have selected a button or not.
| | 05:11 | You see I click on it; it
stays clicked until you go back.
| | 05:14 | Very fundamental things, but it's nice to be
able to use the shortcut classes and objects
| | 05:18 | as opposed to having to create
each of these from scratch.
| | 05:21 | It makes a little easier to incorporate the
interactive functionality. Can I suggest that
| | 05:25 | you spend a little bit of time with each of
these three libraries finding out how well
| | 05:28 | they work for you and how well you are able to
incorporate them to add extra functionality
| | 05:32 | to your own sketches.
| | Collapse this transcript |
|
|
14. Publishing and SharingSharing via OpenProcessing and other sites| 00:00 | Once you've developed your sketch in Processing,
you've created a beautiful piece of art or
| | 00:04 | you've gotten a data visualization together,
| | 00:07 | you want to be able to share it
with other people. And while
| | 00:09 | it's true that you can save images of your
file and post them on a web page or send them
| | 00:13 | to other people, or even print them out and
stick them on the refrigerator, more often
| | 00:17 | the sketches are dynamic and they're
interactive and people want to be able to interact with
| | 00:21 | it personally, and you want to find a way that
you can share your sketches with other people.
| | 00:26 | The easiest way to do this is to take a sketch
that you have and paste it into one of several
| | 00:32 | online environments for
sharing Processing sketches.
| | 00:35 | I'm going to show you a
few of these in particular.
| | 00:37 | The one that I've used the most is one called
openprocessing.org and what's nice about this
| | 00:42 | is it allows you to create your own
account, so you have your own portfolio.
| | 00:46 | It allows you to create classrooms that you can use
to share with a specific group of other people.
| | 00:51 | It also has an online IDE.
| | 00:54 | You can create the sketches
here and you can save them.
| | 00:57 | So, I find OpenProcessing to be tremendously
useful and I've used it in some of my own classes.
| | 01:02 | It is however not the only choice.
| | 01:04 | There's also one called hascanvas.com, also specific to
Processing and it's got some wonderful options as well.
| | 01:11 | For instance, I can run this one
sketch and that follows me around.
| | 01:17 | Another option is sketchpad.cc, also called
the Studio Sketchpad, specifically made for
| | 01:23 | collaborating with others. And again, I
recommend that you take a look at these.
| | 01:28 | There are other online ones, processing.org
has their own online sketchpad, but it's not
| | 01:32 | really a way of saving it or working with
other people, and so I'd say that these are
| | 01:36 | probably the top choices and I'm going to
close these two sketchpad.cc and HasCanvas,
| | 01:43 | and I'm just going to take a moment to
show you how to work with OpenProcessing.
| | 01:46 | I am going to open up my own portfolio here.
| | 01:49 | The easiest way to deal with this is to come
to create new sketch and then what you can
| | 01:54 | do is you come down here.
| | 01:56 | Now it's got a sketch running by default.
| | 01:58 | We don't need to worry about that, and come
back and just grab the text of your own drawing.
| | 02:03 | Now this is one I made earlier.
| | 02:04 | I'm going to run it and so as the squares
that are dancing around, I'm actually going
| | 02:08 | to slow it down just a little bit. There we
go, and now that I've got that, all I need
| | 02:16 | to do to share this effectively with others
is to do Select All and then copy, then head
| | 02:23 | over to OpenProcessing, and then select all of
this text and simply paste in mine to replace it.
| | 02:30 | And so now I've got my full text here and I
can run my own sketch and there it is running.
| | 02:36 | Now it's on the web and it has a direct
link and I can share it with other people.
| | 02:39 | I'm going to come down here
and say update the thumbnail.
| | 02:42 | It makes a square version of my sketch.
| | 02:44 | I'll come over to Save and I'll
just call it Shifting Blue Squares.
| | 02:52 | I can put in Tags.
| | 02:53 | I can put in a Description if I want,
but all I need to do now is press Save.
| | 02:58 | And now my sketch has a unique URL that
I'm able to send as a link to other people.
| | 03:04 | They can download it.
| | 03:05 | They can see the sketch running.
| | 03:06 | They can also click right over
here and access the code itself.
| | 03:10 | This is a great way to make things readily
available to other people when they don't
| | 03:14 | have Processing themselves, but they can
still work with it in an interactive manner.
| | Collapse this transcript |
| Saving as a desktop application| 00:00 | One of the extraordinary capabilities of
Processing is the ability to take a sketch and to save
| | 00:05 | it as standalone applications for Windows,
Macintosh and Linux PCs with a single click.
| | 00:12 | What I'm going to do is I'm going to take
this particular sketch of the moving squares.
| | 00:17 | I'll show it to you again, if I hit Ctrl+R
on a PC or Command+R on a Mac to run it.
| | 00:21 | These are blue squares that
are changing around randomly.
| | 00:25 | Now say, I wanted to share this with somebody else. All
I need to do is hit the Export Application button.
| | 00:31 | I'm going to add one little line of code
that can be helpful in certain circumstances.
| | 00:35 | And I'll explain it after I get it in there.
| | 00:38 | I need to put us in setup, so I'm going put
it down right here, and it's a little Java
| | 00:43 | command, although we don't need to open up
the Java library to make this one work.
| | 00:47 | I do frame.setBackground and then in
parentheses new java.awt.Color and then in parentheses
| | 01:01 | I put the color I want for a backdrop.
| | 01:03 | In this case, I'll just put
a solid black (0, 0, 0).
| | 01:07 | You can put other colors if you want, second
parenthesis to close it and a semicolon, and
| | 01:11 | this one command is going to make it so
that, if for instance, I were to try running the
| | 01:14 | application full screen, it would have a
solid black background, otherwise sometimes you
| | 01:18 | get some weird artifacts of shapes showing up.
| | 01:21 | So now I'm going to save this sketch and I'm
going to come up to Export Application, and
| | 01:26 | you see that by default it has all three major
platforms: Windows, Mac and Linux checked off.
| | 01:31 | And for Windows and Linux it will actually
do both 32 and 64-bit versions.
| | 01:36 | I also have the option of doing a Full
Screen Presentation mode with a Stop button.
| | 01:40 | Now I should mention the full screen does
not work well in my experience on Windows,
| | 01:45 | and so I'm going to the leave
it in a standard windowed mode.
| | 01:48 | But if you save it that way on a Macintosh,
you can get a very nice solid black background
| | 01:52 | with a Stop button down in the lower corner.
| | 01:55 | But for right now, I'm going to leave it
in its windowed mode and just hit Export.
| | 01:59 | Then it goes to the sketch folder and it adds
five new folders, linux32 and 64-bit versions,
| | 02:05 | the Mac OS X and windows32 and 64-bit versions.
| | 02:09 | So I'm going to come right here and just open
up this one folder, and the important one is
| | 02:13 | this one right down here.
| | 02:14 | I just double-click on that and
up pops my sketch in a window.
| | 02:19 | The beautiful thing about this is if I have
an interactive sketch, I can hand this around
| | 02:22 | to other people and they can
use it on their own computer.
| | 02:25 | They can interact with it.
| | 02:26 | They can modify it.
| | 02:27 | They can watch it without even having to
have Processing or having the code behind it.
| | 02:32 | And I can't think of an easier way to create
an application in Windows, Mac and Linux that
| | 02:38 | you can immediately share with other
people than by doing it through Processing.
| | 02:42 |
| | Collapse this transcript |
| Saving as JavaScript| 00:00 | In the last two movies, I showed you how you
can take your sketch and by copying the text
| | 00:04 | and pasting it into a web environment like
OpenProcessing, you can then have your sketch
| | 00:09 | available on the web and share a link with other
people that they can see the sketch itself.
| | 00:13 | Also, by exporting it, you can instantly save
your sketch as a Windows, Mac or Linux application
| | 00:20 | standalone that you can
share with other people.
| | 00:22 | One of the other ways you might want to share
this is by putting on your own web page and
| | 00:26 | the new version of Processing has
made this extraordinarily easy to do.
| | 00:30 | In fact, all you need to do is come to the top-
right of the window where it says Standard,
| | 00:35 | click on that and then drop down
to the third choice JavaScript.
| | 00:40 | And what you find now is that when you go
to the Export for Web, it's a single click
| | 00:45 | and then Processing will generate a new folder
within your sketch folders called web-export
| | 00:50 | with three files in it.
| | 00:51 | The first one is the
Processing Source Document.
| | 00:54 | The second one is an HTML index file, and the
third one is a JavaScript file called processing
| | 01:00 | which contains the code to
translate the sketch into JavaScript.
| | 01:04 | All you need to do here is double-click on
the index file and it will open up in your
| | 01:08 | default browser running exactly the way
it did on your computer screen earlier.
| | 01:13 | It has some extra text at the bottom
that gives you some source information.
| | 01:16 | If you want to, simply open up a text editor
and you can remove that information from the
| | 01:21 | index file or modify this
however else you want.
| | 01:24 | But this is one of the easiest ways to take your
own Processing sketches, dynamic and interactive,
| | 01:29 | and put them on your own web page as a
way of sharing them with other people.
| | 01:33 | In addition, because this sketch is now
translated into JavaScript, this makes it the only way
| | 01:38 | that people would be able to interact with
your sketch on an Apple iOS device, like an
| | 01:42 | iPhone or an iPad as those are able to
run JavaScript applications like this one.
| | Collapse this transcript |
| Saving as an Android application| 00:00 | In our previous movies about sharing the work
that you've created in Processing, we've talked
| | 00:05 | about uploading your sketches by pasting them
into an online processing development environment,
| | 00:10 | like OpenProcessing, or saving them as a
desktop application for Windows, Mac or Linux PCs,
| | 00:18 | or saving them as JavaScript files, so
you can embed them in your own web pages.
| | 00:21 | The one final option that we have at the moment
is to save it as an Android application, more
| | 00:28 | specifically as the components
necessary to build an Android application.
| | 00:33 | Now, this is actually some very cool stuff
and if you have worked with Android apps,
| | 00:37 | this will make your life extremely easy.
| | 00:40 | Here's all that we need to do.
| | 00:41 | Now I'm going to open up this sketch again.
| | 00:44 | It's currently saved as 14_04.
| | 00:46 | But if you just remember how this one works, it
brings up a box of blue boxes that move around.
| | 00:52 | If we want to save this is an Android application,
we got just a couple of things we need to do.
| | 00:57 | Probably the first one is we need to make
sure that we have the Android SDK installed,
| | 01:01 | and just go to developer.android.com/sdk and
then you download this. This will give you
| | 01:08 | the tools to be able to work with this.
| | 01:10 | But I'm going to go back to
the Processing sketch now.
| | 01:13 | All I need to do is go to the upper-right
where it says Standard, click on that and
| | 01:17 | I'm going to switch to Android.
| | 01:19 | By the way, you'll see that there is Add Mode
which implies that there will be other ways
| | 01:23 | that Processing will be able to save its
sketches for development and sharing.
| | 01:28 | There are some exciting possibilities there.
| | 01:29 | We'll have to wait and see what happens.
| | 01:31 | But what I'm going to do now is click on
Android and we actually get a visible change because
| | 01:36 | it changes colors into a variation on Android
green, and then when I maximize that, all I
| | 01:42 | need to do now is I need to export it.
| | 01:44 | Now, unfortunately the one that we would really
want is Export Signed Package, but if I click
| | 01:50 | on that, you see that it says at the bottom
in pink that the Exporting signed packages
| | 01:54 | is not yet implemented.
| | 01:55 | We hope that will come very
soon as Processing 2.0 develops.
| | 01:59 | What we can do however is come over here to
File and come down to Export Android Project,
| | 02:06 | and just click on that.
| | 02:08 | I very quickly get a large bundle of files and
folders that are all nested in our sketch folder.
| | 02:14 | So I can back up just a little bit.
| | 02:17 | There is our sketch folder.
| | 02:20 | And then we have this
Android information as well.
| | 02:22 | So it's all built right in there.
| | 02:24 | There's the sketch itself.
| | 02:25 | So, this will greatly facilitate your work
in developing Android applications because
| | 02:30 | you'll be able to take these ingredients and
just with a little bit of extra combining,
| | 02:33 | get them ready to create
an Android application
| | 02:35 | that you will be able to upload
and sell on the Android market.
| | 02:39 | And that's just one other way that you can
take the work that you've created in Processing
| | 02:44 | and share it with others all around you.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | I want to thank you for your time
in exploring Processing with me,
| | 00:04 | and the ways that you can use it in your own
artistic, creative and data visualization work.
| | 00:09 | Before we go, I want to give you a few ideas
on ways that you can continue explorations
| | 00:13 | and educating with Processing.
| | 00:15 | The first think I want to recommend is that
you go to the processing.org website and get
| | 00:20 | involved in the tutorials and the
reference material available under Learning.
| | 00:24 | And explore the Processing exhibition to see
works done in Processing to serve as inspirations
| | 00:29 | for your own work.
| | 00:30 | I also recommend a few excellent books.
| | 00:33 | The once I'd like in particular are Getting
Started with Processing, by the Processing
| | 00:37 | co-founders, Casey Reas and Ben Fry.
| | 00:40 | This is a very short and very accessible book
that serves as an excellent refresher of many
| | 00:44 | of the things we've covered in this course.
| | 00:46 | Next the book Learning Processing by Daniel
Shiffman is a much larger book that serves
| | 00:51 | as a college textbook, but also is a wonderful
resource for additional possibilities in Processing.
| | 00:57 | And finally, Visualizing Data by Processing
co-founder Ben Fry serves as an intermediate
| | 01:02 | to advanced book on creating even more in
terms of interactive data visualizations.
| | 01:08 | I also recommend that you take a look at some
other lynda.com courses, in particular, because
| | 01:13 | Processing is based on Java, the commands
that you use in Java can be integrated into
| | 01:17 | Processing as we've done
a few different times.
| | 01:19 | As a reminder, lynda.com has a Java Essential
Training, and Up and Running with Java Applications,
| | 01:26 | both of these would be excellent resources for help
you need to expand your own abilities in Processing.
| | 01:32 | In addition, there some other creative
things you can do with Processing, for instance,
| | 01:35 | I encourage you to look at some of the resources
for linking Processing to the Microsoft Kinect
| | 01:40 | depth camera that allows you to get 3D depth
and images for working in your own sketches.
| | 01:46 | Also you can link processing to the Arduino
Microcontroller from arduino.cc, and find
| | 01:53 | the way to get your sketches off
the screen into the physical world.
| | 01:56 | With Arduino, you can connect a wide array of sensors
that would be able to input data into Processing,
| | 02:01 | as well as actuators that can take commands from
Processing and perform physical actions with them.
| | 02:07 | Also, for serious upgrades and speed for people
dealing with large datasets, I encourage you
| | 02:12 | to explore two free open-source libraries that re-
create the functionality of Processing in C++.
| | 02:18 | The first one is open frameworks,
which is available at openframeworks.cc.
| | 02:23 | And the second one is cinder
which is available at libcinder.org.
| | 02:29 | Above all, I encourage you to take the time
to explore your own creative potential in
| | 02:33 | Processing and see the extraordinary things
that you'll be able to do in your own work.
| | Collapse this transcript |
|
|
