WEBVTT

1
00:00:00.890 --> 00:00:07.240
ok so finally programming let's
 dive directly into one of

2
00:00:07.250 --> 00:00:09.350
the examples that we
have provided for you

3
00:00:10.200 --> 00:00:15.580
and there is one
page in the course

4
00:00:15.820 --> 00:00:19.640
were you will find a couple
of tasks that we kind of

5
00:00:20.370 --> 00:00:25.770
came up with for you and
 that you can solve

6
00:00:25.910 --> 00:00:29.640
these are non-graded so it's your
 choice if you work on them

7
00:00:29.640 --> 00:00:32.680
or not but i mean if you
want to learn something

8
00:00:32.890 --> 00:00:37.480
we encourage you to solve
 them and you will

9
00:00:37.480 --> 00:00:41.570
find the complete code
examples for all of them

10
00:00:41.830 --> 00:00:46.420
on GitHub if you want it to
 solve them on your own

11
00:00:46.770 --> 00:00:50.570
kind of don't go to the next example
 because that often already

12
00:00:50.590 --> 00:00:54.800
has the solution so you
said we want to start

13
00:00:54.800 --> 00:00:59.430
directly in the code so we're not going
 to talk about it much more just

14
00:00:59.430 --> 00:01:02.930
start it I want to see something happen
 you want to see what the program

15
00:01:02.930 --> 00:01:05.430
does yeah first of all

16
00:01:07.660 --> 00:01:12.480
it runs as a java application and wow
we've got a window it produces a window

17
00:01:12.480 --> 00:01:15.370
and it has a graphical user
 interface and it has a

18
00:01:15.370 --> 00:01:19.300
dot not a dot
it's a square

19
00:01:20.350 --> 00:01:24.890
it's the extended processing
hello world and it does not

20
00:01:24.900 --> 00:01:28.050
only draw the dot it actually
 is able to move the dot

21
00:01:28.290 --> 00:01:33.110
so it reacts on user interaction
 I click on the dot

22
00:01:33.470 --> 00:01:36.560
no i click on the on the
window and the dot starts

23
00:01:36.560 --> 00:01:42.800
to move if i click faster it moves a little
 bit faster one of the coolest things

24
00:01:42.800 --> 00:01:46.510
i've ever seen so
let's understand it

25
00:01:47.380 --> 00:01:51.510
i mean it's kind of more or less
 the solution for half of the

26
00:01:51.520 --> 00:01:53.650
task that could be your
paddle shhh don't spoil it

27
00:01:55.610 --> 00:02:00.910
so what do we
see here we

28
00:02:00.910 --> 00:02:04.300
see a cryptic line of code which
 we don't need to understand

29
00:02:04.300 --> 00:02:07.230
it's just given and it
starts more or less

30
00:02:07.400 --> 00:02:11.400
our main app exactly so
it starts our app and

31
00:02:11.660 --> 00:02:15.770
this TheApp is the only thing that
 you need to know here this is

32
00:02:15.840 --> 00:02:18.590
kind of this is the way how
you start these processing

33
00:02:18.590 --> 00:02:21.740
applications and that's
it ok so and you also

34
00:02:21.740 --> 00:02:24.600
can start them as full screen
then you would use this one but

35
00:02:24.600 --> 00:02:29.340
we want to dive directly
 into TheApp and

36
00:02:29.640 --> 00:02:34.540
TheApp actually extends
 PApplet so we have

37
00:02:35.090 --> 00:02:39.880
ok so PApplet seems to be something
 out of processing because

38
00:02:39.880 --> 00:02:43.870
there is a P in front of it it's a
processing applet so to say and

39
00:02:44.220 --> 00:02:48.110
the PApplet that is what we need
because this brings us all the

40
00:02:48.110 --> 00:02:52.400
basic elements that help us to build
 these things from Processing

41
00:02:52.720 --> 00:02:56.960
and we have here three,
four methods actually

42
00:02:57.190 --> 00:03:01.030
that we should explain a
 little bit before we

43
00:03:01.030 --> 00:03:05.460
start and this is the settings
method and in the settings method

44
00:03:05.460 --> 00:03:09.750
you set up the size of the
 screen of the window

45
00:03:09.810 --> 00:03:12.920
so the little grey
window thingy exactly

46
00:03:14.170 --> 00:03:16.480
in the setup method
that's the next one

47
00:03:16.910 --> 00:03:19.540
this is run once
when the program

48
00:03:19.540 --> 00:03:23.220
starts and so you do everything
 that you need to do

49
00:03:23.490 --> 00:03:27.450
to get all the stuff that that you
 need to have later on in there

50
00:03:27.650 --> 00:03:29.880
ok and you kind of

51
00:03:32.070 --> 00:03:34.680
you need to get it
during the setup

52
00:03:34.910 --> 00:03:39.400
because otherwise if you
put it to the draw method

53
00:03:39.620 --> 00:03:43.670
it will be done over over over
over over over over again so in

54
00:03:43.680 --> 00:03:47.290
each frame so we see in the setup
there's a framerate so whenever

55
00:03:47.480 --> 00:03:51.010
our program is just putting
something out so when it's drawing

56
00:03:51.010 --> 00:03:54.900
something then it's drawing one
frame and if this all is finished

57
00:03:54.900 --> 00:03:58.900
it starts drawing the next frame exactly
 at least it starts the next frame

58
00:03:58.920 --> 00:04:03.070
if the next frame
is necessary and

59
00:04:03.070 --> 00:04:05.550
this is determined by the
so called framerate so

60
00:04:05.690 --> 00:04:09.780
how many are pictures or
how many frames should

61
00:04:09.920 --> 00:04:15.220
it draw per second so it's rather
 quick if you want to give

62
00:04:15.220 --> 00:04:18.320
your CPU a hard time
 just increase it

63
00:04:18.980 --> 00:04:22.710
well actually you
can try that but

64
00:04:22.880 --> 00:04:26.110
you won't kill your
CPU because i mean

65
00:04:26.120 --> 00:04:31.760
it can't go faster as your
 computer allows it so

66
00:04:32.050 --> 00:04:35.420
we had the setup, we had
the draw and then we have

67
00:04:35.430 --> 00:04:38.230
the mouseclicked and this is
also a method that comes with

68
00:04:38.450 --> 00:04:42.340
Processing and Processing
provides and we've shown

69
00:04:42.340 --> 00:04:46.770
you to the reference already
comes with a lot of these user

70
00:04:46.770 --> 00:04:51.080
interaction methods so mouseclicked,
 mousemoved, keypressed

71
00:04:51.150 --> 00:04:54.980
and all that stuff keyup,
keydown and so on whatever

72
00:04:54.980 --> 00:04:57.630
you need you got it you
just need to look it

73
00:04:57.630 --> 00:04:58.480
up in the reference