Swift: Clock Layout Update*

While yesterday’s code solved the ‘problem’, today I took a few minutes to do some abstraction and write an alternate version that computes the positions of n points evenly spaced in a circle:


//Constant size of each node on the clock face
let kSize:CGFloat = 4

//Place a ClockFace node in the center
let clockFace:SKShapeNode = nodeGenerator(size:r, point: CGPoint( x:midPoint.x, y:midPoint.y), scene:scene)
clockFace.fillColor = SKColor.gray

//Place a normal node in the center
let centerNode:SKShapeNode = nodeGenerator(size:kSize, point: CGPoint( x:midPoint.x, y:midPoint.y), scene:scene)

//Determine radian spacing...
let nodesOnTheClock = 12
let interval:Double = 2 * M_PI / Double(nodesOnTheClock) //Radians

for index in 1...nodesOnTheClock {
    let angle:Double = M_PI_2 - Double(index) * interval
    let node:SKShapeNode = nodeGenerator(size: kSize,
                                           point: CGPoint(
                                            x:midPoint.x + r * cos(CGFloat(angle)),
                                            y:midPoint.y + r * sin(CGFloat(angle))),
                                           scene:scene)
    
}

screen-shot-2016-11-01-at-3-38-46-pm

You can grab the Gist at: https://gist.github.com/Zbeyer/038b672ba619ea93a06c1ed49608731c

The Full Code Snippet will be below the following screenshots:


import SpriteKit
import XCPlayground
//SpriteKit and XCPlayground are required modules
//ZBeyer October 31st 2016
/**
    nodeGenerator
 - Parameter size: The pixel size of the circle within the clock
 - Parameter point: The x and y cooridantes within the scene where the circle will be placed
 - Parameter scene: The scene in which the node will be placed
 
 creates a SKShapeNode circle at a specified point within the specified scene
 */
func nodeGenerator(size:CGFloat, point:CGPoint, scene:SKScene) -> SKShapeNode {
    let c = SKShapeNode(circleOfRadius: size ) // Size of Circle
    c.glowWidth = 1.0
    c.fillColor = SKColor.orange
    c.position = point
    scene.addChild(c)
    return c
}

//Basic dimensions that we will use more later
let frame = CGRect(x: 0, y: 0, width: 320, height: 320)
//Center point of the frame
let midPoint = CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0)
//radius of the planned clockface
let r = (min(frame.height, frame.width)) * 0.618 * 0.5

//Create a scene, add something to it
var scene = SKScene(size: frame.size)

//Set up the view and show the scene
let view = SKView(frame: frame)
view.presentScene(scene)

//Attatch the scene view to the live preview...
XCPlaygroundPage.currentPage.liveView = view

//Constant size of each node on the clock face
let kSize:CGFloat = 4

//Place a ClockFace node in the center
let clockFace:SKShapeNode = nodeGenerator(size:r, point: CGPoint( x:midPoint.x, y:midPoint.y), scene:scene)
clockFace.fillColor = SKColor.gray

//Place a normal node in the center
let centerNode:SKShapeNode = nodeGenerator(size:kSize, point: CGPoint( x:midPoint.x, y:midPoint.y), scene:scene)

//Determine radian spacing...
let nodesOnTheClock = 12
let interval:Double = 2 * M_PI / Double(nodesOnTheClock) //Radians

for index in 1...nodesOnTheClock {
    let angle:Double = M_PI_2 - Double(index) * interval
    let node:SKShapeNode = nodeGenerator(size: kSize,
                                           point: CGPoint(
                                            x:midPoint.x + r * cos(CGFloat(angle)),
                                            y:midPoint.y + r * sin(CGFloat(angle))),
                                           scene:scene)
    
}

Clock Face

Bookmark and Share

Leave a Reply

Your email address will not be published. Required fields are marked *