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
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.
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.
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
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
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.
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
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
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).
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
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
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!
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
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
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
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.
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!
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!
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!
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.
Learnings The machine supports the human Explore inner curiosity Artistic creativity has no age or profession Privacy/Security awareness increasing Shady businesses becoming normal in mobile app space (ask me about it) 5 years 26 years 98 years People wanna be involved in the process, not just watch People in different situations Stress Sadness Boredom Waiting Reading Apps asking bizarre permissions Current UI is a barrier Takes a lot of exploration, controls hardly intuitive 19 years "I'm not an artist…" belief prevents people from exploring their curiosity and creativity Algorithms help, but don't replace creativity Circumstances of life make difficult to connect with that side Travelling It's the area with the most to improve The computer will help with "manual skill", user puts the mental ideas, which usually are mechanically hard to translate into something tangible Special Parties Introspection Tattooing Seek feedback Reporting issues Requests Know your users Pain points Know about diverse experiences outside your own School DJ Writer Promoter Designer Physician Journalist Unforeseen situations Child User data increasingly abused by rogue apps, if you are not a big name, getting user trust is hard Main driver of development Unique creations Feeling proud of outcome and willing to share Resting Specialized niche requests can lead into paid/pro versions while preserving current already fully featured accessible by everyone
zubie7a
sbtechnight
stefafafan
sparty
sue445
takakuni
sagara
dongjin
line_developers
you5805
sonatard
trallard
keathley
phodgson
mojombo
mclloyd
davidbonilla
jcasabona
chrisshort
lauravandoore
aarron
marcduiker