Introduction to Decker: Your First Interactive Creation

introduction-to-decker.md

Introduction to Decker: Your First Interactive Creation

Welcome to the world of Decker! If you've ever been curious about creating your own interactive stories, games, or multimedia projects, but felt intimidated by complex programming languages, Decker might be the perfect tool for you. In this article, we'll introduce you to Decker, explore its philosophy, and guide you through creating your very first interactive deck.

What is Decker?

Decker is a unique multimedia platform designed for creating and sharing interactive documents. It draws significant inspiration from classic tools like Apple's HyperCard, offering a nostalgic yet powerful environment for creative expression. Imagine a digital stack of index cards, where each card can contain text, images, and even interactive elements. That's the essence of Decker.

Unlike many modern development tools, Decker embraces a 'ditherpunk' aesthetic, reminiscent of early Macintosh interfaces. This distinctive visual style, combined with its focus on simplicity and ease of use, makes Decker approachable for beginners while still providing depth for more complex projects.

Why Decker?

In a world dominated by complex software and intricate coding languages, Decker stands out for its simplicity and directness. Here are a few reasons why Decker is a compelling platform:

• Ease of Use: Decker is designed to be intuitive. You can start creating interactive content almost immediately, without needing extensive programming knowledge.
• Creative Freedom: Whether you want to build an e-zine, organize notes, create presentations, or even develop simple games, Decker provides the tools to bring your ideas to life.
• Self-Contained Output: One of Decker's most powerful features is its ability to export projects as standalone HTML documents. This means your creations can be easily shared and run in any web browser, without requiring special plugins or installations.
• Lil Scripting Language: For those who want to delve deeper, Decker includes a novel scripting language called Lil. Influenced by Lua and Q, Lil is easy to learn and allows for powerful customization and interactivity.

Getting Started: Your First Interactive Deck

Let's dive in and create a simple interactive deck. You can try this directly in your web browser by visiting the Decker website and clicking on "right now" to launch the web-based version.

Once you're in the Decker environment, you'll see a blank card. Think of this as your canvas. We'll add a button and a text field to make it interactive.

Demo: A Simple Message Display

Here's how to create a basic deck that displays a message when a button is clicked:

1. Add a Button:

   • From the menu bar, go to Tool -> Widgets.
   • Then, go to Widgets -> New Button....
   • A new button will appear on your card. You can drag it to reposition it.

2. Add a Text Field:

   • Go to Widgets -> New Field....
   • A new text field will appear. Drag it below your button.

3. Script the Button:

   • With the Widgets tool still selected, double-click on the button. This will open the script editor for the button.
   • In the script editor, enter the following Lil code:

   on click do
       field "myMessage".text = "Hello, Decker World!"
   end
   

   • Click OK to save the script and close the editor.

4. Name the Text Field:

   • Double-click on the text field to open its properties.
   • In the name field, type myMessage.
   • Click OK.

5. Interact with your Deck:

   • Go to Tool -> Interact.
   • Now, click the button you created. You should see "Hello, Decker World!" appear in the text field!

This simple example demonstrates the core concept of Decker: combining visual elements (widgets) with scripting (Lil) to create interactive experiences.

Decker in Action: Wigglypaint

To truly appreciate the potential of Decker, let's look at a mature online application built with it: Wigglypaint.

Wigglypaint is a free online drawing tool that showcases Decker's capabilities for creating lively and interactive multimedia experiences. It allows users to create unique drawings with animated brushes, where every stroke brings lines to life. The application also features distinct sound effects for each brush, an eraser, and options to export creations as animated GIFs.

Wigglypaint is a fantastic example of how Decker can be used to build engaging and creative web-based applications. It highlights Decker's ability to handle graphics, sound, and user interaction in a lightweight and accessible manner. The fact that it runs entirely in a web browser and allows for GIF exports demonstrates the power and versatility of Decker's self-contained HTML output.

A Deeper Dive into Lil Scripting

While the "Hello, Decker World!" example gave you a taste of Lil, let's explore some more fundamental concepts and see how you can build more complex logic within your Decker decks.

Variables and Assignment

In Lil, you can store values in variables using the : (colon) operator. This makes your scripts more readable and allows you to reuse values.

# Assigning a string to a variable
myGreeting: "Welcome to Decker!"

# Assigning a number
currentYear: 2025

# Using variables in a field
field "infoDisplay".text = myGreeting + " Current year: " + currentYear

Conditional Logic: if Statements

Lil allows you to execute different code blocks based on conditions using if, else, and elseif statements. This is crucial for creating dynamic and responsive decks.

# Example: Checking a checkbox value
on click do
    # Assuming you have a checkbox widget named 'isLicensed' on the current card
    if field "isLicensed".value
        alert["Access Granted!"]
        go["MainContent"]
    else
        alert["Please agree to the terms."]
    end
end

In this example, if a checkbox named isLicensed is checked (its value is true), an

alert will appear and the deck will navigate to the MainContent card. Otherwise, a different alert will be shown.

Working with Lists and Dictionaries

Lil provides powerful ways to work with collections of data using lists and dictionaries. Lists are ordered sequences, while dictionaries store key-value pairs.

# Creating a list
myShoppingList: ("Apples" "Milk" "Bread")

# Accessing elements in a list (indexing starts from 0)
print[myShoppingList.0] # Prints "Apples"

# Creating a dictionary
userProfile: dict("name" "Alice" "age" 30 "city" "New York")

# Accessing values in a dictionary
print[userProfile.name] # Prints "Alice"

# Iterating through a list
each item in myShoppingList
    print["Don't forget " + item]
end

This expanded understanding of Lil will empower you to create even more sophisticated and interactive Decker projects. Experiment with these concepts, and don't hesitate to refer to the Lil programming language documentation for a comprehensive reference.

References

• [1] Beyondloom. Decker. Available at: https://beyondloom.com/decker/
• [2] Wigglypaint. Free Online Drawing Tool with Animated Brushes. Available at: https://wigglypaint.net/