Experiment 5: Refine/Combine/Unwind

 

 

 

Exploring an Art & Graphic Design movement through computational means.

GitHub Link

Team Members
Carisa Antariksa, Joshua McKenna, Ladan Siad

Project Description

//generative(systems); is a investigation into Constructivism, an art and graphic design movement from the 1920s, through generative form. By referencing elements popularized from that movement, this project explores the automation of design processes through the basis of variance and the discourse around the movement towards engineered design systems. How do we as designers create distinct works when were are in a time of algorithmic design? Can our work still be dynamic, compelling and emotive? //generative(systems); examines the process of algorithmic automation and how it will affect viewers connection to the the aesthetic experience.

This experiment expands upon the Generative Poster project presented in the Creation & Computation Course Experiment 3’s, This and That. The original concept involved generating multiple iterations of a single design through computational means, where the intent was for a user to have a unique copy of a poster according to a predetermined design system.

Video

Tune by beatpick

How it works

Our code executed the following instructions:

1. Randomly select background color from an already-made array of colors;
2. Randomly select elements (triangles, circles, rectangles and other quadrilaterals);
3. Randomly assign a color independently to each element;
4. Randomly determine the # of elements that would be placed on page;
5. Randomly determine the composition, placement and scale of each element;
6. For each element selected, have an accompanied string value for the code to draw on a p5 sketch.
7. Send the string values to a separate browser page in order as it appears on the graphic sketch.
8. Save the composition as a .jpg.
9. Print the code from browser to a physical paper artifact.
10. Instruct the graphic generative system to wait until the print sketch completed printing.
11. Restart the sketch.

This then repeated throughout the exhibition, conveying the design processes that the computer made based on the algorithm set through the code.

Project Context

For this project, we wanted to use this opportunity to use the tools we had learned in the course to dive into the history of graphic systems. The idea of using generative computation was very interesting to us as a tool for designers in this age, where the act of creating iterations through a more efficient algorithm can incite more possibilities and frequency of “happy accidents.” We first had to decide upon which graphic design movement we wanted to reference and be the basis of our system. Initially we proposed three historical graphic movements as possible selections for our project; the Memphis graphic design movement from the late 70s, the Bauhaus movement from the early 30s and the Russian Constructivism movement from the mid 20s. We soon narrowed our selection down to two, Constructivism and possibly Bauhaus, given the latter preceded the other.

Constructivism was a movement with origins in 1920s Russia where it was primarily an art and architectural movement. It refused the concept of art for ‘art’s sake,’ which catered to the traditional bourgeois class of society and instead, focused on using art and design as a political tool. Within this time period, famous Constructivist Kazimir Malevich had also coined the term “construction art,” or “‘Suprematism” as a prominent characteristic of the movement’s visual language. This term was also widely influenced by the works of artist turned designer Aleksander Rodchenko in the 1890s, where he experimented these forms and combined them with photo-montages.

In its essence, the characteristics of this movement involved a free combination of basic geometric forms, such as circles, squares, lines and rectangles within a limited range of colors. The application of this visual language ranged from product packaging to logos, posters, book covers and advertisements. Despite its unfortunate end following the rule of Stalin, the legacy of this style lives on through succeeding movements, particularly Bauhaus and International Type Design. Nowadays it is widely used in parameters set in contemporary design, especially within flat design for digital means.

In our research, we also selected 3 different case studies that were relevant to the scope of this project iteration. They ranged from applications within modern architecture and graphic design.

1. Project Discover explores the capability of software to produce an endless slew of architectural designs that satisfy specific criteria within a given project in terms of cost, constructibility or performance dynamics, at a pace and level of productivity that would be impossible for human beings to match. Their hope is that they go beyond basic automation to create an expanded role for the human designer and a more dynamic and collaborative interaction between computer design software and human designers in the future. This study helps contextualize our intentions with the project.
2. “Randomatizm” is an exploration into the Suprematism movement in the early 1900’s in Russia. The term suprematism refers to an abstract art based upon “the supremacy of pure artistic feeling” rather than on visual depiction of objects. To date, the online gallery randomatizm.art presents 16 works of famous figures of Suprematism. At the moment, visitors to the online exposition generated more than 80,000 random files. We found that the variance in juxtapositions between each generated composition to be a good foundation for our research in expanding upon this experiment.
   
3. “Oi” is a flexible brand identity created by the renowned Wolff Olins for the Brazilian telecommunications company. The idea behind the “logo generator,” as the application is called, is for the logo to move, wobble, and respond to customers in a playful and interactive way within the company’s mobile and web apps. In application, the identity mixes all of its identity elements — techie-looking typeface, icons, and blobs — in various ways to keep the identity flexible yet cohesive.

We also owe most of our references to https://algorithms.design/ and how the author explores algorithmic and generative design in different design applications.

Process Journal

There were many opportunities to continue different projects that involved physical computing with p5, but the interest that brought us together was in completing a browser-based project. In the group meeting that we conducted with several others in the cohort, a proposal to revisit the Generative Poster project was brought forward and we three agreed to push that idea forward. It would also aid to further our learning in coding through p5. Along with that exploration, we also wanted to see how it can contribute to the discourse around algorithmic design and the potential it has in affecting us as designers in the future. All three of us have a substantial background in visual communication and graphic design which motivated us to proceed with this concept.

In writing our proposal for Kate and Nick, we spent time on defining the project and the scope of what can be achievable in the minimum viable product. We also discussed and shared projects that inspired the visual styles that we were interested in conveying. From that basis, we then decided on the design movements we could emulate using generative design. We discussed aspects from existing projects that we liked and saw how they linked to movements that have been applied in contemporary design, such as International Type Design, Memphis and Bauhaus.

Following the proposal, we noted the feedback given to us in a meeting with them the next day. The key pieces of advice that Kate and Nick gave us was to treat the projection as a digital prototype on the wall. We were also advised to make sure we exhibited the canvas to our poster(s) to achieve the greatest impact– the scaling of the projection was key. What would the template to the posters be? Would it be projected on a wall, or would it be projected onto poster paper?

There were also opportunities to think about how the space can be used to introduce unexpected outputs, such as showing the transparency of machine thinking through the console log. The possibilities to how we can present this project can go into many directions, from something that can convey the computer “thinking” in the generative aspect to the code or perhaps introducing a minor interactivity with the visitors of the installation through human input.

Converging into Main Idea

Our criteria for selecting a graphic design movement was dependent on the positioning and placement of the elements on the canvas (whether the elements were abstract shapes, typography or simple forms). We noted that if a grid system was present it would be a helpful parameter and boundary for elements to appear within as part of our generative poster. We studied each movement carefully to determine whether a system was evident that could be reinterpreted and generated independently to the reference paintings. Additionally, we wanted to ensure that whichever movement we selected, that the elements could be drawn easily inside p5.js, there also needed to be a distinct color palette and theme that could be referenced to.

Given the scale of a single generative system we decided collectively as a group that we would only attempt to make a single system based on one movement as opposed to 3 independent systems (one for each previously mentioned movement, Memphis, Bauhaus and Constructivism).

We began our process by attempting to recreate some of the abstract forms in the Memphis movement, but soon realized that it would be a challenge to do so in p5.js as the shapes involved a lot of masking of circular patterns and use of the bezier() shape.

We also explored shapes within the Bauhaus movement by looking at more complex shape code, such as different angles to arc() and also created a document that identified the common aspects to the movement.

We then opted to start with what we agreed to be the easiest of the three movements to create a generative system of; that being the Russian Constructivism movement. After studying several of Kazimir Malevich’s Suprematism paintings from the 1920’s we recognized some recurring shapes and forms: circles, rectangles, triangles (equilateral, isosceles and scalene), and quadrilaterals. All elements that could be made fairly easily with p5’s draw functions. We observed the common compositions created in his work to apply to the code in terms of how each element appeared on the screen. By referencing the color palette of this graphic design movement and using these paintings as a guideline, we began to build out the code that would later generate random compositions with these above mentioned elements.

Coding Process and Challenges

Throughout the process, we assigned tasks to each other to ease the workflow. There were many aspects for the installation that we wanted to implement in the MVP. We began by executing the sketches onto 3 canvases that continuously generate in one browser, which might have complicated the process more than it should. It required the use of Namespacing, a resource we found useful in executing this.

We soon scrapped this option as it would pose many challenges in the code, as we would then have to spend too much time on the code to maintain the sketch, drawing within each canvas.

The main challenge we faced while coding our system mostly involved making it behave human-like; we wanted it to convey this idea of it creating its own design decisions (ie. selecting a triangle or a circle for the first drawn element.) It was not as simple as we thought to code a machine to act this way. In our first iteration of this project, we had envisioned that the code would generate the entire poster at once before moving on to create a new sketch. It took some time to program a timer into the draw function of the system so that each element would be drawn consecutively one after another. Along with this problem, we also had to program an additional timer that communicated via PubNub between the two sketches. This was done so that the print sketch could pause the generative graphic sketch once a poster was completed. In the end, this was solved by setting the frameRate and stating the frameCount for each element in function draw().

After defining each equation to the randomly generated elements to numbered strings (e.g. var myString3 = “// Circle\nnoStroke();\nfill(” + circleColor + “);\ntranslate(” + translate2X + “, ” + translate2Y + “);\nellipse(0, 0, ” + radius2 + “, ” + radius2 + “);” instead of placing it into console.log(“”)) we were finally able to publish what was drawn on the canvas through Pubnub onto another browser. Some overlapping to the messages that were sent still remained, but was quickly fixed by defining the positions of each text based on the input, as seen in the print.js file.

Another task that we had to accomplish was print the poster as they are generated. We wanted the print to work without opening the dialog box but to just receive the information and execute the function. The research for the information that kept coming up was the term called silent printing or background printing. The way we were able to silent print was by getting into the browser setup and changed the parameters that would disable the dialog box pop-up. This required us to use Firefox because the instructions were easily accessible. We hacked into the about:config page and created New > Boolean, and then entered the preference name as print.always_print_silent and click OK. The boolean was then set to true. This successfully made the printing to happen automatically and not open the dialog box. After implementing this, the print() browser function was as easy as placing the command line in the code. The print() method then prints the contents of the current window. This process is well reflected in the final video.

Aside from printing the console.log, we also wanted to have a database of all the generated posters that the code executes through draw. We managed to link it to a dropbox folder through the save(); command line.

Presentation and Exhibition

For the installation, we had a clear idea on how to arrange all the elements in our corner in the Grad Gallery. Given if we had another day, we could have scaled up our installation to two generative systems, Constructivism and Bauhaus next to each other. The informative posters for each would be placed in the center area to create a conversation between the two movements and algorithmic systems. However, the Constructivism iteration is the MVP that we had hoped for and we were collectively very satisfied with the outcome. We focused the projection on the corner in a portrait manner by changing the orientation of the projector and placed the printer next to the screen that showed the saved images of the posters generated. The Title to the project was also projected to convey the overall concept of this experiment. Over 1200 posters were created and they are available to view and save through a Dropbox here. 

There was an overall positive response to the installation. Many visitors commended the idea of generative design and commented on how it can even reach the level of teaching an AI, albeit a simple version of it. The final exhibit demonstrated to our audience a process that involved both the designer as the creator of the tool and algorithm– along with the computer, generating the sketch based on the parameters set by the designer. It was also an ode to a history of how these systems began to be applied in means that can create a social and political impact. Furthermore, this process could provide a further commentary about how a machine would understand a cultural movement such as Constructivism; however it is important to note that the machine is still only as smart as the person who makes it.

Special Thanks to Adam Tindale for advising us through some p5 challenges and Omid Ettehadi for guiding us through Pubnub.

References

Algorithm-Driven Design? How AI is Changing Design. (n.d.). Retrieved from https://algorithms.design/

Autodesk Research. (2017, February 23). Project Discover: An application of generative design for architectural space planning. Retrieved from https://www.autodeskresearch.com/publications/project-discover-application-generative-design-architectural-space-planning

Bill. (2008, August 22). “Silent” Printing in a Web Application. Retrieved from https://stackoverflow.com/questions/21908/silent-printing-in-a-web-application

Creative Bloq. (2013, October 11). The easy guide to design movements: Constructivism. Retrieved from https://www.creativebloq.com/graphic-design/easy-guide-design-movements-constructivism-10134843

Flask, D. (2015). Constructivism : Design Is History. Retrieved from http://www.designishistory.com/1920/constructivism/

Google. (n.d.). Google Fonts. Retrieved from https://fonts.google.com/specimen/Titillium+Web

Hebert, E. (n.d.). Namespacing / Multiple Canvases in P5JS. Retrieved from https://codepen.io/edhebert/pen/VpBzRo

Howe, M. (2017, April 5). The Promise of Generative Design. Retrieved from https://www.world-architects.com/en/architecture-news/insight/the-promise-of-generative-design

Miller, M. (2016, April 19). The Ultimate Responsive Logo Reacts To The Sound Of Your Voice. Retrieved from https://www.fastcompany.com/3059059/the-ultimate-responsive-logo-reacts-to-the-sound-of-your-voice

Moskovsky, A., & Day, Z. (2018). Randomatizm. Retrieved from http://randomatizm.hack.exchange/

Ning, Y. (2017). p5PlayGround. Retrieved from http://yining1023.github.io/p5PlayGround

Tate. (2015). Suprematism ? Art Term | Tate. Retrieved from https://www.tate.org.uk/art/art-terms/s/suprematism

UnderConsideration. (2016, April 4). New Logo and Identity for Oi by Wolff Olins and Futurebrand. Retrieved from https://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_oi_by_wolff_olins_and_futurebrand.php