​

// empty array to feed into picture object

var pixArr = [];

// button for clearing the screen

let button;

// array full of clouds

var clouds = [];

​

// object for flower

class picture {

  // feed in a coordinate for where you want the picture

  // feed in empty array,

  // feed in color of picture

  // feed in the size of each "pixel"

  // flower shape -- will determine the algorithm i use to make shape of flower

    constructor(x, y, pixArr, col, pixSize, shape) {

      this.x = x;

      this.y = y;

      this.pixArr = pixArr;

      this.col = col;

      this.pixSize = pixSize;

      this.shape = shape;

      // diagonal pattern, 1 in 2 chance:

      var diag;

      if (random([true,false])) {

        diag = true;

      }

​

      // populate array

      for (let i = 1; i < 11; i++) {

        this.pixArr[i] = [];

        for (let j = 1; j < 11; j++) {

          // if array had data in it from before, clear it

          this.pixArr[i][j] = false;

          // distance of pixel to center of flower

          let distFromCenter = dist(j,i,5,5);

          // random pattern, weird alg after testing 

          if ((distFromCenter - this.shape)==0) {

            this.pixArr[i][j] = true;

          }

          // another random pattern

          if ((i * j + i + j + distFromCenter)%this.shape==0) {

            this.pixArr[i][j] = true;

          }

          // diagonal pattern

          if (diag) {

            // diagonal

            if ((i+j==10) || (i==j)) {

              this.pixArr[i][j] = true;

            }

          }

        }

      }

    }

  // draw flower

  display() {

    noStroke();

    // green for stem of flower

    fill(100,255,100);

    // stem of flower

    rect(5*this.pixSize+this.x,5*this.pixSize+this.y,this.pixSize,10*this.pixSize);

    // color of flower

    fill(this.col);

    // go through 2D array to display colored pixels

    for (let i = 1; i < 11; i++) {

      for (let j = 1; j < 11; j++) {

        // if the value in array is true, color it

        if (this.pixArr[i][j]) {

          square(this.x + j*this.pixSize, 

                 this.y + i*this.pixSize, 

                 this.pixSize);

        }

      }

    }

  }

}

​

// cloud object:

class cloud {

  constructor(x,y,speed) {

    this.x = x;

    this.y = y;

    // animation speed

    this.speed = speed;

  }

  display() {

    // color the cloud white

    fill(255);

    noStroke();

    // cloud made up of 3 squares

    square(this.x,this.y,30);

    square(this.x+20,this.y-10,30);

    square(this.x+40,this.y,30);

  }

  // move in x direction to animate

  animate() {

    this.x+=this.speed;

  }

}

​

function setup() {

  createCanvas(400, 400);

  // blue sky background

  background(203, 238, 242);

  // button for clearing screen of flowers

  button = createButton('clear');

  button.position(0, height+10);

  button.mouseClicked(clearCanvas);

  // always 3 clouds at a time

  clouds[0] = new cloud(10,10,2);

  clouds[1] = new cloud(40,40,2);

  clouds[2] = new cloud(70,20,1);

​

}

​

function draw() {

  noStroke();

  fill(203, 238, 242);

  rect(0,0,width,150);

  // go through clouds array to display and animate each

  for (i=0;i<clouds.length;i++) {

    clouds[i].display();

    clouds[i].animate();

    // once cloud reachs end of screen, draw new cloud at beginning of screen

    // ensures that there's always 3 clouds

    if (clouds[i].x>width) {

      clouds[i] = new cloud(-70,random(100),random([1,2,3]));

    }

  }

}

​

// new flower each time mouse if pressed

function mousePressed() {

  // randomize arguments for flower/picture object

  var xCoor = random(-20,400);

  var yCoor = random(200,400);

  var pixelSize = random(2,10);

  var col = color(random(255), random(255), random(255));

  var shape = floor(random(5));

​

  // new flower 

  var pic = new picture(xCoor,yCoor,pixArr,col,pixelSize,shape);

  pic.display();

}

​

// draw sky

function clearCanvas() {

  background(203, 238, 242);

}