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.
//
// WorkSpace.swift
// DAY3
//
// Created by Adam Tindale on 2016-05-03.
// Copyright © 2016 Adam Tindale. All rights reserved.
//
import UIKit
class WorkSpace: CanvasController {
var webview = UIWebView()
let freqslider = UISlider()
let ampslider = UISlider()
override func setup() {
// loads flocking.js in home.html
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) );")
}
}<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>
