{"id":639,"date":"2022-10-11T15:47:56","date_gmt":"2022-10-11T15:47:56","guid":{"rendered":"https:\/\/www.courses.tegabrain.com\/printcode\/?p=639"},"modified":"2022-10-17T18:50:08","modified_gmt":"2022-10-17T18:50:08","slug":"generative-poster-immigrants-are-the-backbone-of-america","status":"publish","type":"post","link":"https:\/\/www.courses.tegabrain.com\/printcode\/generative-poster-immigrants-are-the-backbone-of-america\/","title":{"rendered":"Generative Poster – Immigrants are the Backbone of America"},"content":{"rendered":"\n

Until very recently I had only experimented with traditional design software and print. The idea of a generative poster printed on a risograph machine was exciting for me, and so I decided to try my best to create something both meaningful and beautiful. <\/p>\n\n\n\n

View my results below:<\/p>\n\n\n\n

\"\"
An image of 6 randomly generated political posters stating that immigrants are the backbone of America.<\/figcaption><\/figure>\n\n\n\n

Check out my code here<\/a>.<\/p>\n\n\n\n

Process<\/strong><\/p>\n\n\n\n

I started out by brainstorming a couple of topics that could be interesting to print as a form of protest. I wanted to make sure that I spoke about an issue I am passionate about and also qualified to talk about. I landed on immigration, reason being that I am a foreigner in America, and the country that used to welcome foreigners are now detaining my people and caging them at the border of Mexico and the United States.\u00a0<\/p>\n\n\n\n

After working on the ice cream cone exercise, I sketched a couple of silly patterns that had the potential of becoming a design system. I was inspired by the visualization of sound as an organic shape and the minimal shapes and colors of the Bauhaus movement (see below some posters that I thought were cool). My approach consisted in focusing on the ever-changing visuals of the background while leaving the message stagnant. I realize now that working with the type itself and making it morph into something new could\u2019ve been another interesting approach, and as I keep learning the ins and outs of javascript, I hope to keep experimenting with different elements of my sketches.<\/p>\n\n\n\n

\"\"
My earlier sketches<\/figcaption><\/figure>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Inspirational posters I found on Dribbble and Pinterest.<\/p>\n\n\n\n

Code<\/strong><\/p>\n\n\n\n

The basis of my code relies on a for loop to generate shapes that resemble blobs with spikes (my sound waves). I created a function where a series of shapes are created by utilizing sin and cos multiplied by the for loop expression (plus a couple of other variables that incremented the size of these waves to give the shape a more sound-wavy look).<\/p>\n\n\n\n

For the colors, I added the p5.riso library to my sketch and added the color layers to my shapes. At first, I tried adding the layers to my functions, which didn\u2019t work and caused me some issues since I envisioned my poster as a 2 color poster. To solve this, I duplicated my soundwaves function and added the color to beginShape instead.<\/p>\n\n\n\n

\"\"
Find code here: https:\/\/editor.p5js.org\/jnsabillon\/sketches\/puwaJV975<\/figcaption><\/figure>\n\n\n\n

The type ended up being the easiest. I downloaded my fonts and called them at the beginning of my sketch with function preload. I scaled them to my desired size, rotated the word \u201cIMMIGRANTS\u201d 90 degrees and positioned the text on my desired location. I also made sure to use cutout the text from the color layers so that when exporting my pngs I would have 0 opacity letters.<\/p>\n\n\n\n

Result<\/strong><\/p>\n\n\n\n

I love the end result! This is a poster that can be hung as art or be taken to an actual protest. I\u2019m also really happy that I made my first soundwaves function call random and circle through yellow, blue, and red. The combination of these colors with black makes the design stand out more. Printing these was also a surprise since the colors came out much brighter and more saturated than on my computer screen. After a couple of tests, I lowered the opacity of the pngs on photoshop so you could appreciate each colored wave. I also created a grid of my 6 generated posters and printed them all in yellow, red, and blue as an experiment.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Bibliography<\/strong><\/p>\n\n\n\n

Using Riso.js library: https:\/\/editor.p5js.org\/brain\/sketches\/LnRuJhmds<\/a><\/p>\n\n\n\n

Rotate Text: https:\/\/stackoverflow.com\/questions\/56852325\/how-to-rotate-text-vertically-with-p5-js<\/a><\/p>\n\n\n\n

Sound Visualization: Radial Graph: https:\/\/www.youtube.com\/watch?v=h_aTgOl9J5I<\/a><\/p>\n\n\n\n

Bauhaus generator: https:\/\/editor.p5js.org\/OMGChase\/sketches\/Lxw4dsE4j<\/a><\/p>\n\n\n\n

Inspirational Posters by: ANNA Gugutishvili, Matt Pamer, Arno Kathollnig, Lukas Bruhn aka Lorem De Loop, Sally Rooney, and Common House.<\/p>\n","protected":false},"excerpt":{"rendered":"

Until very recently I had only experimented with traditional design software and print. The idea of a generative poster printed on a risograph machine was exciting for me, and so I decided to try my best to create something both meaningful and beautiful. View my results below: Check out my code here. Process I started… Continue reading Generative Poster – Immigrants are the Backbone of America<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-639","post","type-post","status-publish","format-standard","hentry","category-assignment2","entry"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts\/639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/comments?post=639"}],"version-history":[{"count":3,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts\/639\/revisions"}],"predecessor-version":[{"id":674,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/posts\/639\/revisions\/674"}],"wp:attachment":[{"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/media?parent=639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/categories?post=639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/printcode\/wp-json\/wp\/v2\/tags?post=639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}