town-page/_posts/2020-12-18-shader.markdown

---
layout: post-plain
title: "WebGL and Shader Experiments - Part 1"
date: 2020-12-28
categories: design coding
---
I spent a bit of time trying out WebGL today. I'd like to be able to use shaders for website elements like backgrounds because it seems like the most efficient way to get cool graphics on a screen. Shaders are some of the most elegant examples of code, able to describe complex, evolving visuals in just a few lines.
  
Realistically I won't be making anything really beautiful in the near future, but I'd like to understand how shaders in WebGL work. At least I will be able to pay someone more experienced to produce what I want.

The program below should show a spinning pink square and is based on Mozilla's WebGL tutorial. The shape is created using an array of points, defined before the shader programs are called. 

<canvas id="canvas" width="1080" height="1080" style="border:1px solid white;
width:100%;"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" crossorigin="anonymous" defer=""></script>
{% asset shaderCanvas3.js %}