shaunrd0
/
klips
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add JavaScript WebGL example 

+ Update READMEs
This commit is contained in:
Shaun Reed 2022-02-07 13:55:14 -05:00
parent 940d035638
commit 573fc4e1e8
7 changed files with 191 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -8,6 +8,8 @@ github.com/shaunrd0/klips/
├── blockchain # Blockchain related project templates and examples
├── cpp # C++ programs, datastructures, and other examples
├── figlet # Figlet fonts I like :)
├── javascript # Javascript projects and examples
├── python # Python scripts or tools I've made
├── README.md
└── scripts # Bash scripts
```

9
javascript/README.md Normal file
View File

@ -0,0 +1,9 @@
# Javascript
This directory contains Javascript projects and examples that I've made.
```
github.com/shaunrd0/klips/javascript
├── webgl # Examples of using WebGL within JS
└── README.md
```

165
javascript/webgl/01_simple-shape/index.html Normal file
View File

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_simple-shape</title>
<style>
.test {
background-color: gray;
}
canvas {
background-color: gray;
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<!-- Simple example of shader source code (WebGL Fundamentals) -->
<script id="vertex-simple-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;
void main() {
// Convert pixel coordinates to a float randing from 0.0 -> 1.0
vec2 zeroToOne = a_position / u_resolution;
// Convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// Convert from 0->2 to -1.0->1.0
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
}
</script>
<script id="fragment-simple-shader" type="x-shader/x-vertex">
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
</script>
<!-- HTML document -->
<p class="test">This is test HTML with some CSS. Logging with JS...<br>The following block is an OpenGL canvas</p>
<canvas id="canvas"></canvas>
<!-- WebGL -->
<script>
function main() {
//
// Boilerplate OpenGL helper functions
function createShader(gl, type, source) {
let shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (success) {
return shader;
}
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
function createProgram(gl, vertexShader, fragmentShader) {
// Add check to automatically compile shaders if Strings are provided
// + Strings should be equal to HTML script id attribute value for vertex and fragment shaders
if (typeof vertexShader == 'string') {
let vertexShaderSource = document.querySelector(vertexShader).text;
vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
}
if (typeof fragmentShader == 'string') {
let fragmentShaderSource = document.querySelector(fragmentShader).text;
fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
}
let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
let success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) {
return program;
}
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
let canvas = document.querySelector("#canvas");
let gl = canvas.getContext('webgl');
if (!gl) {
console.log("ERROR: Unable to get OpenGL context");
return;
}
else {
console.log("Created OpenGL context on HTML canvas")
}
// Creating shader program and compiling shader source code
let program = createProgram(gl, "#vertex-simple-shader", "#fragment-simple-shader");
// look up where the vertex data needs to go.
let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// look up uniform locations
let resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
let colorUniformLocation = gl.getUniformLocation(program, "u_color");
// Create a buffer to put three 2d clip space points in
let positionBuffer = gl.createBuffer();
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Canvas setup
// Resize canvas to match client size
const width = canvas.clientWidth;
const height = canvas.clientHeight;
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Clear the canvas
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Tell OpenGL to use our shader program
gl.useProgram(program);
// Enable attribute; Bind gl.ARRAY_BUFFER for use with this attribute
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
let size = 2; // 2 components per iteration (X and Y value for each vertex position)
let type = gl.FLOAT; // Each X and Y value is a 32bit float
let normalize = false; // don't normalize the data
let stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
let offset = 0; // start at the beginning of the buffer
gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);
// Initialize geometry data for a 2D triangle with 3 vertices
let triangle = new Float32Array([
350, 100,
500, 300,
200, 300,
]);
// Write geometry data to positions array buffer
gl.bufferData(gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW);
// Set a random color
gl.uniform4f(colorUniformLocation, Math.random(), Math.random(), Math.random(), 1);
// set the resolution
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
// Draw the triangle with 0 offset and 3 total vertices
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
main();
</script>
</body>
</html>

9
javascript/webgl/README.md Normal file
View File

@ -0,0 +1,9 @@
# Javascript
This directory contains examples of using WebGL within JavaScript.
```
github.com/shaunrd0/klips/javascript/webgl
├── 01_simple-shape # Drawing a simple solid color triangle with WebGL
└── README.md
```

14
python/linear-regression/README.md
View File

@ -32,20 +32,6 @@ optional arguments:
Optionally provide file for data to be read from. Each point must be on it's own line with format x,y
```
Running linear regression program
```bash
python3.9 linear-regression.py --file ./input.txt --silent
Finding fitting line plot for given data [(1, 3), (2, 7), (3, 5), (4, 9), (5, 11), (6, 12), (7, 15)]
points_avg: (5.117647058823529, 5.235294117647059)
variance: (241.76470588235296, 193.05882352941177)
sigma: (3.887196176892422, 3.4736402333270258)
covariance: 0.8455882352941174
correlation: 0.0626235432924427
Our line Y = BX + A must pass through the point (5.117647058823529, 5.235294117647059)
Y = (0.05596107055961069)X + 4.9489051094890515
For X = 4.5, Y is predicted to be 5.200729927007299
```
By default, the following linear regression is calculated and displayed
```bash
python3.9 linear-regression.py

2
python/markov-model/README.md
View File

@ -90,7 +90,7 @@ Final paths sorted by probability:
(0, 2, 1, 0, 2) has probability: 0.001395
```
By default, a random Hidden Markov Model and visualization will be generated
By default, a random Hidden Markov Model and visualization will be generated and the sequence `[A, B, D, C]` will be used.
```bash
python3.9 markov-model.py

10
python/neural-network/README.md
View File

@ -8,10 +8,10 @@ python3.9 -m pip install -r requirements.txt
Neural network implementation using Python CLI to dynamically generate a resizable network
and then run a given number of learning cycles on the provided data set.
As an example, the IRIS dataset is used to classify flower types using petal measurements.
Input layer perceptron count can be adjusted with `INPUTS` positional parameter
Hidden layer perceptron count can be adjusted with `PERCEPTRONS` positional parameter
Output layer perceptron count can be adjusted with `OUTPUTS` positional parameter
Hidden layers can be added or removed using`--hidden-layers` option setting
Input layer perceptron count can be adjusted with `INPUTS` positional parameter.
Hidden layer perceptron count can be adjusted with `PERCEPTRONS` positional parameter.
Output layer perceptron count can be adjusted with `OUTPUTS` positional parameter.
Hidden layers can be added or removed using`--hidden-layers` option setting.
Node bias can be initialized randomly or with provided data.
Perceptron edge weight bias can be initialized randomly or with provided data.
Threshold for perceptron fire can be initialized randomly or with provided data.
@ -96,7 +96,7 @@ If the length of an input sequence does not match the number of input nodes requ
If the length of possible label classifications does not match the number of output nodes requested, a warning will show.
In both cases, the program corrects the node count to match the input data / labels, and not the requested node count.
The total number of output labels provided must match the total number of the number of input sequences.
The total number of output labels provided must match the total number of input sequences.
Running NN program uses IRIS data set by default.
Warnings will be shown if input and output node count is changed without providing new input.