Qídé Studio

Diverse Minds. Designing Tomorrow.

arrow_forward Particle Nova v1.0.0 — WebGL particle engine with 3D animation export

Qídé Studio is a research practice in computational design, colour, and place. We publish, release open-source tools, and take on a small number of commissions each year.

Web Tools

YOLO vision detection identifying dogs with confidence scores in grayscale image.

YOLO Vision Detection

A Hugging Face Space running server-side YOLOv8 inference across three modes: object detection, instance segmentation, and human pose estimation. Accepts uploaded images and video files; confidence threshold and class filter refine each run. Visual effects including Grayscale and Duotone, and custom label colours, apply to the output. Results export as PNG or MP4.

v1.0.0 · released Nov 2025 · AGPL-3.0

View Web Tool
A high-contrast black and white photograph of a children's playground in winter. The playground equipment, including slides and climbing structures, stands starkly against a snow-covered ground. The image has a grainy, dramatic quality typical of Moriyama-style photography, with strong blacks and whites creating a stark, almost abstract composition. Trees and other playground elements frame the scene, emphasizing the emptiness and stillness of the winter playground.

Neon Noir

A browser-based image processor modelled on Daidō Moriyama’s high-contrast street photography aesthetic. Uploaded images are converted to greyscale via a luminosity formula, then passed through adjustable contrast, grain (uniform, Gaussian, or salt-and-pepper noise), and optional posterisation, vignette, sharpening, and edge-highlight stages. A duotone mode maps the processed greyscale to two randomly-generated colours by linear interpolation. Results download as JPEG.

v1.0.0 · updated Feb 2026 · CC BY 4.0

View Web Tool
Binary body representation created with 0xB0DY-BIT6. Colorful numeric patterns (0s and 1s) form a human silhouette with different body parts highlighted in distinct colors — torso in red, limbs in yellow, green, blue, and magenta — demonstrating the tool's AI segmentation capabilities.

0xB0DY-BIT6

A webcam-based body-segmentation tool powered by TensorFlow.js BodyPix. A live camera feed is captured on demand; BodyPix segments the frame into body-part regions, each rendered as a field of randomly placed 0s and 1s in a region-specific colour. Digit density and glyph size are adjustable via sliders. A Flip button toggles between front and rear camera. Output saves as a 1080 × 1080 PNG.

v1.1.1 · updated Apr 2026 · CC BY 4.0

View Web Tool
Circular gradient transitioning from blue to green, yellow, and red against a black background, with a red 'NEW' badge in the upper right corner.

WebGL Code Editor

A browser-based editor for writing and running WebGL code. A split-panel layout pairs a syntax-highlighted JavaScript and GLSL editor with a live WebGL canvas and an integrated console for debugging output. A boilerplate template is preserved on load; the Run Code button compiles and renders on demand.

v0.1.1 · updated Apr 2026 · CC BY 4.0

View Web Tool
A black background with a dynamic 3D particle animation showing a fragmented image composed of small white and light blue dots. The particles appear to form a rectangular shape floating in space, with varying depths creating a sense of dimensionality and movement. The effect demonstrates Particle Nova's ability to transform 2D images into interactive 3D particle displays.

Particle Nova

A WebGL particle engine that samples colour from a source image and maps each sample to an independently moving 3D particle. Configurable physics include explosion modes, shape presets, and duotone colour grading. Outputs: high-resolution stills and recorded WebM animations.

v1.0.0 · released Dec 2024 · CC BY 4.0

View Web Tool
A stylized letter 'A' composed of red dots on a black background. The letter is formed by a pattern of small illuminated points, creating a 3D effect. To the right of the 'A' is a smaller, similarly constructed plus sign (+). The bottom of the 'A' transitions from red to blue dots, adding a gradient effect.

C0SM1C SCR1P7 0x6E

A browser-based tool that renders user-supplied text as animated 3D point clouds via real-time WebGL. Includes photo sprite mode, Google Fonts integration, a keyframe timeline, and multi-format export: WebM, GIF, and PNG sequence.

v1.2.0 · updated Mar 2026 · CC BY 4.0

View Web Tool
A vibrant repeating pattern of small red circles on a bright pink background. The circles are arranged in a grid-like structure, creating a bold and eye-catching geometric design.

Pattern Creator

A p5.js tool for composing multi-layered geometric patterns from configurable symmetry rules and colour parameters. Layers can be stacked, toggled, and exported as high-resolution images.

v2.0.0 · updated Dec 2025 · CC BY 4.0

View Web Tool
Abstract, colorful waveforms and geometric shapes dynamically responding to audio input, showcasing the p5.js-powered audio visualization tool.

5YN7H 0x1F

A p5.js audio visualiser that analyses an uploaded audio file and feeds five spectral features through an LSTM network to drive a particle system. Particles form user-supplied text and respond across ten visual modes; the LSTM output continuously remaps hue, speed, and wave amplitude.

v2.0.0 · updated Jan 2025 · CC BY 4.0

View Web Tool
A highly pixelated, colorful image showing a recognizable scene or object, demonstrating various levels of pixelation and vibrant color modes of the 0xDRMY PXL5 tool.

0xDRMY PXL5

A camera-feed pixelation tool. A live camera preview is captured on demand; the captured frame is then pixelated as a grid of uniform colour blocks at a user-controlled cell size. Pixel size updates in real time after capture. Four colour modes apply a two-tone brightness threshold using a perceptual luminance formula: red, green, or blue against white, or two randomly sampled colours. A Flip button toggles between front and rear camera. Output saves as a 1080 × 1080 PNG.

v1.1.1 · updated Apr 2026 · CC BY 4.0

View Web Tool
A highly pixelated image featuring a custom geometric shape, showcasing the precision and creative possibilities of the pixelation engine.

Pixel Art Editor

A browser-based canvas tool that pixelates uploaded images or accepts freehand drawing on a blank canvas. Pixel shape and size are configurable in real time; the same shape applies to both image pixelation and drawing strokes. A text layer can be added and then pixelated independently. The canvas supports grid overlay, crop, and undo. Output exports as PNG or, from v1.2.0, as SVG.

v1.2.0 · updated Mar 2026 · CC BY 4.0

View Web Tool
Interactive HSB color grid displaying a range of hues, saturations, and brightness levels. Highlighted sections indicate optimal color choices for contrast and legibility, with real-time WCAG compliance indicators.

Chroma Gridlock

An HSB colour grid mapping hue horizontally and brightness vertically at a uniform saturation. Hovering over any cell surfaces its H, S, B values and contrast ratio against a user-set text colour. Switch between WCAG 2 (AA/AAA) and APCA (Lc) contrast models; a Vision mode simulates Deuteranopia, Protanopia, and Tritanopia. PNG export overlays compliance labels on every cell; JSON export includes full contrast data for the grid.

v2.0.0 · updated Apr 2026 · CC BY 4.0

View Web Tool
Interactive display of a harmonious six-color monochromatic palette, with each color swatch accompanied by its hex code. A central hue selector allows real-time palette adjustments.

Pop

A p5.js sketch that generates a six-colour monochromatic palette by picking a random dark base colour and stepping each channel up by 42 RGB units per tier. The palette regenerates automatically every two seconds. Press Space to pause and hold the current palette; press S to export it as a PNG.

v1.1.0 · updated Apr 2026 · CC BY 4.0

View Web Tool
Circular color wheel displaying a full spectrum of hues, with adjustable sliders for saturation and brightness. Selected color is prominently shown with its HSB values.

Color Lab

An interactive colour wheel that segments the hue circle into a user-controlled number of slices, with saturation and brightness adjustable via sliders. Hovering over a segment surfaces its hue, RGB, HEX, and CMYK values. The full palette exports as JSON (with complementary, analogous, triadic, and tetradic harmonies per colour), ASE, and ACO files.

v2.0.0 · updated May 2025 · CC BY 4.0

View Web Tool
Animated display of two large color swatches side by side, showcasing complementary color pairs that change every two seconds. Each swatch is labeled with its corresponding hex code.

Defying Entropy

A full-screen complementary colour-pair generator. A new pair of mathematically opposed colours appears every two seconds as two full-bleed swatches, each labelled with its hex code. Press Space to pause and study a pair; press S to save it as a PNG.

v1.1.0 · updated Apr 2026 · CC BY 4.0

View Web Tool

Open Source

Smart Markdown Editor interface showing split-panel markdown editing with live preview and document quality analysis sidebar

Smart Markdown Editor

A cross-platform desktop Markdown editor built with PySide6. Pairs a split-panel editor and live HTML preview with a fully offline Smart Assistant that scores readability, checks heading hierarchy, detects structural issues, and exports to seven formats. Python Markdown and Pygments handle rendering and syntax highlighting. Documents never leave the machine.

v1.1.0 · updated Apr 2026 · MIT · DOI

View on GitHub

Brand Color Analyzer

A Python tool that scores brand colours against personality dimensions, emotional responses, and cultural associations using frameworks from Labrecque & Milne (2012), Singh (2006), and Elliot & Maier (2014). Extracts a palette from an input image and evaluates each colour against the criteria from each study.

v1.1.0 · updated Oct 2025 · MIT · DOI

View on GitHub

(Image) Color Analysis Tool (CAT)

A pip-installable Python library and CLI for extracting colour distributions and harmonic relationships from images. Detects dominant colours, calculates complementary, analogous, triadic, and tetradic harmonies in RGB, CMYK, and HEX, and sorts results by frequency, hue, saturation, or brightness. From v1.2.0, output extends to CSS custom properties, W3C Design Tokens JSON, and Tailwind config snippets alongside plain text and JSON. Supports PNG, JPG, TIFF, WebP, and PSD; batch processing mirrors subdirectory structure. Citable via Zenodo.

v1.2.0 · updated Apr 2026 · MIT · DOI

View on GitHub
Side-by-side comparison demonstrating the Enhanced Image Processor's capabilities. The left panel labeled 'Original' shows a textured concrete or plaster surface with subtle variations in gray tones. The right panel labeled 'CLAHE Enhanced' displays the same surface with significantly improved contrast and detail visibility, revealing intricate texture patterns and depth previously obscured in the original. This visual comparison illustrates the effectiveness of the CLAHE algorithm for image enhancement while preserving natural appearance.

Enhanced Image Processor

A Python image processing library that applies Contrast Limited Adaptive Histogram Equalisation (CLAHE) with automated parameter optimisation. Operates across multiple colour spaces to mitigate the clipping artefacts produced by global histogram equalisation. Multi-threaded batch processing is supported.

v— · released Dec 2024 · MIT

View on GitHub
Two side-by-side screenshots of a 'K-means Clustering for Visual Abstraction' application window. The left image shows a grayscale cityscape of Shanghai with skyscrapers and a river. The right image displays the same scene abstracted into horizontal bands of varying shades of gray. Both windows have a slider at the bottom labeled 'Clusters: 5'.

K-means Clustering for Visual Abstraction

A Processing sketch that reduces an image to N colour regions using K-means clustering. A slider controls cluster count in real time, making the boundary between recognisable image and abstract form directly observable. Pixel sorting within clusters by brightness can be toggled independently.

v— · released Sep 2024 · MIT

View on GitHub
A grid of four images showing the same colorful scene, each simulating a different type of color vision deficiency.

Types of CVD Simulator App

A Python package that simulates colour vision deficiencies using scientifically-validated algorithms: Brettel (1997), Viénot (1999), Machado (2009), and Vischeck. Covers protanopia, deuteranopia, tritanopia, and achromatopsia. Accepts single images or batches via a command-line interface and Python API.

v1.1.1 · updated Feb 2026 · MIT · DOI

View on GitHub
An ornate antique silver serving tray with intricate embossed floral and geometric patterns. The tray features a scalloped edge with decorative handles on both sides and a central medallion surrounded by quilted texturing. Below the tray is a color palette extracted from the image showing four swatches in various shades of brown, from light taupe to deep chocolate, demonstrating the Color Palette Extractor tool's functionality.

Color Palette Extractor 2.1

A Python tool that applies K-means clustering to extract dominant colours from images, generates harmonies in RGB, CMYK, and HEX, maps results to psychological brand dimensions, and produces a PDF report. Parallel processing supports batch inputs.

v2.1.0 · updated May 2025 · MIT

View on GitHub
Skyline of modern city skyscrapers. Below the cityscape are four color swatches extracted from the image: light blue, dark green, medium gray, and light gray.

Color Palette Extractor

The original colour palette extraction pipeline. Extracts dominant colours from an image using K-means clustering and outputs data in RGB, CMYK, and HEX with a summary report. Superseded by Color Palette Extractor 2.1.

v— · released Aug 2024 · MIT

View on GitHub
A four-quadrant color display showcasing variations in hue, saturation, and brightness. The top-left quadrant is bright magenta, top-right is deep red, bottom-left is vivid pink, and bottom-right is bright red, demonstrating the tool's ability to visualize color relationships.

Chromaso

A Processing sketch that visualises hue, saturation, and brightness through ControlP5 sliders in a two-column live display. One column ramps saturation, the other brightness, each driven by an independent hue slider; numeric readouts show the computed values. Clicking any swatch copies its HEX value to the clipboard. The palette saves as a PNG to a dedicated folder via the S key.

v0.2.1 · updated Apr 2026 · MIT

View on GitHub
A split-screen image demonstrating the duotone effect. The left half shows a deep teal color, while the right half displays a soft peach tone, illustrating the tool's ability to create striking two-color compositions from original images.

Duotone Image Generator

A Python script that applies a duotone effect to a selected image using OpenCV. Takes one input image and generates 100 lossless PNG variations, each using a randomly sampled colour pair; filenames encode hex colour values in RGB order for direct use in design tools, and a CSV sidecar lists every colour pair for easy reference.

v1.1.0 · updated Apr 2026 · MIT

View on GitHub

Experiments

Wave Dynamics experiment displaying interactive wave simulations and dynamic patterns.

Wave Dynamics

A WebGL wave simulator covering eight modes: Standing Wave, Wave Interference, Ripple Tank, Chladni Pattern, Perlin Noise, Spherical Harmonics, Kelvin–Helmholtz instability, and Bessel Function. Frequency and amplitude are user-controlled via sliders; the surface geometry updates continuously.

View Experiment
Algorithmic Forms Explorer displaying interactive 3D mathematical visualizations including Torus Knots, Klein Bottles, and Strange Attractors rendered in WebGL with real-time controls.

Algorithmic Forms

A WebGL viewer for mathematical surfaces and dynamical systems, covering Torus Knots, Klein Bottles, Möbius Strips, Lorenz and Rössler Attractors, Gyroids, Superellipsoids, Lissajous Curves, and Hopf Fibrations. All parameters are exposed via live controls.

View Experiment
Fractal Dimensions Explorer displaying interactive 3D fractals including Menger Sponge, Sierpinski Tetrahedron, Sphere Flake, Pythagoras Tree, Koch Snowflake, Cantor Dust, and Barnsley Fern rendered in WebGL.

Fractal Dimensions

A WebGL viewer for self-similar structures: Menger Sponge, Sierpinski Tetrahedron, Sphere Flake, Pythagoras Tree, Koch Snowflake, Cantor Dust, and Barnsley Fern. Iteration count and motion parameters are user-controlled.

View Experiment

Expertise

Qídé Studio is a research practice working across computational colour theory, algorithmic typography, generative form, and place branding in AI-mediated environments. Research findings are published, released as open-source tools, and applied in a small number of commissions each year.

Services

Commissions are accepted in visual identity, computational branding, interactive installation, and creative-coding consultancy. Engagements draw directly on the studio’s active research, and the number taken on each year is kept small so that each project receives full research attention.

Academic Contributions

Michail Semoglou is a Research Associate at the Branding Public Space Lab within Tongji University’s College of Design and Innovation in Shanghai. His research connects computational branding, generative design, and AI-mediated public space. He teaches Branding in Communication Design Systems and Creative Coding at graduate and undergraduate level, and organises an annual symposium on public-space branding and emerging technologies. Lectures and workshops across China address generative design, data-driven branding, AI in creative processes, parametric typography, interactive storytelling, sustainable design, public space activation through technology, and XR in communication design.

Open Source Contributions

Open-source releases are downstream of the studio’s research rather than standalone products. The Enhanced Image Processor externalises the CLAHE contrast-enhancement pipeline. The CVD Simulator applies colour-vision-deficiency transformation matrices as a tool for accessible colour-system evaluation. Color Palette Extractor and its successor (2.1) make the K-means chromatic analysis pipeline available for independent use. All tools are MIT-licensed and maintained on GitHub.

Get in Touch

Collaborations

We welcome collaborations on innovative projects. For inquiries about commercial partnerships, please contact us at hello [at] qide.studio. We’d love to discuss how we can bring your ideas to life.

Please note that we do not respond to unsolicited pitches for web design, SEO, development, or any other vendor services.

Research

To discuss potential collaborations on research or experimental projects, please contact Michail Semoglou directly at m.semoglou [at] tongji.edu.cn. We are keen to explore advanced concepts and push the limits of creative technology.

Careers

We’re currently seeking a Creative Technology Intern to join our Shanghai team. This 3–6 month position focuses on smart/dynamic branding, creative coding, and programmatic art. In particular, we’re looking for Chinese candidates with European study or work experience who excel in Processing, p5.js, and Python. The role offers hands-on experience with AI-driven brand systems, generative design, and our open-source initiatives. To apply for this paid internship opportunity, please submit your CV, portfolio, and cover letter to jobs [at] qide.studio with subject line “Creative Technology Internship – [Your Name]”.

Download full position details (PDF)

arrow_upward