Draft 1
I chose as my tool P5js, a programming language, based on JavaScript and specialised in visual arts. When I was choosing the project I wanted to copy, I had some questions
What kind of project should I choose?
There are countless projects that use P5js, and some of them may have very complex code behind them with various functions and variables. Some of these projects may have very complex code and functions and variables behind them, which may be too much for a newbie like me to even know where to start. But if the project is too simple, I won’t be able to achieve the goal of understanding my chosen tool. After observing many cases, I thought I should choose a visualisation that I could describe in words. This means that I can logically understand how it works, so I have a starting point and I can disassemble it step by step. So I chose the visual below.
In the process of completing this project. I considered the following ways.
- Starting with the most basic shapes.
- Consider variations of individual shapes
- Increase the number of shapes
- Modifying the positions and proportions of the shapes.
- Add colours
- Try to add other effects
What’s unexpected about this thing you just made?
The controllability of the code. Unlike working with visuals in other software or mediums, code can be controlled and modified whenever you want, giving you numerous opportunities for trial and error. You can add anything you want to your current code.
What do you understand better or differently about your tool or medium now?
P5js is a combination of technology and creativity. There are many other computer languages that can create visual effects that are even more comprehensive than P5js, but the relationship between them is like the relationship between Windows and Linux. Windows allows more people to use computers without having to learn a lot of Linux commands.
Did it pose a particular technical challenge?
Learning the code language. Even though it’s easy to use, accessible, and can be coded directly on a web page without the hassle of building a runtime environment and local access, learning a code language is very much a test of the learner’s logic, and you need to code according to the logic of the computer.
What kind of output or knowledge does this tool or medium favor?
Outputs that are primarily graphic, motion visual.
What relationship does it have to graphic or communication design?
Possibilities. P5js gives more possibilities to graphic or communication design, enhancing the dynamics and interactivity of the design.
Draft 2
This week I continued to explore P5.js in depth, and according to the project brief I was tasked with “hacking” innovative applications of P5.js, which is often used to create graphics and animations, the presentation of which is largely up to the discretion of the coder. So my idea was to take a graphic or animation and use it to create an image processor.
In this project, my “hacker” process is mainly reflected in:
* Unconventional use of P5.js: Although P5.js is typically used to create graphics and animations, my project demonstrates its versatility by incorporating audio input to control image representation.
* Audio-driven visuals: Using microphone inputs and audio analysis (FFT), real-time control of image representation from audio data was achieved. For example, low-frequency tones affect wave amplitude and pixel size, mid-frequencies regulate the rate of “heartbeats”, and high frequencies control the “explosion” effect. This experimental application demonstrates an innovative interpretation and use of P5.js.
*Approach to image processing: by combining user interface elements with image processing capabilities, the project allows users to manipulate images in unique ways.
* Personalised design: allowing users to select different graphics and create custom graphics, an aspect of traditional programming that is not often emphasised.
The book Conditional Design Workbook(Luna Maurer, Edo Paulus, Jonathan Puckey and Roel Wouters) was very inspiring to me. It emphasises that the focus of design is not on creating a specific artwork, but on developing a process or set of rules. These rules then determine the process by which the artwork is formed. This methodology shifts the artist from the traditional role of creator to that of rule maker and designer of the process, placing greater emphasis on the artistry and creativity of the process itself.
My rules include:
* Basic Iteration: start with the basic attributes of an image such as pixels, dimensions, size and colour. This helps to first understand and grasp how P5.js works at the most basic level.
* Add complexity and functionality: build on the initial foundation and gradually add new visual effects and features. Focus on one aspect at a time, such as colours, shapes, dynamic effects, user interface and sounds, building on the basic level to further explore more advanced features.
* Optimisation iterations: after implementing some features, go back and optimise them. In this way evaluate and rethink the work that has been done.
* Iteration log: record the purpose and reflections of each iteration step in order to create a documented record of progress.
Following these rules, I chose to start my experiments with the most basic element – the pixel dot. The content of each iteration depends on my own knowledge and understanding, and I will choose between viable visuals and functionality to avoid indecision and ensure continued iteration. I focus more on the process of discovery rather than just realising a preconceived idea.
I was also inspired by Raymond Queneau’s Exercises in Style. It explores how events can take on new meaning and depth under different narrative techniques. This, in my work, allows me to translate the same information in different ways.
As I continued to iterate, I gradually realised that although I didn’t set a specific goal for myself, there was a clear goal to achieve at every step. Not all iterations are progress – sometimes the so-called “optimisations” may not be real improvements. Some iterations are small feature updates or modifications, while others are large-scale iterations that take everything into account.
Bibliography:
Luna Maurer, Edo Paulus, Jonathan Puckey and Roel wouters,’ Conditional Design Manifesto’, Conditional Design Workbook, 2013
Raymond Queneau, Exercises in Style,[1947]1998
Draft 3
According to my idea, I want the information to create a loop in the medium, so when I enter these texts, Draft3’s medium is not fixed.
Depending on the order of my loops, the text will be converted into audio.