Pure Data

I came across a presentation at the University of Oxford on the ‘Show Series‘ that was called “Pure Data – a musical programming show and tell”. I went expecting more about ‘data’, ‘big data’ and ‘stuff’, with a few related notes (pun intended) about music…

But was pleasantly surprised.

What is Pure Data?

“Pure Data (or Pd) is a real-time graphical programming environment for audio, video, and graphical processing. Pure Data is commonly used for live music performance, VeeJaying, sound effects, composition, audio analysis, interfacing with sensors, using cameras, controlling robots or even interacting with websites.” (from flossmanuals)

“Pure Data is a flexible and accessible programming language widely used by musicians because of its friendly “patching” interface.” (from the ‘Show Series’ description)

The talk demo-ed some entry level projects and gave an overview of how the program is used to control and make sounds. He gave an introduction of some of the objects used to create a sequence of sounds, and controllers such as oscillator, volume and digital to analogue objects. I really liked the references given and the speaker pointed us to these:

A few observations for the future (and once you learn the basics you might remember this):

  • VERY IMPORTANT: one of the first things to do is to add a volume control and set it to 0.3 (30%) otherwise you can ruin your speakers, headphones and/or ears!
  • If there are two input connections, use the right first, then the left. Left is usually dominant, and if you connect to left then right, the right might never be played/listened.
  • Best practice is to tidy the “patch”, allowing others to best understand your own drawing/code.
  • Number entries can be changed to sliders, click/right-click and select Properties to edit.
  • Sinesum allows complex sounds (any right combination of sounds with sine), so it is good to know.

Examples:

Ambient Pure Data Composition:

Algorithmic Composition In Pure Data:

This last one has different ‘skins‘ and a tidy control panel, the two videos already exemplify some of the power of PD and also how complex a composition can become. I think if you understand music theory in some level you can benefit greatly, but if not, have fun just playing with the various controllers.

Another great and fun thing to do is to turn your music creations into apps, here are two references on how this can be done:

On the ‘make an app’ note, there are two versions of Pure Data to download, the “vanilla” and the “extended”. The vanilla apparently is easier to export your patch to an android app, however the extended version comes with loads of useful libraries.

You can check the screencast of the Pure Data ‘Show Series’ and maybe learn a bit more than what I listed here.

Awwwards Barcelona – Day 2

Mathias Bynes

JavaScript ♥ Unicode

Mind blowing”stuff”. Check more sane solutions at mths.be/regenerate or mths.be/node-unicode-data

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

He is currently working at Opera.

Created evil.sh – a collection of various subtle and not-so-subtle shell tweaks that will slowly drive people insane (but maybe you could ignore that I even mention it – disclaimer: I won’t be held responsible if you go ahead an test his script! )

He gave amazing examples of things that simply don’t match and “suppose to” with explanations and some solutions to work around it. Be aware: this section is “link-heavy”:

http://mothereff.in/punycode is a tool that uses Punycode.js to convert domain names between Unicode and Punycode (ASCII).

Nice site with insights on javascript and “those very special irregularities, inconsistencies and just plain painfully unintuitive moments” of the language – wtfjs.com

  • Unicode standard varies from U+000000 to U+10FFFF possible symbols (not all used)
  • Basic Multilingual Plane (BMP) U+0000 to U+FFFF
  • The rest are “astral planes” (need at least 4 hexadecimal digits to represent)

ES6 uses brackets and uses the whole scope of unicode but this is not implemented in all browsers. The current solution uses surrogate pairs.

mths.be/punycode – library that counts the strings more accurately.

Now, in ES6, the string character count gets the correct number of chars, check how it works on mths.be/bmf

Countable.js – is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element. It is a zero-dependency library and comes in at just about 1KB when minified and gzipped.

Check: http://mths.be/bed about JavaScript’s internal character encoding.

git.io/unorm – unicode normalization on ES6.

A Unicode-aware string reverser written in JavaScript – mths.be/esrever

Check: A robust & optimized ES3-compatible polyfill for the `String.prototype.at` proposal for ECMAScript 6/7 – mths.be/at

Create unicode-aware regular expressions – mths.be/regenerate and mths.be/node-unicode-data

A source code transpiler that enables the use of ES6 Unicode regular expressions in ES5 –  https://mths.be/regexpu   

The “Pile of Poo Test (TM)” – just use that symbol on your own unicode tests and check if it is returning what is expected or not.

  Complete article/slides at mths.be/jsu – the examples will blow your mind… @mathias 


Hvass And Hannibal

Collaboration – Making/Thinking/Illustrating Together

The story of Hvass&Hannibal and how we work with different materials and medias.

Amazing colourful and inspiring talk on design and illustrations by @HvassHannibal #AwwwardsBCN   A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

Working more on music industry, illustration and exploring textile and 3D spaces. Started as fun, playful, as friends and with illustrations on wall/bars, playful creations with costumes and the ‘smoking ring’ until an ‘official’ poster for school when they decided to create the studio.

She showed some of their work and they were very inspirational to me. The process was of a “ping-pong” where Hvass and Hannibal were working on each other’s drawings and building up their design together. Some very creative ideas, and some “simple” ideas that were just so well executed that created amazing effects. A few:

  • Working on “jungle theme” around and the illustrations got to furniture, aprons, plates, etc. Now using loads of MDF for creation and textiles.
  • Working with ribbons and dancing on a project (which was raining), working outside and on “the field’ is much harder… lots of try-and-error techniques, amazing efforts.
  • Sustainia Award 2012 – amazing work using glass design and materials for the awards. Glass layered with coloured glue.
  • Cover for “Ghost of a chance” – manual work and origami-style paper work for a photoshoot. She mentioned that looks graphical/computer design but was manual work!

Unsuccessful sketches can be a “panic database” for future projects.

  • Conference design, creating a more “human” conference, more tactile design props and elements, like cut shapes, wooden crate and boxes, hand painted chairs and hand-drawn name tags, posters, panels and decoration. including hanging elements cloud-shaped. Also using pallets for tables, boxes painted for stools, hand-tied name badges. Photo-booth with the props as well.
  • Design for children’s library. With shapes allowing characters creation, signs all with the playful arrangements of these shapes.

And many more amazing work can be found at their website: www.hvasshannibal.dk

Check also Stupid Studio – a graphic studio in Denmark that they worked with.

 


Jeremy Keith

Enhance!

We’re working on increasingly complex websites. There’s a temptation to match this growth with increasingly complex solutions. But there’s a real value in keeping things simple…or at least _starting_ things simple. If you can build a solid robust foundation, there’s a good chance that your work will be future-friendly. Prepare to have your brain subtly rewired as we look beneath the surface-level implementation details of the web to reveal the semantic structure below. Whether you’re publishing content or building the latest hot app, the principle of progressive enhancement will change the way you think about your work.

My notes:

Rewiring the brain…. the double meh, Fedex arrow, Toblerone bear, Ducks wearing dog masks – this last one I will never forget… take a look:

OMG! Ducks wearing dog masks!

The moment you realise all ducks are wearing dog masks…

Remember the Dao of Web Design by John Allsopp – more relevant now than it was then.

Tapping into the Zen Garden to remind us of the separation of structure and presentation.

Progressive enhancement as well: HTML  > CSS  > Javascript

Shearing layers on architecture/building, where all layers are dependent on the one before.

HTML is fault tolerant, not throwing errors if tags not closed or not understood. He suggests to be structurally honest

don’t use a <div> or a <span> to represent a button, use a <button>!

CSS is also fault tolerant, it won’t stop parsing or showing content, just without style…

Javascript is not fault tolerant (it will throw errors), use safe defaults, but do not rely on them.

In the web front-end stack – HTML, CSS, Javascript and Aria – if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile and it will just work.

Suggests: ember first then angular and then backbone.

“No one wants to think that what they’re doing is trivial” – John Resig

He sees a problem with the phrasing of “the web platform”. It is not a platform… if you have iOS and I’m serving an iOS app you get 100%, if you don’t have an iOS device you don’t get anything, but if you are developing for the web “anyone” can get your content if it is on the web (even using devices in other platforms).

Do websites need to look exactly the same in every browser? Answer: dowebsitesneedtolookexactlythesameineverybrowser.com

BBC – cutting the mustard, supporting FEATURES not which browsers type/version… If a feature is supported then you can get the enhanced version.

“Cutting the mustard” checking for features! If supported, then get enhancement. #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

@adactio


Henry Daubrez

No guts, No glory

We are Dogstudio and we come from Belgium. Well, not especially the place you would dream of to grow a digital agency, isn’t it ? You’ve got to grow a pair, dream big, fail bigger and trust your guts. This is our everyday guide on how being weird, integrating research & development, personal projects and taking bold decisions got us to look into whole new perspectives.

My notes:

DogStudio does loads of amazing projects, from printing, web, 3D printing, light installation (and ‘weird stuff’), animation, etc.

A few of the projects they showcased (can we even flex this noun as a verb?)

Keep the creative juices flowing (yeah, sounds naughty)

  • Gifcup website loads of visits in 24hs (had to be taken down)
  • Waterloo battle

You need to know what you are doing, without inspiration and creativity an immense budget won’t help

They use lots of videos, nice imagery, effects, sound effects.

Project cycle: rising up your team’s skills > higher expectations > high quality > better project > repeat.

“50% of a remarkable experience lies in the details.”

Live by your vision. Trust your guts. Aim for quality. Party like there’s no tomorrow

@benguedj Benjamin Guedj – @sarrimaxime Maxime Sarri

Amazing super production of sites by Dogstudio… *NEED* to check their website: http://www.dogstudio.be


Divya Manian

Responsive Design: Current State of Affairs and Where do we go from here?

In this talk learn about what we mean by Responsive Design, the workflows around responsive design that exist today, the problems that we have noticed amongst the current workflows and how we are addressing them at Adobe.

My notes:

Product manager at Adobe – her main focus lie in new features on Photoshop to help people on responsive design.

Design decisions outside of canvas…

The researched showed that people were not satisfied with workflows, they wanted to use tools they already have (not learn another), they didn’t like updating tools, there was an increasing collaboration, but lack of tools for collaboration.

The clients don’t really know what is responsive design, they feel hard to keep pace with changing browser feature set, tedious to update design for different devices.

She advocates to determine where the design breaks, determine the breakpoints and prototype for them.

Implementing the design – use same grid as prototype, inventory features you will use, use responsive frameworks.

Check site: html5 please – use the new and shiny responsibly

RD is necessary for websites and data agrees.

OMG! she did all slides in Photoshop! check this: adobe.ly/1CveCdj (didn’t work much for me though… 🙁 )

@divya – manian@adobe.com


Ricardo Cabello & Jaume Sanchez

The Web in the age of WebGL

In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors. During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.

My notes:

WebGL vs Stage3D (Adobe)

Project 3 Dreams of black – http://ro.me (2011) – code now on github.com/dataarts/3-dreams-of-black

Unity or Blender? They actually used Maya for many of their projects…

Check threejs.org – Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.

Google maps cube game – started using Maya – from .OBJ converted to .js

Example (very summarised) of workflow for the project Wind&Sun (2013): they used Maya again, but terrain and repeatable objects in Collada. Then review and fix meshes (CSI Models) then optimise and output to binary, finally webgl engine with camera edits.

Gravity (2013) – website for the movie – assets from movie > siplify meshes > preview assets > camera edits

WebVR – Oculus/Cardboard devices – mozvr.com

SmartWater experience http://drinksmartwater.com/#/explore-the-sky

@mrdoob / @thespite


David Navarro & Claudio Guglieri

Where we’re going we don’t need roads

It’s freaking hard to predict the future. Will there be flying cars? Flying skateboards? Self-drying jackets? What can we learn from movies about how the future is going to be? In this talk we will explore what we can learn from the big screen and how that can be applied to our daily jobs with the internet. As digital designers what we do today will have consequences tomorrow, it’s a great power that comes with a great responsibility.

My notes:

Digital interfaces in movies, touch screens, interactions everywhere. Example of Back to the Future II – the date on the display is this year!

The presentation is full of movie clips, frames, images that exemplify all these interfaces that we had contact on a movie (possibly first) and slowly becoming real (or already here!).

Movie references: Matrix revolutions, Avatar, Her, Back to the future, Minority report, War games, Blade Runner, AI, Knight rider, 2001 (Hal), Star Wars, Pacific Rim

Speech – voice interactions bring machines close to us

Movies: I robot, Time Machine, Minority report (store), Moon

Visual

Hendo Hoverboard (a la McFly!)

Touch – the tactile, the feeling

Movies: Strange Days, Metropolis, StarTrek (original series), Next Generation (surfaces), Sleeper, Jonny Mnemonic – feedback on wrong password.

bradfrost.com (right now I don’t remember why Brad Frost was mentioned… maybe about Atomic Design?)

Glass tables, glass tablets, surfaces where you put the hand and options appear.

Feelings/Emotions

Movies: I robot, A.I., Black mirror (smart houses), Minority report (delivering content according to emotional states).

“Future is design agnostic”

Note to self: check “Black Mirror” on Netflix (mentioned twice on the presentation…)

Augmented reality

Holograms – projected in public spaces

Holograms – private spaces

“the human body is the next computer interface” – Fjord on FastCoDesign

Possible future job descriptions?

  • Brain director
  • Augmented Reality Interior Design
  • and so many others fun to hear…

@davidnavarro and @claudioguglieri

(if you know where they added their slides, please share on twitter and send me a note @monicams)


 

Conference site http://conference.awwwards.com/

Responsive Web Design and PhoneGap

with Matt Gifford Liz Myers

Matt Gifford couldn’t make it and Liz Myers was able to give a good introduction to some of the Adobe products and features as well as the use of PhoneGap on an sample app, mentioning RWD in some parts or the presentation.

My notes on what I could grasp…

New nifty things: https://www.adobe.com/uk/products/ink-and-slide.html

Pricing on CC photography cloud $9.99 (what’s included?)
CC Students $19.99/mo

Mobile apps that work with above are free

On Photoshop CC – Improved layer comps (check if is applicable for current files, sometimes you don’t want to apply down)

Check new features in:

The app she created, out of passion for “true gelato” (looking forward to final version!!!), show genuine gelato shops around major cities: @2ScoopsApp – (The best gelato in London, Paris, Rome, NY) – Liz used: Photoshop, Illustrator, Edge Animate, Edge Code and Edge Inspector.

To test on the Chrome sometimes we have to go over security (She used Snippets app – I would probably use Github gists for free :))

Close Google Chrome and on terminal:
open -a Google\ Chrome --args --disable-web-security

Adobe Edge – Simon Midjaya
Check videos: http://tv.adobe.com/videos/simon-widjaja
Book: http://edgebuch.simonwidjaja.com/en/index.html

Liz was ‘evangelised’ by Blackberry and she used 80x80px to create icons on Illustrator…

Free Icons – http://myersdesign.com/icons (which are 81x81px maybe I misheard? :))

She suggested jQuery mobile (JQM) – getting latest stable version.
The jquery.mobile.structure-1.4.2.css file that comes with it has bare bones CSS, just enough to start with style from scratch (and “don’t look like jQuery mobile app”) but you don’t need to use the structure version if you don’t want to.

Go to demos – http://demos.jquerymobile.com/1.4.2 and explore the documentation together with examples of how they would look (1.4.2 was latest version at the time of writing); she mentioned the listview widget was used on the 2Scoops App. (Pro jQuery mobile book was also mentioned)

Opening Edge Code – Liz showed initial html declarations, highlight for ‘viewport’, then links to jQuery and CSS links…. there is a configure script that configure JQM – but she mentioned to me at the end of talk the use of ConfigGap to help with initial config file and it seems quite handy.

Edge Inspect – review their content across multiple mobile devices. Wirelessly pair multiple iOS and Android devices to your computer, grab screenshots from any connected device, and see real-time results from changes to HTML, CSS, and JavaScript.

Live Reload – monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Some observations:

  • Mobiles use fonts in 13pt as base, em font sizes are relative to that base. Some !important declarations might be needed to override JQM code if your style is not shown on the app.
  • RWD on the code using % and em - JQM with responsive design built in. If you need to go for fully RWD then media queries for more’breakpoints’ and landscape/portrait views may be needed.
  • Settings on PhoneGap allow defining devices, icons, splash screens, permissions and others.

Photos:

Many QR code scanners... One successful installation

Many QR code scanners… One successful installation

App created for various platforms on PhoneGap.

App created for various platforms on PhoneGap.

Liz Myers
https://twitter.com/lizmyers
http://myersdesign.com

Event: http://www.meetup.com/Digital-Creatives-Oxford/events/178764452

DigitalOxford