update changes

dist/assets/examples/assets/basic.frag

@@ -0,0 +1,22 @@
+// casey conchinha - @kcconch ( https://github.com/kcconch )
+// louise lessel - @louiselessel ( https://github.com/louiselessel )
+// more p5.js + shader examples: https://itp-xstory.github.io/p5js-shaders/
+// this is a modification of a shader by adam ferriss
+// https://github.com/aferriss/p5jsShaderExamples/tree/gh-pages/2_texture-coordinates/2-1_basic
+
+precision mediump float;
+
+// this is the same variable we declared in the vertex shader
+// we need to declare it here too!
+varying vec2 vTexCoord;
+
+void main() {
+
+    // copy the vTexCoord
+    // vTexCoord is a value that goes from 0.0 - 1.0 depending on the pixels location
+    // we can use it to access every pixel on the screen
+    vec2 coord = vTexCoord;
+
+    // x values for red, y values for green, both for blue
+    gl_FragColor = vec4(coord.x, coord.y, (coord.x+coord.y), 1.0 );
+}

dist/assets/examples/assets/basic.vert

@@ -0,0 +1,26 @@
+// vert file and comments from adam ferriss
+// https://github.com/aferriss/p5jsShaderExamples
+
+// our vertex data
+attribute vec3 aPosition;
+
+// our texcoordinates
+attribute vec2 aTexCoord;
+
+// this is a variable that will be shared with the fragment shader
+// we will assign the attribute texcoords to the varying texcoords to move them from the vert shader to the frag shader
+// it can be called whatever you want but often people prefiv it with 'v' to indicate that it is a varying
+varying vec2 vTexCoord;
+
+void main() {
+
+    // copy the texture coordinates
+    vTexCoord = aTexCoord;
+
+    // copy the position data into a vec4, using 1.0 as the w component
+    vec4 positionVec4 = vec4(aPosition, 1.0);
+    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+
+    // send the vertex information on to the fragment shader
+    gl_Position = positionVec4;
+}

dist/assets/examples/assets/bubbles.csv

@@ -0,0 +1,5 @@
+x,y,diameter,name
+160,103,43.19838,Happy
+372,137,52.42526,Sad
+273,235,61.14072,Joyous
+121,179,44.758068,Melancholy

dist/assets/examples/assets/bubbles.json

@@ -0,0 +1,20 @@
+{
+  "bubbles": [
+    {
+      "position": {
+        "x": 160,
+        "y": 103
+      },
+      "diameter": 43.19838,
+      "label": "Happy"
+    },
+    {
+      "position": {
+        "x": 372,
+        "y": 137
+      },
+      "diameter": 52.42526,
+      "label": "Sad"
+    }
+  ]
+}

dist/assets/examples/assets/texture.frag

@@ -0,0 +1,84 @@
+// casey conchinha - @kcconch ( https://github.com/kcconch )
+// louise lessel - @louiselessel ( https://github.com/louiselessel )
+// more p5.js + shader examples: https://itp-xstory.github.io/p5js-shaders/
+// rotate/tile functions from example by patricio gonzalez vivo
+// @patriciogv ( patriciogonzalezvivo.com )
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI 3.14159265358979323846
+
+uniform vec2 resolution;
+uniform float time;
+uniform vec2 mouse;
+
+vec2 rotate2D (vec2 _st, float _angle) {
+    _st -= 0.5;
+    _st =  mat2(cos(_angle),-sin(_angle),
+                sin(_angle),cos(_angle)) * _st;
+    _st += 0.5;
+    return _st;
+}
+
+vec2 tile (vec2 _st, float _zoom) {
+    _st *= _zoom;
+    return fract(_st);
+}
+
+vec2 rotateTilePattern(vec2 _st){
+
+    //  Scale the coordinate system by 2x2
+    _st *= 2.0;
+
+    //  Give each cell an index number
+    //  according to its position
+    float index = 0.0;
+    index += step(1., mod(_st.x,2.0));
+    index += step(1., mod(_st.y,2.0))*2.0;
+
+    //      |
+    //  2   |   3
+    //      |
+    //--------------
+    //      |
+    //  0   |   1
+    //      |
+
+    // Make each cell between 0.0 - 1.0
+    _st = fract(_st);
+
+    // Rotate each cell according to the index
+    if(index == 1.0){
+        //  Rotate cell 1 by 90 degrees
+        _st = rotate2D(_st,PI*0.5);
+    } else if(index == 2.0){
+        //  Rotate cell 2 by -90 degrees
+        _st = rotate2D(_st,PI*-0.5);
+    } else if(index == 3.0){
+        //  Rotate cell 3 by 180 degrees
+        _st = rotate2D(_st,PI);
+    }
+
+    return _st;
+}
+
+float concentricCircles(in vec2 st, in vec2 radius, in float res, in float scale) {
+    float dist = distance(st,radius);
+    float pct = floor(dist*res)/scale;
+    return pct;
+}
+
+void main (void) {
+    vec2 st = gl_FragCoord.xy/resolution.xy;
+    vec2 mst = gl_FragCoord.xy/mouse.xy;
+    float mdist= distance(vec2(1.0,1.0), mst);
+
+    float dist = distance(st,vec2(sin(time/10.0),cos(time/10.0)));
+    st = tile(st,10.0);
+
+    st = rotate2D(st,dist/(mdist/5.0)*PI*2.0);
+
+    gl_FragColor = vec4(vec3(concentricCircles(st, vec2(0.0,0.0), 5.0, 5.0),concentricCircles(st, vec2(0.0,0.0), 10.0, 10.0),concentricCircles(st, vec2(0.0,0.0), 20.0, 10.0)),1.0);
+}

dist/assets/examples/assets/texture.vert

@@ -0,0 +1,15 @@
+// vert file and comments from adam ferriss
+// https://github.com/aferriss/p5jsShaderExamples
+
+// our vertex data
+attribute vec3 aPosition;
+
+void main() {
+
+  // copy the position data into a vec4, using 1.0 as the w component
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+
+  // send the vertex information on to the fragment shader
+  gl_Position = positionVec4;
+}

dist/assets/examples/assets/uniforms.frag

@@ -0,0 +1,77 @@
+// casey conchinha - @kcconch ( https://github.com/kcconch )
+// louise lessel - @louiselessel ( https://github.com/louiselessel )
+// more p5.js + shader examples: https://itp-xstory.github.io/p5js-shaders/
+// this is a modification of a shader by adam ferriss
+// https://github.com/aferriss/p5jsShaderExamples/tree/gh-pages/5_shapes/5-3_polygon
+
+precision mediump float;
+
+// these are known as preprocessor directive
+// essentially we are just declaring some variables that wont change
+// you can think of them just like const variables
+
+#define PI 3.14159265359
+#define TWO_PI 6.28318530718
+
+// we need the sketch resolution to perform some calculations
+uniform vec2 resolution;
+uniform float time;
+uniform float mouse;
+
+// this is a function that turns an rgb value that goes from 0 - 255 into 0.0 - 1.0
+vec3 rgb(float r, float g, float b){
+    return vec3(r / 255.0, g / 255.0, b / 255.0);
+}
+
+vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){
+    // get our coordinates
+    vec2 coord = gl_FragCoord.xy;
+
+    // move the coordinates to where we want to draw the shape
+    vec2 pos = vec2(x,y) - coord;
+
+    // calculate the angle of a pixel relative to our position
+    float angle = atan( pos.x, pos.y) + PI + rotation;
+
+    // calculate the size of our shape
+    float radius = TWO_PI / sides;
+
+    // this is the function that controls our shapes appearance
+    // i pulled it from the book of shaders shapes page https://thebookofshaders.com/07/
+    // essentially what we are doing here is computing a circle with length(pos) and manipulating it's shape with the cos() function
+    // this technique is really powerful and can be used to create all sorts of different shapes
+    // for instance, try changing cos() to sin()
+    float d = cos(floor(0.5 + angle / radius) * radius - angle) * length(pos);
+
+    // restrict our shape to black and white and set it's size
+    // we use the smoothstep function to get a nice soft edge
+    d = 1.0 - smoothstep(size*0.5, size*0.5+1.0, d);
+
+    // return the color with the shape as the alpha channel
+    return vec4(col, d);
+}
+
+
+void main() {
+
+    vec2 center = resolution * 1.0; // draw the shape at the center of the screen
+    float size = resolution.y * 0.5; // make the shape a quarter of the screen height
+    float sides = mod(floor(mouse), 7.0) + 3.0; // slowly increase the sides, when it reaches 10 sides, go back down to 3
+    float rotation = time; // rotation is in radians, but for time it doesnt really matter
+
+    // lets make our shape in the center of the screen. We have to subtract half of it's width and height just like in p5
+    float x = center.x ;
+    float y = center.y ;
+
+    // a color for the shape
+    vec3 grn = rgb(200.0, 240.0, 200.0);
+
+    // call our shape function with poly(x, y, sz, sides, rotation, color);
+    vec4 poly = poly(center.x , center.y, size, sides, rotation, grn);
+
+    // mix the polygon with the opposite of the green color according to the shapes alpha
+    poly.rgb = mix(1.0 - grn, poly.rgb, poly.a);
+
+    // render to screen
+    gl_FragColor = vec4(poly.rgb, 1.0);
+}

dist/assets/examples/assets/uniforms.vert

@@ -0,0 +1,19 @@
+// vert file and comments from adam ferriss
+// https://github.com/aferriss/p5jsShaderExamples
+
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+void main() {
+
+  // copy the position data into a vec4, using 1.0 as the w component
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  // scale the rect by two, and move it to the center of the screen
+  // if we don't do this, it will appear with its bottom left corner in the center of the sketch
+  // try commenting this line out to see what happens
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+
+  // send the vertex information on to the fragment shader
+  gl_Position = positionVec4;
+}

dist/assets/examples/assets/webcam.frag

@@ -0,0 +1,34 @@
+// casey conchinha - @kcconch ( https://github.com/kcconch )
+// louise lessel - @louiselessel ( https://github.com/louiselessel )
+// more p5.js + shader examples: https://itp-xstory.github.io/p5js-shaders/
+
+precision mediump float;
+
+// grab texcoords from vert shader
+varying vec2 vTexCoord;
+
+// our texture coming from p5
+uniform sampler2D tex0;
+
+
+void main() {
+    vec2 uv = vTexCoord;
+
+    // the texture is loaded upside down and backwards by default so lets flip it
+    uv.y = 1.0 - uv.y;
+
+    vec4 tex = texture2D(tex0, uv);
+
+    float gray = (tex.r + tex.g + tex.b) / 3.0;
+
+    float res = 20.0;
+    float scl = res / (10.0);
+
+    float threshR = (fract(floor(tex.r*res)/scl)*scl) * gray ;
+    float threshG = (fract(floor(tex.g*res)/scl)*scl) * gray ;
+    float threshB = (fract(floor(tex.b*res)/scl)*scl) * gray ;
+    vec3 thresh = vec3(threshR, threshG, threshB);
+
+    // render the output
+    gl_FragColor = vec4(thresh, 1.0);
+}

dist/assets/examples/assets/webcam.vert

@@ -0,0 +1,21 @@
+// vert file and comments from adam ferriss
+// https://github.com/aferriss/p5jsShaderExamples
+
+// our vertex data
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+// lets get texcoords just for fun!
+varying vec2 vTexCoord;
+
+void main() {
+    // copy the texcoords
+    vTexCoord = aTexCoord;
+
+    // copy the position data into a vec4, using 1.0 as the w component
+    vec4 positionVec4 = vec4(aPosition, 1.0);
+    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+
+    // send the vertex information on to the fragment shader
+    gl_Position = positionVec4;
+}

dist/assets/examples/en/00_Structure/00_Statements_and_Comments.js

@@ -0,0 +1,20 @@
+/*
+ * @name Comments and Statements
+ * @arialabel Mustard yellow background
+ * @description Statements are the elements that make up programs. The ";" (semi-colon) symbol is used to end statements. It is called the "statement terminator". Comments are used for making notes to help people better understand programs. A comment begins with two forward slashes ("//"). (ported from https://processing.org/examples/statementscomments.html)
+ */
+// The createCanvas function is a statement that tells the computer 
+// how large to make the window.
+// Each function statement has zero or more parameters. 
+// Parameters are data passed into the function
+// and are used as values for telling the computer what to do.
+function setup() {
+   createCanvas(710, 400);
+}
+
+// The background function is a statement that tells the computer
+// which color (or gray value) to make the background of the display window 
+function draw() {
+   background(204, 153, 0);
+}
+

dist/assets/examples/en/00_Structure/01_Coordinates.js

@@ -0,0 +1,40 @@
+/*
+ * @name Coordinates
+ * @arialabel Black background with a orange outline of a square in the middle and a blue line across at the top ⅓ point of the square
+ * @description All shapes drawn to the screen have a position that is
+ * specified as a coordinate. All coordinates are measured as the distance from
+ * the origin in units of pixels. The origin [0, 0] is the coordinate in the
+ * upper left of the window and the coordinate in the lower right is [width-1,
+ * height-1].
+ */
+function setup() {
+  // Sets the screen to be 720 pixels wide and 400 pixels high
+  createCanvas(720, 400);
+}
+
+function draw() {
+  // Set the background to black and turn off the fill color
+  background(0);
+  noFill();
+
+  // The two parameters of the point() method each specify
+  // coordinates.
+  // The first parameter is the x-coordinate and the second is the Y
+  stroke(255);
+  point(width * 0.5, height * 0.5);
+  point(width * 0.5, height * 0.25);
+
+  // Coordinates are used for drawing all shapes, not just points.
+  // Parameters for different functions are used for different
+  // purposes. For example, the first two parameters to line()
+  // specify the coordinates of the first endpoint and the second
+  // two parameters specify the second endpoint
+  stroke(0, 153, 255);
+  line(0, height * 0.33, width, height * 0.33);
+
+  // By default, the first two parameters to rect() are the
+  // coordinates of the upper-left corner and the second pair
+  // is the width and height
+  stroke(255, 153, 0);
+  rect(width * 0.25, height * 0.1, width * 0.5, height * 0.8);
+}