05 – Coding with AI to prototype

Introduction

Alternate Reality Games (ARGs) are an intriguing fusion of real-world and digital experiences, designed to engage participants in interactive narratives and puzzles. These games rely heavily on web technologies to bridge the gap between fictional elements and players interacting in the real world. My participation in an AI Coding workshop during the International Design Week at FH-Joanneum has opened my eyes to the revolutionary potential of Artificial Intelligence (AI) in web development, specifically for creating rapid prototypes of websites. In this blogpost I want to explores how AI can be leveraged to enhance the development process of ARGs, ensuring both efficiency and innovation.

What can AI do for an ARG creator?

AI’s integration into software development has been transformative, offering tools that automate coding, streamline processes, and optimize user interactions. In web development, AI technologies have begun to play a pivotal role, especially in automating repetitive tasks and generating code from natural language inputs. For ARGs, which require dynamic and immersive web environments, AI can be a game-changer, offering rapid prototyping capabilities that accommodate the complex, evolving nature of these games.

GPT4, with its 14 million tokens, is an extremely powerful tool to develop HTML, CSS and Javascript code, it’s able to use specific libraries such P5, ML5 or Openprocessing.

The AI Coding workshop at the International Design Week provided practical insights into this tools. One key takeaway was the capacity of AI to not only understand and generate code but also to adapt to the developer’s style and project-specific requirements, which is crucial for the unique narratives and interactive elements of ARGs. The workshop emphasized AI’s role as a collaborator, enabling a more intuitive design process that aligns with the creative demands of ARG developer, which in the case of my thesis project it’s me.

In the context of ARGs, AI can streamline the entire development lifecycle. During the initial concept phase, AI can help simulate different narrative pathways, allowing developers to refine the story before coding begins. In the design phase, AI-powered tools can suggest web design elements that match the theme of the game. For coding, AI can quickly generate responsive layouts and interactive elements, essential for an ARG that might include puzzles or clues embedded in the website.

Conclusion

The integration of AI into the development of ARG websites, as inspired by the AI Coding workshop at the International Design Week of FH-Joanneum, presents a compelling advancement in how interactive narratives are crafted and experienced. As AI tools continue to evolve, so too will the possibilities for creating more engaging, immersive, and personalized interactive narratives.

Creative Coding

Einfache visuelle Gestaltung mit Processing

Logik und Struktur prägen das Image von Programmierung, aber es gibt auch noch einen andere Seite, die oft nicht beachtet wird. Die künstlerische Seite der Code-Erstellung: Creative Coding. Einen einfachen Einstieg bietet hier Processing.

Processing ist eine Open-Source-Programmiersprache und Entwicklungsumgebung, die speziell für Künstler, Designer und Anfänger entwickelt wurde. Ursprünglich von den MIT Media Lab-Studenten Casey Reas und Ben Fry erstellt, basierend auf der objektorientierten Sprache Java. Processing bietet eine intuitive Syntax und macht es einfach, visuelle Kunstwerke mittels Code zu erschaffen.

Im Gegensatz zu herkömmlichen Programmiersprachen, ermöglicht Processing eine direkte visuelle Umsetzung von Code. Selbst wenige Zeilen können bereits ansehnliche Grafiken, Animationen und interaktive Kunstwerke erschaffen.


Was macht Processing so beliebt als Einstieg?

Weil es leicht zugänglich ist. Im Gegensatz zu anderen Programmiersprachen wie C# oder C++ ist die Syntax einfach zu verstehen und lesen. Es gibt zahlreiche Tutorials und Beispiele, die den Einstieg erleichtern. Selbst ohne umfassende Programmiererfahrung ist es möglich kreative Beiträge zu gestalten.

Wichtige eingebaute Funktionen bei Processing
setup()– und draw()– grundlegend für jedes Processing-Skript. Die setup()-Funktion wird einmal beim Start des Programms ausgeführt, während die draw()-Funktion in einer Schleife wiederholt wird, vorwiegend für Animationen.

Auch die Interaktion wird mit bereitgestellten Funktion sehr vereinfacht. Hierfür gibt es unter anderem die mousePressed() und mouseReleased() Funktionen.

Auch 3D Grafiken sind leicht einzubinden durch die Anbindung des P3D Renderers


Unterschiede zu Java
Java ist eine vollständige, objektorientierte Programmiersprache mit einer umfassenden Syntax. Sie erfordert mehr Code für grundlegende Operationen. Bei Java ist die public static void main(String[] args)-Methode der Einstiegspunkt. Die Ausführung des Programms beginnt von dort aus. Der Code innerhalb der main-Methode wird sequenziell ausgeführt. Für aufwendigere Grafik- oder 3D-Anwendungen wird auf externe Bibliotheken zurückgegriffen.


Quelle: https://processing.org