painting with process - OpenProcessing

mySketch
xxxxxxxxxx
 
// modifications from https://openprocessing.org/sketch/923286 as starting pt
​
/**************************************
 opengl shader
**************************************/
const frag = `
  #ifdef GL_ES
  precision mediump float;
  #endif
​
  uniform vec2 u_mouse;
  
  // shared texture coordinates
  varying vec2 vTexCoord;
​
  void main() {
    vec3 color = vec3(vTexCoord.xy, 1.0);
    // darken as distance from mouse increases
    float d = distance(u_mouse, vTexCoord.xy);
    color *= 1.0 - d;
    
    gl_FragColor= vec4(color, 1.0);
  }
`;
const vert = `
  #ifdef GL_ES
  precision mediump float;
  #endif
​
  attribute vec3 aPosition;
  attribute vec2 aTexCoord;
  
  // handle rotations
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  
  // shared texture coordinates
  varying vec2 vTexCoord;
​
  void main() {
    vTexCoord = aTexCoord;
    
    vec3 pos = aPosition;
    vec4 posOut = uProjectionMatrix * uModelViewMatrix * vec4(pos, 1.0);
    gl_Position = posOut;
  }
`;
​
/**************************************
 setup
**************************************/
let sh, c;
function preload() {
  sh = new p5.Shader(this.renderer, vert, frag);
}
function setup() {
  c = createCanvas(windowWidth, windowHeight, WEBGL);
  background("#121212");
}
function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}
​
/**************************************
 drawing
**************************************/
let paused = true;
function draw() {
  if (paused) return;
  shader(sh)
  sh.setUniform('u_mouse', [mouseX / width, mouseY / height]);
  
  noStroke(); // try commenting out for different effect
  
  // change/remove rotation axis/speed to change painting process/feel
  rotateY(frameCount/100);
  rotateX(frameCount/50);
  
  // vary size based on mouse coordinates
  let maxSize = 200;
  let size = {
    width: mouseX / width * maxSize,
    height: mouseY / height * maxSize,
  };
  // xy coordinates of rect are shifted for 1) gl origin and 2) to center shape
  rect(mouseX - width/2 - size.width/2,
       mouseY - height/2 - size.height/2,
       size.width,
       size.height);
  /*
  ellipse(mouseX - width/2,
       mouseY - height/2,
       size.width,
       size.height);
  */
}
​
/**************************************
 interaction
**************************************/
function mouseClicked() {
  // simple toggle to turn drawing on/off
  paused = !paused;
}
function keyReleased() {
  // press any key to save an image
  saveCanvas(c, 'png');
  return false;
}