siteIcon

Tech Novice Tools

Processing Apps

burgerIcon

Simulitis Sagavirus

Stage 1: Draw the population

About this stage

Scientists at the CDC are pushing their programming team hard to come up with a simulation of how 'Simulitis' spreads through the 'Blues' population.

The most important item on the agenda is to get answers as to whether the strategy of 'social distancing' will sufficiently contain the spread of the virus.

Therefore, some compromises are being made as to how the initial 'Blues' population is created. Instead of random placement in the canvas (which would mean programmers would have to worry about not placing one 'Blue' on top of another), they are initially placed uniformly in the grid according to the population and grid size.

To achieve this goal, the programmers wrote a 'calculateSpacing' function to determine how much space to put between each 'Blue.'

Use the slider to set the initial population of 'Blues' and click the 'Create Population' button to create them.

Ponder Points (Simulitis ~ Stage 1)

  1. Why do you think we called our population elements 'Blues'?
  2. Why do you think the programmers started with a population of 49 'Blues'?
  3. Move the slider and make populations of 25, 100 and 1089 Blues. What do you observe?
  4. Move the slider to 120, 121 and then 122. What do you observe?
  5. Without looking at the source code or the Developer Tools, can you write an algebraic expression for the horizontal spacing between Blues (call it spacing) as a function of canvas width (width), number of Blues in a row (bluesPerRow) and the diameter of each Blue(blueSize)? Assume the row is filled with Blues and each row begins and ends with a Blue right next to the edge of the canvas. It helps if you draw a picture!
  6. Without looking, try to write a function, calculateSpacing() that determines the spacing based on the population size of the blues!
  7. Move the slider to the maximum population value. What is it? Obviously, if we get to this population, the 'Blues' will not be able to move...they're packed like sardines! There is a single line of code in sketch1.js that you could modify to half their size so at least they can move a little bit. Can you find that line of code? What would you change to make each Blue half of the original default size?
  8. What does the 'Refresh' button do? What function does it link to? What specific line of code in that function does the magic of refreshing?
  9. What does the '-' button do to the population?
  10. What does the '+' button do to the population?
  11. In their rush to get their simulation model working, developers forgot to write the function connected to the '+' button!!! What should the name of that function be, and if you have had web development training, see if you can write it. (Hint: the code that decrements the population works fine...could we copy/paste it and tweak it to work to 'increment' the population?!)

Last update: 03/16/20


Controls:

Population Controls:

Population: