My First Sketch

This tutorial will guide you through creating your first Peruna sketch using SwiftUI. Peruna is designed to work seamlessly with SwiftUI, making it easy to create interactive graphics and animations.

Basic Setup

To create a Peruna sketch, you need to use the PerunaCanvas view. This view takes two closures: a setup closure and a draw closure.

1struct ContentView: View {
2    var body: some View {
3        PerunaCanvas { p in
4            // Setup code here (initialize arrays, objects, etc)
5        } draw: { p, frameCount in
6            // Drawing code here
7        }
8    }
9}

Complete Example

Here's a complete example that creates a colorful animation with rectangles and ellipses:

1struct ContentView: View {
2    // Declare variables and constants in SwiftUI
3    
4    var body: some View {
5        PerunaCanvas { p in
6            // Setup here (initialize arrays, objects, etc)
7            
8        } draw: { p, frameCount in
9            // Set background color with p.background
10            // You can use 1, or 3 arguments. 1 argument will
11            // provide you with a gray color, 3 arguments will
12            // let you choose the red, green, and blue values
13            p.background(color: p.color(
14                r: sin(Float(frameCount)*0.01)*255,
15                g: sin(Float(frameCount)*0.02)*255,
16                b: sin(Float(frameCount)*0.03)*255
17                )
18            )
19            
20            // Draw a rectangle, give colors to the outline with stroke()
21            // and fill it with color with p.fill()
22            // smuRed and smuBlue are easy to use built-in colors
23            // meant for quick prototyping
24            p.fill(p.smuRed)
25            p.stroke(p.smuBlue)
26            p.rect(
27                x: p.width/2,
28                y: p.height/2,
29                width: p.width/2,
30                height: p.height/2 )
31            
32            // Draw an ellipse, give colors to the outline with stroke()
33            // and fill it with color with p.fill()
34            p.fill(p.smuBlue)
35            p.stroke(p.smuRed)
36            p.ellipse(
37                x: p.width/2,
38                y: p.height/4,
39                width: p.width/3,
40                height: p.width/3 )
41        }
42    }
43}

Key Concepts

PerunaCanvas

The main view that provides the drawing context. It has two closures:

  • setup: Called once when the view is created
  • draw: Called repeatedly for animation

Drawing Context (p)

The p parameter provides access to all drawing functions:

  • p.background(): Sets the background color
  • p.fill(): Sets the fill color
  • p.stroke(): Sets the stroke color
  • p.rect(): Draws a rectangle
  • p.ellipse(): Draws an ellipse

Frame Count

The frameCount parameter tracks how many frames have been drawn. It's useful for creating animations that change over time.

Built-in Colors

Peruna includes several built-in colors for quick prototyping:

  • p.smuRed: SMU's red color
  • p.smuBlue: SMU's blue color

Next Steps

Now that you've created your first sketch, you can explore more advanced features:

  • Add user interaction with p.mouseX and p.mouseY
  • Create more complex shapes with p.triangle() and p.line()
  • Use p.random() to add randomness to your sketches
  • Explore the p.noise() function for organic patterns

Check out the other examples in the sidebar to learn more about specific features.