GMU:Wild Type/Matthias Schäfer: Difference between revisions

From Medien Wiki
 
(32 intermediate revisions by the same user not shown)
Line 13: Line 13:




You can download and tweak the sketch on [http://openprocessing.org/sketch/226377 OpenProcessing], but it is super slow, so you can also see it on my [http://matthias.pitscher.pw/letter.html personal page], which runs on github.
You can download and tweak the sketch on [http://openprocessing.org/sketch/226377 OpenProcessing], but it is super slow, so you can also see it on my [astreinerbaum.github.io/letter.html personal page], which runs on github.
<br>
<br>


== GlitchFont ==
== GlitchFont ==
[[Image:hw_ms_glitchfont.png|thumb|right|300px]]
[[Image:hw_ms_glitchfont.png|thumb|300px]]
This font is inspired by [http://pre12.deviantart.net/4310/th/pre/f/2011/364/0/3/missingno_drawing_by_aerostat-d4krmly.jpg MissingNo] from Pokemon. I used the Labyrinth example and changed it so it would create rectangles instead of lines and used a new for-loop for lower Cases.  
This font is inspired by [http://pre12.deviantart.net/4310/th/pre/f/2011/364/0/3/missingno_drawing_by_aerostat-d4krmly.jpg MissingNo] from Pokemon. I used the Labyrinth example and changed it so it would create rectangles instead of lines and used a new for-loop for lower Cases.  
You can try out the font on [http://matthias.pitscher.pw/glitchfont.html my Page] and see and download the code on [http://www.openprocessing.org/sketch/226953 OpenProcessing] (which seems to run nicely again)  
You can try out the font on [astreinerbaum.github.io/glitchfont.html my Page] and see and download the code on [http://www.openprocessing.org/sketch/226953 OpenProcessing] (which seems to run nicely again)
<br style="clear: both;">


== BlockFont ==
The Idea is to transform Type into Sound. Using the Outline of a Letter to create a describing waveform, which then can be transformed into sound. It's a lot of spaghetti code, but it magically works and can be downloaded [http://www.openprocessing.org/sketch/239308 from OpenProcessing]. Also you can check out the result again [http://matthias.pitscher.pw/blockfont.html on my site]
[[Image:hw_ms_blockfont.jpg|thumb|right|300px]]


=== Comments ===
<br style="clear:both;">
== Animation ==


''Very good work. Well done!''
Quick animated M, where I explored the different Easing Methods of the "Ani-Library".
Code can be viewed on [http://www.openprocessing.org/sketch/247450 OpenProcessing]


* OpenProcessing seems to be really slow right now. I have already contacted them about it.  
https://i.imgur.com/hNtT5Mx.gif
* There's currently no way to embed processing sketches in our wiki.
* To embed external images, just paste the plain image URL. See [[Playground#Externes_Bild_einbinden|here]].


Thanks for your feedback + keep up the good work!


[[User:Ms| — Martin Schneider]] 11:10, 28 October 2015 (UTC)
<br style="clear: both;">
 
 
== DrawBot ==
<source lang="python">
size(400,400)
w = width()
h = height()
 
rect(0,0,w,h)
fill(255,0,0)
oval (0,0,w,h)
 
translate(w/2,h/2)
linearGradient(
    (0,0),
    (h/2,0),
    [(1,0,0,0.0),(0,0,1,1)],
    [0.2,1]
    )
 
#circling with triangles   
fill(0,0,1,0.01)
save()
for i in range(180):
    rotate(40)
    polygon((0,-w/2),(0,w/2),(h/2,0))
restore()
 
#TEXTEXTEXTEXT
shadow((0, 0), 100, (1, 0, 0))
font('Helvetica') #Use font that is on your Computer
fill(1)
fontSize(100)
 
 
save()
for i in range(9):
    rotate(40)
    text("{", (0,0))
restore()
</source>
 
[[Image:hw_ms_drawbot1.png|thumb|left|150px]]
[[Image:hw_ms_drawbot2.png|thumb|left|150px]]
[[Image:hw_ms_drawbot3.png|thumb|left|150px]]
[[Image:hw_ms_drawbot4.png|thumb|left|150px]]
 
 
 
<br style="clear: both;">
 
==Writing System==
 
The Concept for "Colphabet" is to use the [http://www.asciichart.com/ascii_hexadecimal.html ASCII HEX] number and display it as a color. The first letter will define RED, second GREEN, third BLUE. Thus the same word can be displayed in a lot of variations depending on the context and is only readable, when you decode the colors again.
<br>
--work in progress--
<br>
Here is [https://color.adobe.com/de/create/color-wheel/?base=2&rule=Custom&selected=4&name=Mein%20Color-Thema&mode=rgb&rgbvalues=0.2823529411764706,0.396078431372549,0.4235294117647059,0.4235294117647059,0.43529411764705883,0.12549019607843137,0.3411764705882353,0.43529411764705883,0.4470588235294118,0.4235294117647059,0.39215686274509803,0.12941176470588237,0,0,0&swatchOrder=0,1,2,3,4 Hello World!] quickly done in kuler
 
<br style="clear: both;">
 
==3D Letters==
 
Each letter is rotated in the middle around the z-axis to create iconic looking vases. This sketch shows "ABCDE". The [https://github.com/astreinerBaum/Processing/tree/master/3D_revolved source]
 
[[File:3D_revolved.png|thumb|150px]]
 
<br style="clear: both;">
 
==Final Project==
 
The Idea was to create an Ant Simulation based on Pheromone Trails and being able to create a Font that those virtual Ants want to travel to thus creating the Typeface with their tiny bodies.
I looked into Daniel Shiffmans Nature of Code to learn about Vectors, Forces and Particle Systems.  I was doing some research into [https://en.wikipedia.org/wiki/Ant_colony_optimization_algorithms Ant Colony Optimization Algorithms], which are used to solve for an optimal path between to points using swarm intelligence. Despite from Dan Shiffman I used this [http://openprocessing.org/sketch/15109 sketch] as a reference. During my research I got distracted quite a bit with searching for information on how to keep Ants at home and getting to know their social and individual behavior better (I don't want to elaborate on this, but they are fascinating creatures). It is possible to make Ants walk a specific trail (with a chemical compound on the floor), so It might be possible to generate a typeface with actual biological agents.
As far as it comes to my processing sketch I discarded the idea of using virtual pheromones and trails and decided on creating a programm that looks like Ant (Insect) Behavior, but really is a particle simulation with lots of randomly walking pixels, that get slower and repel when they are inside type.
 
Check out the [https://www.youtube.com/watch?v=C8lRytHfKMo video] (I chose youtube because of 1080p support)
Download the [https://github.com/astreinerBaum/Processing source]
 
Future development:
- Make Pheromone system work
- Rewrite in p5.js (for browser support)
- Use biological Ants

Latest revision as of 09:00, 12 April 2016

Letter M

Hw ms capital-M.png
Hw ms lowercase-m.png


Homework for 29.10 was to create a letter with Processing.
I used capital M, because it is a unit (em) in typography, just like point. My variables also derive from typographic line terms seen in the image below.

500px-Typography_Line_Terms.svg.png


You can download and tweak the sketch on OpenProcessing, but it is super slow, so you can also see it on my [astreinerbaum.github.io/letter.html personal page], which runs on github.

GlitchFont

Hw ms glitchfont.png

This font is inspired by MissingNo from Pokemon. I used the Labyrinth example and changed it so it would create rectangles instead of lines and used a new for-loop for lower Cases. You can try out the font on [astreinerbaum.github.io/glitchfont.html my Page] and see and download the code on OpenProcessing (which seems to run nicely again)

BlockFont

The Idea is to transform Type into Sound. Using the Outline of a Letter to create a describing waveform, which then can be transformed into sound. It's a lot of spaghetti code, but it magically works and can be downloaded from OpenProcessing. Also you can check out the result again on my site

Hw ms blockfont.jpg


Animation

Quick animated M, where I explored the different Easing Methods of the "Ani-Library". Code can be viewed on OpenProcessing

hNtT5Mx.gif




DrawBot

size(400,400)
w = width()
h = height()

rect(0,0,w,h)
fill(255,0,0)
oval (0,0,w,h)

translate(w/2,h/2) 
linearGradient(
    (0,0),
    (h/2,0),
    [(1,0,0,0.0),(0,0,1,1)],
    [0.2,1]
    )

#circling with triangles     
fill(0,0,1,0.01)
save()
for i in range(180):
    rotate(40)
    polygon((0,-w/2),(0,w/2),(h/2,0))
restore() 

#TEXTEXTEXTEXT
shadow((0, 0), 100, (1, 0, 0))
font('Helvetica') #Use font that is on your Computer
fill(1)
fontSize(100)


save()
for i in range(9):
    rotate(40)
    text("{", (0,0))
restore()
Hw ms drawbot1.png
Hw ms drawbot2.png
Hw ms drawbot3.png
Hw ms drawbot4.png




Writing System

The Concept for "Colphabet" is to use the ASCII HEX number and display it as a color. The first letter will define RED, second GREEN, third BLUE. Thus the same word can be displayed in a lot of variations depending on the context and is only readable, when you decode the colors again.
--work in progress--
Here is Hello World! quickly done in kuler


3D Letters

Each letter is rotated in the middle around the z-axis to create iconic looking vases. This sketch shows "ABCDE". The source

3D revolved.png


Final Project

The Idea was to create an Ant Simulation based on Pheromone Trails and being able to create a Font that those virtual Ants want to travel to thus creating the Typeface with their tiny bodies. I looked into Daniel Shiffmans Nature of Code to learn about Vectors, Forces and Particle Systems. I was doing some research into Ant Colony Optimization Algorithms, which are used to solve for an optimal path between to points using swarm intelligence. Despite from Dan Shiffman I used this sketch as a reference. During my research I got distracted quite a bit with searching for information on how to keep Ants at home and getting to know their social and individual behavior better (I don't want to elaborate on this, but they are fascinating creatures). It is possible to make Ants walk a specific trail (with a chemical compound on the floor), so It might be possible to generate a typeface with actual biological agents. As far as it comes to my processing sketch I discarded the idea of using virtual pheromones and trails and decided on creating a programm that looks like Ant (Insect) Behavior, but really is a particle simulation with lots of randomly walking pixels, that get slower and repel when they are inside type.

Check out the video (I chose youtube because of 1080p support) Download the source

Future development: - Make Pheromone system work - Rewrite in p5.js (for browser support) - Use biological Ants