HTML5 issues

Ik wou mijn filmpje voor audio/typo integreren in een potentiele website. Hiervoor heb ik de code hieronder gebruikt. Wat blijkt nu.. in chrome werd het geluid afgespeeld maar kreegg ik geen beeld. Terwijl het in safari perfect werkt…  // ZOEK ZOEK ZOEK ZOEK // 5 minuten later… > GEVONDEN :-D Gewoon je video exporteren als H.264 (vanuit after effects) en dan lukt het zowel in chrome als in safari! Hiphoi!

Schermafbeelding 2015-02-25 om 04.21.54

Schermafbeelding 2015-02-25 om 04.32.47

Advertenties

Buzzzy Bunny is almost finished!

Tadaah hier is hij dan! De buzzzy bunny aka ‘letter/karakter B’. Na veel gepruts ben ik er dan toch in geslaagd om de bewegingen van een opwindbaar speelgoedje na te bootsen. Ik heb bewust het konijn uit het frame laten treden om het van richting te doen veranderen. Hiervoor heb ik een kopie van het origineel gemaakt (één dat naar rechts moest gaan en één naar links). Uiteraard mocht slechts 1 kopie zichtbaar zijn, dus heb ik de ene laag op 0% opacity gezet en de andere op 100% en vica versa. Voor het geluid heb ik effectief een opname gemaakt van een speelgoedje en dit dan ingekort in audacity. Wat het video format betreft, heb ik mij gebaseerd op de 16:9 ratio (youTube).. Dit zou in de toekomst nog kunnen veranderen naar 16:10 (ratio mac) Want het is wel de bedoeling dat alle letters een sequentie vormen (en dan wil je achteraf niet liggen klooien met composition settings aan te passen in AE, trust me!)

So on to the next letter (hopelijk gaan die steeds vlotter en vlotter…)

Schermafbeelding 2015-02-24 om 20.27.44 Schermafbeelding 2015-02-24 om 21.05.56 Schermafbeelding 2015-02-25 om 00.19.19 Schermafbeelding 2015-02-25 om 00.48.50

 

PS > de sleutel waarmee de letter wordt opgewonde moet ik er nog bij maken (daarom dat het konijn in begin nog stil staat) ;-)

Website

Oké de mooie plaatjes voor op de website dat komt in orde. Nu de website zelf. Ik heb besloten om mijn klasgenoten te volgen en toch zelf een website proberen te coderen. Het is nu niet bepaald mijn plan om web developer te worden, maar een beetje achtergrondkennis kan altijd van pas komen. Als het echt niet zou gaan, kan ik nog altijd Adobe Muse gebruiken (ontwerpen zonder coderen). Hier zijn enkele shots van de basics die ik al uitgetest heb…

Schermafbeelding 2015-02-16 om 11.23.28

Schermafbeelding 2015-02-16 om 11.23.31

Schermafbeelding 2015-02-16 om 11.32.35

Schermafbeelding 2015-02-16 om 11.44.39

Schermafbeelding 2015-02-16 om 11.50.53

Schermafbeelding 2015-02-16 om 11.53.16

Schermafbeelding 2015-02-16 om 12.01.40

Schermafbeelding 2015-02-16 om 12.08.10

Schermafbeelding 2015-02-16 om 12.16.37

 

Schermafbeelding 2015-02-16 om 12.02.40

Geleerd? ‘sublime’ als text editor gebruiken. Een code steeds afsluiten met </> De titelbalk een naam geven met <head> Werken met lijsten (unordered,orered en defined lists). Parents and children (orde scheppen in codering)

To be continued…

Bizzzzzy bunny

Schermafbeelding 2015-02-10 om 23.16.42

Hoog tijd om tr aan audio/typo te werken. Het plan is om 26 karaktertjes te maken op basis van emoties, gemoedstoestanden, karaktereigenschappen > zou dan een generiek worden van een aantal korte filmpjes a la bolman (zie vorige posts). De letter B wordt een hyperactieve letter, genaamd de “buzzzzy bunny”. Het idee is dat de letter B opgewonden wordt zoals een speelgoedje, die dan losgelaten wordt en op hol slaat. Het eerste frame dat je te zien krijgt, is de rugzijde van de letter B (our bunny). De knop wordt opgewonden > uitzoomen beeld > grijper die bunny vasthoudt zet hem neer en laat los > starten van het ‘hyperkinetisch’ bewegen. Dit doe ik in after effects. En het eerste probleem doet zich al voor > wanneer je twee key frames maakt, kan je de rotatie van de knop bepalen > AE gaat automatisch een zo gelijdelijk mogelijke overgang creëren. Maar wanneer je een speelgoedje opwindt, draai je in korte, ruwe bewegingen (in stappen). Dit zou op te lossen zijn via de “graphic editor. Ik ben er al in geslaagd de beweging te laten versnellen/vertragen aan het begin/eind van de curve. Maar de ruwe beweging heb ik nog niet gevonden.. (zie filmpje) De zoektocht gaat verder…

10966907_1028716293811769_1956443834_n Schermafbeelding 2015-02-11 om 01.32.35

inspiratie jaaropdracht

Wat de jaaropdracht betreft ben ik op zoek naar de cross-over tussen interieur en grafisch ontwerp. Wat vond ik interessant/tof om te doen? Om de jaaropdracht voor mezelf te definiëren ben ik op zoek gegaan naar voorbeelden van 2D/3D, mixen tussen grafische ‘elementen’ en ruimtes (interieur)…


OK GO > 2D/3D spelen met ruimtebeleving (a la Felice Varini > gebonden aan bepaald punt in de ruimte) SPEL-ELEMENT?

EMIL KOZAK > tekening x ruimte

Emil-Kozak-graphic-exhibition-2

http://design-milk.com/bold-black-white-exhibition-denmark/

NAO RIVIV > fashion designer: tekening letterlijk op een stof gekleefd > interessant?

noa-raviv-graduate-collection3-600x900 noa-raviv-graduate-collection6-600x900 noa-raviv-graduate-collection7-600x900 noa-raviv-graduate-collection13-600x900

http://www.noaraviv.com/aboutnoaraviv/

http://design-milk.com/line-3d-printed-clothing-based-defects/

ZIN HELENA SONG > sculpturen > tekeningen die 2D ook zouden kunnen werken vertalen naar 3D > puur esthetische kwaliteit, geen praktische functie?

zin-helena-song-Origami-1_-1516-600x663 zin-helena-song-Origami-2_-9-mixed-media-l-2014-600x709

http://design-milk.com/geometric-sculptural-paintings-zin-helena-song/

MICHAL MACIEJ BARTOSIK > licht-ornament > design-object of sculptuur? http://design-milk.com/tensegrity-michal-maciej-batosik/

TFSL03-600x600 TFSL04-600x600 TFSL05-600x600

CONDITIONAL DESIGN (http://conditionaldesign.org)onvoorspelbare tekeningen > via een aantal vaste regels tot een bepaald grafisch resultaat komen? // SOL LEWITT

1672878-inline-750-books-17 download encircling full_c_d hatching

ANISH KAPOOR > optische illusies Vlak of volume?

121218-MCA_Anish_Kapoor-0717_72dpi_1 121219-MCA_Anish_Kapoor-1206 Raji+RM+Interior+Design+Anish+Kapoor-3

RICHARD SERRA > sculpturen waar je door kan lopen

898ff31f-bede-4ba0-8a3c-ba6c0a9c0522-EPicture-02fcb476-fd8a-4b04-955b-765aafff569a-EPicture-richard-serra richard serra - inspiration.jpg

LISETTE APPELDORN> geabstraheerde dierenmaskers (geometrie)

http://design-milk.com/raster-masks-lisette-appeldorn/

MSK-1-Lisette-Appeldorn-600x895 MSK-3-Lisette-Appeldorn-600x895

KATSUMI HAYAKAWA> architecturale paper structures

Katsumi-Hayakawa-Void-Solid-Paper-Sculptures-2-600x397

GLASS SCULPTURE> materiaalgebruik?  http://design-milk.com/iridescent-kite-made-3m-dichroic-glass-finishes/

Brooklyn-based design house SO-IL was asked by 3M Architectural Markets to team up on project that explores 3M™ Dichroic Glass Finishes, an ethereal film for glass surfaces that plays with light by reflecting and creating color shifts. They came up with a sculptural, three-dimensional kite that radiates an iridescent color spectrum.SO-IL-3M-Dichroic-Glass-Finishes-1 SO-IL-3M-Dichroic-Glass-Finishes-3-600x900

GLASS SCULPTURE> materiaal

http://design-milk.com/city-inspired-sculptures-rodger-stevens/

http://design-milk.com/pool-loss-colour-jeroen-bisscheroux/

http://design-milk.com/caramel-yasmin-muller/

http://design-milk.com/drawing-series-jin-il-park/

http://design-milk.com/wall-mounted-calendar-made-lego-bricks/

http://design-milk.com/quadrat-a-sculptural-usable-wall-object/

http://design-milk.com/constellations-geometric-collages-by-chad-wys/

http://design-milk.com/a-surreal-monochromatic-pop-up-workspace-at-wieden-kennedy/

http://design-milk.com/reach-out-and-touch-some-art-a-chat-with-aakash-nihalani/

http://design-milk.com/unframed-daniel-rozins-robotic-mirrors/

http://design-milk.com/the-infinity-of-the-room-by-pia-jensen/

http://design-milk.com/me-far-geometric-copper-nesting-bowls-by-coworks/

http://design-milk.com/geometric-tape-installations-by-aakash-nihalani/

http://design-milk.com/the-obliteration-room-by-yayoi-kusama/

http://design-milk.com/sticky-note-structures-by-yo-shimada/

http://design-milk.com/gridded-installation-full-furniture-wallpaper-clothing/

http://design-milk.com/sculptural-wood-surfaces-anthony-roussel/