Epic Agency | LABS

RubyMotion: Debugging Objective-C

hugues — Thu, 10 May 2012 15:05:12 +0000

Following the release of RubyMotion we can finally talk a bit about it (if you haven’t yet, I definitively encourage you to check it out!)

For one of our upcoming project (super ultra top-secret, but you can see the icon here ;) we need to mix a bit of custom Objective-C in the project. “Vendoring” the project in RM is a breeze but due to the complexity of this particular piece of code (a custom version of GPUImage), NSLog is not enough for debugging.

Fortunately, you can use Xcode to debug the Objective-C part super easily. Just start your app in the simulator with rake and open your vendor project in Xcode.

From there, make sure you selected iPhone/iPad simulator as a target and don’t click on “Run”

Open “Product > Attach to process” and select your app in the process list

Note that, as it runs in the simulator, your app won’t appear in the “Applications” group but in the “System” group.

Once done, just set your breakpoints, watches, … as you usually would. Everything should work as expected.

Have fun with RubyMotion, we sure do!

Share your beats with the Drumlet !

fabrice — Mon, 09 Jan 2012 06:00:20 +0000

About « The Drumlet »

Everything started when discovering the Audiolet Javascript library. Audiolet enables sound synthesis and music composition directly through the browser's Web Audio API

We quicky had the idea to create a small application running this technology and what's better than creating a drum machine?. One of the most famous drum machine being Roland's TR-808 we decided to use its samples as a basis (view the sample)

We wanted to maintain the machine's spirit, so we decided to give the Drumlet a vintage and realistic look and feel (Don't you hear transistors crackling?).

Technically

Now that we know what we're looking at, we chose to start with a 9 tracks machine : kick, snare, tom, rim shot, clap, cow bell, cymbal, open hihat et closed hihat.

On the Javascript side, a track looks like this:

var Voice = function(name, audiolet) {

	  AudioletGroup.call(this, audiolet, 0, 1);

// Set the name this.name = name;

// Set the sequence this.sequence = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];

// Create an empty buffer this.buffer = new AudioletBuffer(1, 0);

// Create a buffer player this.player = new BufferPlayer(audiolet, this.buffer, 1, 0, 0);

// Create the sequencer this.durations = new PSequence([0.25], Infinity); this.pattern = new PSequence(this.sequence, Infinity); // Create trigger to re-trigger the playback of samples this.trigger = new TriggerControl(audiolet);

// Create a gain object to control the gain of sample this.gain = new Gain(audiolet, 1.00);

// Create an upMixer object this.upMixer = new UpMixer(audiolet, 2);

// Connect it all up // output of trigger to input of player this.trigger.connect(this.player, 0, 1); // output of player to input of gain this.player.connect(this.gain); // output of gain to general output this.gain.connect(this.upMixer); // all signals will be added together when connected to the output this.upMixer.connect(this.outputs[0]); } extend(Voice, AudioletGroup);

As you can see, a track is a AudioletGroup. And it allows us to encapsulate several elements and play a sample.

These 9 tracks will be connected to the « Audiolet » object in our Processor:

var Processor = function(sampleRate, bufferSize, bpm) {

	  // Create a new Audiolet object

	  this.audiolet = new Audiolet(sampleRate, 2, bufferSize);

	  this.audiolet.scheduler.setTempo(bpm);

// Scheduler events array this.scheduler = [];

// Create a gain object this.gain = new Gain(this.audiolet, 1.00);

// Create an upMixer object this.upMixer = new UpMixer(this.audiolet, 2);

// Voices array this.voices = {};

// Bassdrum this.bd = new Voice('bd', this.audiolet); this.bd.connect(this.gain); this.voices['bd'] = this.bd;

// Snaredrum this.sd = new Voice('sd', this.audiolet); this.sd.connect(this.gain); this.voices['sd'] = this.sd;

// Tom this.tom = new Voice('tom', this.audiolet); this.tom.connect(this.gain); this.voices['tom'] = this.tom;

// Rim Shot this.rs = new Voice('rs', this.audiolet); this.rs.connect(this.gain); this.voices['rs'] = this.rs;

// Clap this.cp = new Voice('cp', this.audiolet); this.cp.connect(this.gain); this.voices['cp'] = this.cp;

// Cow Bell this.cb = new Voice('cb', this.audiolet); this.cb.connect(this.gain); this.voices['cb'] = this.cb;

// Cymbal this.cy = new Voice('cy', this.audiolet); this.cy.connect(this.gain); this.voices['cy'] = this.cy;

// Open HiHat this.oh = new Voice('oh', this.audiolet); this.oh.connect(this.gain); this.voices['oh'] = this.oh;

// Closed HiHat this.ch = new Voice('ch', this.audiolet); this.ch.connect(this.gain); this.voices['ch'] = this.ch;

// output of gain to input of the upMixer this.gain.connect(this.upMixer);

// all signals will be added together when connected to the output this.upMixer.connect(this.audiolet.output); }

After that, you only have to use the object's sequencer to play a sample at a given moment. Therefore we have a loop which will run the sequencer for our 9 tracks. On each « tick » (The interval is given by the bpm) the sample will be played (or won't) at a volume defined by the value of the current pattern.

var voice = null;

	for(k in this.voices) {

	  voice = this.voices[k];

	  this.scheduler[k] = this.audiolet.scheduler.play([voice.pattern], voice.durations, function(pattern) {

	    // apply amplitude

	    if(pattern == 2)

	      this.gain.gain.setValue(1.00);

	    else if (pattern == 1)

	      this.gain.gain.setValue(0.50);

// re-trigger the sample if(pattern > 0) this.trigger.trigger.setValue(1); }.bind(voice)); }

Volume's variation is implemented in the « scheduler »'s callback play function. A track sequence can therefore be defined as:

1 – 0 – 0 – 0 – 2 – 0 – 0 – 0 – 1 – 0 – 0 – 0 – 2 – 0 – 0 – 0

Now that the audio engine is up, you only have to make things pretty and use graphical interface. To do so, we used the « canvas » technology and the EaselJS library.

Shortcuts

To create something not only funny but also usable, we decided to use several keyboard shortcuts to help everyone creating and playing his/her own music.

These shortcuts are:

(Spacebar) : Play/Pause
(Arrow up/down) : Volume
+ (Ctrl + arrow up/down) : Tempo
(Delete & backspace) : Clear
(Arrow left/right) : Switch patterns
(1, 2, 3, 4) : Edit patterns 1, 2, 3, 4

Sharing

You can also share your very own tune with your friends using a unique address and maybe we'll discover you're really gifted at this!

Play

Now it's time to play!
We would be really glad to hear what you can compose with it so don't hesitate to share your creations with us.

Digital Painting With Photoshop

Henry — Tue, 21 Jun 2011 09:51:51 +0000

Important : please note the pdf file is entirely in french, sorry about that for all the non french-speaking persons out there.

When I graduated from graphic design a few years (5 to be exact) from now, I had to end my studies with a document about a subject relative to graphic design. At the time I was deeply interested in digital painting and I even wanted to make a living out of it ( quite extraordinary if you consider that today I'm co-managing a digital company ). So it was no surprise to my teachers when I announced my willing to create a french theorical/practical round-up about digital painting.

As a matter of fact It's entirely written in french simply because it's my mother tongue and because back then, I felt a lot more confortable writing in french than in english. Moreover, at the time there was no french written good book about the subject. What a shame!

A few monthes later I came with this 145 pages strong book relating theory about painting, colours, composition, lights, textures and so on…and practical notes with a "how-to". At the time I spent a lot of time and put all of my efforts gathering sources, exploring techniques and possibilities of this amazing quite new kind of art/design technique…

I always thought I would share the document someday and it looks like today is the day. Since then, a lot of things obviously changed: photoshop had at least two or three new releases and new talented artists flourished all over the world but you can nonetheless consider this document as a firm basis and a strong first attempt at getting to create your own digital paintings. Moreover, theory didn't change at all and you can always learn a lot of things about the way things are going on in the real world.

Please note all the illustrations and sources which are not mine and used in the document are all referred in the bibliography located at the very end of the document.Feel free to spread the document all around you and don't forget to quote us because we could always use good karma and kind words.

Under a creative commons license : licence Creative Commons Paternité – Pas d’Utilisation Commerciale – Pas de Modification 3.0 non transcrit.

Animate a 3D Model with the timeline

karim — Wed, 01 Jun 2011 12:03:23 +0000

We have a supa-secret client, Really really famous, but some confidential reasons prevent us from saying his name. We can't even say why we can't say his name. Take it or leave it, you'll not know.

Through all the mystery surrounding this case, we will try to present a project made for them anyway. All the references, logos, mentions etc were removed from the screenshots and animations below. We can just tell you that :

IT'S ABOUT PLANES… (dear flash developers, i'm talking about the flying ones, not the 3D primitives also called planes).

Cool huh ? Everybody like planes.

Well, we were asked to develop a greeting card in Augemented Reality. You know, the kind of experiment where you show a black outlined square marker to your webcam, then a magical 3d animation appears and leaves you speechless before so much awesomeness… the first time you see it at least.

The purpose of this case is not to tell you how to create that kind of experiment. A lot of people did it before us, with many tutorials and great explanations. If you want to learn more about Augmented Reality with a marker, and more precisely about flarToolKit used for this projet, visit this link http://saqoo.sh/a/en/flartoolkit/start-up-guide.

Instead we will talk about a little trick that enabled us to make a good 3D animation with less effort.

The concept

This is a part of the storyboard we did :

The idea was to make a box opens and places a runway. Trees and a placard appears, then the plane take off and fly in a loop, turning around a rural and snowy landscape until the user removes the marker. Which makes the plane lands and the box closes.

The 3D Model

We needed a nice but very simple model of the plane. In fact, it's a flash project, and even if it's the awesomest and most incredible technology invented in the world wide web, it needs light data to operate efficiently.

You'll find below a sketch of the plane and each part that composes it.
No 3D software was used to build the models, we made them programmatically in as3 with away3D, that allowed us to optimise the complexity and the level of details, the goal was to reduce the number of polygons while keeping a nice appearance of the whole animation.

This is the model in flash, just move your mouse around to see the plane in different angles

As you can see, we tried to keep the polygons count very low (36 for the plane). All cylinders were reduced to 4 faces. It may look weird, but when we reduce the plane to his final size, the result is quite acceptable. Especially since we applied detailed textures you can see below:

Animate a model created programmatically

Here we are. Enough talking about the aesthetic aspects of the project. The challenge was to animate an object created programmatically from scratch.

For Tweets for Honor, we used the same principle. The body of the spartan was made from basic away3D cubes, placed one by one.
And we animated all his moves using the tweening engines from greensock (TweenLite and timelineLite mostly) which allowed us to play with the speed of each move without dealing with the frame rate. Indeed, we needed some slow motion and fastforwards which are difficult to render otherwise.

For this project, we decided to do things differently, at least regarding the animation.

We placed on the timeline different movie clips to control the 3D objects. Two planes, one for the X and Z coordinates (top view), and another one for Y coordinates (side view). We animated them as seen below :

Each frame is then used to calculate the coordinates of the 3D plane. Well everything is not that easy, we sometimes needed to multiply the 2D coordinates by a coefficient, sometimes add an offset, in most cases we had to do both. That means a bunch of trials and errors. But once we had our magic formula, it became very easy to modify the 3D animation directly in the timeline.

We did the same for every part of the runway, the landscape, the trees and the placard, using different properties that were not necessarily obvious, like mapping the "xscale" of the 2D element on the "y" position of the corresponding 3D element.

This is what the landscape animation looks like, and it's totally driven with 2d movie clips placed on the timeline :

Put it all together

Once all the animations are finished, it only remains to pass them to FlarToolKit, synchronize the opening and closing of the box with the detection and loss of the marker.

You can try it here by yourself, but you need to print the marker here :