### Three.js Shader Material Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/wobblysphere-threejs.html

Initializes the Three.js scene, camera, renderer, and sets up a ShaderMaterial with custom vertex and fragment shaders. Includes event listeners for window resizing and rendering loop setup.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "container" );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(600,600);
  renderer.setPixelRatio( window.devicePixelRatio );
  dims = new THREE.Vector2;
  renderer.getSize(dims);
  camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 );
  camera.position.z = 3;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent
  } );
  mesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 100, 100 ), material );
  scene = new THREE.Scene();
  scene.add( mesh );
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize );
  render();
} );
```

--------------------------------

### Three.js Initialization and Rendering Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/wooshysphere-threejs.html

Sets up the Three.js scene, camera, renderer, and material for the wooshy sphere. Includes event listeners for window resizing and the main render loop.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45; window.addEventListener( 'load', function() { container = document.getElementById( "container" ); renderer = new THREE.WebGLRenderer(); renderer.setSize(600,600); renderer.setPixelRatio( window.devicePixelRatio ); dims = new THREE.Vector2; renderer.getSize(dims); camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 ); camera.position.z = 3; material = new THREE.ShaderMaterial( { uniforms: { time: { type: "f", value: 0.0 } }, vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent } ); mesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 100, 100 ), material ); scene = new THREE.Scene(); scene.add( mesh ); const orbit = new THREE.OrbitControls( camera, renderer.domElement ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize ); render(); } ); function onWindowResize () { // renderer.setSize( window.innerWidth, window.innerHeight ); // camera.aspect = window.innerWidth / window.innerHeight; // camera.updateProjectionMatrix(); } function render() { material.uniforms[ 'time' ].value = .001 * ( Date.now() - start ); renderer.render( scene, camera ); requestAnimationFrame( render ); }
```

--------------------------------

### Three.js Initialization and Animation Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-01.html

Initializes the Three.js scene, camera, renderer, and mesh with a ShaderMaterial. Sets up event listeners for window resizing and initiates the animation loop.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "three-container" );
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 );
  camera.position.z = 3.0;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent,
    fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent
  } );
  mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material);
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( 500, 500 );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.getContext().getExtension("OES_standard_derivatives");
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize );
  render();
} );
function onWindowResize () {
  renderer.setSize( 500, 500 );
  camera.aspect = 1.0;
  camera.updateProjectionMatrix();
}
function render() {
  material.uniforms[ 'time' ].value = .001 * ( Date.now() - start );
  renderer.ren
```

--------------------------------

### Get WebGL Context and Check Support

Source: https://github.com/stegu/psrdnoise/blob/main/docs/test/showprecision.html

Initializes WebGL context and checks for WebGL2 support. This is a prerequisite for using WebGL features.

```javascript
function main() {
  // Get A WebGL context
  const canvas = document.createElement("canvas");
  const gl = canvas.getContext("webgl");
  if (!gl) {
    supp.textContent = "WebGL is not supported. Aborting.";
    return;
  }

  // Check for WebGL2 support
  const canvas2 = document.createElement("canvas");
  const gl2 = canvas2.getContext("webgl2");
  const supp = document.getElementById("webglsupport");
  if (gl2) {
    supp.textContent = "WebGL 2.0 is supported.";
  } else {
    supp.textContent = "WebGL 2.0 is NOT supported.";
  }
  // ... rest of the code
```

--------------------------------

### SyntaxHighlighter Test Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/011_smart_tabs.html

Initializes SyntaxHighlighter tests, defining arrays for even and uneven lines to compare against rendered code.

```javascript
queue(function() { var $sh; module('011_smart_tabs'); var evenLines = [
	'the words in this paragraph',
	'should look like they are',
	'evenly spaced between columns'
], unevenLines = [
	'the words in this paragraph',
	'should look out of whack',
	'because smart tabs are disabled'
];

function fixSpaces(s) {
	s = encodeURIComponent(s).replace(/%C2%A0/g, '%20');
	return unescape(s).replace(/\s+$/g, '');
};
```

--------------------------------

### Three.js Scene Setup and Rendering

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/sunyellow-threejs.html

Initializes the Three.js scene, camera, and renderer. Appends the renderer's DOM element to the container and sets up the animation loop.

```javascript
domElement );

container.appendChild( renderer.domElement );

onWindowResize();

window.addEventListener( 'resize', onWindowResize );

render();

}

);

function onWindowResize () {

// renderer.setSize( window.innerWidth, window.innerHeight );
// camera.aspect = window.innerWidth / window.innerHeight;
// camera.updateProjectionMatrix();

}

function render() {

material.uniforms[ 'time' ].value = .001 * ( Date.now() - start );

renderer.render( scene, camera );

requestAnimationFrame( render );

}
```

--------------------------------

### Three.js Scene Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/sunred-threejs.html

Initializes a Three.js scene, renderer, camera, and a sphere mesh with a custom shader material. Includes event listeners for window load and controls for camera interaction.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "container" );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(600,600);
  renderer.setPixelRatio( window.devicePixelRatio );
  dims = new THREE.Vector2;
  renderer.getSize(dims);
  camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 );
  camera.position.z = 3;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent
  } );
  mesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 100, 100 ), material );
  scene = new THREE.Scene();
  scene.add( mesh );
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );

```

--------------------------------

### JavaScript Function Example

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/012_server_side.html

A simple JavaScript function demonstrating basic syntax.

```javascript
function helloWorld() { // this is great! for(var i = 0; i <= 1; i++) alert("yay"); }
```

--------------------------------

### Initialize THREE.js Scene and Objects

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-03.html

Sets up the camera, material with shaders, mesh, and renderer. Includes orbit controls and appends the renderer's DOM element to the container. Essential for starting any THREE.js application.

```javascript
eCamera( fov, 1.0, 0.1, 100 ); camera.position.z = 3.0; material = new THREE.ShaderMaterial( { uniforms: { time: { type: "f", value: 0.0 } }, vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent, fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent } ); mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( 500, 500 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.getContext().getExtension("OES_standard_derivatives"); const orbit = new THREE.OrbitControls( camera, renderer.domElement ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize ); render(); }
```

--------------------------------

### Vertex Shader Setup for Bump Mapping

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-06.html

Initializes necessary varying variables and transforms the vertex position in the vertex shader. This setup is required for the fragment shader to access position and texture coordinates.

```glsl
uniform float time; varying vec3 uvw; varying vec2 st; varying vec3 N; void main() { uvw = position; st = uv; N = normal; // Save transformation for after bump mapping gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
```

--------------------------------

### Three.js Scene and Mesh Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/smokeplume-threejs.html

Initializes the Three.js renderer, scene, camera, and a mesh with a custom shader material. The shader material combines psrdnoise logic with vertex and fragment shaders. The scene is set up for rendering.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "container" );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(600,600);
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.getContext().getExtension("OES_standard_derivatives");
  dims = new THREE.Vector2;
  renderer.getSize(dims);
  camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 );
  camera.position.z = 3;
  material = new THREE.ShaderMaterial( {
    transparent: true,
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent
  } );
  mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0.2, 2, 20, 20, true ), material );
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0.5,0.75,1.0);
  renderer.autoClear = true;
  scene.add( mesh );
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize );
  render();
} );
```

--------------------------------

### Three.js Setup for 3D Sun Visualization

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/sunyellow-threejs.html

JavaScript code using Three.js to set up the scene, camera, renderer, and mesh for the 3D swirly sun effect.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "container" );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(600,600);
  renderer.setPixelRatio( window.devicePixelRatio );
  dims = new THREE.Vector2;
  renderer.getSize(dims);
  camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 );
  camera.position.z = 3;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent
  } );
  mesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 100, 100 ), material );
  scene = new THREE.Scene();
  scene.add( mesh );
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
});
```

--------------------------------

### Append Renderer and Setup Resize Listener

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/sunred-threejs.html

Appends the Three.js renderer's DOM element to the container and sets up an event listener for window resizing.

```javascript
container.appendChild( renderer.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize );
render();
}
```

--------------------------------

### Three.js Shader Material Setup

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-04.html

Sets up a Three.js ShaderMaterial for a sphere, combining vertex and fragment shaders. It initializes uniforms and uses pre-defined shader code from HTML elements.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
    container = document.getElementById( "three-container" );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 );
    camera.position.z = 3.0;
    material = new THREE.ShaderMaterial( {
        uniforms: {
            time: { type: "f", value: 0.0 }
        },
        vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent,
        fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent
    } );
    mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material);
    scene.add(
```

--------------------------------

### jQuery Test Setup for Syntax Highlighter

Source: https://github.com/stegu/psrdnoise/blob/main/docs/2d-tutorial/syntaxhighlighter_3.0.83/tests/cases/003_script_tag.html

Initializes and tests the syntax highlighter component using jQuery. It checks for the presence and basic functionality of the toolbar, caption, gutter, and code display.

```javascript
queue(function() { var $sh;
module('003_script_tag');
test('basic html check of default elements', function() {
  $sh = $('#sh_003_script_tag');
  ok_sh($sh);
  ok_toolbar($sh);
  ok_caption($sh, 'Title/caption should render');
  ok_gutter($sh);
  ok_code($sh);
});
});
```

--------------------------------

### Three.js Scene Setup and Animation

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/puffysphere-threejs.html

JavaScript code to initialize a Three.js scene, create a sphere with a custom shader material, and set up orbit controls for camera manipulation. The animation loop updates the 'time' uniform in the shader.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "container" );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(600,600);
  renderer.setPixelRatio( window.devicePixelRatio );
  dims = new THREE.Vector2;
  renderer.getSize(dims);
  camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 );
  camera.position.z = 3;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent
  } );
  mesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 100, 100 ), material );
  scene = new THREE.Scene();
  scene.add( mesh );
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize );
  render();
} );
function onWindowResize () {
  // renderer.setSize( window.innerWidth, window.innerHeight ); // This line is commented out in the source
  // camera.aspect = window.innerWidth / window.in // This line is truncated in the source
}
```

--------------------------------

### Three.js Setup for 3D PSRDnoise Sphere

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-02.html

This JavaScript code sets up a Three.js scene to render a sphere with a custom shader material. It initializes the scene, camera, mesh, and renderer, and sets up orbit controls for camera manipulation. The shader material uses both included and visible vertex and fragment shaders.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
    container = document.getElementById( "three-container" );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 );
    camera.position.z = 3.0;
    material = new THREE.ShaderMaterial( {
        uniforms: { time: { type: "f", value: 0.0 } },
        vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent,
        fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent
    } );
    mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material);
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( 500, 500 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.getContext().getExtension("OES_standard_derivatives");
    const orbit = new THREE.OrbitControls( camera, renderer.domElement );
    container.appendChild( renderer.domElement );
    onWindowResize();
    window.addEventListener( 'resize', onWindowResize );
    render();
} );

function onWindowResize () {
    renderer.setSize( 500, 500 );
    camera.aspect = 1.0;
    camera.updateProjectionMatrix();
}

function render() {
    material.uniforms[ 'time' ].value = .001 * ( Date.now() - start );
    renderer.render( scene, camera );
    requestAnimationFrame( render );
}
```

--------------------------------

### Queue and Test Execution

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/008_first_line.html

Sets up a queue for tests and executes a test case to check the first line of syntax highlighting.

```javascript
queue(function() { var $sh; module('008\_first\_line'); test('check the first line', function() { $sh = $(\'#sh\_008\_first\_line\'); ok_sh($sh); ok_toolbar($sh); ok_gutter($sh); ok_code($sh); equals($sh.find('.gutter .index0').text(), '10', 'First line'); }); });
```

--------------------------------

### URL in Comment

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/004_url_parsing.html

This example illustrates parsing a URL found within a JavaScript comment block.

```javascript
// < http://www.gnu.org/licenses/?test=1&y=2 >.
```

--------------------------------

### Three.js Initialization and Rendering

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/index.html

Sets up the Three.js scene, camera, sphere mesh, and renderer. It includes event listeners for window resizing and animation loop.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
container = document.getElementById( "three-container" );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 );
camera.position.z = 3.0;
material = new THREE.ShaderMaterial( {
  uniforms: { time: { type: "f", value: 0.0 } },
  vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent,
  fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent
} );
mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material);
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( 500, 500 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.getContext().getExtension("OES_standard_derivatives");
const orbit = new THREE.OrbitControls( camera, renderer.domElement );
container.appendChild( renderer.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize );
render();
} );
function onWindowResize () {
renderer.setSize( 500, 500 );
camera.aspect = 1.0;
camera.updateProjectionMatrix();
}
function render() {
material.uniforms[ 'time' ].value = .001 * ( Date.now() - start );
renderer.ren
```

--------------------------------

### Initialize SyntaxHighlighter

Source: https://github.com/stegu/psrdnoise/blob/main/docs/2d-tutorial/syntaxhighlighter_3.0.83/index.html

Call SyntaxHighlighter.all() to automatically find and highlight all code blocks on the page.

```javascript
SyntaxHighlighter.all();
```

--------------------------------

### Gridlines generation

Source: https://github.com/stegu/psrdnoise/blob/main/docs/2d-gallery/wavyplane-webgl.html

Generates grid lines based on distance to nearest lines. Useful for creating tiled backgrounds or visual guides.

```glsl
float gridlines(vec2 v, vec2 p, float width) {
  float distx = 0.0;
  if(p.x > 0.0) {
    distx = abs(mod(v.x+0.5*p.x,p.x)-0.5*p.x); // unsigned distance to nearest x line
  }
  float disty = 0.0;
  if(p.y > 0.0) {
    disty = abs(mod(v.y+0.5*p.y,p.y)-0.5*p.y);
  }
  float gridx = 1.0 - aastep(width, distx);
  float gridy = 1.0 - aastep(width, disty);
  return max(gridx, gridy);
}
```

--------------------------------

### Three.js Initialization and Rendering Loop

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/darkenergycore-threejs.html

Sets up the Three.js scene, camera, renderer, and material with shader uniforms. Includes event listeners for window resizing and the main render loop.

```javascript
var container, renderer, scene, camera, mesh, material, start = Date.now(), fov = 45; window.addEventListener( 'load', function() { container = document.getElementById( "three-container" ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 ); camera.position.z = 3.0; material = new THREE.ShaderMaterial( { uniforms: { time: { type: "f", value: 0.0 }, }, vertexShader: document.getElementById('vs-main').textContent, fragmentShader: document.getElementById('fs-includes').textContent + "\r\n" + document.getElementById( 'fs-main' ).textContent } ); mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 20, 20 ), material); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( 600, 600 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.getContext().getExtension("OES\_standard\_derivatives"); const orbit = new THREE.OrbitControls( camera, renderer.domElement ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize ); render(); } ); function onWindowResize () { renderer.setSize( 600, 600 ); camera.aspect = 1.0; camera.updateProjectionMatrix(); } function render() { material.uniforms[ 'time' ].value = .001 * ( Date.now() - start ); renderer.render( scene, camera ); requestAnimationFrame( render ); }
```

--------------------------------

### Initialize Brush List and Test Structure

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/brushes_tests.html

Defines an array of brush names and sets up the document ready function to dynamically load and display brush content. It uses jQuery to fetch HTML files for each brush and append them to the page, then initializes SyntaxHighlighter.

```JavaScript
var brushes = [
    'AS3',
    'AppleScript',
    'Bash',
    'CSharp',
    'ColdFusion',
    'Cpp',
    'Css',
    'Delphi',
    'Diff',
    'Erlang',
    'Groovy',
    'JScript',
    'Java',
    'JavaFX',
    'Perl',
    'Php',
    'Plain',
    'PowerShell',
    'Python',
    'Ruby',
    'Sass',
    'Scala',
    'Sql',
    'Vb',
    'Xml'
];

$(document).ready(function() {
    var html = '';
    $.each(brushes, function(index) {
        var name = this;
        html += '' +
            '<div class="test-wrap">' +
                '<h1>' +
                    '<a href="#theme' + (index + 1) + '">next</a> '
                    + '<a name="theme' + index + '">' + name + '</a>' +
                '</h1>';

        $.ajax({
            url: 'brushes/' + name.toLowerCase() + '.html',
            type: 'GET',
            dataType: 'text',
            async: false,
            success: function(data) {
                html += data;
            },
            error: function() {
                html += '<p>Not found...</p>';
            }
        });
        html += '</div>\n';
        if (index % 2 != 0) html += '<div style="clear:both"></div>\n';
    });

    $('#output')[0].innerHTML = html;
    $('#output a[name]:first').attr('name', 'top');
    $('#output a[href]:last').attr('href', '#top').html('top');

    SyntaxHighlighter.highlight();
});
```

--------------------------------

### JavaScript: Initialize Brush Tests

Source: https://github.com/stegu/psrdnoise/blob/main/docs/2d-tutorial/syntaxhighlighter_3.0.83/tests/brushes_tests.html

This script initializes the SyntaxHighlighter brush tests. It defines an array of brush names, dynamically loads HTML content for each brush using AJAX, and then applies SyntaxHighlighter to the loaded content. It also includes navigation links for themes.

```javascript
var brushes = [
    'AS3',
    'AppleScript',
    'Bash',
    'CSharp',
    'ColdFusion',
    'Cpp',
    'Css',
    'Delphi',
    'Diff',
    'Erlang',
    'Groovy',
    'JScript',
    'Java',
    'JavaFX',
    'Perl',
    'Php',
    'Plain',
    'PowerShell',
    'Python',
    'Ruby',
    'Sass',
    'Scala',
    'Sql',
    'Vb',
    'Xml'
];

$(document).ready(function() {
    var html = '';
    $.each(brushes, function(index) {
        var name = this;
        html += '' +
            '<div class="test-wrap">' +
            '<h1>' +
            '<a href="#theme' + (index + 1) + '">next</a> ' +
            '<a name="theme' + index + '">' + name + '</a>' +
            '</h1>' ;

        $.ajax({
            url: 'brushes/' + name.toLowerCase() + '.html',
            type: 'GET',
            dataType: 'text',
            async: false,
            success: function(data) {
                html += data;
            },
            error: function() {
                html += '<p>Not found...</p>';
            }
        });
        html += '</div>\n';
        if (index % 2 != 0) html += '<div style="clear:both"></div>\n';
    });

    $('#output')[0].innerHTML = html;
    $('#output a[name]:first').attr('name', 'top');
    $('#output a[href]:last').attr('href', '#top').html('top');

    SyntaxHighlighter.highlight();
});
```

--------------------------------

### Initialize Three.js Scene and Renderer

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-04.html

Sets up the Three.js scene, camera, renderer, and orbit controls. Ensures the OES_standard_derivatives extension is available for shaders. Appends the renderer's DOM element to the container and sets up the resize listener.

```javascript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, 1.0, 0.1, 1000 );

const mesh = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), material );
scene.add( mesh );

renderer = new THREE.WebGLRenderer();
renderer.setSize( 500, 500 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.getContext().getExtension( "OES_standard_derivatives" );

const orbit = new THREE.OrbitControls( camera, renderer.domElement );
container.appendChild( renderer.domElement );

onWindowResize();
window.addEventListener( 'resize', onWindowResize );

render();
```

--------------------------------

### Three.js Initialization and Animation

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-gallery/noisysphere-threejs.html

Sets up the Three.js scene, camera, renderer, and a sphere mesh with a custom ShaderMaterial. It includes event listeners for window resizing and an animation loop to update the 'time' uniform.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "container" );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(600,600);
  renderer.setPixelRatio( window.devicePixelRatio );
  dims = new THREE.Vector2;
  renderer.getSize(dims);
  camera = new THREE.PerspectiveCamera( fov, dims.width / dims.height, 0.1, 100 );
  camera.position.z = 3;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById('psrdnoise3').textContent + " " + document.getElementById( 'fragmentShader' ).textContent
  } );
  mesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 100, 100 ), material );
  scene = new THREE.Scene();
  scene.add( mesh );
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize );
  render();
} );
function onWindowResize () {
  // renderer.setSize( window.innerWidth, window.innerHeight );
  // camera.aspect = window.innerWidth / window.innerHeight;
  // camera.updateProjectionMatrix();
}
function render() {
  material.uniforms[ 'time' ].value = .001 * ( Date.now() - start );
  renderer.render( scene, camera );
  requestAnimationFrame( render );
}
```

--------------------------------

### Basic SyntaxHighlighter Initialization and Tests

Source: https://github.com/stegu/psrdnoise/blob/main/docs/2d-tutorial/syntaxhighlighter_3.0.83/tests/cases/001_basic.html

Initializes SyntaxHighlighter for a specific element and runs basic checks on its rendered components like toolbar, caption, gutter, and code display.

```javascript
queue(function() { var $sh; module('001\_basic'); test('basic html check of default elements', function() { $sh = $("#sh\_001\_basic"); ok_sh($sh); ok_toolbar($sh); ok_caption($sh, 'Title/caption should render'); ok_gutter($sh); ok_code($sh); }); });
```

--------------------------------

### Three.js Scene Initialization

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-06.html

Initializes a Three.js scene, camera, and renderer. Sets up a shader material with uniforms and adds a sphere mesh to the scene. Requires Three.js library.

```javascript
var container, renderer, scene, camera, mesh, start = Date.now(), fov = 45;
window.addEventListener( 'load', function() {
  container = document.getElementById( "three-container" );
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 );
  camera.position.z = 3.0;
  material = new THREE.ShaderMaterial( {
    uniforms: { time: { type: "f", value: 0.0 } },
    vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent,
    fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent
  } );
  mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material);
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( 500, 500 );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.getContext().getExtension("OES_standard_derivatives");
  const orbit = new THREE.OrbitControls( camera, renderer.domElement );
  container.appendChild( renderer.domElement );
  onWindowResize();
  window.addEventListener( 'resize', onWindowResize );
  render();
} );
```

--------------------------------

### Initialize Three.js Scene and Objects

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/3d-psrdnoise-tutorial-05.html

Sets up the Three.js scene, camera, and a sphere mesh with a custom shader material. It appends the renderer's DOM element to the container and sets up window resize handling.

```javascript
er, scene, camera, mesh, start = Date.now(), fov = 45; window.addEventListener( 'load', function() { container = document.getElementById( "three-container" ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( fov, 1.0, 0.1, 100 ); camera.position.z = 3.0; material = new THREE.ShaderMaterial( { uniforms: { time: { type: "f", value: 0.0 } }, vertexShader: document.getElementById('includes-vs-hidden').textContent + "\r\n" + document.getElementById( 'vs-visible' ).textContent, fragmentShader: document.getElementById('includes-fs-hidden').textContent + "\r\n" + document.getElementById( 'fs-visible' ).textContent } ); mesh = new THREE.Mesh(new THREE.SphereGeometry( 1.0, 100, 100 ), material); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( 500, 500 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.getContext().getExtension("OES_standard_derivatives"); const orbit = new THREE.OrbitControls( camera, renderer.domElement ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize ); render(); } );
```

--------------------------------

### URL with Query Parameters

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/004_url_parsing.html

This snippet shows a URL with multiple query parameters, demonstrating correct parsing.

```javascript
var home = "http://www.alexgorbatchev.come/?test=1&y=2;test/1/2/3;";
```

--------------------------------

### Test Custom Tab Size (8)

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/011_smart_tabs.html

Tests SyntaxHighlighter's behavior when the tab size is explicitly set to 8, ensuring correct line rendering.

```javascript
test('tab size changed to 8', function() {
	$sh = $('#sh_011_smart_tabs_b');
	ok_sh($sh);
	ok_toolbar($sh);
	ok_code($sh);
	$sh.find('.code .line').each(function(index) {
		var s1 = fixSpaces($(this).text()), s2 = fixSpaces(evenLines[index]) ;
		equal(s1, s2, 'Line ' + index);
	});
});
```

--------------------------------

### Basic SyntaxHighlighter Check

Source: https://github.com/stegu/psrdnoise/blob/main/docs/3d-tutorial/syntaxhighlighter_3.0.83/tests/cases/014_legacy.html

Verifies the basic functionality and presence of toolbar and code elements for a SyntaxHighlighter instance.

```javascript
queue(function() { var $sh;
    dp.SyntaxHighlighter.HighlightAll('code');
    module('014_legacy');
    test('basic check', function() {
        $sh = $('#sh_014_legacy_a');
        ok_sh($sh);
        ok_toolbar($sh);
        ok_code($sh);
    });
```

--------------------------------

### psrdnoise MIT License Header

Source: https://github.com/stegu/psrdnoise/blob/main/src/README.md

This is the brief license header to be included with psrdnoise code when using the simplified license terms. It references the MIT license and provides a link to the repository.

```glsl
// psrdnoise (c) 2021 Stefan Gustavson and Ian McEwan
// Published under the MIT license.
// https://github.com/stegu/psrdnoise/
```