Welcome to my Digital Humanity project! This site is designed to challenge the idea that coding is purely technical and demonstrate how code can be a powerful medium for artistic expression. Through a series of interactive examples, you'll explore how code enables forms of creativity, from generative art and ASCII design to interactive storytelling and playful code experimentation.
The project leverages modern web technologies like HTML, CSS, JavaScript, and frameworks like Next.js to provide an engaging, responsive, and visually appealing experience. It showcases how code is not just a tool for solving problems but also a medium for art, design, and creativity.
The project is structured as a website with multiple interactive sections that demonstrate how code can be used creatively. Each section is crafted to guide users through examples of generative art, ASCII design, clean vs. messy code, and digital storytelling. Users are encouraged to interact with the provided tools to create their own art and experiment with code.
The main question this site addresses is: Has code hindered creative expression?
By the end of your exploration, you’ll see how the affordances of code open new possibilities for artistic expression, much like traditional forms of art. The site also references several key figures and texts in the field of coding and creativity, including:
- Paul Ford's "What is Code?"
- J.J. Gibson's Theory of Affordances
- Paul Caplan’s "What is a JPEG?"
-
Generative Art
Explore how code can dynamically create artwork using algorithms and user input. Adjust sliders for density, color, and radius to create unique visuals that demonstrate the affordances of code-driven art. -
ASCII Art Generator
Generate ASCII art by typing text into a box. This tool is a nod to the early days of computing when text was used to form visual images. Watch your text transform into an artistic display of characters. -
Interactive Code Playground
Experiment with live code! Use sliders to manipulate a visual box's color, size, rotation, and more. The changes are reflected immediately, allowing users to see how small tweaks in code result in major visual changes. -
Digital Storytelling
Interactive literature and text-based games have pushed the boundaries of storytelling. Here, users can engage with digital stories by playing choose-your-own-adventure games like Photopia and Anchorhead, showcasing how computation opens new paths for narrative. -
Beauty in Code
This section compares "beautiful" and "ugly" code, explaining how writing clean, efficient code enhances not only functionality but readability and future maintenance. It highlights how elegance in coding parallels other forms of creative expression.
- Next.js: The website is built using Next.js for fast server-side rendering and efficient front-end functionality.
- Tailwind CSS: Tailwind CSS is used for designing the interface, ensuring clean and responsive layouts across devices.
- JavaScript: Used to handle the interactive elements like the generative art tool and ASCII generator.
- HTML & CSS: Markup and styling to structure the site and ensure visual consistency.
- React: For handling the component-based structure, making it easier to manage interactive features like sliders and input fields.
You can view a live version of the project here hosted via Vercel.