Place a random Circle and Rectangle on canvas

random-composition-1.p5js

function random255(){
  return round(random(0,16)) * 16;
}

function randomColor() {
  return {
    r: random255(),
    g: random255(),
    b: random255()
  };
}

function randomSquare() {
  let s = {
    c: randomColor(),
    w: round(random(0, width/20))*20,
    h: round(random(0, height/20))*20
  };
  s.x = round(random(0, width - s.w)/20)*20;
  s.y = round(random(0, height - s.h)/20)*20;
  return s;
}

let rule = {
  bg: {},
  rect: {},
  circ: {},

  reinvent: function() {
    this.bg = randomColor();
    this.rect = randomSquare();
    this.circ = randomSquare();
  }
};


function setup() {
  createCanvas(400, 400);
  frameRate(2);
  noStroke();
  ellipseMode(CORNER);
}

function draw() {
  
  rule.reinvent();
  
  background( rule.bg.r, rule.bg.g, rule.bg.b );

  fill( rule.rect.c.r, rule.rect.c.g, rule.rect.c.b );
  rect(
    rule.rect.x,
    rule.rect.y,
    rule.rect.w,
    rule.rect.h
  );
  
  fill( rule.circ.c.r, rule.circ.c.g, rule.circ.c.b );
  ellipse(
    rule.circ.x,
    rule.circ.y,
    rule.circ.w,
    rule.circ.w
  );

}