danfutura - Tumblr blog

[danfutura]

End of Semester Reflection.

Here we are at the end of the semester! Its been quite a journey and I've learned a lot so I would like to write a quick summary of all that has happened in this class, A to the K. 

When looking through the list of available electives for Studio 2 I knew immediately that It was the class for me after reading the class description and seeing that It was run by Andy and Karen. Whatt intrigued me about the class was how cutting edge it seemed to be, promising to push typography into the next frontier with topics of variable typography and the design and coding of fonts. Having a interest in both technology and typography I was excited to learn more. Having the class twice a week was quite intensive but also rewarding, as it gave me more opportunities to interact with my teachers and get regular feedback on my work.

The first task was the PROTOTYPETYPE assignment and I became really inspired by the idea of modular typography. For my assignment I made the entire alphabet out of PlayDoh pieces and created rules for how the modular type could be assembled. I put all the letters into a display in a nice clean design using photoshop and feel that it was a vast improvement over my found objects typeface in the first year. 

The next, and biggest task was the Major Project. I had a lot of time to work on this assignment and developed both a typeface and a interactive type sampler. The weekly hours of code occurred concurrently with the development of this project and gave us a crash course in P5 which we used to code our sampler. After enjoying the process of making a modular typeface in the first assignment, I created a new digital font that was modular and monospaced. My font was called Gummy Bear and had a playful candy aesthetic. My sampler allowed the user to pick out a letter to display, and eat it by clicking, making a CHOMP sound effect and leaving a bite mark in the letter. 

Overall I am very impressed with myself and what I have learned and achieved in this class. I feel that this skills learned this semester will be extremely beneficial in the remainder of the course and when moving into the workforce. 

Thanks for coming to my TedTalk.

[danfutura]

My Finished Type Sampler

I just uploaded my completed type sampler, which you can check out here...

https://danielsan808.github.io/Sampler/

and the code...

https://github.com/DanielSan808/Sampler/blob/main/SAMPLER3.js

Overall I am super happy with the finished project, and I feel that I achieved many of the functions that I wanted to include such as the display and eating of the type, sound effects and random colour effects. If I had more time to work on the project I would have added an extra materiality to the letters, having them be shiny and wiggle like jelly or lollies. I also would of liked to include a counter for the amount of letters eaten and a title for the current flavour of letter. It also would of been cool to include extra weights for my font. However, the good thing is that now that I have this tool chain established, I have the freedom to update my font and also create something completely new. 

Thanks for coming to my TED talk

[danfutura]

Major Project Update 3

TIL S2 EP 10

This is the latest progression of my work for the Major Project. I have just about completed my font and have moved onto coding my sampler. 

Gummy Bear Font: Gummy Bear is a modular monospaced font that draws influence from the design and aesthetics of candy and its packaging. The font is available in Upper and Lowercase and includes numbers and a few basic symbols. The geometric style harkens back to an older era of type only with less rigidity, conveyed through its rounded and gooey edges that begs you to take a bite. 

Type Sampler: So far I have only coded the ‘base’ and many of the main functions still have to be added in. The concept is that a letter is picked out like a lolly from a bag and the Keypress function brings up a display letter. I plan to have the letters have bitemarks taken out of them when clicked, with eating sounds being played. I also want each letter pulled to be a random colour based on a select palette. 

Thanks for coming to my TED talk.

[danfutura]

GitHub/Major Project Update 2

TIL S2 EP 9

This is my plan for how my letters will react to user input in my sampler. The sampler will be delivered as a HTML page that is written in P5/JavaScript. My goal is to have the letters be eaten by clicking on strokes, leaving bitemarks until the letter is completely consumed. After a set amount of time or when the first letter is completely gone, a new letter will appear to replace it. I think this is a good way to display my typeface as it is interactive and allows the users to connect with my font on a deeper level. I will also have smaller displays underneath the larger interactive display that demonstrates the entire set of glyphs as well as a pangram. 

In class we were also introduced to GitHub. GitHub is a service that hosts your website for free. We learned how set up a GitHub account and input our P5 code to turn it into a web page. We will use GitHub to host our final samplers. Here is a link to my first test using my set paragraph using “Gummy Bear”...

https://danielsan808.github.io/DanielStudio2/GummyParagraph/

Thanks for Coming to my TED talk.

[danfutura]

Setting Paragraphs in P5

TIL S2 EP 8

Today I have advanced with my P5 coding skills and learned how to set a paragraph in processing. I have used my newly kerned (although still fiddling with) typeface. This is bringing me closer to being able to pull of my sampler which I have heaps of ideas for. I have also learned how to list words over time which you can see bellow...

I used text from a Wikipedia article about the book Dune. Dune is set on a dessert planet so I set the background as a sand colour and used a Sci Fi font called Devil’s Breeze. 

Thank You for Coming to my TED talk. 

[danfutura]

Major Project Update

TIL S2 EP7

Here is a little sneak peak of the font I have been developing for my major project. At the moment its working title is ‘Gummy Bear’ due the letters looking a bit like Lollies. It is a bitmap style modular typeface made using 3 basic shapes which can be seen below... 

and here is the anatomy of the letter A...

I am currently working on the kerning of the typeface in font forge which is quite complicated, however I don't have it as bad as others because the letters are monospaced. 

I am also workshopping ideas of how to present these letters in the sampler. I have 3 ideas so far but would like to reflect the ideas of the font being childish and materialistic. 

Ideas of how to make the letters variable.

-The letters are able to be squished at points where the mouse clicks. 

- the letters bloat out over time. 

-The letters are able to be eaten, and bite marks appear where pressed.

Thanks for listening to my Ted talk.

[danfutura]

The Next Assignment

TIL S2 EP6

Our next Assignment will be our Major Project which we will have quite a bit of time to work on. For this assignment we are tasked with creating a digital font and then displaying it in a webpage sampler using P5. I have come up with a few ideas so far of expanding on my ideas from the first assignment. you can see some of my ideas and research bellow. 

As you can see I want to keep the colour, modularity and materiality from my playdoh type but translate that into a digital typeface. I have also considered developing a variable type, meaning that the font will change depending on a set of conditions. It seem pretty ambitious as I’m not quite sure how I can pull it off yet but at this stage I’m just throwing ideas at the wall to see what sticks. 

Thanks for coming to my TED talk. 

[danfutura]

Cyclops In P5

TIL S2 EP5

Today in Class we were taught how to use the random function in P5. I used this to create a display using my cyclops typeface where a random letter would appear in a random part of the screen at a random size. They weren't completely random as I specified the high and lowest variables I wanted them to range from. I think I’ve said random enough times in this post.

Thanks for coming to my TED talk. 

[danfutura]

My New Font

TIL S2 EP4

Here is a typeface I just made. Its called Cyclops! 

Today in class we were challenged with creating a set of 26 glyphs and installing them onto our computers as a font. This is what I came up with, a sort of bitmap style, bold typeface that is abstract in nature, while still following minimal rules. I began by using illustrator, dragging shapes around  to create my letters. I Then  united them using the pathfinder tool and exported them as SVG files so they could be accepted by the program. After importing all my SVG’s in FontForge I used the metrics option to centre them in their windows before generating them into a .otf file. The final step was to install this file onto my PC and now I have it available to use however I want. Pretty Cool. 

[danfutura]

Using a Font in Processing and Automating it.

TIL S2 EP3

Here’s an Update on my adventures in coding using P5. Since my last post I have learned how to open up a font from my computer and use it in processing. I have decided to use one of my favourite fonts called Gamer. Once the font is loaded you can change its size, orientation, placement and colour. I have mapped the variables colour and orientation to my mouse, so as it moves across the screen, they change.

Thanks for coming to my TED talk. 

[danfutura]

PROTOTYPETYPE Final

Here is my Final Outcome for the first assignment to the A to the K Studio. A lot has changed in terms of concept since my last post. After presenting my PlayDoh type ideas I was told that my examples weren’t following a modular system as was required by the assignment. Rather than just bending the PlayDoh into letterforms that I knew, I was prompted to re-evaluate the possibilities of the medium in terms of its modularity. 

In the above drawing you can see my planning start to unfold into a set of instructions for the letterforms. By setting strict guidelines I was limiting myself but also forcing myself to be more creative, stopping myself from being influenced by another typeface. My Rules were:

- Only a maximum of 5 straight pieces, 2 curved pieces used in forming shapes

- Height max = 2 vertical + 2 horizontal pieces, Length max = 2 horizontal. No     minimum 

- Shapes can only be rotated at Right Angles

- Shapes can connect at any point. 

I also organized how I was going to construct each letter before actually making them. When it came time to taking photos I realised that these designs were too long or short in some areas so I made some adjustments, while still following my rules, in order to get the best looking letters possible. 

After taking the photos I removed the backgrounds and arranged them onto a blank page in Photoshop. I wanted to make sure every letter was set to scale, and no resizing or recolouring methods were used, as the brief specifies to not use a computer in creation of the letters. 

All in all I am very happy with my final presentation of my typeface. I remember that last year when tasked with making a typeface using found objects, my reflection stated that next time I wouldn’t just place images of my letters next to each other on a page, but rather make it look like the are all integrated into the same environment.  I am satisfied that I have achieved that in this project and feel that it shows how my skills have evolved over time. 

[danfutura]

PROTOTYPETYPE: work in progress

TIL S2 EP2

Our first assignment for this semester is called PROTOTYPETYPE and we are tasked with creating a typeface without using a computer and instead found objects or materials. You may recall that last year I did something similar, however for that assignment we had to find letters that already existed within the objects. This time we had a bit more leeway and could join and modify objects in a modular style. I have many trials for this assignment and each are a bit different from each other as I'm really just experimenting with possibilities.  Here are some things that I've come up with:

I have used guitar picks to make the letters A and C. The picks have a cool marbled texture to them and together almost work like a bitmap font, joining together pixels to make a glyph. 

Here I have really considered the notion of modular typography, placing cassettes next to each other to create letters L and P. 

I also wanted to try something that wasn’t an English letter, and created the positive and negative symbols from batteries. A cheeky visual pun. 

Speaking of positive and negative I wanted to trial making letterforms out of both positive and negative space, and wanted to use a more organic material to create the glyphs. Here I’ve used PlayDoh to make the letters A,I,S and C. So far I like this idea the most, and have considered the possibility of Upper case letters using positive space, and Lower case letters using negative space. This is also heavily inspired by Jason Galea’s work for the K.G.L.W album covers, which you can check out here.

 https://imgur.com/gallery/stBaocw 

Overall I feel like I have a good basis of ideas that will hopefully spiral into what will become my final. 

Thanks for coming to my TED talk.

[danfutura]

Processing and P5 coding

TIL S2 EP1

This semester was kicked off with Karen’s introduction to the application Processing and the coding language P5. I am really enjoying the ‘Hour of Code’ although it may be hard to follow at times I am learning heaps and feel very accomplished when things work how I want them to.

This exercise started with an activity called ‘Modular Type’ where letterforms are created using a only two shapes that can be duplicated rearranged and joined together to create our initials. You can see my outcome of this activity here.

After a crash course in P5 The next step was to recreate our modular type initial’s in the program. This was quite tricky and took some time because in the original activity I used a grid to place squares in and make the letters, so I had to use a similar process in code, were the squares and their dimensions were plotted on an axis and the placement of each shape had to be calculated and fitted in. Here is what I ended up with.

And here is the code:

function setup() {  createCanvas(1500, 900);  background(255); }

function draw() {

noStroke();

//Sqaures //D

rect (100, 100, 150, 150) fill(0);

rect (100, 250 , 150, 150)

rect (100, 400 , 150, 150)

rect (100, 550 , 150, 150)

rect (250, 100 , 150, 150)

rect (250, 550 , 150, 150)

rect (400, 250 , 150, 150)

rect (400, 400 , 150, 150)

//P

rect (700, 100, 150, 150) fill(0);

rect (700, 250 , 150, 150)

rect (700, 400 , 150, 150)

rect (700, 550 , 150, 150)

rect (850, 100 , 150, 150)

rect (850, 400 , 150, 150)

rect (1000, 250 , 150, 150)

//Quadrants //D

arc(400, 250, 300, 300, PI - 6*QUARTER_PI, TWO_PI);

arc(400, 550, 300, 300, 0, 2 * QUARTER_PI);

//P

arc(1000, 250, 300, 300, PI - 6*QUARTER_PI, TWO_PI);

arc(1000, 400, 300, 300, 0, 2 * QUARTER_PI);

}

A week later, after learning how to automate the colour and placement of our letters to track our mouse or keyboard, we were given a new objective, to remix our original coded initials to move or change in some way. My outcome was quite bizarre and interactive. My two letters changed colour based on the position of the mouse. While the mouse moved it also painted the background in a continuous stream of colour that’s always changing. Also for a bonus when the mouse is clicked the letters and paint changed to black, and when a key was pressed, they changed to white. You can play around with this for ages and get all kinds of visual results. The final outcome can be described as a digitally psychedelic mess of colour and letter.

Here is the code for this master piece :]

var redValue, greenValue, blueValue;

function setup() {  createCanvas(1500, 900);  background(0,0,255); }

function draw() {

noStroke();

redValue= map(mouseX, 0, width, 0, 255);

greenValue= map(mouseY, 0, height, 0, 255);

blueValue= map(second(), 0, 59, 0, 255);

fill(redValue, greenValue, blueValue);

//Sqaures //D

redValue= map(mouseX, 0, width, 0, 255);

greenValue= map(mouseY, 0, height, 0, 255);

blueValue= map(second(), 0, 59, 0, 255);

fill(redValue, greenValue, blueValue);

if (mouseIsPressed) fill(0)

if (keyIsPressed === true) {    fill(255);

}

rect(mouseX,mouseY,150,150)

rect (100, 100, 150, 150)

rect (100, 250 , 150, 150)

rect (100, 400 , 150, 150)

rect (100, 550 , 150, 150)

rect (250, 100 , 150, 150)

rect (250, 550 , 150, 150)

rect (400, 250 , 150, 150)

rect (400, 400 , 150, 150)

//P

rect (700, 100, 150, 150)

rect (700, 250 , 150, 150)

rect (700, 400 , 150, 150)

rect (700, 550 , 150, 150)

rect (850, 100 , 150, 150)

rect (850, 400 , 150, 150)

rect (1000, 250 , 150, 150)

//Quadrants //D

arc(400, 250, 300, 300, PI - 6*QUARTER_PI, TWO_PI);

arc(400, 550, 300, 300, 0, 2 * QUARTER_PI);

//P

arc(1000, 250, 300, 300, PI - 6*QUARTER_PI, TWO_PI);

arc(1000, 400, 300, 300, 0, 2 * QUARTER_PI);

}

I recommend getting into P5 if you are a designer its great fun, and if you’d like to try out my programs you can just copy the code into processing.

Thanks for coming to my TED talk.

[danfutura]

I’m Back!

Hello and welcome to the sequel of “Today I learned in Comm Design”. This time I will be posting my learnings and course progress for the class ‘A to the K’ an elective for Studio 2. This class really intrigued me due to its really ‘out there’ source matter. It focuses on Typography in a less traditional almost experimental way, where we create type using code, yes code, as well as none computer-y methods such as arranging found objects. I am very excited this class and am really enjoying it so far.

We have 3 main assignments this semester.

1.      UNESSAY/SKO – this blog that you are reading right now, where I collect thoughts and learnings in a regular online post.

2.     PROTOTYPETYPE – Creating a typeface without the help of a computer.

3.     MAJOR PROJECT – Design an original typeface digitally and present it in the form of a website. (I am looking forward to this one the most)

Overall there are some big things planned for this semester and of course for this blog. Stay tuned for some wicked cool stuff.

Thanks for coming to my TED talk.  

[danfutura]

My Final Reflection...

This is my last Tumblr post and since this semester is coming to a close i’d like to reflect back on the past few months.

Communication Design Studies was my favourite class this semester because it opened my mind about the fundamentals of design. We looked at everything from the past, present and future of the subject to inform our own design practice. My lecturer Andy kept us entertained with philosophical questions about design such as ‘Why do we design?’ and ‘Where is design?’, questions that I've yet to fully create an answer to. However I have a vague understanding, design is everywhere helps use to communicate and understand the world around us. This semester was met with a few challenges, particularly due to the virus and the shift from ‘face to face’ to ‘online learning’. Andy helped us with this transition by keeping the human interaction element as part of the online process. Things such as the YouTube video lectures and the class group discussions/work critique helped give me the impression that I was part of a group of people who were experiencing the same frustrations that I was. Overall this was a strong start to my University life, and helped set up me up for my future studies and career to come! 

Thank you for coming to my TED talk. 

[danfutura]

And here it is, my final for the ‘Ask Me Anything’ assignment. Now available online for your viewing pleasure!

[danfutura]

The Future of Design

Today I learned: Episode 12

“We live in a hybrid between a material world and a digitised world” - Karen

This post is in response to one of my recent lectures on the future of design and I will be sharing with you some exciting design technologies/artforms that are progressive and new!

1. The Eyewriter

The Eyewriter combines design with technology to help paralysed draw into a program using their eyes. It was created to allow a paralysed graffiti artist continue to work, his artwork was also projected onto buildings in real time. 

You can watch a video here > https://vimeo.com/70932989

2.  Jason Salavon 

Jason Salavon’s work comprises of digitally layering multiple images to collect their overall essence. Above is a piece of work that collates 4 decades of playboy magazine covers to show how they have progressed over time. 

You can view Salavon’s work here > http://www.salavon.com/

3. Metapolator

An open source program (not for profit) that allows users to modify and create fonts, creating a large database of user made typefaces. 

You can try it here > http://metapolator.com/home/ 

4. This person does not exist

An adversarial network that generates a human face using only pixels. This is my personal favourite on the list and quite freaky.  

You can try it here > https://www.thispersondoesnotexist.com/

Overall I feel that with the progression of technology, design will progress as well. This list makes me excited for the future and where it may lead. 

Thank you for coming to my TED Talk.