Graphics Buffer Template

let buff;

let buff_high_rez;

​

/* Effective size of the buffer */

const BUFF_SIZE = 1080;

​

/* Change the ASPECT RATIO of your sketch with these */

const BUFF_WID_MOD = 1;

const BUFF_HEI_MOD = 1;

​

const BUFF_WID = BUFF_SIZE * BUFF_WID_MOD

const BUFF_HEI = BUFF_SIZE * BUFF_HEI_MOD

​

const CANVAS_PIXEL_DENSITY = 1

const BUFF_PIXEL_DENSITY = 1

const BUFF_HR_PIXEL_DENSITY = 4

​

let scaleFactor;

​

function setup(){

  w = min(windowWidth, windowHeight)

​

  wx = w * BUFF_WID_MOD

  wy = w * BUFF_HEI_MOD

​

  createCanvas(wx, wy)

  pixelDensity(CANVAS_PIXEL_DENSITY)

​

  buff = createGraphics(BUFF_WID, BUFF_HEI)

  buff.pixelDensity(BUFF_PIXEL_DENSITY)

​

  buff_high_rez = createGraphics(BUFF_WID, BUFF_HEI)

  buff_high_rez.pixelDensity(BUFF_HR_PIXEL_DENSITY)

  scaleFactor = BUFF_SIZE/w

​

  setupBufferStuff()

}

​

function draw(){

  drawToBuffer(buff)

  image(buff, 0, 0, wx, wy)

}

​

function windowResized(){

  w = min(windowWidth, windowHeight)

​

  wx = w * BUFF_WID_MOD

  wy = w * BUFF_HEI_MOD

  scaleFactor = BUFF_SIZE/w

​

  resizeCanvas(wx, wy)

  image(buff, 0, 0, wx, wy)

}

​

function exportBuffer(b){

  save(b, 'img.png')

}

​

// 1 key exports main buffer | 2 key exports high rez buffer

function keyPressed(){

  if(keyCode === 49){

    drawToBuffer(buff)

    exportBuffer(buff)

  }else if(keyCode === 50){

    drawToBuffer(buff_high_rez)

    exportBuffer(buff_high_rez)

  }

}

​

​

​

/* Things you need to run once, like initialising classes for example */

let backgroundColor;

function setupBufferStuff(){

  backgroundColor = random(255)

}

​

/* Everything you want to draw to the graphics buffer goes here */

function drawToBuffer(b){

  b.background(backgroundColor)

  b.stroke(255)

  b.ellipse(BUFF_WID/2, BUFF_HEI/2, BUFF_SIZE/4)

  b.ellipse(mouseX*scaleFactor, mouseY*scaleFactor, 10)

}