2. OOP/Visualizing Data

1. Simulating Systems. Covid-19: "Flatten the Curve"

The model

Please see the Washington Post article on flattening the curve of Covid-19 infections here.
The visualizations are a good example for animated information-design. At the same time, the topic is a good starting point to exercise object oriented programming in P5 and in general. Another good article is: how epidemics spread and end..

Object Oriented Programming (OOP) in P5? Let`s do it!

Modeling systems with many individuals (In programming they`re just objects for us. But just in programming.) is a perfect field for what is labelled Object Oriented Programming. For those who don`t know yet or who don`t remember, what classes are, please read this: article

Follow this tutorial as an instruction:

Our own classes for the simulation

Now to make our own version of the visualizations of the Washington Post, we need to write code using classes.

What our class for the individuals in the simulation needs to do:
- display circle
- move circle
- test for contact
- test for infection

Detecting collisions

The p5.collide2Dlibrary lets us rather easily detect collisions between circles – aka "meetings between individuals".

Don`t forget to load the library in the HTML file of your project!

The functions of the library are explained in its GitHub repository. We need the function collideCircleCircle(), you`ll find a description here. It expexts the following parameters:

collideCircleCircle(circleX, circleY,circleDiameter, circleX2, circleY2,

Exponential growth

Link to the Sketch in the online editor: here

var indies = [];                              // Declare an array to hold the individuals
var population = 100;                 
var healthColor, sickColor;

function setup() {
  createCanvas(690, 400);
  healthColor = color(200);                  // Define the standard color
  sickColor = color(200,100,100);            // the altered color

function draw() {
  for (var i = 0; i < indies.length; i++) {  //loop through the whole population
    var ind = indies[i];
    ind.update();                            // move each individual
    ind.draw();                              // and draw it at its new position
  text("Press Mouse to restart.", 10, 30);

function mousePressed(){                      // restart when mouse is pressed
  indies = [];                                // reset/empty array for the population
   for (var i = 0; i < population; i++) {      
    var ind = new individual(i);              // make new individual with id = i
    indies.push(ind);                         // put the new individual in the population array
  indies[0].healthy = false;                  // Patient zero has to be sick 

class individual {                            // Class defining the individuals
  constructor(_id) {                          
    this.id = _id;
    this.x = random(width);                  // random start position
    this.y = random(height);
    this.xSpeed = random(-3, 3);             // random speed
    this.ySpeed = random(-3, 3);
    this.healthy = true;                     // all start healthy
    this.radius = 10;                        // size of the circles

  update() {                                 
    this.checkBorders();                     // call fuction to let the indivduals bounce from the border of the screen
    this.checkMeeting();                     // call function to check for collisions/"meetings"
    this.x += this.xSpeed;                   // add speed to position
    this.y += this.ySpeed;                   

  draw() {
    if (this.healthy) {                      // when healthy draw gray, otherwise red
    } else {
    ellipse(this.x, this.y, this.radius, this.radius);

  checkMeeting() {
    for (var i = 0; i < indies.length; i++) {
      var ind = indies[i];
      if (this.id != ind.id) {
        var hit = false;
        hit = collideCircleCircle(this.x, this.y, this.radius ,ind.x, ind.y, ind.radius);
        if (hit == true) {
          this.xSpeed = -this.xSpeed;
          this.ySpeed = -this.ySpeed;
          if(ind.healthy == false){
               this.healthy = false;


  checkBorders() {
    if (this.x < 0 || this.x > width) {
      this.xSpeed = -this.xSpeed;
    if (this.y < 0 || this.y > height) {
      this.ySpeed = -this.ySpeed;



Link to the Sketch in the online editor: here


Social Distancing

Link to the Sketch in the online editor: here


Expand the "Experimental growth" Sketch (this one) by a timeline as seen in the Washington Post article (see image above). Take into account the following aspects:

(1) The timelime shows the amount of infected individuals. So we need a variables that keeps count of how many people are infected or not infected.
(2) People get healthy again after a certain time. Adapt the sketch in a way that people get healthy again after about 8 seconds.

Draw the timeline chart with the values of the variable in real time (of the sketch).

For the ambitious:

(1) Implement that recovered individuals are immune. How does the timeline chart change?

(2) Implement a slider to adjust the amount of social distancing (An explanation of how to use sliders can be found here ). Observe, how the curve of the timeline chart changes.

(3) Implement a variable that holds the probability for infection when to individuals meet. Implement a slider to adjust the variable.

Experimental Visualizations

Models are of course open for modfication and for adaption to approaches coming more from an art background.

Manfred Mohr, P-197/K, Acrylic on canvas, 1977

Link to the Sketch in the online editor: here

2. Retrieving JSON Data in real time

Collection of online ressources for data on COVID-19

The COVID Tracking Project – API - JSON/CSV – USA
COVID data GitHub – JSON – Worldwide
Our World In Data – JSON – Worldwide – Test data

URL to pull JSON data from: https://github.com/NovelCOVID/API

Link to the Sketch in the online editor: here

3. Using downloaded CSV Data from online sources

Total COVID-19 tests performed per million people, data source:

Link to the Sketch in the online editor: here

Used in a less expiremental way, the methods can also be used to create one of the now popular tracking dashboards:

Dashboard by the Center for Systems Science and Engineering (CSSE) of Johns Hopkins University. link. Data on the image as for 03/17/2020