/**
 * ---- Main sketch ----------------------------------------------------------
 */ import { getElementOrBody , getElementSize } from "./common/environment" ; const HTML_ELEMENT = getElementOrBody ( "ShaderSquare" ) ; const PATH_CANDIDATES = [ "" , "../assets/" , "https://fal-works.github.io/p5js-sketches/square-shader/assets/" ] ; const GLSL_DIRECTORY_PATH = PATH_CANDIDATES [ 2 ] ; const sketch = ( p ) : void => { let shaderObject ; let unitLength ; let squarePosition ; const createOpaqueColorData = ( c ) : number [ ] => [ p . red ( c ) / 255 , p . green ( c ) / 255 , p . blue ( c ) / 255 ] ; const createCenteredRectangleData = ( centerX , centerY , width , height ) : number [ ] => { const x = centerX - 0.5 * width ; const y = centerY - 0.5 * height ; return [ x , y , x + width , y + height ] ; } ; function setupShader ( ) { p . shader ( shaderObject ) ; shaderObject . setUniform ( "resolution" , [ p . width , p . height ] ) ; shaderObject . setUniform ( "squareColor" , createOpaqueColorData ( p . color ( 40 , 40 , 48 ) ) ) ; } p . preload = ( ) => { shaderObject = p . loadShader ( GLSL_DIRECTORY_PATH + "base.vert" , GLSL_DIRECTORY_PATH + "square.frag" ) ; } ; p . setup = ( ) => { const canvasSize = getElementSize ( HTML_ELEMENT ) ; const shortSideLength = Math . min ( canvasSize . width , canvasSize . height ) ; p . createCanvas ( shortSideLength , shortSideLength , p . WEBGL ) ; unitLength = shortSideLength * 0.01 ; squarePosition = p . createVector ( 0.5 * p . width , 0.5 * p . height ) ; setupShader ( ) ; } ; p . draw = ( ) => { const innerSquareSize = 40 * ( 1 + 0.1 * Math . sin ( p . frameCount * 0.05 ) ) * unitLength ; shaderObject . setUniform ( "innerSquare" , createCenteredRectangleData ( squarePosition . x , squarePosition . y , innerSquareSize , innerSquareSize ) ) ; const outerSquareSize = innerSquareSize + 5 * unitLength ; shaderObject . setUniform ( "outerSquare" , createCenteredRectangleData ( squarePosition . x , squarePosition . y , outerSquareSize , outerSquareSize ) ) ; p . rect ( 0 , 0 , 1 , 1 ) ; } ; p . keyTyped = ( ) => { if ( p . key === "p" ) p . noLoop ( ) ; if ( p . key === "s" ) p . save ( "image.png" ) ; } ; } ; new p5 ( sketch , HTML_ELEMENT ) ;