ojack.xyz

What is olivia jack?

Olivia Jack is an artist and programmer who builds browser-based tools for live coding, video synthesis and drawing. Her site, olivia jack, presents her as someone working across software, performance, installation and workshops rather than in a single medium. The through-line is code as a creative material: she makes instruments and environments that other people can use, then performs and teaches with them.

What she is known for

Her best-known project is Hydra video synth (listed 2023), a live-codeable video synthesizer and networked coding environment that runs in the browser. Hydra is used for visuals in live performances and is also the base for related work on the site: uniquemagicalbrowserobjects.com (2021), a web gallery of collectible code sketches auto-generated for each donation to Hydra, and videoface (2020), a hybrid code and graphics editor. This pattern — build a tool, then build things with it — is the clearest way to understand her practice.

Other projects show the same interest in unusual interfaces between hand and machine:

• PIXELSYNTH (2016): a browser-based synthesizer that turns images and drawings into sound, inspired by the ANS synthesizer.
• fubbles // function scribbles (2020): research into drawing as an interface for creating live-codeable functions in real time.
• Hybrid Interfaces: drawing and code (2022): a workshop at Algopolis / ljudmila hacklab in Ljubljana.
• Rarefacció (2022): drawings used as a live visual score for clarinet, controlling pitch and rhythm of looped audio.

Who it is for

If you are a visual artist, musician or creative coder curious about live coding, this site is a useful starting point because the projects are browser-based and documented as working tools rather than static portfolios. If you are a curator or workshop organizer, the workshop and performance entries show a track record of teaching and staging this kind of work. If you want a finished product with support and pricing, this is not that: it is an artist's project index, and the works vary in maturity and availability.

How to approach it

Start with Hydra, since it is the project most others orbit around and the one with a live, networked environment you can try in a browser. From there, compare PIXELSYNTH (sound from images) and fubbles (drawing as function-writing) to see the two directions her interface research takes. For a quick decision: choose Hydra if you want to perform or stream code-driven visuals; choose PIXELSYNTH or the drawing-based work if your interest is in how hand-drawn or photographic input can become sound and code.

How does the hydra video synth work for live coding?

Hydra is a browser-based video synthesizer built around live coding: you type short JavaScript expressions, and the visuals update instantly in the browser without a build step or render queue. It is designed for performance, so the loop from edit to screen is fast enough to improvise with on stage.

The core idea

Hydra chains small functions together into a signal graph. Each function transforms a source—an oscillator, a camera feed, an image, or another chain—and passes the result to the next one. You patch sources into effects, mix them, and modulate their parameters over time. The output is drawn to a canvas in real time.

A typical chain reads roughly as: pick a source, apply a color or geometry transform, blend it with a second source, then modulate a parameter with a low-frequency oscillator. Changing any number in that chain re-renders immediately.

Why it suits live coding

• Immediate feedback. Edits appear as you type, which is what makes it performable rather than a composition tool you run afterward.
• Short, readable patches. Most live-coding visuals fit in a handful of lines, so an audience can follow the structure on a projected screen.
• Composability. Sources, transforms, and modulators combine freely, so you build complexity by stacking simple pieces instead of writing long programs.
• Browser-native. It runs in a web page, so sharing a patch can be as simple as sharing a link or a snippet.

Who uses it, and for what

• VJs and live performers who want generated visuals synced to music and adjusted in the moment.
• Artists learning code who need a visual payoff while picking up programming concepts.
• Workshop settings, where a group can produce something moving within a session.

Olivia Jack, who created Hydra, also uses it in teaching and performance contexts, including a workshop on drawing and code as hybrid interfaces and live-coded performance work. That background shows in the tool's emphasis on quick, sketch-like iteration rather than production pipelines.

Trade-offs to weigh

A practical next step

Open the Hydra editor in a browser, start from a single oscillator, and add one transform at a time, watching what each change does. If you want to see how far the approach stretches, look at the projects collected on olivia jack, where Hydra appears alongside drawing, sound, and installation work. For a broader live-coding context, compare with TOPLAP, the community hub for live coding practice.

What can I create with PIXELSYNTH using images or drawings?

PIXELSYNTH turns images and drawings into sound. It is described as a browser-based synthesizer, inspired by the ANS synthesizer built by Evgeny Murzin in 1937. In the ANS approach, a picture is read as a bank of frequency bands: what is dark or light at a given horizontal position determines which pitches sound and how loud they are. Applied to a drawing, this means the marks you make become the score — horizontal position maps to pitch, vertical placement or shading maps to intensity, and the overall shape determines the texture and rhythm of the result. You are not playing notes so much as scanning a picture and hearing its contour.

Practical things to make with it

• A drawn melody. Sketch a line that rises and falls; the pitch should follow its shape.
• A photographic drone or pad. Feed in an image with broad tonal areas — a landscape, a face, a gradient — and use its light and dark regions to build a sustained chord or cluster.
• Rhythmic textures. Repeated marks, stripes or dots become pulses as the scan crosses them.
• Sound for visuals. Since the same image can drive both a picture and its soundtrack, it suits animation, installation and video work where audio and image need to feel like one object.
• Teaching material. It is a direct way to show how a visual representation maps onto frequency and amplitude without needing notation or keyboard skills.

The trade-off is control. You shape sound by editing the image rather than by playing an instrument, so fine timing and precise intervals are harder than in a conventional synth, while timbre and large-scale motion are easier to design visually. Redrawing a small area is often quicker than tweaking parameters one by one.

If you want to try it, start with a simple high-contrast drawing — a few thick strokes on a plain background — and change one variable at a time: shift the drawing left or right to hear how horizontal position changes pitch, then darken or lighten an area to hear amplitude change. Olivia Jack's other browser-based work, such as the live-codeable hydra video synth, is a useful companion if you want the image side to be generated by code rather than drawn by hand.

What is fubbles // function scribbles and how does it combine drawing with code?

fubbles // function scribbles is a research project by artist and programmer Olivia Jack, dated 2020 on her site, that explores drawing as an interface for creating live-codeable functions in real time. Rather than typing a function definition and then looking at its output, you sketch on a surface and the sketch itself becomes the function — the drawing is the program, and it can be re-drawn or adjusted while it runs.

What "drawing as code" actually means here

The interesting move is that the drawing is not just a picture that happens to be generated by code, nor a code editor with a paintbrush skin. The drawn gesture is the input to a function that executes live. That puts it in the same family as Jack's other work at the intersection of drawing and computation: her workshop "Hybrid Interfaces: drawing and code" (2022, at Algopolis / ljudmila hacklab in Ljubljana) teaches exactly this hybrid, and videoface (2020) is described as a hybrid code and graphics editor. PIXELSYNTH (2016) takes the reverse direction, turning images and drawings into sound, inspired by the ANS synthesizer.

A practical way to picture it: a performer draws a shape, and that shape's geometry drives a value — a threshold, a curve, a rhythm — that a live-coded routine reads each frame. Change the drawing and the behaviour changes immediately, without a compile-and-rerun cycle.

Who it suits, and the trade-off

• Live coders and VJ-type performers who want gesture and improvisation in a set, not only typed text.
• Workshop participants and students meeting the idea that a function maps input to output; drawing makes that mapping physical and visible.
• Artists coming from drawing rather than from a programming background, for whom a sketchbook is a more natural notation than a text editor.

The trade-off is precision and reproducibility. Typed code is exact, diffable and shareable as text; a drawn function is approximate, harder to archive and harder to hand to someone else. That makes fubbles better suited to exploration, teaching and performance than to building something you need to reproduce identically next month.

Next step

If the idea appeals, try the simplest version of it yourself: pick a live-coding environment you already know, bind one parameter to a value you control with the mouse or a tablet, and perform with it for ten minutes. Then look at Jack's broader toolset — the browser-based Hydra video synth, a live-codeable video synth and networked coding environment, is the natural companion piece and the context in which much of this drawing-and-code work is presented and shared.

What topics are covered in the Hybrid Interfaces: drawing and code workshop?

The workshop centres on treating drawing as an input method for live-codeable functions: sketches on paper become parameters, triggers or structures that drive code in real time. Its subject matter sits at the meeting point of hand drawing, live coding and interface design, using the Hydra video synth as the coding environment.

Themes the workshop covers

• Drawing as interface: how marks, gestures and diagrams can be mapped to functions, values or control signals rather than staying static images.
• Live coding practice: writing and editing code in front of an audience, with the screen output visible as part of the work.
• Hybrid workflows: alternating between paper and keyboard, so neither the sketch nor the code is purely preparatory.
• Browser-based visuals: creating generative and reactive imagery that runs in a web browser.
• Performance and improvisation: using code and drawing together in time-based, unrepeatable settings.

The workshop took place at Algopolis, ljudmila hacklab, in Ljubljana, Slovenia, in 2022, which suggests a hands-on, small-group format rather than a lecture series.

Who it suits

Artists, designers and coders who already draw or already write code, and who want to connect the two rather than specialise in one. Beginners to live coding can follow the drawing-first entry point; experienced coders get a different interface for thinking about function design. Someone preparing a live visuals set, teaching creative coding, or building drawing tools would find the framing directly useful.

A practical next step

Pick one simple drawing — a line of varying thickness, a grid of dots — and decide in advance what each visual property should control: thickness to filter cutoff, dot spacing to trigger rate. Then write the smallest possible patch that reads those values. The exercise mirrors the workshop's core move: fixing the mapping before writing the code.

For related work by the same artist, see olivia jack and the Hydra video synth project documented there.

How can I get involved with the hydra community or contribute to the project?

Hydra is an open-source, browser-based live-coding video synth, and the main way to get involved is to start using it in the browser and then share what you make. Olivia Jack's site lists olivia jack as the project's home base, with links to the tool itself and related experiments like fubbles, PIXELSYNTH, and videoface.

Practical ways to participate

• Learn the syntax by live-coding patterns in the browser editor. The learning curve is shallow: you type functions, see visuals immediately, and iterate.
• Join Hydra's community channels, typically a chat server and a code-sharing gallery. Performances and workshops listed on the site, such as the "Hybrid Interfaces: drawing and code" workshop, show the kind of events where newcomers meet regulars.
• Publish sketches. The site's unique magical browser objects gallery is built from collectible code sketches generated for donations, which is one concrete route from learner to contributor.
• Contribute code or documentation through the project's repository. Bug reports, example patches, and translations are as useful as new features.

A realistic first step

Pick one visual idea you already understand, such as a feedback loop or a geometric oscillator, and recreate it in Hydra. Then post the sketch in the community gallery or chat and ask for feedback. That single loop of make, share, and revise is how most people move from user to contributor.