A simple test with the MYO and C4ios.
import UIKit
class WorkSpace: CanvasController {
var start = TextShape(text: "Look for Myos")
override func setup() {
let notifer = NSNotificationCenter.defaultCenter()
notifer.addObserver(self, selector: "didConnectDevice:", name: TLMHubDidConnectDeviceNotification, object: nil)
notifer.addObserver(self, selector: "didChangePose:", name: TLMMyoDidReceivePoseChangedNotification, object: nil)
start!.addTapGestureRecognizer { location, point, state in
let controller = TLMSettingsViewController.settingsInNavigationController()
self.presentViewController(controller, animated: true, completion: nil)
}
start!.frame = Rect(0,0,canvas.width/2, canvas.height/2)
start!.adjustToFitPath()
start!.center = canvas.center
canvas.add(start)
}
func didConnectDevice(notification: NSNotification) {
start!.text = "Hello Myo"
start!.center = canvas.center
}
func didChangePose(notification: NSNotification) {
let eventData = notification.userInfo as! Dictionary<NSString, TLMPose>
let currentPose = eventData[kTLMKeyPose]!
print(currentPose)
switch (currentPose.type) {
case .Fist:
start!.text = "Fist"
case .WaveIn:
start!.text = "Wave In"
case .WaveOut:
start!.text = "Wave Out"
case .FingersSpread:
start!.text = "Fingers Spread"
case .DoubleTap:
start!.text = "Double Tap"
default:
start!.text = "Hello Myo"
}
start!.center = canvas.center
}
}
View this code on GitHub
Another simple test today. A button. Are buttons in iOS really this bad? Is there no UIControlAction that deals with touch releases being both inside and outside of a button? Odd.
import UIKit
class WorkSpace: CanvasController {
let trigger = UIButton(type:UIButtonType.System)
var flocking = UIWebView()
override func setup() {
flocking.mediaPlaybackRequiresUserAction = false
let url = NSBundle.mainBundle().URLForResource("home", withExtension: "html")
let request = NSURLRequest(URL: url!)
flocking.loadRequest(request)
trigger.frame = CGRectMake(0, 0, 100, 30)
trigger.center = CGPoint(canvas.center)
trigger.setTitle("Press Me", forState: .Normal)
canvas.add(trigger)
trigger.addTarget(self, action: "triggerFlock", forControlEvents: .TouchDown)
trigger.addTarget(self, action: "triggerFlockOff", forControlEvents: .TouchUpInside)
}
func triggerFlock(){
self.flocking.stringByEvaluatingJavaScriptFromString("synth.set('thing.mul.gate', 1);")
}
func triggerFlockOff(){
self.flocking.stringByEvaluatingJavaScriptFromString("synth.set('thing.mul.gate', 0);")
}
}
View this code on GitHub
<html>
<head>
<style>
*{border:0;margin:0;}
#wave{position:fixed;top:0;left:0;width:100%;height:100%;background-color:blue;}
</style>
</head>
<body>
<script src="flocking-all.min.js"></script>
<script>
var synth = flock.synth({
synthDef:
{
id: "thing",
ugen: "flock.ugen.whiteNoise",
mul: {
ugen: "flock.ugen.env.simpleASR",
start: 0.0,
attack: 0.01,
sustain: 0.2,
release: 0.1,
gate: 0.0
}
}
});
synth.play();
</script>
</body>
</html>
View this code on GitHub
Today was a tooling day. I’ve been building the apps in the simulator but what about launching it on actual hardware. So, because I am running 9.3 on my phone I had to finally upgrade to 10.11. Then it was updating XCode to the latest version and reinstalling C4. Fun times. The result was great to be able to walk around with the results on my phone. Hoorah!
To make things more fun I checked out Dringend, an app that connects to your mac and lets you code on your device and then launch the result on your device. No more plugging in the phone just to upload. Even better I can do a bit of hacking on the go. Awesome. Just awesome. I had a bit of a problem getting started and emailed the developer who had me up and running in less than an hour. Amazing.
A simple one today, but importantly a variant of the flocking sketch. This is a stereo envelope that can be modulated with a single slider. Enjoy.
import UIKit
class WorkSpace: CanvasController {
var webview = UIWebView()
let freqslider = UISlider()
override func setup() {
webview.frame = CGRectMake(0, CGFloat(canvas.height/4.0), CGFloat(canvas.width), CGFloat(3.0*canvas.height/4.0))
webview.mediaPlaybackRequiresUserAction = false
let url = NSBundle.mainBundle().URLForResource("home", withExtension: "html")
let request = NSURLRequest(URL: url!)
webview.loadRequest(request)
freqslider.frame = CGRectMake(10, CGFloat(canvas.height/2 - 15), CGFloat(canvas.width - 20), 30)
freqslider.value = 0.1
canvas.add(freqslider)
freqslider.addTarget(self, action: "freq:", forControlEvents: UIControlEvents.ValueChanged)
}
func freq(sender: UISlider!){
let myval = sender.value * 20.0
self.webview.stringByEvaluatingJavaScriptFromString("synth.set('lefthat.mul.gate.freq', \(myval) );synth.set('righthat.mul.gate.freq', \(myval) );")
}
}
View this code on GitHub
<html>
<head>
<style>
*{border:0;margin:0;}
#wave{position:fixed;top:0;left:0;width:100%;height:100%;background-color:blue;}
</style>
</head>
<body>
<script src="flocking-all.min.js"></script>
<script>
var synth = flock.synth({
synthDef: [
{
id: "righthat",
ugen: "flock.ugen.whiteNoise",
mul: {
ugen: "flock.ugen.env.simpleASR",
start: 0.0,
attack: 0.01,
sustain: 0.2,
release: 0.1,
gate: {
ugen: "flock.ugen.impulse",
rate: "control",
freq: 2,
phase: 0.5
}
}
},
{
id: "lefthat",
ugen: "flock.ugen.whiteNoise",
mul: {
ugen: "flock.ugen.env.simpleASR",
start: 0.0,
attack: 0.01,
sustain: 0.2,
release: 0.1,
gate: {
ugen: "flock.ugen.impulse",
rate: "control",
freq: 2,
phase: 0.0
}
}
}
]
});
synth.play();
</script>
</body>
</html>
View this code on GitHub
Today I made a simple sketch using UIWebView.stringByEvaluatingJavaScriptFromString(string:string) to send UISlider values from C4 to Flocking. It worked! There is simple synth that has a frequency and amplitude control and I used the flock.ugen.scope in order to display the output in the UIWebView. A few simple tricks together makes for a great demo.
Next trick will be to start to make something that sounds interesting. I’m starting to get confident enough to attempt it.
import UIKit
class WorkSpace: CanvasController {
var webview = UIWebView()
let freqslider = UISlider()
let ampslider = UISlider()
override func setup() {
webview.frame = CGRectMake(0, CGFloat(canvas.height/4.0), CGFloat(canvas.width), CGFloat(3.0*canvas.height/4.0))
webview.mediaPlaybackRequiresUserAction = false
let url = NSBundle.mainBundle().URLForResource("home", withExtension: "html")
let request = NSURLRequest(URL: url!)
webview.loadRequest(request)
canvas.add(webview)
freqslider.frame = CGRectMake(10, 50, CGFloat(canvas.width - 20), 30)
ampslider.frame = CGRectMake(10, 100, CGFloat(canvas.width - 20), 30)
freqslider.value = 0.4
ampslider.value = 0.25
canvas.add(freqslider)
canvas.add(ampslider)
freqslider.addTarget(self, action: "freq:", forControlEvents: UIControlEvents.ValueChanged)
ampslider.addTarget(self, action: "amp:", forControlEvents: UIControlEvents.ValueChanged)
}
func freq(sender: UISlider!){
let myval = sender.value * 1000.0
self.webview.stringByEvaluatingJavaScriptFromString("synth.set('singer.freq', \(myval) );")
}
func amp(sender: UISlider!){
let myval = sender.value
self.webview.stringByEvaluatingJavaScriptFromString("synth.set('singer.mul', \(myval) );")
}
}
View this code on GitHub
<html>
<head>
<style>
*{border:0;margin:0;}
#wave{position:fixed;top:0;left:0;width:100%;height:100%;background-color:blue;}
</style>
</head>
<body>
<canvas id="wave"></canvas>
<script src="flocking-all.min.js"></script>
<script>
var synth = flock.synth({
synthDef: {
ugen: "flock.ugen.scope",
source:{
id: "singer",
ugen:"flock.ugen.sinOsc",
freq: 440,
mul: 0.25
},
options:{
canvas: "#wave",
styles: {
strokeColor: "#777777",
strokeWidth: 2
}
}
}
});
synth.play();
</script>
</body>
</html>
View this code on GitHub
Code. Fail. Stop. Sleep. Repeat.
Sometimes this works. But only if you insert share somewhere in the loop. Yesterday’s sketch was great to get my coding chops resurected but didn’t yield that much useful code for the world. After posting to the flocking mailing list, Colin reminded me of the recent iOS bug and promptly fixed it. Amazing.
So, I took yesterday’s code and stripped back a few parts and made a simple on and off button with some C4 animations. I love the way C4 morphs between shapes. I made a simple block of text be the start and morph to a stop button. The flocking sketch is still simple, but it is a start to something wonderful. I’m going to stop with this small victory.
import UIKit
class WorkSpace: CanvasController {
var webview = UIWebView()
var myshape = TextShape()
var started = false
override func setup() {
webview.mediaPlaybackRequiresUserAction = false
let url = NSBundle.mainBundle().URLForResource("home", withExtension: "html")
let request = NSURLRequest(URL: url!)
webview.loadRequest(request)
myshape.text = "Touch to Play"
myshape.adjustToFitPath()
myshape.center = canvas.center
canvas.add(myshape)
let playanimation = ViewAnimation(duration: 1.0){
self.myshape.path = Rectangle(frame: Rect(0,0,100,100)).path
self.myshape.adjustToFitPath()
self.myshape.center = self.canvas.center
}
let resetanimation = ViewAnimation(duration: 1.0){
self.myshape.path = Circle(center: self.canvas.center, radius: 50).path
self.myshape.adjustToFitPath()
self.myshape.center = self.canvas.center
}
myshape.addTapGestureRecognizer { locations, center, state in
if (self.started == false) {
self.webview.stringByEvaluatingJavaScriptFromString("synth.play();")
playanimation.animate()
}else{
self.webview.stringByEvaluatingJavaScriptFromString("synth.pause();")
resetanimation.animate()
}
self.started = !self.started
}
}
}
View this code on GitHub
<html>
<body>
<script src="flocking-all.min.js"></script>
<script>
var synth = flock.synth({
synthDef: {
ugen: "flock.ugen.sinOsc",
freq: 440,
mul: 0.25
}
});
</script>
</body>
</html>
View this code on GitHub
I’m doing another Creative Pact! This May I will create a new thing every day and put up on this blog. I am going to work with 3 things that I like: flocking.js, MYO, and C4. Hopefully by the end of the month I will be able to combine all of them masterfully.
My first work for creative pact 2016 is a failure, in the sense that it doesn’t yet work. I tried to create a C4 app with a UIWebView inside of it that loads flocking. I started by following a tutorial to get UIWebview to load a webpage and then added jquery. OK. So far so good.
The next step was to load flocking. I added this to the HTML page and I got some messages on the console (frameSizeChanged = 4096). Great. Then I remembered that Apple prevents audio from being loaded in webpages without some sort of user action. So, I looked through the web again and found the trick. Hooray, I thought. No sound. I tried doing a body click with jQuery to trigger the flock.play() but that didn’t work. So, I tried loading a sound file, which also didn’t work. Can flocking play in a UIWebView? Maybe, but not by me today. Tomorrow is another day.
import UIKit
class WorkSpace: CanvasController {
var webview = UIWebView()
override func setup() {
webview.frame = CGRectMake(0, 0, 200, 200)
webview.mediaPlaybackRequiresUserAction = false
let url = NSBundle.mainBundle().URLForResource("home", withExtension: "html")
let request = NSURLRequest(URL: url!)
webview.loadRequest(request)
canvas.add(webview)
canvas.addTapGestureRecognizer { locations, center, state in
self.webview.stringByEvaluatingJavaScriptFromString("$('#ttt').html('something else')")
}
}
}
View this code on GitHub
<html>
<body>
HELLFOOALJKJLJDF
<div id="ttt"></div>
<script src="jquery.min.js"></script>
<script src="flocking-no-jquery.min.js"></script>
<script>
$('#ttt').html("jfjfkjlkjf");
var synth = flock.synth({
synthDef: {
ugen: "flock.ugen.sinOsc",
freq: 440,
mul: 0.25
}
});
synth.play();
$("#ttt").click(function(){
synth.play();
flock.enviro.shared.play();
});
</script>
<audio id="some_sound" controls>
<source src="Loop.aif" type="audio/aif">
</audio>
<script>
document.getElementById('some_sound').play();
</script>
</body>
</html>
View this code on GitHub
