CharlesFr

@CharlesFr·14 public vizzes

Gist efe06cf99253646a0da41501d118459a

This example demonstrates a Python function that automatically adds watermarks and logos to images. It opens an input image, resizes a secondary watermark image to 70% of the image width and a logo to 15% of the width, then pastes the watermark at the center and the logo at the bottom-left corner using the PIL `Image.paste` method with alpha-channel masks. The process uses `Image.open` with `convert('RGBA')` to handle transparency, and finally saves the composited result in RGB format.

Sep 22, 2018

Loading thumbnail…

Gist 99f0384031106e9fdc7a0d325cd88606

This example demonstrates a neural network classifier for handwritten digits. A Processing sketch displays the network architecture, and mouse clicks either train the network on 500 random samples from the training set or respond to a single test sample. The code uses Processing's `loadPixels()` and `redraw()` functions, alongside custom `Network`, `loadData()`, and `setupSigmoid()` methods, to visualize the network’s layered connections in real time.

Mar 29, 2017

Loading thumbnail…

Gist 9b63d483619f2d9eebd0d3d91fe22dbc

This example demonstrates a neural network with a training loop that adjusts output and hidden layer errors, using custom classes for network layers and nodes. The code shows a `Network` class with a `train` method that iterates through output and hidden layers, calling `setError` and `train` on each node. It relies on a custom object-oriented API rather than a specific visualization library, with the network structure implied through layer arrays and methods like `m_output_layer` and `m_hidden_layer`. The visualization would likely depict node connections and weight updates, though no rendering library is present in this snippet.

Mar 29, 2017

Loading thumbnail…

Gist d6e2a2307801a1a2d367875fe3cf671a

This example demonstrates a three-layer neural network learning to classify patterns through supervised backpropagation. The Processing sketch uses a custom `Neuron` class with a training loop that adjusts connection weights based on error signals. The code shows the core training mathematics, including a hyperbolic tangent activation function, delta computation, and weight updates scaled by a fixed learning rate. The visualization itself is not present in this code fragment, which focuses solely on the algorithmic update logic for each neuron’s error and weight adjustment.

Mar 29, 2017

Loading thumbnail…

Gist 36fa85de37aeb50756ec65aa6548b25f

This example implements an artificial neural network where individual neurons are drawn as circles on a canvas. Each neuron connects to a set of previous-layer inputs, multiplying their output values by random weights, then passing the summed result through a sigmoid activation function. The code renders each neuron’s fill color based on its output value, using the Processing API’s `ellipse()` and `fill()` functions to visualize activation levels. The neural activity propagates layer by layer, producing a dynamic, self-contained simulation of a feedforward network without external data inputs.

Mar 29, 2017

Loading thumbnail…

Gist 504719be190c80e2cec9228ea8849c7f

This example shows a handwritten digit recognition system built in Processing. It displays a neural network with 196 input nodes, 49 hidden nodes, and 10 output nodes, trained on the MNIST dataset. The sketch loads a sigmoid activation function and constructs the network via the custom `Network` class. As the user draws on a canvas, the network classifies the input and visualizes the activations propagating through the layers. The code uses Processing’s `setup()` and `loadSigmoid()` methods to initialize the model and rendering.

Mar 29, 2017

Loading thumbnail…

Gist 48900009bc9111ca9bba882570795f41

This example visualizes a three-layer neural network using Processing. It shows the input layer arranged in a grid, a hidden layer in a smaller grid, and an output layer spread horizontally, with each node drawn as a visual element. The code uses Processing’s `pushMatrix`, `translate`, and `popMatrix` to position each node at computed coordinates. The layout is fixed, with the layers placed at different screen positions, and the output layer is drawn with a flag to change its appearance. No data is loaded, and the network structure is hardcoded in the class.

Mar 29, 2017

Loading thumbnail…

Gist 232b1f382c6798335ff1f889303e9f62

This example visualizes a neural network’s response to input cards, showing how activation flows from the input layer through the hidden layer to the output layer. The code, written in Processing, defines a `Network` class whose `respond()` method assigns each card’s input values to the input layer’s neurons, then sequentially calls `respond()` on each hidden and output neuron to propagate signals. It uses the `Card` class for data inputs and the `Network`’s internal layer arrays to manage neurons, demonstrating a feedforward computation without any external visualization library.

Mar 29, 2017

Loading thumbnail…

Gist 7acbe7d13bbc6b2f68c1082286e43733

This example shows the initialization of a three-layer neural network in Java, defining input, hidden, and output neuron arrays. The code creates each layer by calling a `Neuron` constructor, with hidden neurons receiving the input layer and output neurons receiving the hidden layer as references, establishing the network’s connectivity. It uses plain Java class definitions and arrays, without external visualization libraries, focusing on the structural setup rather than rendering. The snippet is part of a larger network initializer, demonstrating how layer dependencies are wired during construction.

Mar 29, 2017

Loading thumbnail…

Sigmoid Function

This example visualizes a sigmoid function, a smooth S-shaped curve that maps any real number to a range between negative one and positive one. It precomputes 200 samples of the function into a floating-point array, using an exponential formula with a steepness factor. A separate lookup function then retrieves values from this array by converting a given x-coordinate into an array index, applying flooring, scaling, and clamping to stay within bounds. The code uses the Processing language’s `exp`, `constrain`, and `floor` functions to generate and access the curve data.

Mar 29, 2017

Loading thumbnail…

Gist 0b384246f66fe33ea9666f0d1aec3707

This example displays a neural network’s real-time classification of handwritten digit images from a testing set, cycling through a random card number each time the mouse is pressed. The Processing sketch uses the `Network` class to respond to pixel data from a 196-input layer, then renders the network’s nodes and connections with `smooth()` and `stroke(150)`. The current card index and its label are shown as text at the bottom of the canvas, while the background is cleared each frame with `background(255)`.

Mar 29, 2017

Loading thumbnail…

Gist 6415ca0edd67a967c88fe328b0b26115

This example visualizes the input layer of a neural network as a grid of circles, positioned based on a 14-column layout. The `Network` class initializes an array of `Neuron` objects and sets their output values from a `Card` object's inputs. Rendering is done through Processing's `pushMatrix`, `translate`, and `popMatrix` functions, with each neuron’s display method handling its own drawing. The arrangement uses `height` and `width` for responsive sizing, showing how the network’s initial state is mapped spatially.

Mar 29, 2017

Loading thumbnail…

Simple Neuron

A Processing sketch renders a single neuron as a simple circle, with its grayscale fill directly mapped from the neuron's output value using `fill(128 * (1 - m_output))` and an `ellipse(0,0,16,16)` at the origin. The `Neuron` class stores the output in `m_output`, and its `display()` method draws the shape, showing a minimal example of visual encoding where brightness decreases as the neuron’s activation increases. No external libraries are used; the code relies only on Processing’s core drawing API for this static representation.

Mar 29, 2017

Loading thumbnail…

Gist 628b2fab1b21dd2fd74ddc2e7469261f

This interactive visualization demonstrates a neural network classifying handwritten digits from the MNIST dataset, showing the network’s ten output activations for each input image. It uses Processing’s `loadBytes()` to read 196-byte image data and 10,000 label bytes, splitting the data set so that four out of five cards train the model while every fifth card tests it. The code defines a `Card` class that stores input arrays and output arrays, highlighting the correct answer within the template outputs during label loading.

Mar 26, 2017