<text>Click anywhere to print again!
Hit 'S' to save</text>
body {
  width: 100wh;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
  background-image: linear-gradient(180deg, #ffffff, #e997e2);
}

text { 
  color:  white;
  font-family: Inconsolata;
  font-size: 16pt;
  position:absolute;
  width:100%;
  bottom:3%;
  text-align:center;
  text-decoration: underline;
}
const size = 25;
let palette =[];
palette.push('#2deded');
palette.push('#ff32ff');
//palette.push('#ff32ff');
palette.push('#ff32ff');
palette.push('#9a3ffc');
//palette.push('#9a3ffc');
palette.push('#fcf525');





function setup() {
  createCanvas(400, 500);
  background(220);
  pixelDensity(1);
  noStroke();
}

let step = -1;
function draw() {
  drawPrinting();

  //console.log('ws '+ws+' step '+step+' y '+y);
}

function drawPrinting(){
  step++;
  let ws = parseInt(width/size);
  let x = step%ws;
  let y = parseInt(step/ws);
  setPixelColor(x,y, palette[parseInt(random(0, palette.length))]);
}

function setPixelColor(x,y,color){
  fill(color);
  rect(x*size,y*size,size,size);
}

function mouseClicked() {
  clear();
  step = -1;
  
}

function keyPressed(){
    if( keyIsPressed ) {
    if( key == 's') {
      saveCanvas("Printer", "jpg");
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js
  3. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js