- MCP server with stdio transport for local use - Search episodes, transcripts, hosts, and series - 4,511 episodes with metadata and transcripts - Data loader with in-memory JSON storage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
498 lines
31 KiB
Plaintext
498 lines
31 KiB
Plaintext
Episode: 2607
|
|
Title: HPR2607: Processing
|
|
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr2607/hpr2607.mp3
|
|
Transcribed: 2025-10-19 06:30:30
|
|
|
|
---
|
|
|
|
This is HBR episode 267 entitled Processing and is part of the series, Programming 101.
|
|
It is hosted by Klaatu and is about 30 minutes long and carries a clean flag.
|
|
The summary is Klaatu introduces processing, another subset and ID suitable for graphical
|
|
programming projects.
|
|
This episode of HBR is brought to you by AnanasThost.com.
|
|
It's 15% discount on all shared hosting with the offer code HBR15, that's HBR15.
|
|
Better web hosting that's honest and fair at AnanasThost.com.
|
|
Hi everybody, you're listening to Hacker Public Radio.
|
|
My name is Klaatu and this episode I'm going to talk about processing.
|
|
Okay, I admit it.
|
|
The only reason I thought to do this particular episode is because I went to the Hacker
|
|
Public Radio.org upload site, which is hackerpublicradio.org slash calendar.php.
|
|
And I noticed that when shows had been submitted but not yet, I guess, resolved, it comes
|
|
up with a message that says processing, we are currently processing this show.
|
|
And I thought it would be hilarious if I did a show named processing because then the
|
|
show would still show up after the upload, but before it had been processed.
|
|
Pretty clever, right?
|
|
That's kind of, that's the hack for this episode.
|
|
You're welcome.
|
|
Okay, so now for the actual episode called, or about a programming language called processing.
|
|
I don't know if you've heard of this or not.
|
|
A lot of people haven't seemed, don't seem to know about this.
|
|
And I got introduced to it through a friend who does a lot of steam-based education.
|
|
So steam, not being the gaming platform, but the science technology, engineering, art,
|
|
and M.
|
|
Anyway, this is a popular little language in that community, I guess, because it's a very,
|
|
it's a visual feeling language, meaning that it is not a visual programming language,
|
|
like the way that, for instance, scratch from MIT would be, or, or I don't know, like visual
|
|
basic code blocks or something, like, I don't know, I've heard about things where you
|
|
just drag and drop little boxes and then you define what the box is, maybe, and so on.
|
|
It's not like that at all.
|
|
It's actually a subset of Java and you program it by typing in text.
|
|
But it is almost instantly launchable.
|
|
You press a little play button and it launches on a screen and you can see exactly what you've
|
|
done and where you are in your program and what's not working.
|
|
So it has the feel of kind of an instant feedback, kind of programming environments, but it's
|
|
very traditional and it's a great intro to Java.
|
|
Now you may or may not need to teach Java in whatever your, or teach or learn Java in
|
|
whatever your path is.
|
|
If you are a teacher listening to this, you might hear this and think, well, I'm trying
|
|
to teach Python because that's what everyone told me was really good when I first started
|
|
looking into this stuff.
|
|
So processing may not exactly fit into your lesson plan.
|
|
And that's okay.
|
|
I've, in my experience, I've noticed that education for programming at this point at least,
|
|
it kind of seems to be, I mean, at the beginning stages, it seems to kind of be split between
|
|
those who teach Python and those who teach Java.
|
|
And I am not saying that they can't be mixed together.
|
|
I am saying that you might choose to not mix them and just say with one thing and certainly
|
|
there's an argument to sort of sticking with it one logical path.
|
|
Well, I started teaching Python.
|
|
They were doing scripting or they're doing a pie game thing and now I want to take it
|
|
further.
|
|
So I want to get them to do gooey things and so I'll take them to pie cute next and so
|
|
on.
|
|
A perfectly logical path and the same thing for Java, you know, you might start them out
|
|
doing little command line things and then take them into processing and then show them
|
|
a proper gooey framework and so on.
|
|
So I can, I can imagine those being very separate.
|
|
Now you can also kind of imagine it being, hey, this is just a taste of lots of different
|
|
programming stuff.
|
|
And here's Python.
|
|
Okay.
|
|
Now you're used to that switcheroo.
|
|
Here's something based on Java and now you'll be used to that.
|
|
And so you're getting a little smattering of both, maybe you're not specializing in one
|
|
of the other.
|
|
You have a pretty good foundation of what's out there.
|
|
So there are arguments for both and that's fine.
|
|
But I did want to talk about processing because it is a cool little programming environment.
|
|
It's easy to get started with and it has one huge advantage, which is it can very trivially
|
|
export the programs that students or you create in processing to an Android phone.
|
|
It's almost, it's, it's a one click export, but there is some setup to get that export
|
|
to work because you have to install Android, Android development kits and stuff like that.
|
|
So it's, it's not right out of the box one click, but once you have it set up properly,
|
|
it is a one click export.
|
|
You get an APK.
|
|
You can drag that over to your phone and then on your phone, install that and it pops
|
|
up with full, you know, just exactly what you would expect out of an Android app.
|
|
It's really, really neat.
|
|
It gets students really excited to be able to see their little painting app, for instance,
|
|
suddenly on their mobile.
|
|
It's really exciting.
|
|
Okay, so let's talk about the, the, the meat and potatoes here.
|
|
So processing can be found at processing.org.
|
|
If you go to processing.org, the front page of, of their site has a little intro video
|
|
to kind of get you excited and show you what is possible with processing, which is kind
|
|
of silly because presumably anything is possible with most programming languages and indeed
|
|
that turns out to be the case here.
|
|
So I skip all that and just go straight to download processing.
|
|
Once you've downloaded processing, well, okay, so on the downloading page, you'll see
|
|
the different deliverables.
|
|
You'll see the windows, the Linux and the macOS.
|
|
I'm going to assume for this episode that you're running processing on Linux because first
|
|
of all, why wouldn't you?
|
|
Linux is a great platform for teaching because this way you're teaching kids how to actually
|
|
understand what their computer is doing rather than trying to unravel what some mysterious
|
|
corporation in the West Coast of the USA is doing.
|
|
So Linux is a great platform for teaching and it's a great platform for programming.
|
|
So it's really kind of, I think there's an argument that it does a pretty good service
|
|
to people to introduce them to Linux whilst introducing them also to, in this case, Java.
|
|
So I'm going to download the Linux 64 bit version and that gives you a processing dash
|
|
today 3.3.7 when you hear this episode, it might be something else.
|
|
So let's just say x, y, z, dash, linux64.tgz goes to my download folder.
|
|
If I go to my download folder and just filter out everything but processing here it is,
|
|
then I can right click on that extract, extract here and that provides me with a folder
|
|
called processing dash x, y, z in that folder, there's a bunch of stuff.
|
|
It's kind of difficult at first to tell one thing from the other or know what to click.
|
|
So there's an install.sh that as you might expect installs this onto your system.
|
|
Now you can do that, but if you just want to try this before you buy, not literally
|
|
buy, although you can pay for processing, you can make a donation, it's a non-profit.
|
|
Then you can just click processing, just the file called processing and what that file
|
|
will look like will depend on your system.
|
|
It's actually a shell script that sets some fancy environment variables and makes sure
|
|
that processing knows where to look for all of its little libraries and things like
|
|
that.
|
|
But you can click on that and that ought to just launch right away.
|
|
Now if it doesn't for some reason then you can open up a terminal to cut to the chase.
|
|
I mean there are a dozen different ways to do this in a GUI, but since I don't know what
|
|
GUI you're running, I won't bother with trying to guess what that would be.
|
|
I mean, I guess I could try to guess.
|
|
So you could right click on it, you could get properties or info or whatever your file
|
|
manager says, look for a permissions tab, make sure that the file is executable.
|
|
Say okay to that and now click it and it should run.
|
|
If that doesn't work, then you can go into a terminal, CD into your downloads folder
|
|
and then do a Chamod plus X into processing dash XYZ slash processing.
|
|
And now it's executable and you can click on it again and it should launch.
|
|
So what exactly launches?
|
|
Well, it's a little IDE and integrated development environment and it may look similar to familiar
|
|
to you rather if you have ever used the Arduino and a lot of people have.
|
|
So this may well look quite familiar to you.
|
|
It's basically the same IDE that the Arduino uses.
|
|
I'm not sure honestly who's whose IDE this is and which of processing or Arduino kind
|
|
of ripped it off the other and I say ripped off in a friendly manner, but that's what
|
|
it is.
|
|
So if you've ever used an Arduino, then this will look pretty familiar to you and it's
|
|
even called the sketch just like on the Arduino.
|
|
So all your programs are our sketches.
|
|
I think that's what they call it on the Arduino.
|
|
Now I'm wondering if I'm just getting things confused, but anyway, it's the same IDE.
|
|
So let's create really quick, a little basic application and don't worry, it's not going
|
|
to be boring like hello world.
|
|
We're going to do a painting app in 12 lines of code.
|
|
So if you type void, space, setup, parentheses, parentheses, that's open and close parentheses
|
|
and then an open curly brace and then on the next line, if you if you want, you can type
|
|
in the word size and then open that's s i zeti and then parentheses and then some reasonable
|
|
you know, screen size.
|
|
So let's do, I don't really know honestly what mobile phones lately, we're not we're
|
|
not going to export this to a mobile phone, but I like to plan as if though we were going
|
|
to.
|
|
But if 720 by 480, so 720, 480, close parentheses and then a semicolon, you have to put the
|
|
semicolon on there or things will break.
|
|
That's the hardest thing to remember about I think in Java and then close bracket, okay?
|
|
So you've just this is again, this is a subset of Java.
|
|
So you're not really writing a complete Java program here.
|
|
You're being given a lot of things that just inherently get inserted at the beginning
|
|
in the end of your code that you don't have to worry about and that's okay.
|
|
That's a benefit.
|
|
So, but don't don't go away from this episode thinking, hey, I've learned Java.
|
|
This is great.
|
|
No, this is, this is a specific implementation within Java called processing.
|
|
So the specific implementation here is this, this, this convention that the first function
|
|
of your program is the setup function and that's called, it's, it's void and then setup.
|
|
Why void?
|
|
That's weird.
|
|
A void because we're not, we're not creating this function to, to be copyable or to get
|
|
information out of, we are simply, we're, we're creating this function void setup just
|
|
to, to exist.
|
|
It's going to run once and then it's going to continue down the line of code and it will
|
|
never run setup again.
|
|
It's just, it gets run once.
|
|
It happens.
|
|
The thing that it does is done and then we're finished with it.
|
|
That's what, that's what that means.
|
|
If, if there was something else, if there was something more substantial out of our little
|
|
function here, we, we, we would call it not void, but maybe string.
|
|
If we were creating a, a word or an int, if we were creating an integer and that's, that's
|
|
kind of advanced stuff that you don't really need to know in processing to get a lot done.
|
|
So I'm not going to go into it.
|
|
Okay, so that's, that's the first code block right there, three lines of code.
|
|
And as you might imagine from, from just kind of context here, that creates a window.
|
|
And in fact, if you hit the play button on the, in the upper, or it's called the run button
|
|
apparently, but it looks like a play button up in the upper left corner of your IDE, you
|
|
get a screen that is exactly, you guessed it, 720 pixels wide by 480, tall.
|
|
And you can even swap those numbers if you like.
|
|
So I'm going to do that right now, 480, 720.
|
|
And this is the advantage of, and then hit the run button again, and we created a new
|
|
window that is taller than it is wide.
|
|
And that's, this is one of the advantages of processing is that you can make changes
|
|
and then press play and see exactly what you've done.
|
|
It's very handy if you're the type of programming learner or programmer who just, who,
|
|
who needs to understand what all those little switches and functions and arguments do.
|
|
Like, why are they there?
|
|
Why, why is it, why is it, why is it two numbers separated by a comma and not, you know,
|
|
just two numbers separated by an X or whatever?
|
|
Like, what do those numbers mean?
|
|
What do those words mean?
|
|
Well, you can figure that out almost on your own just by just by making a change and then
|
|
clicking run.
|
|
Okay, so that's a pretty boring application right now.
|
|
I mean, it's exciting because we made a window, but it's, it's not terribly exciting.
|
|
So size obviously is a built-in processing keyword that sort of means, hey, make a window
|
|
of this size.
|
|
So that's good to know, and it's something that you use and set up, and that's what
|
|
we've done.
|
|
So now we're going to make a new one and we're going to call it void draw.
|
|
Now this is a, again, this is, these are not arbitrary, none of this is arbitrary.
|
|
So set up is a specific function that processing expects to see.
|
|
So for instance, if we renamed void set up to foo, void foo, and then we ran processing
|
|
something would happen, but not what you expect.
|
|
So if I, I've just pressed run right now and a little tiny box, not tiny, but a small-ish
|
|
box that doesn't seem terribly interactive pops up on the screen because that's the default
|
|
behavior of processing, but it didn't, it didn't set the size.
|
|
It didn't do the 480 by 720 size setting.
|
|
And that's because processing expects to see a void set up function.
|
|
So it also expects to see a draw function.
|
|
And the draw function is so that processing knows what to draw on screen.
|
|
And we can do a couple of different things with that.
|
|
So let's, let's just do something really simple first.
|
|
We'll do a void draw, parentheses, parentheses, and then open the curly bracket.
|
|
And let's do this.
|
|
This is a special, again, a special processing built-in function.
|
|
And don't worry, I'm going to tell you where to find all the processing built-in functions
|
|
in a moment, or a little bit, because it's useless for me to just tell you the function
|
|
and you never, and you, the only two functions you'll ever know that exist are size and
|
|
rect.
|
|
Well, I just spoiled it for you.
|
|
So there's one called rect, R-E-C-T.
|
|
It's like rectangle, but no programmers don't like to type, which is funny, because that's
|
|
all they do.
|
|
But so it's just rect, R-E-C-T.
|
|
And then of course processing needs to know what kind of rectangle you want to draw.
|
|
Like are we talking about a square, are we talking about a rectangle, where on the, on
|
|
our little screen that we've created, which is 480 by 720, where in, in that area are,
|
|
is it supposed to draw that, that, this shape that we're, that we're asking it to draw?
|
|
Okay, so those are called arguments.
|
|
When you, when you invoke a, a keyword, a special function within processing and then have
|
|
to give it those numbers separated by commas, or sometimes their words, or whatever, those
|
|
are called arguments.
|
|
So when we said size 480, 720, we are saying size with the arguments of 480, by 720.
|
|
And processing just knows, because processing has been programmed to know, that the first
|
|
number in size is the x-axis, meaning the one that goes across.
|
|
And the next one is the y-axis, meaning the one that goes up and down.
|
|
And that's why when we switched 720 with 480, the window essentially rotated clockwise.
|
|
So for rect, I happen to know that the arguments that processing wants, that the, the minimum
|
|
that it requires, I should say, is the x and the y position, where the rectangle should
|
|
start being drawn.
|
|
So where should we start drawing the rectangle?
|
|
And then as you might guess, the next argument is x and y arguments.
|
|
So how far to the right should we draw our rectangle?
|
|
And then how far down should the rectangle go?
|
|
So let's try, and that's just the bare minimum, that's, that's, that's, that's what the
|
|
rect function in processing absolutely requires, it needs to know, at least where you want
|
|
to start, and then how far down, and how far to the, how far to the right, and how far
|
|
down.
|
|
So knowing that, you can do, let's say, rect parentheses 10, 10, 80, 80, and then you close
|
|
your parentheses, of course, and then what do you put at the end of every sentence in
|
|
Java?
|
|
A semicolon, yes.
|
|
And now remember, we still have this curly brace that we started up here on the void
|
|
draw.
|
|
So we'll close the curly brace, perfect.
|
|
And now we'll press play, we'll run, whatever it is.
|
|
And hey, now we've got our window, which is 480 by 720, and just just shy of the upper
|
|
left corner, just 10 pixels away from being on the edge.
|
|
There's a white rectangle that is exactly 80 pixels across and 80 pixels high.
|
|
You could even verify that.
|
|
You can, there's a, at least if you're using KDE as your desktop environment, you can,
|
|
you can get a screen ruler and measure, yep, it is exactly 80 pixels.
|
|
So we know, it's called K ruler.
|
|
It's just a ruler that appears on your screen, you can measure things.
|
|
So yeah, there we go.
|
|
We've just created a rectangle that is 10 away from, you know, 10 padding, I would say,
|
|
in CSS terms, if you know that, and then by 80 by 80.
|
|
Okay, so I wonder what other, what other arguments Rect can take?
|
|
I mean, is it just a position of the rectangle?
|
|
Well, you can find that sort of thing out by looking at the documentation.
|
|
It's not scary documentation, but it does take, it takes an eye for it, but I'll tell you
|
|
where it is.
|
|
Rect.org slash reference, pretty simple.
|
|
And then if you do a search or a find on that page, you'll, you'll find Rect parentheses
|
|
parentheses.
|
|
And that, that, that appears in this, in this, this sub setting, or this subheading called
|
|
TD primitives.
|
|
So I'm going to click on the Rect parentheses, parentheses, and it displays a bunch of different
|
|
options for us.
|
|
So for instance, it gives us some examples of what we might produce with a Rect.
|
|
So here's, and it even shows you a picture of what the results are.
|
|
So it's Rect 30, 20, 55, 55 shows you a square, a little bit offset from the, let top left.
|
|
And then there's an interesting variation on this where it's, you got, you have another
|
|
number on the end.
|
|
So 30, 20, 55, 55, seven, turns out that seven is the radius of the corners.
|
|
Now, if you just put one seven there, it assumes all corners are rounded by seven pixels.
|
|
That's, again, very CSS-like if you're familiar with that.
|
|
If you put more numbers, so 30, 20, 55, 55, or in our case, 10, 10, 80, 80, and then
|
|
put, for instance, 3, 6, 12, 18, then each corner from top left, right left bottom, sorry,
|
|
top left, top right, bottom right, bottom left.
|
|
So sort of follow the compass around or the clock, if you will, is progressively rounder.
|
|
So that seems to be all that we can do with this rectangle, but, but surely this, this
|
|
fancy graphical programming environment can do more than that.
|
|
Well, it turns out there's a, that there is.
|
|
And you would, you could find this out by kind of browsing their tutorials and, and looking
|
|
through the, the reference document, really, you, you would probably eventually find this
|
|
on your own.
|
|
But there's a function called fill, F-I-L-L, just like a paint program, like in Gimp or
|
|
empty paint.
|
|
Fill.
|
|
If you invoke fill before you invoke rectangle, and this is what the fill document says,
|
|
it tells me this.
|
|
So if I go to, if I click on the fill parentheses, parentheses in reference, it shows me an example
|
|
of how to use fill.
|
|
And it says that if I use fill in front of a rectangle or any shape, probably, then when
|
|
we draw the rectangle, it will be filled with whatever we've set fill to.
|
|
So in other words, we can draw, we can say in our void draw, at the top of void draw,
|
|
we'll put fill parentheses 0,255, 0, close parentheses, and then what do you put at the end
|
|
of every sentence in Java, a semicolon.
|
|
Now 0,255, 0, of course, is RGB values, so we should get a very, very green, green rectangle
|
|
if we click the run button, and sure enough, we do.
|
|
We have a rectangle that is green there.
|
|
Perfect.
|
|
So what do you think would happen if we do fill 255, 0, 0, parentheses, semicolon, and then
|
|
racked again.
|
|
And instead of doing it at 10, 10, let's do it, I don't know, at 2020, for, let's just
|
|
mix it up a bit, 120, 120.
|
|
So we're making end and comma 7, just just get a rounded rectangle, and then what do
|
|
we put at the end of the Java sentence, semicolon.
|
|
So I've got fill, racked, and then fill, racked.
|
|
I press run, and there you go, yeah, we've got a green rectangle in the background, and
|
|
we've got a rounded red rectangle in the foreground, slightly larger than the green one.
|
|
Okay, so we could do that all day, but that would get kind of boring, to be honest.
|
|
So what we're going to do instead, I'm going to just clear out my void draw completely.
|
|
And now I'm going to type in some new fancy or code.
|
|
And this is going to probably, I hope, blow your mind.
|
|
So with an empty void draw, what we'll do is, we'll do an if statement.
|
|
So I'm going to type in if, and then parentheses, mouse pressed, and that is mouse pressed
|
|
with a capital P, so it's camel case, and then close parentheses, and then open a curly
|
|
bracket.
|
|
Now, let's do a fill, and we know how to do that.
|
|
So you can pick a color, really any color.
|
|
I'll just do a 10 comma 120 comma 90, a little bit of a bluish green, and semicolon after
|
|
that line.
|
|
And then you can close the curly brace, and then do an else statement.
|
|
So just the word else, and then another open curly bracket, and then fill, we'll do
|
|
some other color.
|
|
So we'll do maybe, just we'll reverse that.
|
|
So 120 comma one, oh, well 90, okay, I'm not reversing it, and then 20.
|
|
This parentheses close semicolon, or I mean, semicolon, and then close curly bracket,
|
|
and then we'll do a rect parentheses mouse X with a capital X comma mouse Y with a capital
|
|
Y comma, let's do maybe 50 comma 50.
|
|
So what we're doing, you might be catching on, close parentheses, and then semicolon,
|
|
and then close curly bracket.
|
|
So what we're doing is we're saying, we want to set the fill color to some color, depending
|
|
on whether the mouse is pressed.
|
|
So if the mouse is pressed, if the mouse button is pressed down, it will draw, or the
|
|
fill will be set to 10, 120, 90.
|
|
If not, so else, the fill is set to 120, 90, 20, whatever colors those end up being,
|
|
we'll find out soon.
|
|
And either way, as long as draw is being run, it's going to draw a rectangle, wherever
|
|
our mouse is on the X axis, and wherever our mouse is on the Y axis, and the size of
|
|
the rectangle is going to be 50, 50.
|
|
Now if I hit play, you'll see that while I run the mouse over the screen, I get a really
|
|
ugly brown color.
|
|
I am so sorry for choosing that.
|
|
But if I click the mouse, then I have a really nice kind of, I don't know, is that teal?
|
|
It's like green, but not exactly green.
|
|
So whatever color that is, and so we've made a paint application in literally 12 lines.
|
|
Now it's not a very, very fancy paint application, I admit, but it's a very visual and responsive
|
|
result to very little code.
|
|
And as you can imagine, it's very easy from this point to go in and, okay, well, maybe
|
|
that initial color, that ugly, horrible, ugly, brown colors, not that great.
|
|
So maybe we'll switch that up a bit from 120, we'll get rid of all the most of the red,
|
|
so I'll make that eighth, I'll make the green, maybe a little bit less, so we'll just turn
|
|
it more blue.
|
|
And we'll give it like 200 in the blue, so 8, 8, 200, press play, see what that gets
|
|
you.
|
|
Oh yeah, that's a nice blue.
|
|
That can you get a nice, a nice green, so that's, that's a lot better.
|
|
I guess we could try for something complementary, so if we could try to get a purple in there,
|
|
yep, there we go.
|
|
So up the red to 120, keep the green at eight, and then put the blue at 200, you get a purple
|
|
and then a green, so we got a little bit of a Joker motif going on, and that's quite
|
|
nice.
|
|
Green purple are on the opposite ends of the color wheel, so it does, those, those sorts
|
|
of colors tend to go well together, complementary colors, I guess.
|
|
Um, yeah, so that, that works.
|
|
And you can do more, you can do more stuff.
|
|
Now, one of the, we're not going to go too far down the road now, I mean, that was the
|
|
demo of you, you just heard the demo that we're done, but one really fun thing to throw
|
|
into the mix is a little bit of randomness, and random, again, if you go to the documentation
|
|
at processing.org slash reference, you can look up random, and there's a whole subheading
|
|
for random functions, there are six different ones, we'll just go to random parentheses,
|
|
parentheses.
|
|
And the, uh, random function, you can invoke it in two different ways, one is just with
|
|
one number, so random, some high, the, the upper value, so the maximum value, it assumes
|
|
if you, if you just give it one number, it assumes that low is zero, and so whatever number
|
|
you're giving it is, is as high as it will go.
|
|
And then random low high, you can, you can do like zero to 255, so that you're explicitly
|
|
saying, okay, you go as low as this, and that's high as that, or you could say, okay, low,
|
|
we never want to go all the way down to zero, so we'll keep it at late 10 at the low,
|
|
and we never want to go to 255, because that, that's just all on, that's, that's bad, so
|
|
we'll go to 220 as the highest, or whatever you want to do.
|
|
So having, knowing that function, we can swap all kinds of things out with a random integer.
|
|
So if we go, for instance, into rect mouse x, mouse y, 5050 is what we had it set to
|
|
before.
|
|
So what if we said instead, comma, so now we've got rect parentheses, mouse x, comma mouse
|
|
y, comma random, and then parentheses, parentheses, and inside that parentheses, let's put,
|
|
we never want to go below, let's say 10, and we never want to go bigger than 80, and
|
|
we'll do the same thing for the other 50, but maybe we'll use different, more, some,
|
|
some different numbers.
|
|
So let's say that that one will never go lower than 15, and no higher than, well, I guess
|
|
what 80 is fine.
|
|
Uh, now if we hit play, now you're starting to paint with this weird and wacky, multi-shaped
|
|
square that keeps resizing itself every, every frame, every, every time that the clock
|
|
ticks over and run is, is set, and it draws a new rectangle, uh, it, it draws a different
|
|
size.
|
|
So you're probably already thinking, wait a minute, that means I could probably do that
|
|
with the color values as well, and yes, you can.
|
|
So fill random, uh, let's do it 10 comma 120, and then instead of that eight in the middle,
|
|
we'll do random, uh, let's do 10, up to 80.
|
|
I'm just, I'm just randomly choosing limits here.
|
|
I mean, there's, you could just say random, 255, and that would, that would make your
|
|
little, um, your, your color choice go from zero to all the way up to 255, so I'll press
|
|
go here, and yet now we've got, um, all kinds of colors being drawn, you know, all different
|
|
kinds of shapes.
|
|
And then if I press, I didn't put any random there, so that just becomes completely green.
|
|
So there you go.
|
|
That's, that's a, an always on kind of, um, paint application, and, and maybe you can
|
|
already think of how you might be able to make it not always on.
|
|
For instance, what if you took that wrecked statement at the bottom of void draw, and
|
|
you put it inside the if statement of mouse, mouse pressed?
|
|
How would that work?
|
|
So now I've got a screen, nothing's on it, but if I click, now I'm drawing my green boxes
|
|
and all the different shapes and, yeah, all the different sizes, and if I stop, then
|
|
it stops drawing.
|
|
So now I've got a, I've got a paint can.
|
|
I've got a nozzle on my paint can, and it doesn't have to be a rectangle, of course.
|
|
If you go to the reference page of processing, processing dot org slash reference, and look
|
|
for those T, uh, 2D, 2D primitives, there, there's an arc and ellipse, line point, quad,
|
|
rectangle, triangle.
|
|
So let's do ellipse, and just see what happens.
|
|
If we just replace wrecked with ellipse, E-L-L-I-P-S-E, play, and now I click, and yeah,
|
|
now I'm, now I'm drawing with, uh, a rounded, you know, different, again, different, different
|
|
sizes, because I've still got the randomness on the, on the constraints of the circle or
|
|
of the ellipse, more precisely, but now it's, it's a little bit, I guess, more spray-paint
|
|
D, I guess, because it's round and not square.
|
|
That's what we're normal, that's what we're used to seeing, I think, when we think of painting.
|
|
But yeah, I mean, the, the possibilities are endless, and this is just a 12 line application.
|
|
So well, we're up to 13 lines right now.
|
|
Oh no, we're not, I forgot to delete that.
|
|
Now we're up to 12, 12 lines of, of code.
|
|
That's, that's it.
|
|
Now like I say, if you also install an Android, uh, developer kit, then in processing,
|
|
you can add, uh, Android, uh, export as a function to, to, uh, one of the drop-down menus
|
|
and, and export the thing as an APK that you can put on your phone.
|
|
And, and if you have no use case for that, then you can still at least export the application.
|
|
So once you, if I save this sketch, which I'm not going to, but if I did, I could save
|
|
the sketch, and then I could export the application as a self, a standalone Java application.
|
|
And that means that your students or yourself, you can take your application to a friend's
|
|
computer.
|
|
And as long as they have Java installed and, and a lot of people do, uh, as long as they
|
|
have that installed, they are able to launch and run your little application, because it's
|
|
all in a little jar file, and it just runs everywhere.
|
|
So it's a great tool.
|
|
It's a fantastic way, I think, to get into mobile programming.
|
|
If if that's the direction you're headed, it's really useful for that.
|
|
You can, you can, I mean, it's, it's a subset of Java.
|
|
So you can hook other things into this.
|
|
So, you know, you could have a database backend behind your application.
|
|
You can do games.
|
|
You can do all kinds of cool things with, with processing.
|
|
It's, it's definitely worth checking out.
|
|
And it's also just as I've demonstrated a very highly visual feedback kind of way of,
|
|
of teaching anyone of any age, from any experience with computers, a lot of the basic concepts
|
|
behind programming, how, how, for instance, if, if condition works, why, why doesn't
|
|
it happen here?
|
|
Well, because the mouse wasn't pressed, uh, loops and, and structure and syntax, what an
|
|
argument is, all those kinds of things, it, it's a great, what, it's a great teaching
|
|
tool, and it's a great learning tool, and I highly, highly recommend it.
|
|
Thanks for listening.
|
|
Talk to you next time.
|
|
You've been listening to Hacker Public Radio at Hacker Public Radio dot org.
|
|
We are a community podcast network that releases shows every weekday, Monday through Friday.
|
|
Today's show, like all our shows, was contributed by an HBR listener like yourself.
|
|
If you ever thought of recording a podcast, then click on our contributing to find out
|
|
how easy it really is.
|
|
Hacker Public Radio was founded by the digital dog pound and the infonomicon computer club,
|
|
and it's part of the binary revolution at binwave.com.
|
|
If you have comments on today's show, please email the host directly, leave a comment on
|
|
the website or record a follow-up episode yourself, unless otherwise status, today's show is
|
|
released on the creative comments, attribution, share a light, free dot org license.
|