let radius = 200;

let radiusStep = 0.25;

let radiusDirection = 1

​

let redratio = 0.3;

let greenratio = 0.3;

let blueratio = 0.8;

let colorDirection = 1;

​

​

function setup() {

  createCanvas(800, 400);

  pixelDensity(1);

​

}

​

function draw() {

  background(0);

  loadPixels();

  for (var y = 0; y < height; y++) {

    for (var x = 0; x < width; x++) {

      var index = (x + y * width) * 4;

      pixels[index + 0] = x*redratio;

      pixels[index + 1] = y*greenratio;

      pixels[index + 2] = y*blueratio;

      pixels[index + 3] = 255;

    }

  }

  updatePixels();

  // regular: r change every time

  // push();

  // fill(255)

  // noStroke()

  // circle(width/2,height/2,radius);

  // pop();

  // update variables

  radius = radius+radiusStep*radiusDirection

  if (radius >= 210){

    radiusStep = 0.2

  } else{

    radiusStep = 0.35

  }

  if (radius >= 220){

    radiusDirection = -1;

  } else if (radius <= 200){

    radiusDirection = 1;

  }

​

  if (blueratio <= 0){

    colorDirection *= -1

  } else if (blueratio >= 0.8) {

    colorDirection *= -1

  }

  blueratio += colorDirection * 0.005

​

​

}

​