{"id":2541,"date":"2026-02-15T12:46:55","date_gmt":"2026-02-15T12:46:55","guid":{"rendered":"https:\/\/blumagenta.com\/wp\/?page_id=2541"},"modified":"2026-02-15T13:37:41","modified_gmt":"2026-02-15T13:37:41","slug":"chromatic-harpsichord","status":"publish","type":"page","link":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/","title":{"rendered":"Chromatic Harpsichord"},"content":{"rendered":"\n<p><a href=\"https:\/\/blumagenta.com\/devHELLop\/chromatic-harpsichord-html.html\">Vincent Moro&#8217;s Chromatic Harpsichord<\/a> is an audiovisual instrument that translates musical frequencies into chromatic compositions based on Johannes Itten\u2019s color theory. <\/p>\n\n\n\n<p>In the long history of attempts to fuse music and colour \u2013 from Newton\u2019s Opticks to Scriabin\u2019s Prometheus and beyond \u2013this project explores synesthesia\u2014the phenomenon where stimulation of one sensory pathway leads to experiences in another\u2014by creating a dynamic visual representation of music. Each musical note of the loaded track corresponds to a specific color according to Johannes\u2019s chromatic harmony principles, establishing a precise correlation between sound and color.<\/p>\n\n\n\n<div class=\"wp-block-cover alignfull is-light wp-duotone-unset-1\" style=\"min-height:470px;aspect-ratio:unset;\"><video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"https:\/\/blumagenta.com\/wp\/wp-content\/uploads\/2026\/02\/Chromatic-Harpsichord-720.mov\" data-object-fit=\"cover\"><\/video><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#FFF\"><\/span><div class=\"wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Visual Language<\/h3>\n\n\n\n<p>The instrument maps the twelve-tone chromatic scale directly onto Johannes Itten\u2019s 12-part colour circle, the same system the Bauhaus master developed in the 1920s to codify harmonic colour relationships. By transforming temporal sound into spatial color, <a href=\"https:\/\/blumagenta.com\/devHELLop\/chromatic-harpsichord-html.html\">Vincent Moro&#8217;s Chromatic Harpsichord<\/a> offers a unique perspective on musical structure and invites viewers to experience music through both auditory and visual senses simultaneously. <\/p>\n\n\n\n<p>The rendering is deceptively simple yet deeply sophisticated. The visualization employs three visual features applied to circular shapes: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hue<\/strong> \u2192 Determined by the note being played, inspired by Johannes Itten&#8217;s chromatic theory. &#8220;C&#8221; is mapped to blue; mapping of the other colors proceeds counterclockwise around the Itten-inspired color wheel.<\/li>\n\n\n\n<li><strong>Size<\/strong> (more precisely, the visual radius of each circular particle\/dot on screen)\u2192 inverse to color perceived luminosity es. Purple (perceived luminosity: 25), appears larger, Yellow (perceived luminosity: 90) appears smaller. Darker, more saturated notes appear larger and heavier.<\/li>\n\n\n\n<li><strong>Opacity<\/strong> \u2192 Based on note pitch (frequency) \u2192 High notes (high frequency) = 100% opacity, appear vivid and prominent. Low notes (low frequency) = 40% opacity, appear more subdued.<br><\/li>\n<\/ul>\n\n\n\n<p>The overall visual outcome, resulting from the application of these three visual features, is a dynamic visual composition that mirrors the emotional character of the music that is played.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Johannes Itten\u2019s Theory of Color Harmony<\/h3>\n\n\n\n<p>Johannes Itten (1888\u20131967), the Swiss painter, teacher and one of the first masters at the Bauhaus, developed one of the most influential and enduring systems of colour theory in the 20th century. His ideas, published in full in Kunst der Farbe (1961) and popularised in the abridged The Elements of Color, are not abstract philosophy but a practical, perceptual toolkit for artists, designers and musicians. At its heart is a single, elegant conviction: colour harmony is not a matter of personal taste alone, but can be objectified through measurable relationships.<\/p>\n\n\n\n<p>Itten\u2019s system is both analytical and deeply intuitive. It gave generations of Bauhaus students (and later artists, designers, filmmakers and interface creators) a shared language for colour. In the <em><a href=\"https:\/\/blumagenta.com\/devHELLop\/chromatic-harpsichord-html.html\">Chromatic Harpsichord<\/a><\/em>, the 12 pitch classes are mapped directly onto Itten\u2019s 12 hues. Every musical interval or chord therefore becomes a precise colour chord according to the same geometric rules that Itten codified almost a century ago. A perfect fifth may produce a complementary dyad; a major triad may light up a primary triad on screen. The visual result is not decorative \u2014 it is a direct, real-time translation of musical structure into Itten\u2019s perceptual harmony.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/blumagenta.com\/wp\/wp-content\/uploads\/2026\/02\/Chromatic-Harpsichord-720.mov\"><\/video><figcaption class=\"wp-element-caption\">Visual sample from an early version, using &#8220;War Pigs&#8221; by Black Sabbath<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Technological and Artistic Significance<\/h3>\n\n\n\n<p>Built as a single HTML file using the Web Audio API and Canvas, <em><a href=\"https:\/\/blumagenta.com\/devHELLop\/chromatic-harpsichord-html.html\">Vincent Moro&#8217;s Chromatic Harpsichord<\/a><\/em> is an example of economical digital craft. No frameworks, no bloat \u2013 just precise code that runs smoothly even on modest devices. This lightness is part of the statement: the tool is instantly shareable, instantly playable, and belongs to the open web rather than to any proprietary platform.<\/p>\n\n\n\n<p>The application is a single, self-contained HTML file (\u2248 380 lines) that runs entirely in the browser using only the Canvas 2D API and the Web Audio API. There are no external dependencies, no frameworks, and no server-side code. The entire synaesthetic logic lives inside one script.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why It Matters<\/h3>\n\n\n\n<p>In an age when \u201cmultisensory\u201d often means little more than throwing random particles at a waveform, the <em><a href=\"https:\/\/blumagenta.com\/devHELLop\/chromatic-harpsichord-html.html\">Chromatic Harpsichord<\/a><\/em> restores intellectual and aesthetic discipline. It is simultaneously a visual translator of music based on colour theory and a contemplative artwork. Conceptually, it succeeds where many synaesthesia projects fail. It does not merely \u201cadd pretty colours to music\u201d; it creates a second, parallel language that respects the internal logic of both domains. The colour system is as rigorous as the equal-tempered scale it accompanies. The result is a genuine expansion of musical perception rather than a decorative overlay. It reminds us that technology, at its best, does not replace the senses but sharpens and multiplies them.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/blumagenta.com\/devHELLop\/chromatic-harpsichord-html.html\">Try it out!<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Vincent Moro&#8217;s Chromatic Harpsichord is an audiovisual instrument that translates musical frequencies into chromatic compositions based on Johannes Itten\u2019s color theory. In the long history of attempts to fuse music and colour \u2013 from Newton\u2019s Opticks to Scriabin\u2019s Prometheus and beyond \u2013this project explores synesthesia\u2014the phenomenon where stimulation of one sensory pathway leads to experiences&hellip; <a class=\"more-link\" href=\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/\">Continue reading <span class=\"screen-reader-text\">Chromatic Harpsichord<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2541","page","type-page","status-publish","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Chromatic Harpsichord - Blumagenta<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chromatic Harpsichord - Blumagenta\" \/>\n<meta property=\"og:description\" content=\"Vincent Moro&#8217;s Chromatic Harpsichord is an audiovisual instrument that translates musical frequencies into chromatic compositions based on Johannes Itten\u2019s color theory. In the long history of attempts to fuse music and colour \u2013 from Newton\u2019s Opticks to Scriabin\u2019s Prometheus and beyond \u2013this project explores synesthesia\u2014the phenomenon where stimulation of one sensory pathway leads to experiences&hellip; Continue reading Chromatic Harpsichord\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/\" \/>\n<meta property=\"og:site_name\" content=\"Blumagenta\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-15T13:37:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/\",\"url\":\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/\",\"name\":\"Chromatic Harpsichord - Blumagenta\",\"isPartOf\":{\"@id\":\"https:\/\/blumagenta.com\/wp\/#website\"},\"datePublished\":\"2026-02-15T12:46:55+00:00\",\"dateModified\":\"2026-02-15T13:37:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blumagenta.com\/wp\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chromatic Harpsichord\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blumagenta.com\/wp\/#website\",\"url\":\"https:\/\/blumagenta.com\/wp\/\",\"name\":\"Blumagenta\",\"description\":\"Blumagenta: Visual Communication Studio\",\"publisher\":{\"@id\":\"https:\/\/blumagenta.com\/wp\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blumagenta.com\/wp\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/blumagenta.com\/wp\/#organization\",\"name\":\"Blumagenta\",\"url\":\"https:\/\/blumagenta.com\/wp\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blumagenta.com\/wp\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/blumagenta.com\/wp\/wp-content\/uploads\/2022\/10\/cropped-blumagenta_logo-inverted-e1665402994356.png\",\"contentUrl\":\"https:\/\/blumagenta.com\/wp\/wp-content\/uploads\/2022\/10\/cropped-blumagenta_logo-inverted-e1665402994356.png\",\"width\":100,\"height\":100,\"caption\":\"Blumagenta\"},\"image\":{\"@id\":\"https:\/\/blumagenta.com\/wp\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chromatic Harpsichord - Blumagenta","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/","og_locale":"en_US","og_type":"article","og_title":"Chromatic Harpsichord - Blumagenta","og_description":"Vincent Moro&#8217;s Chromatic Harpsichord is an audiovisual instrument that translates musical frequencies into chromatic compositions based on Johannes Itten\u2019s color theory. In the long history of attempts to fuse music and colour \u2013 from Newton\u2019s Opticks to Scriabin\u2019s Prometheus and beyond \u2013this project explores synesthesia\u2014the phenomenon where stimulation of one sensory pathway leads to experiences&hellip; Continue reading Chromatic Harpsichord","og_url":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/","og_site_name":"Blumagenta","article_modified_time":"2026-02-15T13:37:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/","url":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/","name":"Chromatic Harpsichord - Blumagenta","isPartOf":{"@id":"https:\/\/blumagenta.com\/wp\/#website"},"datePublished":"2026-02-15T12:46:55+00:00","dateModified":"2026-02-15T13:37:41+00:00","breadcrumb":{"@id":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blumagenta.com\/wp\/chromatic-harpsichord\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blumagenta.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Chromatic Harpsichord"}]},{"@type":"WebSite","@id":"https:\/\/blumagenta.com\/wp\/#website","url":"https:\/\/blumagenta.com\/wp\/","name":"Blumagenta","description":"Blumagenta: Visual Communication Studio","publisher":{"@id":"https:\/\/blumagenta.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blumagenta.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/blumagenta.com\/wp\/#organization","name":"Blumagenta","url":"https:\/\/blumagenta.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blumagenta.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/blumagenta.com\/wp\/wp-content\/uploads\/2022\/10\/cropped-blumagenta_logo-inverted-e1665402994356.png","contentUrl":"https:\/\/blumagenta.com\/wp\/wp-content\/uploads\/2022\/10\/cropped-blumagenta_logo-inverted-e1665402994356.png","width":100,"height":100,"caption":"Blumagenta"},"image":{"@id":"https:\/\/blumagenta.com\/wp\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/pages\/2541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/comments?post=2541"}],"version-history":[{"count":13,"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/pages\/2541\/revisions"}],"predecessor-version":[{"id":2559,"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/pages\/2541\/revisions\/2559"}],"wp:attachment":[{"href":"https:\/\/blumagenta.com\/wp\/wp-json\/wp\/v2\/media?parent=2541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}