Generative -cat woolen ball like- logo
By Bea Cabrera - http://kuasar.es/cats-ball-of-wool-in-processing/
First steps with Processing. I was attempting a generative logo that would transmit chaos and "messy" but within limits (sphere). Also concepts like world traveling, the wool ball of a cat (yes, I'm a cat girl), drawing, fashion... Plus, as a friend of mine says: "Round things are generally good"... so there goes my very own globe. This is my first attempt at a generative logo. Ideally the ball was meant to be in 3D, but I still have to manage to keep the strings just on the surface of it, so in the meantime I have two different balls of strings: one that actually interacts with mouse actions and rotates and the other that grows and grows but doesn't rotate. You can check out the project here: http://www.openprocessing.org/sketch/65099 Firstly, I came up with a sketch of a circle drawn from many different lines by joining dots by setting a radius (variable âdiaâ), and 2 angles ([0, 2Ï]) and use them to situate two points (p1 and p2) on the edge of a circle. To center the sphere in the canvas I used an offset of width/2 and height/2. The effect with 9000 lines would actually look like a moon. Cool! Searching for an organic Look&Feel I changed all lines to BĂ©zier Curves. A BĂ©zier curve is defined by a set of control points P0 through Pn, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). The first and last control points are always the end points of the curve; however, the intermediate control points (if any) generally do not lie on the curve. Processing handles bezier cubic curves through its function: bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) where P0=(x1,y1), P1=(cx1,cy1), P2=(cx2,cy2) and P3=(x2,y2). To gain a little bit more of organic touch to it, I used a random factor ([1, 1.4]) to multiply with the radius of the control points for the curves. This method assures that the control points will always lie outside the actual sphere helping change the aspect of the cut on the edge of the circle. To be able to transform from 2D to 3D and place points easily on a sphere, we should be using spherical coordinates (Ξ, Ï, r) instead of cartesian (x, y, z) coordinates. In spherical coordinates: Ξ -> Polar angle Ï -> Azimuthal angle r -> Radius To achieve this I included the simple geometric transformations so that Processing can transform from spherical to cartesian system. x = cos(Ξ) · sin(Ï) · r y = sin(Ξ) · sin(Ï) · r z = cos(Ï) · r Note, also, that if weâre working in 3D we must also change the renderer to one that supports it, like OPENGL or P3D. By default the renderer is P2D and does not accept 3D coordinates. As curves are now printed through the sphere, joining points of opposite sides of itâs surface, the design looks darker in the center and the edge is not as defined as before. This is something I would like to improve further on. But why managing a 3D sphere if we can't appreciate 3 dimensions on a flat surface? Here is where the camera comes in. To manage a camera in a simple way I made use of the library âpeasycamâ by Jonathan Feinberg. This library uses mouse interaction to move the camera view and redraws the sketch to its new position. To use it you must import the library: import peasy.* then declare a camera object: PeasyCam cam; and finally instantiate it in the setup: cam = new PeasyCam(this, 0, 0, 0, 700); The following lines set the distances for the zoom panning: cam.setMinimumDistance(25); cam.setMaximumDistance(1000); The class BezierCurve is in charge of saving into an array of curves all of the curves already printed, so that after each loop in draw( ) and each background redrawn, we can restore the same curves that were already there only that slightly moved.