ok so finally programming let's dive directly into one of
the examples that we have provided for you
and there is one page in the course
were you will find a couple of tasks that we kind of
came up with for you and that you can solve
these are non-graded so it's your choice if you work on them
or not but i mean if you want to learn something
we encourage you to solve them and you will
find the complete code examples for all of them
on GitHub if you want it to solve them on your own
kind of don't go to the next example because that often already
has the solution so you said we want to start
directly in the code so we're not going to talk about it much more just
start it I want to see something happen you want to see what the program
does yeah first of all
it runs as a java application and wow we've got a window it produces a window
and it has a graphical user interface and it has a
dot not a dot it's a square
it's the extended processing hello world and it does not
only draw the dot it actually is able to move the dot
so it reacts on user interaction I click on the dot
no i click on the on the window and the dot starts
to move if i click faster it moves a little bit faster one of the coolest things
i've ever seen so let's understand it
i mean it's kind of more or less the solution for half of the
task that could be your paddle shhh don't spoil it
so what do we see here we
see a cryptic line of code which we don't need to understand
it's just given and it starts more or less
our main app exactly so it starts our app and
this TheApp is the only thing that you need to know here this is
kind of this is the way how you start these processing
applications and that's it ok so and you also
can start them as full screen then you would use this one but
we want to dive directly into TheApp and
TheApp actually extends PApplet so we have
ok so PApplet seems to be something out of processing because
there is a P in front of it it's a processing applet so to say and
the PApplet that is what we need because this brings us all the
basic elements that help us to build these things from Processing
and we have here three, four methods actually
that we should explain a little bit before we
start and this is the settings method and in the settings method
you set up the size of the screen of the window
so the little grey window thingy exactly
in the setup method that's the next one
this is run once when the program
starts and so you do everything that you need to do
to get all the stuff that that you need to have later on in there
ok and you kind of
you need to get it during the setup
because otherwise if you put it to the draw method
it will be done over over over over over over over again so in
each frame so we see in the setup there's a framerate so whenever
our program is just putting something out so when it's drawing
something then it's drawing one frame and if this all is finished
it starts drawing the next frame exactly at least it starts the next frame
if the next frame is necessary and
this is determined by the so called framerate so
how many are pictures or how many frames should
it draw per second so it's rather quick if you want to give
your CPU a hard time just increase it
well actually you can try that but
you won't kill your CPU because i mean
it can't go faster as your computer allows it so
we had the setup, we had the draw and then we have
the mouseclicked and this is also a method that comes with
Processing and Processing provides and we've shown
you to the reference already comes with a lot of these user
interaction methods so mouseclicked, mousemoved, keypressed
and all that stuff keyup, keydown and so on whatever
you need you got it you just need to look it
up in the reference