Skip to main content


Showing posts from November, 2014

The Power of Hexagons: Two-dimensional drawing on a three-dimensional surface (iOS, Swift, Xcode, CGPath, CAShapeLayer)

In this post I'm going to illustrate the drawing of a two-dimensional shape on the surface of a cube face. I am hopeful that by performing the drawing without using a straight 3D transformation certain things might come to light that inform and inspire. Drawing a 2D shape on a surface of a cube First it is necessary to draw the shape on a 2D grid and then to draw the same grid relative to a three-dimensional surface.  Whether in flat orientation or 3D the points of the grid relative to the vertices will remain the same. Once the plotting is done the points of the two-dimensional shape (in this case a slightly irregular hexagon) will be known and the code can be written and run. (A Swift playground version of the code can be found here  thanks to minor adaptations by  @ChromophoreApp .) It is also possible by simply rotating the points of the cube to shift the rotation of the shape , because the shape is constructed from points relative to the vertices

The Power of Hexagons: How to animate the rotation of a block (Swift, iOS, Xcode, CAKeyframeAnimation)

A cube is an illusion, drawn in 2D to appear 3D. One consequence of this is that a two-dimensional rotation will not automagically make the cube appear naturally rotated on a three-dimensional plane. This is because no account is taken of perspective in two-dimensional transformations. In the diagram above a 2D rotation has taken place on the left cube and it looks awkwardly turned. And as we turn further through 360 degrees the awkwardness becomes even more apparent. So typically we want the second, and more realistic, type of adjustment seen in the cube on the right. You might well have read explanations elsewhere of the X, Y, and Z axes and how transformations can be performed around them, but here I'm going to explain how to leverage hexagons and circles to create the illusion of 3D rotation. How you roll with it A cube rolling forwards onto its right face with the vertices numbered in the following way repositions its vertices like so:   0 -> 5   1 ->

The Power of Hexagons: Falling down a hole, that sinking feeling in Swift (CGPath, CALayer, CoreGraphics)

This is a brief post in which I'm going to look at sending an imaginary block down an  imaginary hole  from the last power of hexagons post. For this to happen we need to divide our tiles and blocks into three types: (1) ones that will be behind the object that will descend down the hole, (2) ones that will be in front of the descending object, and (3) cosmetic ones that don't matter whether they are in front or behind. Once we've established which is which, we can then decide on the drawing order (and/or zPosition) assignment. So first let's draw the blocks and tiles placed behind our block. Rear blocks and tiles By drawing the objects that are furthest back, we've created a range of three starting positions, and now I'll add the block (to be animated) at one of these positions: Just for fun let's see what happens when the block moves through the hole right now: Front blocks and tiles Clearly we need the blocks that will conceal

The Power of Hexagons: Dig your own holes in Swift (CAShapeLayer, CGPath, 3D Drawing)

This post is all about digging holes, but the first questions is how do we draw the ground? The answer to which is very simple, the ground is created using the base of a cube, which is repeated and used to tile the necessary area. As before we know the placement of the tile because it is drawn within a hexagon placed on one of the vertices of the hexagon that it will sit next to. In the code you'll find both a positionNextCube() function and an enum ( CubeRelativePosition ) for determining where the next block will be placed. There's also a drawCubeBase() function to draw the tile (which could also be used for drawing the hidden base of a cube in the same position). Digging the hole The shape of the tile that we are using to draw the ground is a particular shape. It is a rhombus and a rhombus is constructed from two equilateral triangles. This is convenient for creating the corner of a hole, as you will see. But first it is important to understand that drawi

The Power of Hexagons: Starting from scratch with 3D drawing in Swift (CAShapeLayer, CGPath)

This post is the first in a series of posts about drawing (and later animating) in 3D using hexagons. I don't spend time here discussing the code in detail, and instead present it as a series of Gists that can be downloaded and experimented with. Here the focus is mainly on the basic theory of drawing and positioning of 3D objects using hexagons. The reason for writing this post is in part to demonstrate how code can be a more efficient way of drawing than a reliance on creating visual assets to add to an Xcode project – something that is true now more than ever with the increasing number of screen sizes and resolutions – but mainly it's about extending drawing skills through mathematics. For the maths side of things, I've found  particularly helpful. Cube theory It all begins with a hexagon. If you can draw a hexagon in code (by determining its vertices from its origin and radius) then you can also draw a cube. A cube (in the orien

Swift: Stars in our paths (Regular Polygons, CGPath, UIBezierPath, Playgrounds, iOS, Xcode)

Searching for a tidy formula from which to draw a star shape, I started thinking about the various approaches that it was possible to take when drawing a star programmatically. The first approach that came to mind, having discovered much on the Internet about five-pointed stars containing pentagons in particular, was to think of a star as the extension of a polygon. This brought me to the conclusion that if I could calculate the slope of each side and then extend these slopes to a point of intersection with one another then a star could be drawn as shown above.  But the problem with this approach is that the outer extremity of the star is then fixed by the size of the regular polygon and its number of sides. Polygon within polygon It struck me while considering this issue, and the issue of finding the simplest way in which to create the path of a star, that actually there was an easier way and one that was far more flexible. If I mapped the points of a regular polygon (

Swift: How to draw a clock face using CoreGraphics and CoreText (Part 2: Animating with CABasicAnimation)

Retrieving the time The first step in the process of creating a working clock is to retrieve the hours, seconds and minutes. This information will be our data and can be created in at least two ways. The first is through the use of NSDate and NSDateFormatter: func time ()->(h:Int,m:Int,s:Int) { // see here for details about date formatter let dateFormatter = NSDateFormatter() let formatStrings = ["hh","mm","ss"] var hms = [Int]() for f in formatStrings { dateFormatter.dateFormat = f let date = NSDate() if let formattedDateString = dateFormatter.stringFromDate(date).toInt() { hms.append(formattedDateString) } } return (h:hms[0],m:hms[1],s:hms[2]) } The second is using C, which in this instance is less laborious: func ctime ()->(h:Int,m:Int,s:Int) { var