cell/tests/draw2d.js

// Test draw2d module without moth framework
var draw2d
var graphics
var os = use('os');
var input = use('input')
input.watch($_)

// Create SDL video actor
var video_actor = use('sdl_video');

var window_id = null;
var renderer_id = null;

$_.receiver(e => {
  console.log(json.encode(e))
})

// Create window
send(video_actor, {
  kind: "window", 
  op: "create", 
  data: {
    title: "Draw2D Test",
    width: 800,
    height: 600
  }
}, function(response) {
  if (response.error) {
    console.error("Failed to create window:", response.error);
    return;
  }
  
  window_id = response.id;
  console.log("Created window with id:", window_id);
  
  // Create renderer
  send(video_actor, {
    kind: "window", 
    op: "makeRenderer", 
    id: window_id
  }, function(response) {
    if (response.error) {
      console.error("Failed to create renderer:", response.error);
      return;
    }
    
    renderer_id = response.id;
    console.log("Created renderer with id:", renderer_id);
    
    // Configure draw2d and graphics
    draw2d = use('draw2d', video_actor, renderer_id)
    graphics = use('graphics', video_actor, renderer_id)
    
    // Start drawing after a short delay
    $_.delay(start_drawing, 0.1);
  });
});

function start_drawing() {
  var frame = 0;
  var start_time = os.now();
  
  // Load an image
  var bunny_image = graphics.texture('tests/bunny.png')
  
  send(video_actor, {kind: "cursor", op: "create", data: bunny_image.cpu}, ({id}) => {
    send(video_actor, {kind:"cursor", op: "set", id})
  })
  
  function draw_frame() {
    frame++;
    var t = os.now() - start_time;
    
    // Clear the screen with a dark background
    send(video_actor, {
      kind: "renderer",
      id: renderer_id,
      op: "set",
      prop: "drawColor",
      value: [0.1, 0.1, 0.15, 1]
    });
    send(video_actor, {
      kind: "renderer",
      id: renderer_id,
      op: "clear"
    });
    
    // Clear draw2d commands
    draw2d.clear();
    
    // Draw some rectangles
    draw2d.rectangle(
      {x: 50, y: 50, width: 100, height: 100},
      {thickness: 0, color: [1, 0, 0, 1]}
    );
    
    draw2d.rectangle(
      {x: 200, y: 50, width: 100, height: 100},
      {thickness: 5, color: [0, 1, 0, 1]}
    );
    
    draw2d.rectangle(
      {x: 350, y: 50, width: 100, height: 100},
      {thickness: 2, color: [0, 0, 1, 1], radius: 20}
    );
    
    // Draw circles with animation
    var radius = 30 + Math.sin(t * 2) * 10;
    draw2d.circle(
      [100, 250],
      radius,
      {color: [1, 1, 0, 1], thickness: 0}
    );
    
    draw2d.circle(
      [250, 250],
      40,
      {color: [1, 0, 1, 1], thickness: 3}
    );
    
    // Draw ellipse
    draw2d.ellipse(
      [400, 250],
      [60, 30],
      {color: [0, 1, 1, 1], thickness: 2}
    );
    
    // Draw lines
    var line_y = 350 + Math.sin(t * 3) * 20;
    draw2d.line(
      [[50, line_y], [150, line_y + 50], [250, line_y]],
      {color: [1, 0.5, 0, 1], thickness: 2}
    );
    
    // Draw cross
    draw2d.cross(
      [350, 375],
      25,
      {color: [0.5, 1, 0.5, 1], thickness: 3}
    );
    
    // Draw arrow
    draw2d.arrow(
      [450, 350],
      [550, 400],
      15,
      30,
      {color: [1, 1, 1, 1], thickness: 2}
    );
    
    // Draw partial circle (arc)
    draw2d.circle(
      [150, 480],
      50,
      {
        color: [0.8, 0.8, 1, 1],
        thickness: 5,
        start: 0.25,
        end: 0.75
      }
    );
    
    // Draw filled partial ellipse
    draw2d.ellipse(
      [350, 480],
      [80, 40],
      {
        color: [1, 0.8, 0.8, 1],
        thickness: 0,
        start: 0,
        end: 0.6
      }
    );
    
    // Draw some points in a pattern
    var point_count = 20;
    for (var i = 0; i < point_count; i++) {
      var angle = (i / point_count) * Math.PI * 2;
      var r = 30 + Math.sin(t * 4 + i * 0.5) * 10;
      var px = 650 + Math.cos(angle) * r;
      var py = 300 + Math.sin(angle) * r;
      
      draw2d.point(
        [px, py],
        3,
        {color: [1, 0.5 + Math.sin(t * 2 + i) * 0.5, 0.5, 1]}
      );
    }
    
    var img = "tests/bunny.png"
    draw2d.image(img, {x: 500, y: 450, width: 64, height: 64});
    
    // Rotating bunny
    var rotation = t * 0.5;
    draw2d.image(
      img, 
      {x: 600, y: 450, width: 64, height: 64},
      rotation,
      [0.5, 0.5]  // Center anchor
    );
    
    // Bouncing bunny with tint
    var bounce_y = 500 + Math.sin(t * 3) * 20;
    draw2d.image(
      img,
      {x: 700, y: bounce_y, width: 48, height: 48},
      0,
      [0.5, 1],  // Bottom center anchor
      [0, 0],    // No shear
      {color: [1, 0.5, 0.5, 1]}  // Red tint
    );
    
    // Flush all commands to renderer
    draw2d.flush();
    
    // Present the frame
    send(video_actor, {
      kind: "renderer",
      id: renderer_id,
      op: "present"
    });
    
    // Schedule next frame (60 FPS)
    if (frame < 600) { // Run for 10 seconds
      $_.delay(draw_frame, 1/60);
    } else {
      console.log("Test completed - drew", frame, "frames");
      $_.delay($_.stop, 0.5);
    }
  }
  
  draw_frame();
}

// Stop after 12 seconds if not already stopped
$_.delay($_.stop, 12);