let R = 50;

​

let mesh;

​

let rotateX_angle = 0;

​

function preload() {

  colorShader = loadShader('basic.vert','basic.frag');

  heightShader = loadShader('basic.vert', 'height.frag');

}

function setup() {

  pixelDensity(1);

  createCanvas(400, 400, WEBGL);

  mesh = new Mesh(R, detail);

  colorTexture = createGraphics(detail, detail, WEBGL);

  colorTexture.pixelDensity(1);

  colorTexture.noStroke();

  heightTexture = createGraphics(detail+1, detail+1, WEBGL);

  heightTexture.pixelDensity(1);

  heightTexture.noStroke();

  bufferHeighTexture = createGraphics(detail+1, detail+1, WEBGL);

  bufferHeighTexture.pixelDensity(1);

  bufferHeighTexture.noStroke();

}

​

function draw() {

  background(225);

  // colorTexture.shader(colorShader);

  // colorShader.setUniform("resolution", [detail, detail]);

  // colorTexture.rect(0, 0, detail, detail);

​

  heightTexture.shader(heightShader);

  heightShader.setUniform("resolution", [detail, detail]);

  heightShader.setUniform("r", R);

  heightTexture.rect(0, 0, detail, detail);

  // image(heightTexture, 0, 0);

  // resetShader();

​

  bufferHeighTexture.image(heightTexture, -detail/2-1, -detail/2-1);

  // bufferHeighTexture.rect(0, 0, detail, detail);

  image(bufferHeighTexture, 0, 0);

  // texture(bufferHeighTexture);

  // rect(0, 0, detail*10, detail*10);

  bufferHeighTexture.loadPixels();

  // mesh.updateVertices(bufferHeighTexture.pixels)

  // texture(colorTexture);

  // rotateX(rotateX_angle);

  // mesh.show();  

  rotateX_angle = (rotateX_angle + 0.01)%(2*PI);

}