* @name Basic Shader

 * @arialabel Background with a cyan to purple gradient

 * @description This is a basic example showing how to load shaders in p5.js.

 * <br> To learn more about using shaders in p5.js: <a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>

 */

​

// this variable will hold our shader object

let theShader;

​

function preload(){

  // load the shader

  theShader = loadShader('assets/basic.vert', 'assets/basic.frag');

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(710, 400, WEBGL);

  noStroke();

}

​

function draw() {

  // shader() sets the active shader with our shader

  shader(theShader);

​

  // rect gives us some geometry on the screen

  rect(0,0,width, height);

}

​