DATA VISUALIZATION
WITH P5.JS
With the flash cards you can recreate
your own first prototype step by step.
Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
THE SURFACE
OF EDITOR.P5JS.ORG
On editor.p5js.org you get to the editor A preview of your program
in which you can start programming will be shown here when
directly. you click the play button
Sketch (file)
rename
Basic structure of every
p5.js sketch. This is where
you write your program Basic settings
for the editor
The play button starts
your program, the stop The console shows what is
button ends it happening and helps you
find errors
PAGE 1 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
HELLO ELLIPSE!
Following a small programming
tradition, we also want to start with Start your first program
a „Hello World“ program, or more and move your mouse over
precisely with „Hello Ellipse“. the canvas area!
The idea behind the JavaScript library
p5 is based on the open source
programming language Processing.
It‘s a kind of software sketchbook
that makes creative design with
programming easy for artists,
designers and other people with ideas.
You can use it to create graphic and
interactive applications for the web
directly in the browser!
P5 is open source and was brought to canvas area
the world by Lauren McCarthy.
PAGE 2 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
DRAW A RECTANGLE
For the data visualization we want to color a rectangle depending on the
temperature, for this we draw a rectangle on our drawing surface at the beginning.
STEP 1
PAGE 3 - LEARNING CARD Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
SETUP & DRAW FUNCTION
p5.js provides various functions that
are called automatically. The two
most important are setup and draw.
They can contain various commands
that are processed step by step. The
setup () function is executed once
when the program starts, for example
createCanvas () only needs to be called Setup () contains all
once. Then the function draw () repeats commands that should only
itself infinitely often. be executed once when the
program is started.
Draw () contains all
commands that are
permanently executed.
PAGE 4 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
CANVAS, RECT &
BACKGROUND
y: 40px
x: 30px
Generates a drawing
area for your program
by specifying the pixel
dimensions (x-axis, y-axis)
Gives the drawing area a
color in RGB values (red,
green, blue). If there is
only one value in brackets,
it applies to all 3 colors
Draws at the point x: 30,
y: 40 a rectangle with a
width of 40 and a height
of 50 pixels
PAGE 5 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
VARIABLES
A variable can store information that
can be used anywhere in the code.
You can visualize a variable like a box.
The box is the variable, the content
the value. The value can change at
will. In our example we want to save
a temperature value (e.g. 14) of a
senseBox in the „temperature“ box. The keyword „let“ defines a
variable. The variable name
here is „temperature“.
PAGE 6 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
LOAD DATA FROM A SENSEBOX
With the LoadJSON function we can load data from a specific senseBox.
This function here calls another function called loadJSON. The “loadJSON”
function is already provided by p5.js to call up data of the “JSON” file type. You
can think of it as a text file with a certain structure in order to access specific
elements in the file during programming.
STEP 2
PAGE 7 - LEARNING CARD Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
OWN FUNCTIONS
IN JAVASCRIPT
Functions are a block of instructions
with a name. The function block
is defined once. The JavaScript
commands of the function can then
be called several times in the program
using the name. These functions can
then be called and executed in setup ()
and draw (), for example.
The keyword „function“ creates
and names a separate function in
JavaScript. Everything in the curly
brackets {...} belongs to this function.
The function readDataVonAPI (), for
example, contains the command to
retrieve the data of a certain type via
loadJSON ().
PAGE 8 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
OUTPUT DATA FROM A SENSEBOX
TO THE CONSOLE
STEP 3
PAGE 9 - LEARNING CARD Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
CALL YOUR OWN FUNCTION
The function readDataVonAPI ()
was only declared before. It is only
executed the first time when the
function is called in setup ().
The program jumps to, so to speak
where the function is written, executes
the commands and then jumps back to
set-up (). This was the last command
in setup (), so draw () is executed
afterwards.
Here the function readDataVonAPI ()
is called and executed. The program
jumps to the part where the function
was declared and executes its
commands there.
PAGE 10 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
LOADJSON
(PATH,CALLBACK)
The loadJSON (path, callback) function
expects at least two parameters. The
path parameter is the address to the
JSON file, the callback parameter
expects a function that is called when
loadJSON has loaded values.
The received values are used by the
callback function (in our case the
SenseBoxDaten () function).
The ID of the
Parameter path Sensebox Parameter callback
The callback function SenseBoxDaten is
called as soon as the function loadJSON ()
has loaded data. The JSON data is in the
senseBox variable.
PAGE 11 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
ID OF A SENSEBOX
You can find many senseBoxes on the
openSenseMap.
So that the different data of each
senseBox can be sorted and evaluated,
each sensoBox needs a number or
sequence of numbers that occurs only You can find the ID of a senseBox in the
once or a combination of both. This browser line after opensensemap / explore / ...
combination of digits is then the ID The following numbers and digits are the ID of
(identifier) of a senseBox, which can the senseBox.
thus be clearly identified.
Click on a senseBox,
to find out your ID.
PAGE 12 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
OUTPUT DATA FROM A
SENSEBOX TO THE CONSOLE
So that we can see whether we
have really received data from a
SenseBox, we can output this to the
console. Depending on your internet
connection, this may take a while.
Start the program and
receive your first data!
The console.log () function outputs
text and other data for logging to
the console from the editor.
PAGE 13 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
READ THE TEMPERATURE
OF THE SENSEBOX
STEP 4
PAGE 14 - LEARNING CARD Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
TRANSFER JSON FILES
IN A VARIABLE
So that we can work with the
temperature value in the draw ()
function, we have to transfer the value
to a variable that can also be used by
other functions.
But how do we know that we are really querying the
temperature sensor from the file? With senseBox.
sensors [0]. we call up the first sensor of the senseBox.
On the senseMap you can see the order of the sensors in
your selected box.
Alternatively, this information is also in the JSON file.
Here we can see that the temperature sensor comes first.
In computer science, counting always starts from zero,
which is why the sensor is in the file at the [0] position.
Here a certain value of the JSON file is
transferred to the “temperature” variable
PAGE 15 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
FIND A SPECIFIC SENSOR
USING THE SENSEMAP
If you are on senseMap select a
senseBox, their sensors are in shown
in a list. The entries in the list can you
are known to count starting with 0. In
this way you get the numbers of the
individual sensors correlating to the
structure in the JSON file.
The temperature is at
the top of the list. In our
program this is then at:
sensebox.sensors. [0] ...
We would find the
relative humidity under:
sensebox.sensors. [1] ...
PAGE 16 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
FIND A SPECIFIC SENSOR
VIA THE JSON FILE
A JSON file can contain different data
from a senseBox. So that we can see
the data of a sensor, we navigate
through the different tabs of the file.
Click on the small triangles to see the
lower levels.
Opens the lower
ones levels
In the [0] object of
„sensors“ the value of
that Temperature sensor
The value for the
temperature can be found
under: sensebox.sensors
[0] .lastMeasurement.
value and is just -8.04 ° C
PAGE 17 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
IF-CONDITIONS
It is often necessary to execute certain
lines of code only in certain cases.
If statements are often used for this.
if (temperature) {...} checks
whether the variable has been
set. Because only when the
variable “temperature” contains a
value, the rectangle can be drawn
with a corresponding color.
PAGE 18 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
COLOR THE RECTANGLE
STEP 5
PAGE 19 - LEARNING CARD Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
VARIABLE FOR THE
COLOR VALUE
To color the rectangle, RGB values in a
range from 0 to 255 are required.
So that the color changes with the
temperature, do the math we use the
map () function. We assume that the
temperature value im Range is from
-20 and 50 count. RGB values are
between 0 and 255. A color tone is Here the temperature
calculated and stored in the variable value is converted into
‚color value‘. the range of RGB values.
fill () colors the rectangle.
Instead of the red value
we use the previously
defined variable “color
value”.
PAGE 20 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
ADJUST THE RECTANGLE
AND SET THE TEXT
STEP 6
PAGE 21 - LEARNING CARD Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
DISPLAY THE
TEMPERATURE
The function text („Text“, x, y) writes
text at the position (x, y) on your
drawing surface. Variables can also
be output as text. In our example we
output the temperature (temperature)
together (+) with the unit of
measurement ° C („° C“).
fill (240) colors the
following text white
textStyle (BOLD)
makes the text bold
textSize (32) sets
the text size to 32
PAGE 22 - INFORMATION Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
CONGRATULATIONS
You wrote your first p5.js program.
Originalfassung: Futurium, Junge Tüftler und Education Innovation Lab. Erste Überarbeitung: Junge Tüftler. CC BY SA 4.0
