LogoMark.png

IsmaelRittmann/情報デザイン研究II の変更点


#author("2022-12-13T22:08:23+09:00","default:member","member")
#author("2022-12-13T22:08:52+09:00","default:member","member")
*HUMAN MODULAR [AUDIO & VIDEO] SYNTHESIZER
(conceptual work) ・・・・・・・・・・・・・・・・ 

#image(POSTER_V01.jpg)

-''[[Ismael Rittmann>https://design.kyusan-u.ac.jp/socialdesign/?IsmaelRittmann]]''
-'''Keywords:Graphic Design, Music, Visualization, 3D Animation'''

''Inspiration / References:''
Animation/Video:
-'''[[David O'Reilly>https://www.davidoreilly.com/]]'''
-'''[[Max Cooper - Repition>https://youtu.be/nO9aot9RgQc]]'''
-

Music:
-'''[[ITSU - Typography>https://detund.bandcamp.com/album/typography]]'''
-'''[[Max Cooper - Yearning for the Infinite>https://maxcooper.bandcamp.com/album/yearning-for-the-infinite]]'''

Graphic Design:
-'''[[Joseph Melhuish>http://josephmelhuish.com/]]'''
-'''[[Otl Aicher>https://www.otlaicher.de/en/]]'''

Interface- / Product Design:
-'''[[Teenage Engineering>https://teenage.engineering/products]]'''

~


**Overview
***What ?
Conceptual and visual work on a fictional audivisual experience space.
A participative music collaboration and performance. 
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
I am interested in music and its visualization. In my opinion music is a very social medium. It can connect people without words - since sound itself is a language.
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
DESIGN LANGUAGE:

All visual media will be made of colored squares that function as visual modules to structure a space in a grid like fashion. On top of this raster, symbols and bigger shapes are placed to fill the background with content. All symbols only have one outline and always hold the opposite colour to their background. This effect multiplies. 

This simple system allows for a unique look but still a lot of variation. It is easy to understand and stands out.

The pictograms function a bit like hyroglyphs and are meant to transport a message via semantic shapes, universally readable. 

This system is based on these intuitively chosen colors:
[All colors arranged after brightness]
#image(colors.jpg)

Audiovisuals excerpt: 
[a big grid of small squares displayes the audiospectrum in an abstract way. It reacts to any sound and can be adjusted in many different ways]
#image(vis canvas size.jpg)
~

[layers of the audiovisual: spectrum, image(symbols), combined]
#image(col1.jpg)
#image(img1.jpg)
#image(comb.jpg)

Concept explanation:
A room with projecters or screens on all four walls would be the ideal space for this fictional experience. The walls play the visuals and the guests have an influence on the music. For this to work I introduced a controller, which also functions as the advertising flyer. The two unique codes on the front of the paper can be read by a camera and translated into a rotational value. This value is then midi mapped to an instrument or effect to influence the music. 
~

***Outputs
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
- Flyer (visual language)
~
#image(1.jpg)
#image(2.jpg)
#image(3.jpg)

~

#image(variants.jpg)
CENTER:final layout of the Flyer and a more soft variant
~
- Audiovisual Mock-Up (animation & sound)
~
#Youtube(C5-Zi0K9GXs)
CENTER:Music: ITSU - Fingerspelling

#Youtube(XxJOqa4oXGs)
CENTER:Music: ITSU - Fingerspelling
~

//***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
- Adobe Illustrator
- (Ableton Live)
- Touchdesigner
- Photoshop

~

//***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
~

***Conclusion
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};

The field of audiovisualisation is huge, and there are millions of ways to translate music into imgery. Creating one real time rendered version was a very good practice. I finally could motivate myself to look into Touchdesigner properly since I have always wanted to learn it. 
~
~


**Research

***Current Situation
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
- electronic music in clubs is consumed in a very hierarchic fashion. The Dj plays music - everyone else listens. Although this is already a social event, it leaves its participants very passive.
- music listening and creating could be a more interactive social event. This for example already happens at Karaoke in a specific way. 
~

//***Precedent
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
~

***Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
With motion tracking systems like XBox Kinect and all kinds of music games, the act of interacting with music is already widely spread and digitised.
These tools however are often used for personal experiences and not utilised for collective, interactive social experiences.
~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
O find a topic
O research
O formulate concept
O hold midterm presentation
O Create a final style for the audiovisual in touchdesigner. 
O document that style and touchdesigner program.
O make finished version of flyer and poster.
O prepare everything for the presentation.

~
~
~

#hr
CENTER:''WORK LOG''
//&color(red){List the most recent information at the top.};
#hr
~
~


**2022.12.06
***progress:

- Finished a functional version of the Visual Program in Touchdesigner.
#image(Touchdesigner Program.jpg)
- Worked on the flyer.
#image(F1_FRONT_V03.jpg)
#image(F1_BACK_V03.jpg)
- Created an additional Poster.
#image(POSTER_V01.jpg)

**2022.11.09
***progress:

I am currently thinking of motifs and ways the music visualization could work / what it should look like.

**2022.11.02
***progress:

presentation:
https://drive.google.com/file/d/1AfTaLj66UqfyoryUkIdeLoqX64RGTu1A/view?usp=share_link


**2022.10.28
***progress:

work on the interims report
(structure, explanation, etc....)

I composed and structured some simple electronic music loop in Ableton Live. 
For this I used the track "ITSU - Futura" as a reference.

**2022.10.19
***progress:

I improved the previous flyer design.
- added more sympols
- added a text styling for both english and japanese characters (filler text)
- changed the style for unique symbols (hand)

I am also collecting my thoughts on the process for the midterm presentation to have an easy to understand narrative.

I am currently looking into Touchdesigner and Ableton Live as my tools for audiovisualization.

#image(z2.jpg)
#image(z2b.jpg)

**2022.10.12
***introducing the visual language:

I am trying to develop an easy to understand and recognizable craphical identity.
As a basis I use 50x50 mm squares in 12 (13) colors. On each square or 'module' one symbol can be fittet. It is displayed in the contrary color to its background. This creates a sharp and vibrant contrast and the flyer looks very colorful and alive. The base colors were selected to harmonize with each other to some extent but allow for a lot of variety. 

#image(colors.jpg)
#image(idea 1.jpg)
#image(arrow.jpg)


As a reference I would like to show some Modular synthesizers: 

https://cdn.shopify.com/s/files/1/0009/4362/0155/files/Studio_2019-june6-small_1024x1024.jpg



**2022.10.04
***formulating the idea:

concept for fictional event:

a flyer acts as invitation and information holder. This flyer has printed various color codes and digital tracking markers on its outside.
This design choice is supposed to make the flyer become a kind of controller that can be registered and read by a camera/computer. 
At the event installation the setup allows visitors to use their flyers as controllers to affect the music.

I plan to use the method of modulation as a key principle of the controllers intended function. 
- The visual language should explain the simple functionality without words.
- Further functionalities will be explained on the inside of the flyer.

explaining illustrations will follow...

music inspiration: 
https://detund.bandcamp.com/album/typography

visual inspiration: 
https://www.youtube.com/watch?v=bOfpQt4KFCc
https://img.digimart.net/prdimg/m/98/aa642b62b957da65344fff411befe88960de74.jpg
https://image.itmedia.co.jp/news/articles/1802/15/l_koya_pianokit.png
~
~

**2022.09.26
***further research on my topic:

- idea to either create a mockup of the installation in digital  '''or''' research the necessary tools to realize such an installation in a real space.

- I'm currently trying to reduce the amount of work and intended outputs to a realistic and manageable level. 

- I also want to work out a visual identity for the fictional event. 
for reference: 
-https://detroitunderground.net/
-https://www.eboy.com/
-http://k3ro.net/

-https://www.defasten.com/
-https://olafureliasson.net/archive/artwork/WEK100196/din-blinde-passager
~
~

**2022.09.21
***What am I thinking about? / topic:

- I am interested in music visualization. In my opinion music is a very social medium. It can connect people without words - since sound itself is a language.

- Especially instrumental music has the ability to evoke images in ones personal imagination. I have always found it interesting to extract and find these images. They are my interpretation of the music. These images can strengthen the perception of the sound and arrangement and can also be used to make listening to music a social event. 

- I want to make an interactive music visualizer that invites people to engage with a visual projection installation. 

***Research / Inspiration:

- http://josephmelhuish.com/
- https://www.davidoreilly.com/

~
~


~