Santiago Zubieta
February 09, 2019
1.4k

# CraZe

A Generative/Manual Hybrid Art App

## Santiago Zubieta

February 09, 2019

## Transcript

2. ### Santiago Martin Zubieta-Ortiz From Medellín, Colombia Loves computers, physics, and

arts. Computer Science BSc 2011 - 2016 Google, Inc SWE/SETI Intern 2015, 2016 Booking.com Backend Dev 2017 - Present Huge city, 2.5 million inhabitants Ever growing and diverse software development community

4. ### I had tried many spirograph, mandala, and kaleidoscope apps to

distract myself, but always felt I was missing something, they had symmetries and rotations and colors but there didn't seem to be many degrees of freedom on configurations and what could be generated. I also really liked generative art on the internet, seeing how programatically many really nice and intricate looking shapes, lines, and colors could be formed, but also felt it was too automatic and I wanted to be able to manually guide these generations as I drawed while being able to finely tune most of its aspects in the process.

symmetries
6. ### First semester course project: Learn about OOP, Java, GUIs, and

other graphical resources (AWT/Swing) to make a Crash Balls game clone. With this knowledge, things like buttons, sliders, spinners, checkboxes, lists, mouse/keyboard events, and drawing lines+circles, started playing around to make an applet to draw. At first very simple, only lines and rotating them, then slowly expanding its functions.
7. ### All shapes are either basic lines or circles, with points

captured from mouse coordinates defining the brush. Then it's a lot of rotations, reflections, etc. Very basic transformations at first Horizontal symmetry (horrible 2011 code) One rotation, symmetry enabled. Hundreds of rotations, causes moire patterns. Sixteen rotations and symmetry. First test drawing
8. ### Lines are cool, but I wanted more, to make shapes

with those lines, and turn that into brushes. Radiant / Lines From Start Triangles Vertical / Horizontal Lines Squares

10. ### Transformations/Effects: brushes transform themselves with stackable effects while drawing. The

regular "Vertical Lines" brush. The line in the center shows the real path of the stroke which is used as a base to generate the vertical lines. An effect to "Connect" with previously drawn instance of brush. Works with all brushes. A "Variable Size" effect to make brush size oscillate between 1.5 and 0.5 of the input size with a wave function. An "Spinning/Rotating Brush" effect to make brush spin on its centroid.
11. ### Vertical Lines, Rotating Brush, Variable Size, Connect Borders. * *

Place where stroke began. Triangles, Rotating Brush, and many regular Lines as free hand strokes. Radiant/Lines From Start, Connect Borders
12. ### These drawings and many more were made by others and

myself with the Desktop Application 1.0 https://imgur.com/gallery/LEetg
13. ### I used it personally, posted some pictures occasionally, people liked

it so I started sharing the application with them. Only issue is it was a .jar that wasn't easy to execute, and some people outside of Software Development had a hard time. I had to explain how to install JRE, how to run it from terminal if double click didn't work, etc. This added a lot of friction, and many people around me wanted to try it so started thinking about how could I get it out to more people. So in August 2012 I started developing an Android app. https://github.com/zubie7a/CraZe_Desktop MIT License. Code is really old, confusing to follow, hard to make changes to, a lot of stuff crammed in almost 2000 LOC files! Most versions are ports of this code (Didn't do a full rewrite of logic from scratch until 2018 to have proper abstractions, patterns, and modules). CraZe Desktop 1.0 (Java SE, JDK 7): December 2011 - February 2012
14. ### I used it personally, posted some pictures occasionally, people liked

it so I started sharing the application with them. Only issue is it was a .jar that wasn't easy to execute, and some people outside of Software Development had a hard time. I had to explain how to install JRE, how to run it from terminal if double click didn't work, etc. This added a lot of friction, and many people around me wanted to try it so started thinking about how could I get it out to more people. So in August 2012 I started developing an Android app. https://github.com/zubie7a/CraZe_Desktop CraZe Desktop 1.0 (Java SE, JDK 7): December 2011 - February 2012 MIT License. Code is really old, confusing to follow, hard to make changes to, a lot of stuff crammed in almost 2000 LOC files! Most versions are ports of this code (Didn't do a full rewrite of logic from scratch until 2018 to have proper abstractions, patterns, and modules).
15. ### CraZe Android 1.0: August 2012 - September 2012 New Features:

* Grid Alignment: aligns brushes to a grid, either square, triangular, etc, so that they don't overlap, can still be combined with other parameters for interesting effects. * Fill Brush: if brush is a closed shape, then fill it. * Fading Image: the image will fade slowly as you draw, to not fill the whole screen drawing long. * New Dynamic Palettes: 10 new palettes. Almost direct port of Desktop 1.0 logic, adapted to Android API for drawing things like paths, circles, lines, filling, and default UI elements. UI really rudimentary and barebones compared to most decent drawing apps, to open menu need to hide canvas, hard to tell what each configuration does easily. Targeted for Android 2.3, largely un-updated for 6 years until later Android versions started breaking the menu functionality due to old code. First sideloaded via QR codes, on Play Store since June 2013. Fire Palette, Fill Brush, Triangles, Variable Size Grayscale Palette, Fill Brush, Squares, Variable Size
16. ### CraZe Android 1.0: August 2012 - September 2012 New Features:

* Grid Alignment: aligns brushes to a grid, either square, triangular, etc, so that they don't overlap, can still be combined with other parameters for interesting effects. * Fill Brush: if brush is a closed shape, then fill it. * Fading Image: the image will fade slowly as you draw, to not fill the whole screen drawing long. * New Dynamic Palettes: 10 new palettes. Almost direct port of Desktop 1.0 logic, adapted to Android API for drawing things like paths, circles, lines, filling, and default UI elements. UI really rudimentary and barebones compared to most decent drawing apps, to open menu need to hide canvas, hard to tell what each configuration does easily. Targeted for Android 2.3, largely un-updated for 6 years until later Android versions started breaking the menu functionality due to old code. First sideloaded via QR codes, on Play Store since June 2013. Cross Brush, Rotating Brush Squares, Grid Align
17. ### These drawings and many more were made by others and

myself with the Android Application 1.0 https://imgur.com/gallery/fdEgK
18. ### New Features: * New Dynamic Palettes * Transparency ~ Alpha

* WebSockets for co-op drawing, only in web ver, hard to port to Android. Works like chat rooms, People can draw on Lobby or join private rooms. * New Brush: Chain * Anti-Aliasing CraZe Web 1.0: December 2012 - January 2013 https://craze.herokuapp.com Circle Chain Brush Foxes Palette Transparency Co-Op Drawing Functionality: NodeJS backend with SocketIO, hosted on Heroku. CSS Styles: just imported Twitter's Bootstrap to make UI look nice, no fancy custom classes. DOM Handling: JQuery (with @febuiles help, thanks!) to handle UI events (touches, buttons, etc). Drawing: using HTML5 default Canvas API for lines, circles, filling, etc. Maths still hand-coded. Wish I knew of P5.JS at the time!
19. ### Co-Op Drawing Functionality: NodeJS backend with SocketIO, hosted on Heroku.

CSS Styles: just imported Twitter's Bootstrap to make UI look nice, no fancy custom classes. DOM Handling: JQuery (with @febuiles help, thanks!) to handle UI events (touches, buttons, etc). Drawing: using HTML5 default Canvas API for lines, circles, filling, etc. Maths still hand-coded. Wish I knew of P5.JS at the time! CraZe Web 1.0: December 2012 - January 2013 https://craze.herokuapp.com New Features: * New Dynamic Palettes * Transparency ~ Alpha * WebSockets for co-op drawing, only in web ver, hard to port to Android. Works like chat rooms, People can draw on Lobby or join private rooms. * New Brush: Chain * Anti-Aliasing Circle Chain Brush Transparency Foxes Palette
20. ### These drawings and many more were made by others and

myself with the Web Application 1.0 https://imgur.com/gallery/VxwIm

22. ### https://craze-alpha.herokuapp.com CraZe Web 2.0: May 2015 - June 2015 New

Features: * Reworked all palettes. * Arbitrary Shape/Path Filling: If the regular stroke has Fill Shape enabled, the shape described by the whole path (closed) will be filled. * Perspective Size: Size will be proportional to the distance from detected point to the center. * New Brushes: Tangent, will draw tangent lines to the current point when compared against previous. Now instead of JQuery/Bootstrap, uses AngularJS with the Ionic Framework, which makes it very easy to create a responsive web app, so it works properly in mobile browsers which first web version didn't do. Drawing is still with regular HTML5 Canvas. No longer has WebSockets due to technical issues with the Ionic Framework at the time of development. Arecibo Message Inspired Art Original Arbitrary Shape/Path Filling Tangent Lines Brush, Perspective Size
23. ### These drawings and many more were made by others and

myself with the Web Application 2.0 https://imgur.com/gallery/LmGdRZU

25. ### CraZe Android 2.0: January 2018 - March 2018 New Features:

* FULL REWRITE: Logic was fully made from scratch, with proper abstractions, patterns, flows, modules, etc. Increases port-ability and updating new features easier. * Shining Brush: The brush has a glow around it. * Color Blending Modes: All the 18 Porter-Duff Modes provided in default Android API. * Slightly improved UI: Better descriptions, some icons, and some buttons accessible in canvas. * New Brushes: Hexagon, Insignia, Z, X, Hourglass. * New Palettes: Blue Sky, Neon, Glacier, Tropical… * Multi-Touch: Each detected finger will draw a separate stroke. Still made completely on default Android API, targeting versions 5.1+, using Java JDK 8. https://play.google.com/store/apps/details?id=com.zubieta.craze
26. ### Redevelopment in 2018 was a mess of Post-Its. Either figuring

out formulas or annotating stuff to not forget about it. Also as physical reminders or "pending tasks" to not get distracted too much.
27. ### These drawings and many more were made by others and

myself with the Android Application 2.0 https://imgur.com/gallery/qYLAZQO
28. ### CraZe iOS 1.0: January 2019 - Currently Web version runs

pretty well on iOS Safari, if that's possible with a web browser the possibilities with Native iOS code and CoreML are even bigger! Lots of challenges with iOS but also lots of potential!

30. ### November 2018 Processing has been really useful for the SVG

generation, and ease of applying transformations, handling events, handling the UI, and future portability with a web version perhaps made with P5.JS. For plotting there's slight problems with physical ink like no transparency, filling of overlapping shapes is a mess (need to figure out shape clipping), and dynamic palettes have to be constrained to a limited set of available colors (from thousands to tens). Just in time to make holidays gifts for friends, family and colleagues!

32. ### Promotion Strategies T-Shirt with QR Code in a Colombian Comic-Con

Showing it at parties! Open web browser version at tech stores, or install Android version when vendor devices allowed it. Instagram, mainly to share images of creations, videos of work in progress, motivate people to share drawings using the #CraZeApp hashtag. Presenting it at meetups (first time!) :-) Twitter, mainly for interacting with the creative coding community. Old QR stickers Just telling people and making demos personally!

34. ### @spacemandala: this guy is amazingly the literal definition of a

power-user. Non-stop creating designs, remixing them, and creating stuff since 2015.
35. ### 1680 Top reviews are nice and very motivating... 381 239

136 229 Being aware of all three kinds is very important. Downtrend of active installs that I left unnoticed for more than one year: * Started with Android 6.0~7.0 and new phones which somehow broke menus and increased crashes, after all, it was originally made for 2.3 in 2012. * This initiated a trend of losing users, both new installs immediately uninstalling, or existing users uninstalling, loses of tens of thousands of installs. * Only stopped dropping after releasing the new version made from scratch using latest API and with new menus, will take a couple years at current rate to recover to previous user install base unless pushing with advertising or updates. * Bad reviews have constructive criticism, or reflect pain points ~ bugs with software. Good ~ medium reviews show room for improvement or suggestions.