TypeScript Nodes Unlocking New Design Potential for the BeeGraphy Design Awards 2026

TypeScript is changing how designers think about design.
Design is no longer just about creating forms and visual outcomes. It is about designing systems.

As computational and parametric tools become central to contemporary practice, designers are shifting from static outputs to dynamic processes. Instead of asking what a design should look like, they are increasingly asking how it should behave, adapt, and evolve. This shift is redefining how ideas are imagined, iterated, and communicated across disciplines such as architecture, product design, digital art, and interaction design.

For participants in the BeeGraphy Design Awards, this transformation is not simply a technological upgrade. It is a strategic advantage. Projects built on computational logic often stand apart because they reveal more than aesthetics. They demonstrate structure, intelligence, and intent. In a landscape where visual complexity is easy to achieve, meaningful complexity is what truly distinguishes exceptional work.

This is where TypeScript nodes in BeeGraphy begin to matter.

While traditional node-based workflows offer an intuitive way to explore geometry and relationships, they often reach their limits when designers attempt to express deeper logic or scalable systems. TypeScript extends these workflows beyond visual scripting, enabling designers to define custom rules, behaviors, and algorithms within their parametric models. The result is not just more control, but a fundamentally different way of thinking about design.

To understand why this approach is so powerful, and how it compares to conventional node-based methods, we first need to examine what changes when designers move from connecting nodes to authoring logic.

Visual Nodes vs TypeScript Nodes in Beegraphy

Beegraphy brings together two ways of thinking about design: visual intuition and computational logic. Visual nodes allow designers to explore form through visible relationships, while TypeScript nodes enable them to define deeper rules and scalable systems. Rather than replacing each other, these approaches work best when combined.

Understanding their differences helps designers move from creating complex geometries to building intelligent design frameworks.

What Visual Nodes Are Good At

Visual nodes are often the first step into computational design. By connecting parameters and transformations visually, designers can immediately understand how changes affect form. This makes them ideal for experimentation and early-stage exploration.

They are especially strong in:

• Rapid prototyping and quick iteration
• Intuitive form generation through visual relationships
• Clear cause-and-effect logic in geometry
• Accessibility for designers without coding experience

Visual nodes excel at helping designers think visually within parametric systems. They make complexity tangible and encourage exploration.

Limitations of Pure Node-Based Workflows

As projects become more ambitious, the limitations of purely visual workflows start to appear. Node graphs can grow large and tangled, making them difficult to navigate or modify. Repetitive logic often needs to be rebuilt manually, which reduces efficiency and consistency.

Pure node-based systems also struggle with deeper computational logic. Implementing mathematical relationships, conditional rules, or generative behaviors can become cumbersome when expressed only through visual connections. At a certain scale, the node graph stops being a tool for clarity and becomes a source of complexity.

This is where designers begin to feel the need for a more expressive layer of control.

What TypeScript Nodes Unlock

TypeScript nodes introduce that layer of control. Instead of describing every relationship visually, designers can articulate logic through structured code. This makes it possible to define rules, algorithms, and behaviors with precision.

TypeScript nodes enable:

• Custom algorithms and generative logic
• Scalable parametric systems
• Mathematical and procedural patterns
• Data-driven design workflows
• Reusable and modular logic structures

By combining TypeScript with visual nodes, designers gain both intuition and precision. Visual nodes support exploration, while TypeScript nodes provide structure and scalability.

Core Idea

Visual nodes help designers explore form.
TypeScript nodes help designers define systems.

Together, they transform Beegraphy from a visual design tool into a computational design engine, enabling designers to think beyond geometry and start designing logic itself.

Cleaner Graphs, Stronger Logic

Complex visual node graphs tend to grow rapidly as logic branches multiply. This often leads to:

• Visual complexity that overwhelms collaborators
• Redundant clusters performing similar tasks in multiple places
• Difficulty debugging because logic is scattered

TypeScript centralizes logic. Designers can write rules once and reuse them across the system. When a parameter changes, the entire model updates consistently. This improves workflow and makes projects easier to understand for jurors and peers. Instead of showing only geometry, designers reveal clear design intent.

Precision and Control

Design competitions demand clarity in reasoning and adaptability in form. TypeScript provides:

• Explicit mathematical control over relationships
• Predictable automation of repeated components
• Reusable functions that encode design logic clearly

This level of precision means designers are not stacking nodes to achieve results. They are defining exactly what they want and why. This makes projects easier to justify and explain in a judging context.

Easier to Teach, Easier to Share

Another key advantage of TypeScript is collaboration. Written logic is often easier to read, critique, and adapt than large node graphs. When designers present their work to teammates or judges, they are communicating intentional systems, not just visual compositions.

This clarity aligns closely with parametric design principles, where rules and relationships define form instead of manual adjustments.

Why This Matters for the Beegraphy Design Awards

The Beegraphy Design Awards celebrate innovation and thoughtful computational design. Demonstrating a clean, rule-based parametric system using TypeScript is not only technically impressive. It shows the ability to think algorithmically, which is a critical design skill in contemporary practice.

In this series, we will move from mindset to implementation, and from simple systems to award-ready models. Before writing any code, it is essential to build a strong conceptual foundation. Understanding why TypeScript nodes are not harder, but smarter and more scalable than traditional nodes, is the first step.

Creating models using typescript

Check out the youtube video above or the typescript tutorial blog before we move forward

Step 1: Open the BeeGraphy Editor, double click and add a TypeScript node to your canvas.

Step 2: Copy the code you want to use and paste it into the script by clicking the Edit button on the node.

Step 3: Inside the window, click Ports in the top left corner. Delete all the default input and output ports.

Step 4: At the top of your code, you will see the in-port names and their types. Copy each name into the Ports panel and assign the correct type in the drop down menu (scroll to find the desired one). This is important for the node to work properly.

Step 5: Scroll to the bottom of the code to find the out port name, such as curves, surfaces, or solid. Copy that into the output ports and select the matching type.

Troubleshooting:

• If you see the code is stuck in task execution, remind the chatbot to use await, async & promise . This allows your code to handle asynchronous tasks and won’t get stuck in a loop.
• If you see type error in node after changing the in and out port names, refresh the page and it usually disappears.
• If you encounter other errors in node, such as calling undefined classes, then you can take a screenshot of the error and share it with claude.
• You can also reach out to us on discord in case you need help.

// ===== KINETIC COIN GRID WITH WAVE =====
type CoinGridInPorts = {
  rows: Value<number>;
  columns: Value<number>;
  hexSize: Value<number>;
  widthScale: Value<number>;
  heightScale: Value<number>;
  horizontalGap: Value<number>;
  verticalGap: Value<number>;
  waveAmplitude: Value<number>;
  waveFrequencyX: Value<number>;
  waveFrequencyY: Value<number>;
  panelThickness: Value<number>;
};

async ({
  rows: rowsPort,
  columns: columnsPort,
  hexSize: hexSizePort,
  widthScale: widthScalePort,
  heightScale: heightScalePort,
  horizontalGap: horizontalGapPort,
  verticalGap: verticalGapPort,
  waveAmplitude: waveAmplitudePort,
  waveFrequencyX: waveFrequencyXPort,
  waveFrequencyY: waveFrequencyYPort,
  panelThickness: panelThicknessPort
}: CoinGridInPorts) => {

  const rows = Math.floor(rowsPort.value);
  const columns = Math.floor(columnsPort.value);
  const coinRadius = hexSizePort.value;
  const horizontalGap = horizontalGapPort.value;
  const verticalGap = verticalGapPort.value;
  const maxRotation = waveAmplitudePort.value * (Math.PI / 180);
  const freqX = waveFrequencyXPort.value;
  const freqY = waveFrequencyYPort.value;

  const horizontalSpacing = (coinRadius * 2) + horizontalGap;
  const verticalSpacing = (coinRadius * 2) + verticalGap;

  const circleSegments = 32;
  const allCurves: any[] = [];

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < columns; col++) {

      const centerX = col * horizontalSpacing;
      const centerY = row * verticalSpacing;

      const normalizedX = col / (columns - 1 || 1);
      const normalizedY = row / (rows - 1 || 1);
      const waveValue =
        Math.sin(normalizedX * Math.PI * freqX + normalizedY * Math.PI * freqY) * 0.5 + 0.5;

      const rotationAngle = maxRotation * (waveValue * 2 - 1);

      const circlePoints = [];
      for (let i = 0; i < circleSegments; i++) {
        const angle = (Math.PI * 2 * i) / circleSegments;

        const localX = coinRadius * Math.cos(angle);
        const localY = coinRadius * Math.sin(angle);
        const localZ = 0;

        const rotatedX = localX * Math.cos(rotationAngle) + localZ * Math.sin(rotationAngle);
        const rotatedZ = -localX * Math.sin(rotationAngle) + localZ * Math.cos(rotationAngle);

        const x = centerX + rotatedX;
        const y = centerY + localY;
        const z = rotatedZ;

        circlePoints.push(new Vector([x, y, z]));
      }

      const coin = await CurveBuilder.polyline(circlePoints, true);
      allCurves.push({
        type: Type.Curve,
        value: coin,
        meta: { color: "#00aaff" }
      });
    }
  }

  return { curves: allCurves };
};