The next mockup I intend to print will be on a thicker gsm paper and hopefully double sided for a more professional finish. This mockup was to see if the dark colour cover & pages were achievable in print, and to test if I had gotten the new booklet style text placement correct.
After printing this mockup I noticed that each page, when placed next to each other created a look of a double page spread. I liked this accidental development, although it needed refining. I need to develop my layout (pictured below) so that the pages that sit next to each other can flow well, either with a larger selection of hands in the middle, or more sparse. Otherwise it looks a little bit strange to go from few to many or large hands (see third slide above).
design principal The design principal that has been driving my output has been contrast. This principal was chosen as it was something that I believed would work well with the aggressive nature of my data. I have used this in my code with scale and light, and in the design of my booklet with typography.
I changed the backdrop to the red that I printed in the first mockup but this didn’t have the contrast I was aiming for. I ditched then to black, as this was something I played around with in my light testing and I thought it looked quite effective.
Next I did a quick design of the cover to print a mockup with two pages, to see if the black background would print okay, and if so what cover design could work.
It turned out that the solid red of the cover, even though it was the same RGB value dulled in comparison to the high contrast black & red.
I took screenshots of the hand as it rotated, running the program again each screenshot to get a variety of sizes, locations and rotations. I then brought these screenshots into photoshop and used the ‘select colour’ tool to remove the white background to reveal the compilation of hands for that person.
font and type The next step was to set a font and align the type to create a design for the pages. For now I have set it to fit in the bottom left of the page as a ‘title’ of the artwork with the contributors name underneath as an ‘artist’. I also played with caps versus no caps, looking at the artist models explored in week eight. Bold statement caps are loud and obvious, the lowercase has a more fed-up, pissed off vibe. I felt that when stating the issues themselves (e.g ‘animal abusers’) there needed to be more emphasis on the significance these issues have on us. I think that I will use lowercase on the cover page to entice people in, to not make a super ‘punk/angry’ booklet that people will only pick up if they want to hear or are in the mood. The simple ‘We’re Pissed’ on the front cover of my mockup seemed to do well as people wanted to know what ‘we’ were pissed about and why it was written/designed in such a way that was more matter-of-fact than forcing this anger down their throats.
I duplicated the PFont and text String elements of my code, swapping out the ‘angry text’ for the names of the contributors so that their names could sit with their submission. However the two arrays didn’t run at the same time, despite there being the same number of values in each array. I then sort of guessed that I needed to seperate counters for each of the seperate texts, to enable them to run through the array in the same order I simply set the value of counterTwo as that of counterOne.
So now the idea is to take a range of screenshots per statement relevant to the persons finger length and to then compile this on photoshop!
lights function After researching the range of lights function I brought them into a simple 3D rendered space to test. I did this rather than my hand_sketch because that takes a good while to load and test each option. I think I will use a combination of directionLight, spotLight and PointLight to create dynamic lighting for my hands.
I then applied this to the hand model. The colours weren’t as vibrant as they were in the test, this was because the fill of the hand was grey I figured out. The parts of the hand that aren’t lit are black still because without ambient or generic lights there is no light there. I ended up not using spotlight as the location arguments were tricky to understand and didn’t appear to work well on this model. I used a dark maroon directional light in the left corner and a bright red for a point light.
Here is a screen recording of the hand that I took were I increased the frame rate and set a black background – so that you could see how cool the lighting is!
After the interim presentation I sat down with Tim to work out how to get the hand duplicating within the screen controlled by an intArray that uses the data I collected to personalise each design.
We started out slow, the first step was to simply generate two hands in one space by writing out the loadShape and relevant functions twice. Then we went to change this into an array, this had a range of errors. Pictured in the slide below is an error that shows that the [0] or first hand render width couldn’t be multiplied by two as it was technically a zero integer value. We struggled to figure out why the second hand stopped generating once we fixed the errors. What we figured out we needed to do was revert or undo the translation after each run through of the draw function. We needed to do this because the translate function relocates the center point of an object. Without the revert, the next run through translates off of this new base again, off the screen. This also needed to happen with the rotateX function as well.
Next, in order to get the random generation of the hands across the X axis we put in translate(random(0, width)); however when we went to revert this back using the negatives values we realised that it could pick one set of random values for the translate and could select a totally different set to revert it back to. We solved this by creating a variable that would have both random positions as the same – that we could then plug into the initial translate and then the reverted version; ‘float randomPos = random(0, width);’
this is getting a bit confusing – I hope the images help to make sense of my rambling
Another thing I wanted to randomise per page design was the scale of the hands, just to personalise the pages per render.
Then I went onto the meaty bit of my design, where I would change the number of hands in the frame based on the measurement of each persons hand. What we decided we needed to do was to change the value of hands manually rather than through an intArray because an intArray runs through the values every frame, and this was far too fast to capture/save for each ‘page’. However the problem that we had was that when we used one of the smaller values, 10cm, the 10 3D render files took up too much memory to actually run. One possible solution to this is to perhaps run the program and take X(finger length) amount of screenshots of the hand in random positions, rotations & scales to then composite into a whole composition in photoshop later.
The last aspect Tim and I worked on was trying to achieve the text array that is personalised per persons design. It was important to me to use an array in my code, as this was my initial plan for generating a range of personalised design print outputs and so I wanted to at least do something along those lines. This array was a whole lot easier than that of the PShape. I created a String array and used some of the code/skills in applying type that I learnt earlier in the semester. Tim then helped me to put in a counter that meant that the text strings would only show one per frame (rather than all at once on top of each other). Then we had to add in an if statement so that once the counter reached the eighth value [7] in the array it would reset, otherwise the counter statement becomes false and the text stops running after the last value.
So this is what we have now. My next steps to develop this is to look at how I can create interesting lighting by investigating into the lights(); function. Hopefully this will help me address some of the feedback comments I got from the presentation, in that people wanted to see more of the rotation seen on screen in the printed booklet. I also want to develop the type into something that represents what is seen in some of my artist models work. One thing that Tim has suggested to change is the background colour, to a more simple white so that the compositing of the design in photoshop is easier/more clean.
This week we have to print out a test output from our chosen media and show and get feedback on our code so far. Because the bringing in of my data into processing isn’t working yet I will just show my 3D scan and how I have done that and gotten it into processing.
Something that I need to do more research into is how to save as a PDF from processing to make the booklet pages, I tried to use the save many PDF and save complex 3D PDF options and neither quite worked!
many PDF save option – removed 3D shading and flipped the scan back to its original positioncomplex3D save option – again removed the 3D shading but did not flip the scan
In the end I simply took screenshots of my output and created a booklet out of that, the quality isn’t great and the printer lost some of the definition of the hand, perhaps in print I need to lighten the fill colour of the hand. One positive thing is that I practiced stitch binding on the booklet and it was quick & easy and looks good.
Overal I am not happy with where I am at and what I am presenting this week at the interim presentation. I am frustrated that the inclusion of my data is so difficult and I can’t find much online to help me here. And the quality of the booklet I am presenting isn’t that good either. Sort of worried about the PDF saver not working but hopefully this is something I can deal with later.
contextualisation of output I have finalised my decision on my output, my data will be represented in a booklet. This is the ideal output for my data as it is easily distributed to people and is less permanent than a poster or a billboard would be – this has become important in my design as some of the data I have collected is sensitive to time and environment (e.g: Trump, Capitalism, Brexit etc) as they may not be helpful to print and display in certain locations. If for some reason the booklet is no longer an option I think I could choose a more simple application of my design as a hologram, this would enable me to focus my design on the render aspect of my code than the data & personalisation.
why a booklet over other outputs? Looking at the nature of my data as well as my scan of Isaac’s hand I think this book is representation of anger and rebellion. These ideas have been expressed thought history in more radical and rash outputs (such as tagging, protest signage, video) than a planned & developed output that I need to make for this brief. However one example is the punk zines of the 70’s that were developed as a way to detach from publishers and labels and to genuine create a punk rock zine that was affordable for the people, made by the people. This production of Punk Zine embodied the punk ethos of anti-establishment, anti-consumerism and DIY.
British punk zines from the 1970’s – Wikipedia
These zines are a good example of what I want to achieve with my booklet as they maintain the political activism and anger within the punk scene but are also pieces of graphic design and text that can be spread and understood by the masses rather than simply seen as other outputs are.
provocative graphic design I was in the library doing some other study for a studio paper and I came across this book about provocative graphic design, the perfect book to inform my design of the booklet! These are some of the artists and graphic work that I thought I could act as precedents in how to think about this booklet and how each element can work together to generate a message to my audience.
Looking at these works I can see that the importance and symbolism of colour can play a big part in the way a graphic design is read. A classic colour for anger, passion and frustration, all the emotions I am trying to portray is red. Combining this with perhaps large bold black type could make the booklet loud and in tour face. However the small average font and aggressive text from the designers at Adams Morioka suggests a quite rage that can’t be underestimated, the rage of someone who is undeniably calm and perhaps tired of their situation, simply put, they are pissed-off. This is the type of anger that it looks like most of my data represents as we are struggling through an economy and climate that was destroyed before us yet we are the generations that have to deal with it and attempt to fix it.
So, this scan loads in processing!!! maybe it was because I took a bit more time fixing up holes and refining this model than I did with the practice one. It still shows some errors but it works just fine. I tried to apply materials & shade in the MeshLab software but when I loaded these models into Processing they reverted back to the original obj. grey.
With a small amount of research I came across how to fill the colour of the PShape using the set.Fill(color()); function, when your float is placed before it. However I couldn’t choose a solid black fill as this removed all three dimensional definition to the shape.
data in processing
Finding a way to manipulate a PShape and generate multiple PShapes of the same obj file has proven to be quite the challenge. I am sure I am missing something simple but all this week I have been watching youtube videos about how to animate images (as I can’t find anything about animating PShapes) and creating an array of images. However none of them quite work with 3D shapes or do what I want (the generation of these Pshapes to be controlled by an array which will have my data values in).
Right now I am watching a series from the coding train on youtube about creating a solar system in which a range of planets rotate around the sun in a 3D space. I thought this could help me as it is generating multiple elements in a 3D space. I have started from the start, watching the 2D shapes video as to not get lost. I followed along creating the code as I went.
I learnt how to make a class and how to call on it. Despite watching these videos I don’t quite understand everything this code is doing.. Nonetheless I thought perhaps the spawn.Moons variable could be quite useful in generating multiple hands in my code, replacing the sun.spawnMoons(5) as a set int value with an array. The first thing I tried was to simply change the names of the variables/floats and replace the ellipse with my load obj function. This didn’t work, I think it struggles with the idea that both Hand and hands are the same obj?.
Also even though it is fine in the solar system model it doesn’t think that hand is variable? ‘hand’ just replaces planets word for word I think so not sure what is going wrong? I deleted some elements such as the rotate float as I wanted to see that it would work on a more basic level..
I will watch part two today, where they go through how to convert the 2D design into 3D. This is less helpful to me but perhaps it will give me some insight into how they get it to work in a 3D space. I have doubts that it will go into PShapes but I am trying to understand how to do this however I can!
I took a quick look at census data and the only measurements they have are about forearm length and hand span – nothing about middle fingers. Although it wasn’t too hard to get data from people. I also asked each participant what (or who) they wanted to dedicate their middle finger to – I hope to include this in the booklet, to make each page unique not just in design with the measurements but also personalised.
Lauren – 9.6cm at animal abusers Brontë – 8.6cm at Trump Liam – 11.5cm at responsible sleep schedules Harry – 11cm at chlorinated water Caspian – 11cm at his own collarbone Aidan – 11cm at climate change Victoria – 9.5cm at Brexit Becky – 9cm at her statistics paper Tertia – 10.4cm at capitalism Zeke – 11.4cm at grades Keegan – 11.6cm at drunk drivers Andrew – 11cm at deforestation Senna – 11cm at fake friends Ellie – societal expectations
Now I am still not sure how I am going to have this data influence the OBJ scan, I’m thinking I want it to have the measurement dictate the number of fingers on each page? and then create a random pattern of sorts. If I was to do that I would have to round up/down to whole numbers.
Based on this dataI am now thinking about this booklet as an expression of anger and frustration within my generation, at the world around us, our economy and social climate as well as just personal stuff we have going on in our lives. Rather than just a booklet to be provocative and funny.
Coding for Creative Practice 