Sigmoid Function

100%

Sigmoid Function

✓ Published0🌍 Public

Last edited Mar 29, 2017

Created on Mar 29, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Sine function-a little animation

This visualization displays the sine function as a series of animated circles, each positioned vertically according to its sine value and horizontally by index. The circles transition their vertical positions over three seconds, creating a wave-like motion. The code uses d3.select, d3.range, and d3’s transition API to animate SVG circle elements, with random values for radius, color, and final placement. The data is generated directly from the sine of each index, and the rendering is SVG-based within a full-window canvas.

NNita

57% match

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.

CCharlesFr

56% match

Loading thumbnail…

circle with Sine and cosine functions

This example displays a circular cluster of small, randomly sized and colored circles, positioned along the path of a sine and cosine wave. The visualization is generated using React and rendered as an SVG. The code maps an array of numbers to circle elements, calculating their x and y coordinates with the `Math.cos` and `Math.sin` functions. Each circle’s radius and fill color are also randomly determined using `Math.random`, producing a varied and organic visual pattern.

NNita

55% match

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.

CCharlesFr

55% match

Loading thumbnail…

Sine function with React

This example visualizes a sine wave using a series of circles plotted along the x-axis, with each circle’s vertical position computed as `Math.sin(a) * 200` and offset from the horizontal center. The chart is rendered as an SVG using React and ReactDOM, with 50 circles spaced 50 pixels apart across a 960×500 canvas. The code leverages React’s declarative component structure, mapping over an array of x-coordinates to generate circle elements, while the HTML loads React libraries and a separate `bundle.js` to run the visualization.

NNita

55% match

Loading thumbnail…

slinky

A single white line repeatedly traces the outline of a circle, but its shape is continuously warped by a sinusoidal modulation that scales and rotates each point’s radial position. The animation cycles through several periods of this distortion, making the circle appear to coil and uncoil like a slinky. The code uses D3’s `d3.timer` to update a `path` element, computing new coordinates for 1,000 sample points via a transformation that multiplies the base circle’s x- and y-coordinates by cosine and sine of the angle multiplied by a time-varying factor. The rendering relies on an SVG `path` with a thick white stroke over a dark background, leveraging the lodash and d3-jetpack helper libraries for utilities and concise syntax.

11wheel

54% match

Loading thumbnail…

Line Graph

This line graph example displays a single smooth curve that dips and rises across a blank SVG canvas, tracing a sinusoidal-like pattern from the left edge to the right. The path is drawn with a thick black stroke and rounded line caps on a 781×554 viewBox. The visualization is rendered using React with inline SVG, with the line’s coordinates hardcoded in one path element. No data source or interactivity is present; the example focuses purely on basic SVG path rendering within a minimal HTML page.

CClaudio Puggioni

54% match

Loading thumbnail…

ease function

This example demonstrates the mathematical behavior of a simple easing function that animates a variable toward a target value. The visualization shows how the variable converges to the target over time, with the easing strength and sensitivity threshold controlling the speed and precision of the approach. The code defines a JavaScript function, `ease`, which iteratively moves the variable by a fraction of the remaining distance, snapping to the target once the difference falls below a threshold. The rendering is driven by this custom logic, with no external animation or easing libraries involved, making it a bare-bones illustration of frame-by-frame interpolation.

MMAKIO135

54% match