Freaky Pink toast

by linzoey

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>

CSS

body{
background-color:White;
}

JavaScript

var draw = SVG().addTo('body').size(1000, 1000)

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 randomInteger (min, max) {
      return Math.floor(min + ((max-min) * Math.random()))
}

function pick (inputArray) {
      return inputArray[randomInteger(0,inputArray.length)]
}

class Toast {
  constructor(size, tColor, point) {
    this.toastSize = size;
    this.toastColor = tColor;
    this.xPosition = point.x;
    this.yPosition = point.y;
  }
  draw() {
    // let's randomly rotate the toast so that it's cute
    // remember to translate before you rotate or the toast is going to be in a crazy place
    draw.rect(this.toastSize, this.toastSize * Math.random()).move(this.xPosition, this.yPosition).rotate(45 * pick([1,-1]) * Math.random()).fill(this.toastColor).stroke({width:1,color:'black'})

  }
}


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

let toastColors = ['White'];

// actually making the toast

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

function freakyPinkToast (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'}
  })
  return toastArray
}

freakyPinkToast (someToast);

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