No announcement yet.

Placing in Patterns - Swift Playgrounds

  • Filter
  • Time
  • Show
Clear All
new posts

  • Placing in Patterns - Swift Playgrounds

    The goal of this lesson is to move images into patterns.

    When you place an image using the image tool, it doesn't have to stay where it is! You can use code to move it anywhere on the scene, and even animate it by telling it how long to take to get there.

    Animating a graphic to a position:
    let position = Point(x: 100, y: 100)
    graphic.move(to: position, duration: 1.0)

    The scene has functions that return an array of points in different patterns.

    Get an array of points in a circle or spiral:
    let points = scene.circlePoints(radius: 200, count: 200)
    let points = scene.spiralPoints(spacing: 50, count: 200)

    You can move the images to these points as you place them on the scene.

    1. In addImage(), after you place the graphic, add code to get the position at points[pointIndex].
    2. Increment pointIndex so that it's ready to get the next position. Add some code to set pointIndex back to zero if it goes out of bounds.
    3. Move the graphic to the position using graphic.move(to:duration.
    4. Select the Image tool and drag your finger around the scene. Watch the images magically arrange themselves.

    Click image for larger version

Name:	Screen Shot 2017-01-08 at 11.58.15 PM.png
Views:	162
Size:	110.5 KB
ID:	2457

    Hint: Get the next position and increment. pointIndex: let position = points[pointIndex], pointIndex += 1. Reset pointIndex so it stays within the array bounds:

    if pointIndex == points.count {
    pointIndex = 0
    Or, better still, use the modulo (%) operator:
    let position = points[pointIndex % points.count]

    The full answer solution is shown below:
    scene.backgroundImage = backgroundImage
    let animals = [animalImageArray]
    // Get array of points in a pattern.
    let points = scene.circlePoints(radius: 200, count: 100)
    // Index to points.
    var pointIndex = 0
    func addImage(touch: Touch) {
     if touch.previousPlaceDistance < 80 {
    // Get a random image and place it.
    Let index = randomInt(from: 0, to: animals.count-1)
    var graphic = Graphic(image: animals[index])
    graphic.scale = 0.5
    scene.place(graphic, at: touch.position)
    // Get position from points at pointIndex.
    let position = points[pointIndex % points.count]
    //Increment pointIndex.
    pointIndex += 1
    //Move graphic to position.
    scene.place(graphic, at: position)

    Experiment with different points, functions, and parameters to get different patterns.

    Challenge: The points return by a pattern function are positioned around the center of the scene. You can easily add an x, y offset to each point, placing the pattern anywhere you like. See if you can place several patterns in different places on the scene.

    Next lesson, we will be looking at "Interstellar Symmetry".

  • #2


    • #3
      Can’t find the next lesson on fanschats “Interstellar Symmetry.”