[oden] Colors

But they don't work

game/actor.ts

@@ -191,7 +191,7 @@ export class Robo extends Actor {
 
       const frame = (anim.start + ((clock / anim.speed) % anim.length)) >> 0;
       spr(x, y, w, h, frame * w, 0, 32, 32);
-      // circle(this.props.position.x, this.props.position.y, 16, 1);
+      circle(this.props.position.x, this.props.position.y, 16, 1);
     }
   }
 }

src/circle_shader.wgsl

@@ -8,11 +8,11 @@ struct VertexInput {
 };
 
 struct InstanceInput {
-  @location(5) center: vec2<f32>,
+  @location(4) center: vec2<f32>,
-  @location(6) radius: f32,
+  @location(5) radius: f32,
-  @location(7) stroke_width: f32,
+  @location(6) stroke_width: f32,
-  @location(8) stroke_color: vec4<f32>,
+  @location(7) stroke_color: vec4<f32>,
-  @location(9) fill_color: vec4<f32>,
+  @location(8) fill_color: vec4<f32>,
 };
 
 struct VertexOutput {

src/lib.rs

@@ -103,18 +103,18 @@ impl CircleInstance {
             attributes: &[
                 wgpu::VertexAttribute {
                     offset: 0,
-                    shader_location: 5,
+                    shader_location: 4,
                     format: wgpu::VertexFormat::Float32x2,
                 },
                 wgpu::VertexAttribute {
                     offset: std::mem::size_of::<[f32; 2]>() as wgpu::BufferAddress,
-                    shader_location: 6,
+                    shader_location: 5,
                     format: wgpu::VertexFormat::Float32,
                 },
                 wgpu::VertexAttribute {
                     offset: (std::mem::size_of::<[f32; 2]>() + std::mem::size_of::<f32>())
                         as wgpu::BufferAddress,
-                    shader_location: 7,
+                    shader_location: 6,
                     format: wgpu::VertexFormat::Float32,
                 },
                 wgpu::VertexAttribute {
@@ -122,7 +122,7 @@ impl CircleInstance {
                         + std::mem::size_of::<f32>()
                         + std::mem::size_of::<f32>())
                         as wgpu::BufferAddress,
-                    shader_location: 8,
+                    shader_location: 7,
                     format: wgpu::VertexFormat::Float32x4,
                 },
                 wgpu::VertexAttribute {
@@ -131,7 +131,7 @@ impl CircleInstance {
                         + std::mem::size_of::<f32>()
                         + std::mem::size_of::<[f32; 4]>())
                         as wgpu::BufferAddress,
-                    shader_location: 9,
+                    shader_location: 8,
                     format: wgpu::VertexFormat::Float32x4,
                 },
             ],
@@ -776,6 +776,8 @@ struct FrameBuilder<'a> {
     output: wgpu::SurfaceTexture,
 
     mode: DrawMode,
+    fill_color: [f32; 4],
+    stroke_color: [f32; 4],
     target: Rc<wgpu::TextureView>,
     color: Option<[f64; 4]>,
     draw_calls: Vec<DrawCall>,
@@ -806,6 +808,8 @@ impl<'a> FrameBuilder<'a> {
             output,
 
             mode: DrawMode::Sprites,
+            stroke_color: [0.0, 0.0, 0.0, 1.0],
+            fill_color: [0.0, 0.0, 1.0, 1.0],
             target: last_view,
             color: None,
             draw_calls: Vec::new(),
@@ -852,9 +856,15 @@ impl<'a> FrameBuilder<'a> {
                     self.start_pass(None, self.last_view.clone());
                 }
             }
+            GraphicsCommand::FillColor(c) => {
+                self.fill_color = c;
+            }
+            GraphicsCommand::StrokeColor(c) => {
+                self.stroke_color = c;
+            }
             GraphicsCommand::Print(pc) => println!("{}", pc.text),
             GraphicsCommand::Sprite(si) => self.push_sprite(si),
-            GraphicsCommand::Circle(ci) => self.push_circle(ci),
+            GraphicsCommand::Circle(cc) => self.push_circle(cc),
             GraphicsCommand::UseTexture(id) => self.use_texture(id),
             GraphicsCommand::EndFrame => self.flush(),
 
@@ -965,9 +975,17 @@ impl<'a> FrameBuilder<'a> {
         self.state.circle_instance_buffers.get_mut(&vb)
     }
 
-    fn push_circle(&mut self, ci: CircleInstance) {
+    fn push_circle(&mut self, cc: script::graphics::CircleCommand) {
+        let stroke_color = self.stroke_color.clone();
+        let fill_color = self.fill_color.clone();
         let vertex_buffer = self.get_circle_instance_buffer();
-        vertex_buffer.vec.push(ci);
+        vertex_buffer.vec.push(CircleInstance {
+            center: cc.center,
+            radius: cc.radius,
+            stroke_width: cc.stroke_width,
+            stroke_color,
+            fill_color: [1.0, 1.0, 1.0, 1.0],
+        });
     }
 
     fn flush(&mut self) {

src/script/graphics.rs

@@ -22,11 +22,20 @@ pub struct CreateTextureCommand {
     pub label: Option<String>,
 }
 
+#[derive(Debug)]
+pub struct CircleCommand {
+    pub center: [f32; 2],
+    pub radius: f32,
+    pub stroke_width: f32,
+}
+
 #[derive(Debug)]
 pub enum GraphicsCommand {
     Clear(ClearCommand),
+    FillColor([f32; 4]),
+    StrokeColor([f32; 4]),
     Print(PrintCommand),
-    Circle(crate::CircleInstance),
+    Circle(CircleCommand),
     Sprite(crate::SpriteInstance),
     CreateTexture(CreateTextureCommand),
     CreateWritableTexture {
@@ -66,6 +75,14 @@ impl GraphicsImpl {
         }));
     }
 
+    fn color(&self, r: f32, g: f32, b: f32, a: f32) -> () {
+        let _ = self.sender.send(GraphicsCommand::FillColor([r, g, b, a]));
+    }
+
+    fn stroke(&self, r: f32, g: f32, b: f32, a: f32) -> () {
+        let _ = self.sender.send(GraphicsCommand::StrokeColor([r, g, b, a]));
+    }
+
     fn spr(&self, x: f32, y: f32, w: f32, h: f32, u: f32, v: f32, sw: f32, sh: f32) {
         let _ = self
             .sender
@@ -78,14 +95,10 @@ impl GraphicsImpl {
     }
 
     fn circle(&self, x: f32, y: f32, r: f32, s: f32) {
-        let _ = self
+        let _ = self.sender.send(GraphicsCommand::Circle(CircleCommand {
-            .sender
-            .send(GraphicsCommand::Circle(crate::CircleInstance {
             center: [x, y],
             radius: r,
             stroke_width: s,
-                stroke_color: [1.0, 0.0, 0.0, 1.0],
-                fill_color: [1.0, 1.0, 1.0, 1.0],
         }));
     }
 
@@ -165,6 +178,24 @@ impl GraphicsAPI {
                 ctx.new_fn(move |_: &ContextRef, r: f64, g: f64, b: f64| gfx.cls(r, g, b))?,
             )?;
         }
+        {
+            let gfx = gfx.clone();
+            builder.export(
+                "color",
+                ctx.new_fn(move |_: &ContextRef, r: f32, g: f32, b: f32, a: f32| {
+                    gfx.color(r, g, b, a)
+                })?,
+            )?;
+        }
+        {
+            let gfx = gfx.clone();
+            builder.export(
+                "stroke",
+                ctx.new_fn(move |_: &ContextRef, r: f32, g: f32, b: f32, a: f32| {
+                    gfx.stroke(r, g, b, a)
+                })?,
+            )?;
+        }
         {
             let gfx = gfx.clone();
             builder.export(

types/graphics-core.d.ts

@@ -4,6 +4,10 @@ export function cls(r: number, g: number, b: number);
 
 export function print(msg: string);
 
+export function color(r: number, g: number, b: number, a: number);
+
+export function stroke(r: number, g: number, b: number, a: number);
+
 export function spr(
   x: number,
   y: number,