justinhersom@gmail.com

@jmh1980·10 public vizzes

TES Blocks Experiment

This example renders a single Beckhoff TwinCAT HMI text block element, displaying a temperature value read from the PLC variable `PLC1.MAIN.TE_C3A6` formatted with `%f%GaugeValueFormatter(...)%/f%` and appended with "°C". The `index.html` file uses pure CSS and JavaScript to position the element with absolute pixel and percentage coordinates, while the inline JSON scripts configure the block's border width and style. The element is identified by `data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiTextblock"`, leveraging the TcHmi framework for industrial visualization.

Dec 11, 2023

Loading thumbnail…

Fork of Flags

This visualization displays two flags side by side: Palestine and Artsakh, each constructed with the SVG DOM API using `createElementNS` and `setAttribute`. The Palestine flag is built from three horizontal color bars and a red chevron path, while the Artsakh flag uses a custom palette of red, blue, and gold with a white stepped pattern. The layout is responsive to the window dimensions, with the flag elements sized proportionally to the viewport.

Dec 3, 2023

Loading thumbnail…

Fork of Fork of Flags

This example displays a sequence of two national flags—Palestine and Artsakh—rendered full-screen using SVG elements created via the Document Object Model API. The code constructs each flag programmatically with colored rectangles and paths, including a red chevron for Palestine and a geometric white block pattern for Artsakh. The script attempts to cycle through the flags with a `setTimeout` loop that appends each group to an SVG container; however, the timing logic contains a bug, so the visualization initially shows only the last flag appended. React framework is noted in metadata, though the implementation uses vanilla JavaScript and direct SVG manipulation.

Dec 3, 2023

Loading thumbnail…

Flags

This example renders a stylized flag by dividing the browser viewport into three horizontal bands of black, white, and green, then overlaying a red chevron shape. It uses raw SVG creation via the Document Object Model (`document.createElementNS`) and sets attributes directly on SVG `rect` and `path` elements. The flag’s dimensions adapt to the full window size, and the chevron is drawn with an absolute path command. No external libraries are used, only native JavaScript and SVG APIs.

Dec 3, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric drawing using straight lines and mask-based cutouts. The visualization shows a circular region in the center of the screen filled with dense horizontal and diagonal line patterns, while the surrounding area remains blank. The code creates two SVG masks with concentric circles to alternately reveal or hide line groups. Using native SVG elements, it generates 100 horizontal rectangles and 100 rotated diagonal rectangles, applying `mask` attributes to clip each set to the central circle.

Dec 1, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This interactive piece reproduces a Sol LeWitt drawing using generative code. It creates a dynamic geometric composition of rotated SVG rectangles, layering them to form a subtle optical pattern across the browser window. A black triangle is positioned in the center, grounding the abstract lines. The piece uses the SVG API to dynamically create and append elements, including a custom `tri` polygon, with the rectangles rotated at 45 and 315 degrees. The code generates the artwork programmatically through JavaScript, using window dimensions for scaling.

Dec 1, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces Sol LeWitt’s geometric art by layering 100 horizontal and 100 vertical stripes across the full screen. A circular mask in the center reveals only the horizontal stripes inside the circle, while an inverted mask outside the circle shows the vertical stripes. Using the SVG API, the code creates mask elements, rectangles, and circles programmatically, with each stripe set to a fixed width or height of 10 pixels. The rendering is entirely vector-based, driven by raw JavaScript and DOM manipulation without external libraries.

Nov 30, 2023

Loading thumbnail…

pseudo visualization

This example presents a static geometric composition built with React and rendered as SVG. The visualization displays a collection of overlapping gray shapes that form a complex, layered pattern around a central point. The code constructs these forms using multiple SVG `<path>` elements with defined fill colors and masking techniques. The rendering relies on inline SVG markup directly embedded in the HTML, demonstrating a pure SVG approach without additional data processing or interaction handling. The result is a non-interactive, decorative abstract visual exploration.

Nov 29, 2023

Loading thumbnail…

Gobble matrix

The Gobble matrix displays a 4×3 grid of dice-like shapes, each rendered as a white geometric form with black outlines and pink and red shading on its sides. The visualization uses raw SVG path elements alongside CSS classes to define the die bodies and their shaded faces, creating a static, tiled pattern. The composition relies on hand-coded coordinates for each group, with no JavaScript or React logic driving the layout or interaction.

Nov 27, 2023

Loading thumbnail…

SVG Fundamentals

This example showcases a static SVG composition of dice arranged in a grid on a blue tray, with custom shading to simulate depth. The code directly uses the SVG `path` and `rect` elements within an inline `<svg>` tag, styled via CSS classes that define fills, strokes, and stroke widths. Distinct shapes for left, middle, bottom, and corner dice are created through carefully defined path commands, while additional path elements represent side and bottom shading. The visualization demonstrates fundamental SVG drawing techniques and CSS styling without relying on any JavaScript libraries.

Nov 26, 2023