SECTIONS

</aside>

CONTENTS

Step 1: Remix Studio

Step 2: A New Project

Step 3: A New Screen

Step 4: Your First Visual Code

Step 5: Edit a Card

Step 6: Nodegraph Mechanics

Step 7: Meet the Essential Nodes

Step 8: Make Something Real

Step 9: Meet all the Nodes

</aside>

<aside> ✅

CHECK

You’ve built a very simple screen by adding a Card node and hooking up some Data to it.

</aside>

The Nodegraph

What is this “Nodegraph” thing anyway? Quite simply it’s a Graph of Nodes.

A graph (in Mathematics or Computer Science) is like a map of connections between things. Imagine you're looking at a social network of friends — each person would be a point (or "node") on this map, and whenever two people are friends, there's a line (or "edge") connecting them along which flow friendly things like conversations, jokes, handshakes, gifts.

The beauty of graphs is that they focus on what's connected to what, rather than where things are physically located. When drawing a graph of a subway system, for example, what matters is which stations connect to which others, not their exact geographic positions. You should be able to look at the graph and see which nodes are open, or crowded, or have trains in them, and which tracks have trains running along them in which direction, from the departure node to the arrival node.

Node & Wire Visual Programming

<aside> 🔧

HOW

nodegraph_mechanics.mov

We encourage you to be playful, and exploratory, and fearless in your Node & Wire adventure. The Nodegraph invites you to hover over things and discover what they reveal and what they can do.

There really isn’t much that can go wrong — try and see the connections you can and cannot make, how data flows downstream immediately along a connection from one node to the next.

The Escape key on your keyboard will get you out of most temporary states.

</aside>

WHAT

You have an infinite canvas into which you insert Nodes of various kinds

The Nodes have a Binding Interface:

These are a set of In Bindings on the left edge of a node that accept Data values and Action triggers coming into the Node.
And a set of Out Bindings that give you the results of that Node’s computation, whatever it might be. Nodes can produce Data, Cards, or Events
Not every Node will present all these types of Bindpoints (Data, Card, Event Triggers In, or Events Out) but you’ll become familiar with the interface that each Node presents as you meet all the Node type in the next section.

<aside> 🗒️

NOTE

Notice the active details in this segment of your previous Nodegraph

The Node itself shows you it’s current, live, state at all times. What you see on the Node is the current state of your programme.

Hover over a Bindpoint to see its details. The Data field called profession is of Data Type string (i.e. plain text) and is connected by a Wire to the value of a Text Display primitive in the Card Node, called Secondary Text

PS: You can press Delete on your keyboard while hovering the Bindpoint to remove the connection, the wire will vanish, and the Data will no longer flow along that path. You can also move your mouse over to the red “x” icon and click that to remove that particular connection.

</aside>

Previous

<aside> ⬅️

Step 5: Edit a Card

</aside>

Next

<aside> 📖

</aside>