createCanvas(800, 800);

  // remember to set the angle mode that rotating is more natural for us

  angleMode(DEGREES);

  // we'll stop animation, otherwise our toast will be all jittery

  noLoop()

}

​

// some useful functions

​

function randomInteger (min, max) {

  return Math.floor(min + ((max-min) * Math.random()))

}

​

function pick (inputArray) {

  return inputArray[randomInteger(0,inputArray.length)]

}

​

function buildArray (n, fillFunction) {

  let outputArray = [];

  for (let i = 0; i < n; i++) {

    outputArray.push(fillFunction(i))

  }

  return outputArray

}

​

class Point {

  constructor(x,y) {

    this.x = x;

    this.y = y;

  }

  move(xDistance, yDistance) {

    return new Point(this.x + xDistance, this.y + yDistance)

  }

}

​

function shapeFromPoints (pointArray) {

  beginShape();

  pointArray.forEach(p => vertex(p.x,p.y))

  endShape(CLOSE);

}

​

// defining our toast

​

class Toast {

  constructor(size, tColor, point) {

    this.toastSize = size;

    this.toastColor = tColor;

    this.xPosition = point.x;

    this.yPosition = point.y;

  }

  draw() {

    fill(color(this.toastColor));

    // remember to translate before you rotate or the toast is going to be in a crazy place

    translate(this.xPosition, this.yPosition)

    // let's randomly rotate the toast so that it's cute

    // we'll use pick here so that we can rotate either right or left randomly

    rotate(15 * pick([1,-1]) * Math.random());

    // slight adjustment with rect position to get it in the right place

    rect((-0.5) * this.toastSize,(-0.2) * this.toastSize, this.toastSize, this.toastSize);

    resetMatrix()

  }

}

​

class Star {

  constructor(size, tColor, point) {

    this.size = size;

    this.color = tColor;

    this.xPosition = point.x;

    this.yPosition = point.y;

  }

  draw() {

    fill(color(this.color));

    translate(this.xPosition, this.yPosition)

    rotate(15 * pick([1,-1]) * Math.random())

    let starPoints = [

      new Point (0, 0 - (this.size * 0.6)),

      new Point (0 + (this.size * 0.17), 0),

      new Point (0 + (this.size* 0.8), 0),

      new Point (0 + (this.size * 0.25), 0 + (this.size * 0.3)),

      new Point (0 + (this.size* 0.6), 0 + (this.size)),

      new Point (0, 0 + (this.size * 0.5)),

      new Point (0 - (this.size * 0.6), 0 + (this.size)),

      new Point (0 - (this.size * 0.25), 0 + (this.size * 0.3)),

      new Point (0 - (this.size * 0.8), 0),

      new Point (0 - (this.size * 0.17), 0),

    ];

    shapeFromPoints(starPoints);

    resetMatrix()

  }

}

​

// data for toast

​

// we can use the remainder operator to make a grid

​

let somePoints = buildArray (100, i => new Point(100 + ((i%10) * 50), 100 + (50 * Math.floor(i/10))))

​

let toastColors = ['peru',"blanchedalmond","burlywood","tan","saddlebrown"];

​

// actually making the toast

​

let someToast = buildArray (100, i=> new Toast (20, pick(toastColors), somePoints[i]))

​

function freakyPinkToastAndStars (toastArray) {

  toastArray.forEach((t,i) => {

    // use the condition to test the color of the Toast object

    if (t.toastColor == 'saddlebrown')

      // when the test condition is true, change the color to magenta by reassigning the color string

      {t.toastColor = 'magenta'}

    else {

      let starPoint = new Point (t.xPosition, t.yPosition);

      toastArray[i] = new Star (20,"yellow",starPoint)

    }

  })

  return toastArray

}

​

freakyPinkToastAndStars (someToast);

​

// drawing the toast

​

function draw() {

  background(220);

  someToast.forEach(t => t.draw())

}

​