Machine Spirits — Philosophy of Technology

Interactive Studio

SIMULATE

Fully-functional courseware: write and run social simulations directly in your browser. Experiment with agent-based models, network dynamics, and computational social theory.

JavaScript Sandbox

ES6+

> Ready. Click "Run" to execute JavaScript...

Canvas Visualization

HTML5 Canvas

// Network visualization
const width = canvasElem.width;
const height = canvasElem.height;

// Get theme colors
const style = getComputedStyle(document.body);
const bg = style.getPropertyValue('--white').trim();
const fg = style.getPropertyValue('--black').trim();
const accent = style.getPropertyValue('--red').trim();

// Clear canvas
ctx.fillStyle = bg;
ctx.fillRect(0, 0, width, height);

// Create network nodes
const nodes = [];
for (let i = 0; i < 20; i++) {
  nodes.push({
    x: Math.random() * (width - 40) + 20,
    y: Math.random() * (height - 40) + 20,
    radius: 8
  });
}

// Draw connections
ctx.strokeStyle = accent;
ctx.lineWidth = 1.5;
ctx.globalAlpha = 0.3;
nodes.forEach((node1, i) => {
  nodes.slice(i + 1).forEach(node2 => {
    const dist = Math.hypot(node2.x - node1.x, node2.y - node1.y);
    if (dist < 150) {
      ctx.beginPath();
      ctx.moveTo(node1.x, node1.y);
      ctx.lineTo(node2.x, node2.y);
      ctx.stroke();
    }
  });
});

// Draw nodes
ctx.globalAlpha = 1;
nodes.forEach(node => {
  ctx.fillStyle = fg;
  ctx.beginPath();
  ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
  ctx.fill();

ctx.strokeStyle = accent;
  ctx.lineWidth = 2;
  ctx.stroke();
});

console.log('Network drawn: ' + nodes.length + ' nodes');

MACHINE SPIRITS Archive / Studio / Sequence

STUDY

READ

SIMULATE

CONVERSE

Conversation

Prompt

SYLLABUS

LINKS

ROADMAP

STUDY

READ

SIMULATE

CONVERSE

Conversation

Prompt

SYLLABUS

LINKS

ROADMAP

Article Title