let DIM = 800;

​

function setup() {

  createCanvas(DIM,DIM, WEBGL);

  toon_fs = createFilterShader(toon_src);

}

​

function draw() {

  background(220);

  orbitControl();

  ambientLight(140);

​

    pointLight(

      255,

      0,

      0, // color

      DIM / 2,

      DIM / 2,

      DIM / 2 // position

    );

​

    directionalLight(

      220,

      220,

      220, // color

      0,

      1,

      0 // direction

    );

​

    let locX = DIM * 0.2;

    let locY = DIM * 0.2;

    spotLight(

      100,

      100,

      255, // color

      locX,

      locY,

      200, // position

      -locX,

      -locY,

      -200, // direction

      PI / 3 // radius of the spotlight cone

    );

  toon_fs.setUniform('iResolution', [width, height]);

  toon_fs.setUniform('iGlobalTime', 1.0);//frameCount);

  filter(toon_fs);

  box(100);

}

​

// https://www.reddit.com/r/opengl/comments/1cwynl/toon_shader/

let toon_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform vec2 iResolution;

uniform float iGlobalTime;

void main(void) {   

    // map coordinates to ([-aspectRatio, aspectRatio], [-1.0, 1.0])

    vec2 center = (2.0 * gl_FragCoord.xy - iResolution.xy) / iResolution.y;

​

    float sphereRadius = 0.75;

​

    // blue background

    vec3 backgroundColor = vec3(0.2, 0.4, 0.6);

    // random light direction

    // vec3 light = normalize(vec3(0.5 * sin(3.0 * iGlobalTime), 0.5 * sin(iGlobalTime), 1.0)); // front

vec3 light = normalize(vec3(0.2, 0.2, 0.2));

​

    vec3 color = backgroundColor;

    if (length(center) < sphereRadius) {

        vec3 normal = vec3(center / sphereRadius, 0.0);

        normal.z = sqrt(1.0 - normal.x * normal.x - normal.y * normal.y);

​

        float lambert = dot(normal, light);

        float halfLambert = 0.5 * dot(normal, light) + 0.5;

        float toon = 0.5 * smoothstep(0.66, 0.67, lambert) + 0.5;

        float outline = smoothstep(0.2, 0.21, normal.z);

​

        color = outline * toon * vec3(0.9, 0.3, 0.2);

    }

​

    gl_FragColor = vec4(color, 1.0);

}

`