• Login
  • Register

Work for a Member company and need a Member Portal account? Register here with your company email address.

Post

Creative Coding IDE Workshop

Char Stiles

by Char Stiles

May 13, 2025

Groups

I've been conducting research on Integrated Development Environments (IDEs) and their relationship with creative coders. Specifically, I've led two workshops exploring how creative programmers perceive their relationship with the IDEs they use. During these sessions, I gathered diverse perspectives on how creative coders currently interact with their development environments and how they envision these tools could better support their creative process in the future.

 The workshop title was Build your own Fantasy IDE and the description was as follows:

This workshop is part of ongoing thesis research at the MIT Media Lab exploring new ways to make programming more expressive and engaging. Your experimental editors might help shape the future of creative coding tools!

Calling all creative coders! Ever wanted to build your own experimental code editor? In this hands-on workshop, we'll dive into what it takes to make your own code editor and then break all the rules by creating our own weird and AI-laced variations. We'll start with a writing prompt and a journey through creative coding IDE history. Then we'll get our hands dirty by building off a basic web-based code editor for p5.js using JavaScript. We'll experiment with additions like:

  • Making your editor converse with you through an AI interface
  • Creating code snippets that evolve and mutate over time
  • Building new types of visualization and interaction patterns
  • Adding your own experimental features!

You'll learn:

  • Techniques for extending and customizing editor behavior ways to integrate AI and generative systems into your editor
  • How to deploy your creation as a web application
  • How modern code editors actually work under the hood

By the end of the workshop, you'll have:

  • Built your own working web-based code editor
  • Added at least one experimental feature 
  • Learned the technical foundations to continue developing your own tools
  • Contributed to research about the future of programming environments

I required that the workshop participants have javascript coding experience and bring their own laptops.

I taught it once at the Festival of Learning and again during SXSW at DadaLabs, I will be teaching it again this summer at Hex House.

Copyright

Jimmy Day

In my workshop design, I structured the session to begin with a slideshow presentation where I introduced participants to the history of creative coding IDEs, various navigation systems, and their relationships to code. This was to establish conceptual foundations for participants. Next was a free writing activity, where I asked them 4 sections of questions to encourage creativity when the making part of the workshop came along.

Th four questions were as follows:

  • What IDEs have you used in the past and what do you currently use?
  • What is your current relationship with your chosen editor? How does it limit you? What does it enable for you?
  • Including and BEYOND being a helper, what role do you wish your editor played in development? What do you want your editor to enable for you?
  • What role do you wish your editor played in development if it could only be changed via text?

I gathered all the answers together, so that I can look at them more carefully after the workshop to inform my thesis work. To do that I employed Uniform Manifold Approximation and Projection (UMAP) visualizations to better grasp the dataset. I like to use UMAP visualizations to get a better grasp of a corpus that can include longer sentences and sentiments because it can reveal surprising patterns when you can see the data from a birds-eye-view. Although this dataset is small enough I can read through all the comments, I wanted to explore the comments dispersed from the linear nature of reading though them person by person. I wanted to grasp the general gestalt of the sentiments from the workshop participants. I used this technique before in an earlier project where I analyzed comments on the Shadertoy website.

What emerged as particularly noteworthy was that the freewriting activity, originally conceived merely as a preparatory exercise to enhance creative output during IDE development, ultimately generated some of the most inspiring content produced throughout the entire workshop session!

Exploring the data this way lead to some more insights I wouldn't have garnered from just reading through them linearly.  I used Top2Vec  for the topic modeling to feed into UMAP spatialization. Topic modeling is used for discovering latent semantic structure, usually referred to as topics, in a large collection of documents.

 One observation, was that, as one would assume, the answers to particular questions clustered together, you can see that answers to the question of what editors do you use clustered at the top of the space, where other technicalities were discussed. All but one, the one outlier from that group of answers that wasn't in the "technical" section was when one user said he used LOGO as a kid! That comment was in the section amongst people's wildest dreams. I found this particularly meaningful, as many creative coders are trying to recapture and feed forward the liberating feeling they experienced when first discovering programming. At least for myself that is true. Seeing this nostalgic reflection positioned among people's North Stars felt poetic and quite touching to me.

Creating an IDE

Workshop participants made a variety of interesting apps. Founder and Internet artist Don Hanson wanted to see how his IDE can reinterpret his P5.js Sketch to add more chaos into his development process. 

Another participant Eric Freeman, an adjunct professor at University Texas at Austin, created an IDE which was embedded with prompts from Oblique Strategies, which is a deck of cards created by Brian Eno and Peter Schmidt in 1975 to inspire creativity and overcome creative blocks. Each card contains a prompt or suggestion designed to encourage lateral thinking and fresh perspectives. Some examples of the prompts are 

  • What are you really thinking about just now? Incorporate
  • Emphasize differences
  • Define an area as `safe' and use it as an anchor

Eric described in detail the process which the LLM needed to take to ensure it chose a card at random, implemented its interpretation of the prompt, he gave it guidelines of what it could change in the sketch, and he asked it to "as a comment in the code below the directive, not exceeding 60 characters per line (about 1-2 lines), describing how the code reflects the directive." so that the results were clear as to what the AI changed. 

Final Thoughts

Teaching this workshop affirmed how valuable it is to examine IDEs as windows into coding thought processes. The Live Coding Manifesto captures this perfectly with its insight: "Algorithms are thoughts, chainsaws are tools. That's why algorithms are sometimes harder to notice than chainsaws." Just as a physical tool like a chainsaw has obvious presence and impact, our thinking patterns while coding are less visible yet profoundly shape our work. The IDE serves as the perfect interface to make these thought patterns more observable.

While cutting-edge research often focuses on creating new programming languages to explore the relationship between thinking and coding, I found that examining the IDE itself provides a more accessible entry point. This approach allows us to quickly identify and modify patterns imposed by our coding environments.

Despite the workshop's brevity, participants with diverse programming backgrounds successfully engaged in this higher-level meta-analysis. Focusing on IDEs proved less intimidating and easier to grasp than diving directly into programming language theory.

Related Content