Learning Shaders: Mandelbrot bulb

​

Based upon Coding Challenge #168:

https://thecodingtrain.com/challenges/168-the-mandelbulb 

​

And also based upon Taxen99' sketch:

https://editor.p5js.org/Taxen99/sketches/47CDg5-nV

​

In this version I added extra rotations and some colors from:

https://iquilezles.org/articles/palettes/

​

Author: Juan Carlos Ponce Campuzano

Website: https://jcponce.github.io

Date: 06/Jun/2023

​

*/

​

// a shader variable

let theShader;

let shaderBg;

​

let img;

let time_;

let framerate;

​

function preload() {

  // load the shader

  theShader = loadShader("shader.vert", "shader.frag");

}

​

function setup() {

  // disables scaling for retina screens which can create inconsistent scaling between displays

  //pixelDensity(1);

​

  createCanvas(windowWidth, windowHeight);

  noStroke();

  time_ = 0;

​

  // shaders require WEBGL mode to work

  shaderBg = createGraphics(windowWidth, windowHeight, WEBGL);

  framerate = createP('0.0'); // display framerate

  setInterval(_ => framerate.html(frameRate() | 0), 250);

}

​

function draw() {

  // we can draw the background each frame or not.

  // if we do we can use transparency in our shader.

  // if we don't it will leave a trailing after image.

  // background(0);

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

  shaderBg.shader(theShader);

​

  // get the mouse coordinates, map them to values between 0-1 space

  let yMouse = (map(mouseY, 0, height, height, 0) / height) * 2 - 1;

  let xMouse = (mouseX / width) * 2 - 1;

​

  // Make sure pixels are square

  xMouse = (xMouse * width) / height;

  yMouse = yMouse;

  let pow = map(sin(time_), -1, 1, 6, 12); // make pow change over time between 6 and 12

​

  // pass the interactive information to the shader

  theShader.setUniform("iResolution", [width, height]);

  theShader.setUniform("iTime", millis() / 1000.0);

  theShader.setUniform("iPower", pow);

  theShader.setUniform("iAngle", time_);

  theShader.setUniform("iMouse", [xMouse, yMouse]);

​

​

​

  // rect gives us some geometry on the screen to draw the shader on

  shaderBg.rect(0, 0, width, height);

  image(shaderBg, 0, 0, width, height);

  let increment = 20 / ((frameRate() || 60) * 140); // timestep based on framerate, will rotate same speed on all regardless of framerate

  time_ += increment;

  if(time_ > TWO_PI) time_ -= TWO_PI; // prevent time from getting to big and maybe causing errors?

​

  // flip coordinate information box

  let flipX = 0;

  let flipY = 0;

  if (width - mouseX < 200) {

    flipX = -130;

  }

  if (height - mouseY < 100) {

    flipY = -35;

  }

​

  // draw coordinate information box if you want

​

  /*

  fill(255);

  rect(mouseX + flipX, mouseY + flipY, 60, 40);

  fill(0);

  text("x: " + int(mouseX), mouseX + 15 + flipX, mouseY + 15 + flipY);

  text("y: " + int(mouseY), mouseX + 15 + flipX, mouseY + 30 + flipY);

  fill(0);

  rect(mouseX + 60 + flipX, mouseY + flipY, 70, 40);

  fill(255);

  text("x: " + nfc(xMouse, 3), mouseX + 15 + 60 + flipX, mouseY + 15 + flipY);

  text("y: " + nfc(yMouse, 3), mouseX + 15 + 60 + flipX, mouseY + 30 + flipY);

​

*/

​

  //console.log(imView);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

let imView = false;

​

function mousePressed() {

  if (imView === false) {

    imView = true;

  }

  cursor('grabbing');

}

​

function mouseReleased() {

  if (imView === true) {

    imView = false;

  }

  cursor('grab');

}