Slide 1

Slide 1 text

A Generative/Manual Hybrid Art App

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Medellín compared to Amsterdam

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Growing up loved drawing with many colors, repeating patterns, and symmetries

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Dynamic color palettes! Started with "Rainbows", developed more further ahead.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

These drawings and many more were made by others and myself with the Desktop Application 1.0 https://imgur.com/gallery/LEetg

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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).

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

These drawings and many more were made by others and myself with the Android Application 1.0 https://imgur.com/gallery/fdEgK

Slide 18

Slide 18 text

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!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

These drawings and many more were made by others and myself with the Web Application 1.0 https://imgur.com/gallery/VxwIm

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

These drawings and many more were made by others and myself with the Web Application 2.0 https://imgur.com/gallery/LmGdRZU

Slide 24

Slide 24 text

CraZe Android 2.0: January 2018 - March 2018 https://play.google.com/store/apps/details?id=com.zubieta.craze

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

These drawings and many more were made by others and myself with the Android Application 2.0 https://imgur.com/gallery/qYLAZQO

Slide 28

Slide 28 text

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!

Slide 29

Slide 29 text

CraZe Desktop 2.0 (Processing): AxiDraw Experiments

Slide 30

Slide 30 text

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!

Slide 31

Slide 31 text

Ask me about materials used!

Slide 32

Slide 32 text

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!

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

@karma_andala @sublimegrrl219 @macksword @spacemandala

Slide 37

Slide 37 text

@spacemandala: this guy is amazingly the literal definition of a power-user. Non-stop creating designs, remixing them, and creating stuff since 2015.

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Ask me for stickers! Thanks for your attention!