Bastian Kruck
2017-04-06T15:51:25+01:00
http://bkruck.de
Bastian Kruck
OOPS'17: Crossing Abstraction Barriers When Debugging in Dynamic Languages
2017-03-10T00:00:00+00:00
http://bkruck.de/posts/mld-at-oops17
<p>I’ll be on OOPS'17 in Marrakech (part of <a href="https://www.sigapp.org/sac/sac2017/">SAC'17</a>, on Thursday April 6, between 9:15 and 10:40) and speak about my work on crossing abstraction barriers. When we debug an issue,
we continuously bisect the range of where the mistake may be. Sometimes we want
to zoom into implementation details of third-party software to understand what it is
supposed to do and how. Maybe there is a misunderstanding or a bug?</p>
<p>In our debugger, stack frames of multiple language levels are explorable from a
single user interface. For the <code><=</code> primitive, we not only see the Smalltalk fallback, the Slang implementation
of it, and the C code that gets generated from it.</p>
<p><img src="/images/posts/20170310%20SmalltalkSlangC.png" alt="For the `<=` primitive, we browse the fallback (left), the Slang code (middle),
and C code (right)." /></p>
<h1>Abstract</h1>
<p>Programmers use abstractions to reduce implementation effort and focus on domain-specifics. The resulting application often runs in a convenient guest runtime that is provided by an increasingly complex ecosystem of libraries, VMs, JIT-compilers, operating systems, and native machine architectures.</p>
<p>While abstractions are designed to hide complexity, experience tells us that “All non-trivial abstractions, to some degree, are leaky.”<a href="http://joelonsoftware.com/articles/LeakyAbstractions.html">1</a>. Leaky abstractions are problematic, for example, when the use of under-documented or unspecified behavior of a library or virtual machine causes a failure in domain-specific code. Users may need to understand whether the virtual machine is just under-documented but working as intended or faulty. At that point, the artificially created barrier that protects language users from domain-independent complexity becomes an obstacle. We call this <em>crossing the abstraction barrier</em>.</p>
<p>Prior research has investigated how symbolic debuggers can work across language barriers. However, this resulted in dedicated workflows and UIs that differ substantially from traditional symbolic debugging. Users need to remember these rather elaborate workflows, and the learning effort is often larger than the perceived benefit of answering the given debugging questions. As a result, the value of these tools may not be immediately recognized and developers will only consider learning them after having spent much time with conventional debugging methods.</p>
<p>We propose an <em>interaction model</em> that generalizes the conventional symbolic debugger so that the known workflow can be kept and users can opt-in to cross-abstraction debugging when necessary. By replacing the traditional list view on the active call chain with a tree model and adding perspective selection, we obtain an unobtrusive, minimal user interface that still offers powerful cross-language debugging features.</p>
<h1>Paper</h1>
<p>You can <a href="/images/posts/20161007%20Crossing_Abstraction_Barriers_When_Debugging_In_Dynamic_Languages%20SAC17.pdf">read the Paper Preview here</a>.</p>
<h1>Advanced Walkthrough</h1>
<p>We are in an application and debugging the issue that <code>minSmallInt // -1</code> is returning<br> <code>minSmallInt</code> instead of <code>-minSmallInt</code> (<a href="https://github.com/OpenSmalltalk/opensmalltalk-vm/issues/6">the bug really occured in CogVM</a>). We step through the application, AST, and Smalltalk Bytecode. On the lower levels, we have a feature to debug the translators and finally fix the bug of the JIT-Compiler right in the debugger.</p>
<iframe width="100%" height="420" src="http://www.youtube.com/embed/RN_2ggE3YQk?color=white&theme=light" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h1>Slides</h1>
<p>I spoke about it on Thursday April 6 2017 at 9:15 - 10:40 in Room: <em>Coriandre I &II</em> at the <em>OOPS</em> track. Here are the slides:</p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/41y8VcqbD7uFcU" width="595" height="376" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
<p> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/BastianKruck/crossing-abstraction-barriers-when-debugging-in-dynamic-languages" title="Crossing Abstraction Barriers When Debugging In Dynamic Languages" target="_blank">Crossing Abstraction Barriers When Debugging In Dynamic Languages</a> </strong> from <strong><a target="_blank" href="//www.slideshare.net/BastianKruck">Bastian Kruck</a></strong> </div></p>
<h1>Copyright</h1>
<p>DOI: <a href="http://dx.doi.org/10.1145/2892664.2">http://dx.doi.org/10.1145/2892664.2</a></p>
<p>© ACM, 2015. This is the authors' version of the work. It is posted here by permission of ACM for your personal use. Not for redistribution. The definitive version will be published in proceedings of the ACM Conference on Object-oriented Programming, Systems, Languages, and Applications.</p>
MASS'16: Protecting Dynamic Code by Modular Control-Flow Integrity
2016-03-14T00:00:00+00:00
http://bkruck.de/posts/mass-tan-modular-control-flow-integrity
<p>My notes on the talk of Gang Tan from Pensylvania State University on Modularity across System Stacks.</p>
<h1>How can Modularity help software security?</h1>
<p>A number of bugs lead to cyber <em>in</em>security. E.g.:</p>
<ul>
<li>Heartbleed</li>
<li>shellshock</li>
<li>poddle</li>
</ul>
<p>Buggy software can be as harmful as malicious software, since attackers exploit security bugs. Tiny programming mistakes can cause huge havoc.</p>
<h1>Can we automate the mitigation of programming errors?</h1>
<h1>Approach: Use compilers for bug toleration.</h1>
<p>We perform program transformation to embed security checks into exeutable code. We detect attacks during runtime (e.g. a stack guard aka inline reference monitors (IRM).</p>
<p>Ideally: enforce security policy, catch large amount of attacks, only a tolerable slowdown.</p>
<h1>Background: Control-Flow Hijacking and Control-Flow Integrity</h1>
<p>Memory Corruption Errors: Software written in unsafe languages may suffer from memory-corruption errors
- Buffer overflows
- Use after free bugs
- Format string errors</p>
<h2>Threat model</h2>
<p>Attacker controls data memory. He can corrupt data memory between any two instructions (like a concurrent thread). We assume a separation between code and data memory. Attackers cannot change code memory nor register contents.</p>
<h2>Control-flow hijacking</h2>
<p>Corrupt a code pointer and hijack it to change the control flow.</p>
<h1>Control Flow integrity (CFI) [<a href="http://korea.cs.stonybrook.edu/~rob/teaching/cse608-fa05/controlflowintegrity.pdf">Abadi et all CCS 2005</a>]</h1>
<p>1) pre-determine a control-flow graph (CFG) of a program
2) Enforce the CFG by instrumenting indirect branches in the program</p>
<p>For each indirect branch, we insert an no-op containing an ID at every target and before any indirect branch, we insert an ID-check to see if the jump target is integer. For example, after every call, we place that noop.</p>
<p>Using a safe language not just lowers performance and prevents using our unsafe legacy code, but also requires the runtime environments of those to be safe (e.g. JIT-spraying attacks are a vulnerability too).</p>
<h1>Classic CFI lacks modularity</h1>
<p>The construcion of CFG typically requires a global analysis. The inserted ids cannot overlap with the rest of the code, which requires global analysis again.</p>
<p>Additionally, the CFG sometimes changes after linking, so that the CFI ids would need to be updated.</p>
<h1>Modular CFI [<a href="http://www.cse.lehigh.edu/~gtan/paper/mcfi.pdf">Niu & Tan PLDI 2014</a>]</h1>
<p>CFG is encoded as centralized tables. Those tables are consulted when enforcing CFI. They can be updated during dynamic linking, can be type-based and provide memory cache advantages.</p>
<p>The CFI datasource basically becomes a database.</p>
<p>Generating the CFG for C/C++ including indirect branches is hard, since concepts like function pointers signal handlers, exceptions and so on need to be resolved.</p>
<p>As a performance trade-off, we loosen the precision and do the analysis type based (more name collisions, i.e. false negative fraud detections). We can add precision by basing our detection on input additional to types (Per-input CFI, PICFI <a href="http://www.cse.lehigh.edu/~gtan/paper/picfi.pdf">Niu & Tan CCS 2015</a>). The challenge there is to only add a hook and evaluate it lazily to avoid having to enumerate all inputs.</p>
<h2>Example: We allow a call an indirect call to function pointer of type t*, if</h2>
<ul>
<li>the functions type is structurally equivalend and</li>
<li>the address is taken in the code</li>
</ul>
<p>We allow returns to go back to any caller in the call graph.</p>
<h1>Security issues of JIT-Compilers</h1>
<ul>
<li>JITted code is runnable and writable in the same time, that opens doors</li>
<li><a href="http://www.semantiscope.com/research/BHDC2010/BHDC-2010-Paper.pdf">JIT Spraying</a>
<ul>
<li>hacker controls javascript code and may</li>
</ul>
</li>
</ul>
<h1>RockJIT [<a href="http://www.cse.lehigh.edu/~gtan/paper/mcfi.pdf">Niu & Tan CCS 2014</a>]</h1>
<p>RockJIT extends JIT compilers with Modular CFI. Each piece of JITted code becomes a new modules.</p>
<p>To adapt a JIT Compiler to RockJIT, the code-emission logic needs to be changed to emit MCFI compatible code. All modification or deletion of code needs to run through RockJITs primitives.</p>
<h1>Future Work</h1>
<p>Explore the security gains of when CFG is more precise?</p>
LaMOD'16: Multilevel Debugging for Interpreter Developers
2016-02-26T00:00:00+00:00
http://bkruck.de/posts/mld-at-lamod16
<p>As part of <a href="http://2016.modularity.info/event/lamod2016-multi-level-debugging-for-interpreter-developers">Modularity'16</a> in Málaga, we have a small paper on how to enrich debugging for interpreter developers.</p>
<p><img src="/images/posts/20160223%20Figure2v5.png" alt="A traditional Debugger at the left and our multi-level debugger at the right." />
Our debugger adds a level-selection step (b3) to the debugging process in addition to the stack frame list (a1, b1) and the source code view (a2, b2). Value:- and eval:in:-stack frames are characterized with help of call parameters (b1).</p>
<h1>Abstract</h1>
<p>Conventional debuggers require programmers to work on multiple levels of abstraction at once when inspecting call stacks or data. This demands considerable cognitive overhead and deep system knowledge of all implementation technologies involved. When developing an interpreter, programmers often create a dedicated debugger to have a higher-level perspective on the client-language; the resulting use of multiple debuggers at once leads to mental context switches and needs an elaborated method.
We present an integrated debugging tool in which interpreter developers define and select the levels of abstraction on which they focus. Our debugger provides them with an abstraction-specialized view. We consider both host-language and guest-language levels, since either may be levels of interest in a debugging session. We show how this separation into host-language levels can ease the debugging of applications through filtering call stacks and specializing call stack representation on levels. <a href="/images/posts/20160223%20Multi-level%20Debugging%20for%20Interpreter%20Developers%20AuthorsVersion.pdf">more…</a></p>
<p><img src="/images/posts/20160223%20figure1v8.png" alt="Debugging an interpreter requires interaction in the context of the guest as well as the host language." /></p>
<h1>Paper</h1>
<p>You can <a href="/images/posts/20160223%20Multi-level%20Debugging%20for%20Interpreter%20Developers%20AuthorsVersion.pdf">read the Paper Preview here</a>.</p>
<h1>Curious?</h1>
<p>Come to the <a href="http://2016.modularity.info/event/lamod2016-multi-level-debugging-for-interpreter-developers">LaMOD workshop</a> and discuss with us, I’ll be talking from 2:30pm to 3pm on Tuesday, 15. of March.</p>
<p>Here is the slides of it:</p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/9DIiqRQwlRbUCH" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
<p> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/BastianKruck/multilevel-debugging-for-interpreter-developers" title="Multi-level Debugging for Interpreter Developers at LaMOD'16" target="_blank">Multi-level Debugging for Interpreter Developers at LaMOD'16</a> </strong> from <strong><a target="_blank" href="//www.slideshare.net/BastianKruck">Bastian Kruck</a></strong> </div></p>
<h1>Copyright</h1>
<p>DOI: <a href="http://dx.doi.org/10.1145/2892664.2">http://dx.doi.org/10.1145/2892664.2</a></p>
<p>© ACM, 2015. This is the authors' version of the work. It is posted here by permission of ACM for your personal use. Not for redistribution. The definitive version will be published in proceedings of the ACM Conference on Object-oriented Programming, Systems, Languages, and Applications.</p>
Scaladays '15: Yoyak
2015-06-09T00:00:00+01:00
http://bkruck.de/posts/scaladays15-yoyak
<h1>Yoyak: Static data analysis</h1>
<p>Author is a programming language theorist.</p>
<h2>Abstract interpretation</h2>
<h1>Static Analysis</h1>
<p>The result of abstract interpretation is inaccurate, but not incorrect. Roughly, but soundly execute the program.</p>
<h2>Methods used</h2>
<ul>
<li>symbolic execution</li>
<li>data flow analysis</li>
<li>syntactic analysis</li>
<li>model checking, abstract interpretatio, type system</li>
</ul>
<h2>Soundness</h2>
<ul>
<li>The analysis result should contain all possibilities which can happen in the runtime</li>
<li>if the analysis uses an over-approximation, it is sound</li>
</ul>
<h2>Complemeteness</h2>
<ul>
<li>The analysis result should not contain any possibility which cannot happen at runtime</li>
</ul>
<h2>Semantics</h2>
<ul>
<li>Over-approximation semantics is a superset of</li>
<li>program semantics is a superset of</li>
<li>approximation semantics</li>
</ul>
<p>Illustrating Semantics with several tiny languages called Javar.</p>
<h2>Key Elements of Abstract Interpretation</h2>
<ul>
<li>Domain</li>
<li>Semantics</li>
<li>Galois Connection: pair of functions: abstraction and concretination function</li>
<li>CPO: three constraints: there exists a partial order…Lattice of Interval Domain…</li>
<li>Continuous function: a function is continuous when it reserves the upper bounds</li>
</ul>
<p>Concrete and Abstract Semantics are connected with a Galois connection.</p>
<h2>Yoyak enables to reuse components</h2>
<ul>
<li>CFG data types: construction, optimizatoin visualization</li>
<li>Graph algorithms</li>
<li>Intermediate language data types</li>
<li>common abstract domains</li>
<li>comman abstract semantics</li>
</ul>
<p>It’s perfect to be a framework: The theory of abstract interpretation guarantees soundness and termination of the analysis if a user supplies valid operators.</p>
<h2>Yoyak Components</h2>
<ul>
<li>Abstract Domain</li>
<li>Fixed-point Computation (using a work-list algorithm)</li>
<li>Built-in Standard Object Model</li>
</ul>
<p><a href="http://www.slideshare.net/ihji/yoyak-scaladays-2015">Slides</a></p>
<p>What’s IL?</p>
Scaladays '15: Meerkat Parsers
2015-06-09T00:00:00+01:00
http://bkruck.de/posts/scaladays15-meerkat-parsers
<h1>Meerkat Parsers</h1>
<p>An expression language</p>
<p>It’s common to formulate grammars in BNF-like formats and let the combinator generate the parser out of it.</p>
<h2>Parsing as a search problem.</h2>
<p>Parsing is like trying to get through a a maze: there is dead ends.</p>
<h2>Head recursion</h2>
<ul>
<li>Natural grammars are head-recursive (as you want to have a tree)</li>
</ul>
<h3>Methods: Backtracking schemes</h3>
<ul>
<li>deterministic
<ul>
<li>fast (like a ferrari)</li>
</ul>
</li>
<li>local backtracking (PEG, Paper in 2005)
<ul>
<li>suffers from false positive recognitions</li>
</ul>
</li>
<li>full backtracking
<ul>
<li>more expressivity</li>
<li>you can go everywhere (like a jeep)</li>
</ul>
</li>
</ul>
<h2>Nondeterminism and Ambiguity</h2>
<p>Being non ambiguous does not always require being deterministic</p>
<h2>Objective: Near-linear performance on near-deterministic grammars</h2>
<h2>Separation of Lexing and Parsing</h2>
<ul>
<li>Lexer
<ul>
<li>cuts character-stream into tokens</li>
<li>save efforts for
<ul>
<li>whitespace/comment</li>
<li>longest match (mathing whole identifiers)</li>
<li>keyword reservation</li>
</ul>
</li>
<li>context sensitivity required:
<h2> - indentation-sensitive languages</h2></li>
</ul>
</li>
</ul>
<h1>Meerkats</h1>
<p>Combines the power of general parsing with disambiguational parsing and combinational filters. The best of both worlds: parser generators and parser combinators.</p>
<p>Paper: Faster, Practical GLL Parsing, CC'15</p>
<h1>Shared packed parse forest</h1>
<p>Build parsing trees and share subtrees. We need to make it binary.</p>
<h1>Contributions</h1>
<ul>
<li>implicits enable switching the layout depending on context</li>
<li>enforce longest match by “must not follow”-combinator</li>
<li>data-dependent parsers: parse-time evaluation mechanism and “~>>”-combinator takes a closure to evaluate those data</li>
<li>library supports associativity groups</li>
<li>library supports character-level filters</li>
<li>library supports EBNF-constructs</li>
</ul>
Uni BigBand Berlin at Schlot
2014-02-14T00:00:00+00:00
http://bkruck.de/posts/ubb-at-schlot
<p><img src="/images/posts/20140215%20Konzert%20Uni%20Bigband%20im%20Schlot%20Flyer.jpg" alt="Flyer Uni BigBand Berlin 2014 im Schlot" />
Come to see us at <a href="http://www.kunstfabrik-schlot.de/">Kunstfabrik Schlot</a></p>
Touchquery
2013-11-01T00:00:00+00:00
http://bkruck.de/posts/touchquery
<p>Touchquery is a browserbased programming environment for the J array programming language, designed for touch screens. It offers token-wise input and visualizes runtime information, such as intermediate results, including its <em>type</em> and <em>extent</em>, and the <em>abstract syntax tree</em> (which is runtime information in J).</p>
<p>Read more in the full <a href="http://swatouch.hpi.uni-potsdam.de/BP2012H2_Theses.pdf">thesis</a>.</p>
<iframe width="100%" height="420" src="http://www.youtube.com/embed/xoPPfvFr5iI?color=white&theme=light" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
CHI 2013 some papers
2013-05-06T00:00:00+01:00
http://bkruck.de/posts/chi13-some-papers
<p>Those are some interesting papers from <a href="http://chi2013.acm.org/">CHI 2013</a></p>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=PCV">Flexpad</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=PCV">video</a></p>
<ul>
<li>uses a <strong>kinect</strong> to track users bending paper</li>
<li>removes hands from paper by optical surface model analysis
<ul>
<li>too low resolution for shape based extraction of hands (xy and even z)</li>
<li><strong>use reflectivity and translucency as features</strong> (see figure 3)</li>
<li>infrared image comes from freenect driver</li>
</ul>
</li>
</ul>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=NBL">swipe vs. scroll</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=NBL">video</a></p>
<ul>
<li>evaluation of web page switching on mobile browsers</li>
<li>cool to know that they have so much in mind (at least sometimes)</li>
</ul>
<p><strong>safari</strong>: swipe, pages metaphor<br/>
<strong>chrome</strong>: scroll, stacked cards metaphor</p>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=PSF">improving navigation-based file retrieval</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=PSF">video</a></p>
<ul>
<li>good answer to the <strong>visual memory vs. type-to-search problem</strong></li>
<li>very applied</li>
<li>a best paper</li>
</ul>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=AQQ">Mediated Meditation</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=AQQ">video</a></p>
<ul>
<li>they built a sound depending on your breathing</li>
<li>putting this into a dark room led people to have meditation-like experiences</li>
<li>Cultivating Mindfulness with this “Sonic Cradle”</li>
</ul>
<p><a href="http://www.jayvidyarthi.com/">Jay Vidyarthi</a> and Bernhard E. Rieck from SFU (Vancouver) (see page 2305)</p>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=PGX">Mind the Theoretical Gap</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=PGX">video</a></p>
<ul>
<li>Interpreting, Using, and Developing Behavioral Theory in HCI Research</li>
<li>a good start to connect psychology and hci concerning behaviors</li>
<li>a <strong>changing perspectives</strong> session</li>
<li>a best paper</li>
</ul>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=PND">visual judgment depends on mood</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=PND">video</a></p>
<ul>
<li>people seem to <strong>perceive graphics faster</strong> when in a <strong>good mood</strong></li>
<li>another ethnically and behaviorally interesting paper</li>
<li>they are influencing visual judgment through affective priming</li>
</ul>
<h1><a href="http://chischedule.org/2013/playlist.html?videos=NLX">iRotateGrasp detects mobile orientation</a></h1>
<p><a href="http://chischedule.org/2013/playlist.html?videos=NLX">video</a></p>
<ul>
<li>Automatic Screen Rotation based on Grasp of Mobile Devices</li>
<li>iRotateGrasp is made by <a href="http://xman.tw/">Lung-Pan Cheng</a> (now in our lab)</li>
<li>based on <a href="http://chischedule.org/2013/playlist.html?videos=PPZ">iGrasp</a> (at which they changed the ios keyboard mode depending on grasp)</li>
<li>he solved the using-your-mobile-in-your-bed-problem</li>
<li>detecting how the device is held leads to how</li>
</ul>
Demos on chi'13 conference
2013-04-26T00:00:00+00:00
http://bkruck.de/posts/chi13-demos
<p>We are demoing cool stuff on the acm sigchi conference!</p>
<h1><a href="/posts/constructable_demo">constructable</a></h1>
<p>We did some cool features since <a href="/posts/constructable_demo">tei demo</a>. Come and visit us again!</p>
<h1><a href="/posts/laserorigami">laserorigami</a></h1>
<p>We will show you how to construct 3D things out of a single piece of acrylics.</p>
TEI'13 some papers
2013-02-13T00:00:00+00:00
http://bkruck.de/posts/tei13-some-papers
<p>Those are some presented papers at <a href="http://www.tei-conf.org/13/">TEI'13</a></p>
<h3>good presentation and research</h3>
<p><a href="/tei13/unifone.html">Unifone</a> squeeze the phone with the hand that is holding it<br/>
<a href="/tei13/ninja-track.html">Ninja Track</a> morphes from solid to flexible</p>
<h3>cute</h3>
<p><a href="/tei13/affective-touch-gesture-recognition.html">Affective Touch on a Furry Machine</a> what are the different types of carressing</p>
<h3>for destructive games (hci lab)</h3>
<p><a href="/tei13/tabletop-cars.html">TabletopCars - Passive Tangibles</a> RC-Cars and tangibles on a microsoft surface</p>
<h3>for touchquery (my bachelor project)</h3>
<p><a href="/tei13/digital-dream-lab.html">Digital dream lab</a> investigated in tangible programming for children</p>
<h1>some people I met</h1>
<p>(only those I got a card from)<br/>
<a href="http://cheeriocheng.com/">Cheng Xu</a>
<a href="http://www.pauloguerraf.com/">Paulo Guerra f.</a>
<a href="http://peteinfo.com/">Peter Bennett</a>
<a href="http://henryldesign.4ormat.com/">Henry Lin</a></p>
<p>and I met <a href="http://postfl.com">Travis Kirton</a> at the <a href="/posts/tei13-c4-studio">c4 studio</a></p>
C4. Creative Coding for iOS
2013-02-10T00:00:00+00:00
http://bkruck.de/posts/tei13-c4-studio
<p>Today at the <a href="http://www.tei-conf.org/13/studios">tei13</a>, I took part in a studio (which is something like a workshop) about the creative coding framework <a href="http://www.c4ios.com/">C4</a>. Those are my personal notes:</p>
<p><em>Sunday, Feb 10, 10am</em></p>
<h2><a href="http://postfl.com">travis kirton</a></h2>
<p>from vancouver
recommended as inspiring place: The Banff Centre</p>
<h1>abstract</h1>
<p>c4 = something like processing or openframeworks for coacoa_</p>
<p>when learning c4, you should still be able to use the apple ios documentation</p>
<p>very careful process and concept work, as necessary when building a framework</p>
<p>after installation, you will have some c4ios reference in your local xcode documentation</p>
<p>see the interactive programming environment <a href="http://scriptk.it">scriptk.it</a></p>
<p><a href="http://gist.github.com/c4code/">collection of beautiful gists</a></p>
<h3>there is no framerate</h3>
<p>it’s all updated as needed. if you need some timing, <em>use implicit animations or a timer</em></p>
<h3>bounding box is a frequent interface</h3>
<p>this is as ios does it, so I transfered it</p>
<h3>this is a little bit of flash thinking</h3>
<p>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.</p>
<h2>showcases</h2>
<p><em>need some explanation to understand them</em></p>
<ul>
<li>playing masked videos in the same time</li>
<li>petry dishes: recording when the stuff is in the middle</li>
<li>one video split over multiple ios devices (black sheep)</li>
</ul>
<h1>tutorial</h1>
<ul>
<li>single view application</li>
<li>target <em>iphone</em> or <em>ipad</em>, <strong>universal won’t work right now</strong></li>
<li><p><strong>dont use a class prefix! it’s not supported right now</strong></p></li>
<li><p><em>C4WorkSpace.m</em> is you main controller</p></li>
</ul>
<h3>hello world</h3>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">#import "C4WorkSpace.h"</p>
<p>@implementation C4WorkSpace</p>
<p>-(void)setup {
C4Shape *shape = [C4Shape rect: CGRectMake(10, 10, 50, 50)];
[self.canvas addShape: shape];
}</p>
<p>@end</code></pre></figure></p>
<p>there are lots of intelligent setters implemented, like center.</p>
<h3>changing a shape’s path</h3>
<p>the shapes are basically all a pathes and you can morph between them</p>
<h3>image on a layer behind</h3>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">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];</p>
<p>C4Image *i = [C4Image imageNamed: @"C4Sky"];
i.center = self.canvas.center;</p>
<p>[self.canvas addImage: i];
[self.canvas addShape: shape];</code></pre></figure></p>
<h3>opengl rendering</h3>
<p>this one renders an opengl object. it will run a timer and animate it just within that particular layer.</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">C4GL *gl = [C4GL glWithFrame:CGRectMake(0,0,400, 320)];
[self.canvas addGL:gl];
[gl startAnimation];</code></pre></figure></p>
<p>you can actually have different workspaces (views) inside a c4 application</p>
<h3>interaction and animation</h3>
<p>CoreAnimation will put the set properties to a run loop and animate them over the <code>animationDuration</code>. So the two animations will start together (the rotation will finish 2 seconds after <code>shape</code> reached the center)</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">#import "C4WorkSpace.h"</p>
<p>@implementation C4WorkSpace {
C4Shape *shape;
}</p>
<p>-(void)setup {
shape = [C4Shape rect: CGRectMake(0, 0, 50, 50)];
[self.canvas addShape: shape];
}</p>
<p>// this will be called when we touch / click
-(void)touchesBegan {
shape.animationDuration = 1.0f; // animate over n seconds
shape.center = self.canvas.center;</p>
<pre><code>shape.animationDuration = 3.0f; // animate over n seconds
shape.rotation = QUARTER_PI;
shape.fillColor = C4RED;
[shape ellipse: shape.frame]; // morph it into a shape
</code></pre>
<p>}
@end</code></pre></figure></p>
<p>We could extract this animation as well into a method by running <code>[self runMethod: @"myAnimation" afterDelay:0.0f]</code></p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">-(void)myAnimation {
shape.animationOptions = AUTOREVERSE | REPEAT;
shape.animationDuration = 3.0f; // animate over n seconds
shape.rotation = QUARTER_PI;
shape.fillColor = C4RED;
}</code></pre></figure></p>
<h3>interaction with shapes</h3>
<p>the method <code>touchesBegan</code> won’t be called when touching the object.
As <strong>all the visual objects are a C4Control</strong>, we can use the operating systems <em>notification center</em>. Register for the touch on <code>shape</code> with:</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">[self listenFor: @"touchesBegan" fromObject:shape andRunMethod:@"myAnimation"]</code></pre></figure></p>
<h3>interaction in gestures</h3>
<p><em>(this one only doesn’t work in current master)</em><br/>
Do a continuous drag and drop:</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">-(void)setup {
shape = [C4Shape rect: CGRectMake(0, 0, 50, 50)];
[self.canvas addShape: shape];
[shape addGesture:PAN name:@"pan" action: @"move:"];
}</code></pre></figure></p>
<p>Other examples:</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">//doubletap
[shape addGesture:TAP name:@"doubleTap" action: @"move:"];
[shape numberOfTapsRequired:2 forGesture:@"doubleTap"];</p>
<p>//two finger tap
[shape addGesture:TAP name:@"twoFingerTap" action: @"move:"];
[shape numberOfTouchesRequired:2 forGesture:@"twoFingerTap"];</code></pre></figure></p>
<p>As you won’t be calling already implemented methods all the time, you will wan’t to inherit <code>C4Shape</code> and implement them there:</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">@implementation FancyShape : C4Shape
-(void)doSomethingFancy:(void*)sender{
self.rotation += QUARTER_PI;
}
@end</code></pre></figure></p>
<p>And then use the <code>FancyShape</code> as the displayed object:</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">#include "FancyShape.h"</p>
<p>-(void)setup {
shape = [[FancyShape alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
[self.canvas addShape: shape];
[shape addGesture:PAN name:@"pan" action: @"move:"];
}</code></pre></figure></p>
<h3>using UIKit</h3>
<p>Travis was working in the last days on extending UIKit to work with C4. The <code>C4Slider</code> is not inheriting <code>C4Control</code> because it inherits <code>UISlider</code>, but know behaves like it.</p>
<p><figure class="highlight"><pre><code class="language-objective-c" data-lang="objective-c">-(void)setup {
shape = [C4Slider slider:CGRectMake(100,100,400,44)];
[self.canvas addSubview:shape];
}</code></pre></figure></p>
<h1>summary</h1>
<h3>beta</h3>
<p>bugs found during open tutorial:</p>
<ul>
<li>repeatCount doesn’t work</li>
<li>targetting <em>universal</em> doesn’t work</li>
<li>starting different animations of the fillColor at the same time doesn’t work</li>
<li>changing filters and animating them uses the original image, not the new frame</li>
<li>no touchesBegan during position-animation</li>
</ul>
<h3>extending coacoa</h3>
<ul>
<li>there is no coacoa class doubled with different implementation. It’s just a layer above it</li>
<li>it is a transparent interface. the morph from rect to ellipse is mathematically correct in ios and inherited in c4. But it looks awful :)</li>
</ul>
<h3>multiparadigmatic</h3>
<ul>
<li>quickly starting from scratch</li>
<li>a very transparent interface enables integration in bigger ios applications or growing them out of it</li>
<li>much less and more understandable code than directly relying on coacoa</li>
</ul>
<h1>other attendants</h1>
<h2>Kwang-Ho Yang</h2>
<p>from korea
builds a kinect-like device for <a href="http://www.etri.re.kr/eng/main/index.etri">etri</a></p>
<h2><a href="http://id-dock.com/pages/overig/caro/caro.htm">Prof. dr. ir. Caroline (C.C.M.) Hummels</a></h2>
<p>professor design theory of intelligent systems
Designing quality in interaction group</p>
<h2>Nuno Correia</h2>
<p><a href="http://aalto.fi">School of Arts, Design and Architecture</a> in Helsinki</p>
LaserOrigami: Laser-Cutting 3D Objects
2013-02-08T00:00:00+00:00
http://bkruck.de/posts/laserorigami
<h3>In Proceedings of CHI'13 as Best Paper</h3>
<iframe width="100%" height="420" src="http://www.youtube.com/embed/arjRtCjI9AQ?color=white&theme=light" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p><a href="http://stefaniemueller.org/">Stefanie Mueller</a> , <a href="http://bkruck.de">Bastian Kruck</a> and <a href="http://www.patrickbaudisch.com/">Patrick Baudisch</a></p>
<h1>abstract</h1>
<p>LaserOrigami is a rapid prototyping system that produces 3D objects using a laser cutter. LaserOrigami is substantially faster than traditional 3D fabrication techniques such as 3D printing and unlike traditional laser cutting the resulting 3D objects require no manual assembly.</p>
<p>The key idea behind LaserOrigami is that it achieves three-dimensionality by folding and stretching the workpiece, rather than by placing joints, thereby eliminating the need for manual assembly. LaserOrigami achieves this by heating up selected regions of the workpiece until they become compliant and bend down under the force of gravity.</p>
<p>LaserOrigami administers the heat by defocusing the laser, which distributes the laser’s power across a larger surface. LaserOrigami implements cutting and bending in a single integrated process by automatically moving the cutting table up and down — when users take out the workpiece, it is already fully assembled.</p>
<h1>best paper</h1>
<p>We will <a href="/posts/chi13-demos">demo</a> it and <a href="http://chischedule.org/2013/#PFL">talk about it</a>.</p>
<h1>links</h1>
<p><a href="http://chischedule.org/2013/#PFL">chi13</a>
<a href="http://www.hpi.uni-potsdam.de/baudisch/projects/laserorigami.html">hpi project</a>
<a href="http://www.interactiondesign.se/blog/2013/02/laserorigami-laser-cutting-3d-objects/">interactiondesign.se</a>
<a href="http://interactions.acm.org/archive/view/march-april-2014/laserorigami-laser-cutting-3D-objects">interactions.acm.org</a></p>
constructable demo on TEI'13
2013-02-08T00:00:00+00:00
http://bkruck.de/posts/constructable_demo
<p>Remember that interactive fabrication paper <a href="http://stefaniemueller.org/constructable-interactive-lasercutting/">constructable</a> by
<a href="http://stefaniemueller.org/">Stefanie Mueller</a>, Pedro Lopes and <a href="http://www.patrickbaudisch.com/">Patrick Baudisch</a>?</p>
<iframe width="100%" height="420" src="http://www.youtube.com/embed/8g3LaF9oVFY?color=white&theme=light" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<hr />
<p>We have been working hard this semester to give you an invited demo at the <a href="http://www.tei-conf.org/13/">TEI conference</a> on tuesday. Meet us in the <a href="http://fablabbcn.org/">fablab</a>.</p>