added shaders to render island with shadows

shader.frag

@@ -0,0 +1,27 @@
+precision mediump float;
+
+varying vec2 pos;
+
+uniform sampler2D colorMap;
+uniform sampler2D heightMap;
+uniform float width;
+uniform vec3 lightDir;
+void main() {
+    vec2 newPos = pos;
+    newPos.y = 1. - newPos.y;
+    vec4 col = texture2D(colorMap, newPos);
+    float d = 1./width;
+    vec2 posdx = newPos;
+    posdx.x = posdx.x+d;
+    vec2 posdy = newPos;
+    posdy.y = posdy.y+d;
+    float height = texture2D(heightMap, newPos).x*100.;
+    float heightdx = texture2D(heightMap, posdx).x*100.;
+    float heightdy = texture2D(heightMap, posdy).x*100.;
+    vec3 unnormal = vec3((heightdx-height),(heightdy-height),1);
+    vec3 normal = normalize(unnormal);
+    float brightness = dot(lightDir,normal);
+    brightness = clamp(brightness, 0.2, 1.);
+    col.rgb = col.rgb*brightness;
+    gl_FragColor = col;
+}

shader.vert

@@ -0,0 +1,13 @@
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 pos;
+
+void main() {
+    pos = aTexCoord;
+
+    vec4 position = vec4(aPosition,1.0);
+    position.xy = position.xy*2.-1.;
+
+    gl_Position = position;
+}

sketch.js

@@ -1,20 +1,33 @@
 let heightmap;
+let colormap;
+let shadows;
+
+function preload(){
+  shadows = loadShader('shader.vert', 'shader.frag');
+}
 function setup() {
-  createCanvas(windowHeight,windowHeight);
+  createCanvas(windowHeight,windowHeight, WEBGL);
+  print(height)
+  shader(shadows);
+  noStroke();
   //noiseSeed(1)
   heightmap = generateHeightMap(height,0.015);
   colormap = generateColorMap(heightmap);
+  shadows.setUniform('colorMap',colormap);
+  shadows.setUniform("heightMap", heightmap);
+  shadows.setUniform("width",width)
 }
 
 function draw() {
   background(0);
-  image(colormap,0,0);
-  print('img');
+  dir = createVector(1,1,2).normalize()
+  shadows.setUniform("lightDir",[dir.x,dir.y,dir.z])
+  rect(0,0,width,height);
   noLoop();
 }
 
 function generateHeightMap(size, roughness){
-  noiseDetail(10,0.5)
+  noiseDetail(5,0.5)
   let img = createImage(width, height);
   img.loadPixels();
   for (let x = 0; x < img.width; x += 1) {
@@ -43,8 +56,10 @@ function generateColorMap(HM){
         c = color(100,150,50);
       }else if(H>50){
         c = color(200,250,100);
+      }else if(H>30){
+        c = color(250,250,200);
       }else{
-        c = color(250,250,200)
+        c = color(0,0, 200)
       }
       img.set(x, y, c);
     }