Color Field

Under Construction

How would you describe Mark Rothko’s paintings?

p5.js Web Editor


We humans like to push the limits of our capabilities. In 1954, Sir Roger Bannister became the first person to run a mile in under four minutes. He was clearly running fast, but how fast?


In the last tutorial, we introduced a simple model for displacement, . Let’s tweak the model a little: for now, we’ll assume that Sir Bannister ran at a constant velocity. This assumption allows us to focus on one independent variable, , and the dependent variable, .


Relations Review

Control Structures



Control Structures Review




function setup() {
  createCanvas(400, 400);

function draw() {
  for (let y = 0; y < height; y += 1) {
    for (let x = 0; x < width; x += 1) {
      if (y < f()) {
        stroke(255, 162, 0);
        point(x, y);
      if (y >= f() && y < g()) {
        stroke(222, 0, 7);
        point(x, y);
      if (y >= g()) {
        stroke(249, 96, 0);
        point(x, y);

function f() {
  return 0.5 * height;

function g() {
  return 0.625 * height;

Solutions Review

Project Ideas

Polynomials Add x as a parameter to f() and g() and use it to implement functions like and . Update your calls to f(x) and g(x) while drawing the system.

Abstraction Research Piet Mondrian and develop your own abstraction.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.