Bastian Kruck

C4. Creative Coding for iOS

February 10, 2013

Today at the tei13, I took part in a studio (which is something like a workshop) about the creative coding framework C4. Those are my personal notes:

Sunday, Feb 10, 10am

travis kirton

from vancouver recommended as inspiring place: The Banff Centre

abstract

c4 = something like processing or openframeworks for coacoa_

when learning c4, you should still be able to use the apple ios documentation

very careful process and concept work, as necessary when building a framework

after installation, you will have some c4ios reference in your local xcode documentation

see the interactive programming environment scriptk.it

collection of beautiful gists

there is no framerate

it’s all updated as needed. if you need some timing, use implicit animations or a timer

bounding box is a frequent interface

this is as ios does it, so I transfered it

this is a little bit of flash thinking

as he learned coding with adobe flash, travis likes to feel the animations bound to visual objects. I. e. he plans to let the developer define animations on the visual objects - not only as controller methods as it works right now.

showcases

need some explanation to understand them

tutorial

hello world

#import "C4WorkSpace.h"



@implementation C4WorkSpace



-(void)setup {
    C4Shape *shape = [C4Shape rect: CGRectMake(10, 10, 50, 50)];
    [self.canvas addShape: shape];
}



@end

there are lots of intelligent setters implemented, like center.

changing a shape’s path

the shapes are basically all a pathes and you can morph between them

image on a layer behind

C4Shape *shape = [C4Shape rect: CGRectMake(10, 10, 50, 50)];
shape.center = self.canvas.center;
shape.lineWidth = 30.0f;
shape.rotation = QUARTER_PI;
shape.fillColor = [UIColor colorWithWhite:1 alpha: 0.0f];



C4Image *i = [C4Image imageNamed: @"C4Sky"];
i.center = self.canvas.center;



[self.canvas addImage: i];
[self.canvas addShape: shape];

opengl rendering

this one renders an opengl object. it will run a timer and animate it just within that particular layer.

C4GL *gl = [C4GL glWithFrame:CGRectMake(0,0,400, 320)];
[self.canvas addGL:gl];
[gl startAnimation];

you can actually have different workspaces (views) inside a c4 application

interaction and animation

CoreAnimation will put the set properties to a run loop and animate them over the animationDuration. So the two animations will start together (the rotation will finish 2 seconds after shape reached the center)

#import "C4WorkSpace.h"



@implementation C4WorkSpace {
    C4Shape *shape;
}



-(void)setup {
    shape = [C4Shape rect: CGRectMake(0, 0, 50, 50)];
    [self.canvas addShape: shape];
}



// this will be called when we touch / click
-(void)touchesBegan {
    shape.animationDuration = 1.0f; // animate over n seconds
    shape.center = self.canvas.center;



shape.animationDuration = 3.0f; // animate over n seconds
shape.rotation = QUARTER_PI;
shape.fillColor = C4RED;
[shape ellipse: shape.frame];   // morph it into a shape




}
@end

We could extract this animation as well into a method by running [self runMethod: @"myAnimation" afterDelay:0.0f]

-(void)myAnimation {
    shape.animationOptions = AUTOREVERSE | REPEAT;
    shape.animationDuration = 3.0f; // animate over n seconds
    shape.rotation = QUARTER_PI;
    shape.fillColor = C4RED;
}

interaction with shapes

the method touchesBegan won’t be called when touching the object. As all the visual objects are a C4Control, we can use the operating systems notification center. Register for the touch on shape with:

[self listenFor: @"touchesBegan" fromObject:shape andRunMethod:@"myAnimation"]

interaction in gestures

(this one only doesn’t work in current master)
Do a continuous drag and drop:

-(void)setup {
    shape = [C4Shape rect: CGRectMake(0, 0, 50, 50)];
    [self.canvas addShape: shape];
    [shape addGesture:PAN name:@"pan" action: @"move:"];
}

Other examples:

//doubletap
[shape addGesture:TAP name:@"doubleTap" action: @"move:"];
[shape numberOfTapsRequired:2 forGesture:@"doubleTap"];



//two finger tap
[shape addGesture:TAP name:@"twoFingerTap" action: @"move:"];
[shape numberOfTouchesRequired:2 forGesture:@"twoFingerTap"];

As you won’t be calling already implemented methods all the time, you will wan’t to inherit C4Shape and implement them there:

@implementation FancyShape : C4Shape
    -(void)doSomethingFancy:(void*)sender{
        self.rotation += QUARTER_PI;
    }
@end

And then use the FancyShape as the displayed object:

#include "FancyShape.h"



-(void)setup {
    shape = [[FancyShape alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
    [self.canvas addShape: shape];
    [shape addGesture:PAN name:@"pan" action: @"move:"];
}

using UIKit

Travis was working in the last days on extending UIKit to work with C4. The C4Slider is not inheriting C4Control because it inherits UISlider, but know behaves like it.

-(void)setup {
    shape = [C4Slider slider:CGRectMake(100,100,400,44)];
    [self.canvas addSubview:shape];
}

summary

beta

bugs found during open tutorial:

extending coacoa

multiparadigmatic

other attendants

Kwang-Ho Yang

from korea builds a kinect-like device for etri

Prof. dr. ir. Caroline (C.C.M.) Hummels

professor design theory of intelligent systems Designing quality in interaction group

Nuno Correia

School of Arts, Design and Architecture in Helsinki

Discussion, links, and tweets

I care about lots other interesting things as well. Follow me on Twitter to get an impression of that. Or contact me directly on another channel or come along to visit me.