Add app.background

README.md

@@ -204,8 +204,6 @@ app.scene("#000000");
 
 <a name="app-background" href="#app-background">#</a> app.**background**(_ch[, fg[, bg]]_)
 
-> WIP
-
 ```js
 app.background("@", "steelblue", "orange");
 ```

rust/src/attributes.rs

@@ -7,6 +7,10 @@ impl Renderer {
     pub fn stroke(&mut self, ch: u32, ch1: u32, fg: u32, bg: u32) {
         self.stroke_color = [ch, ch1, fg, bg];
     }
+    pub fn background(&mut self, ch: u32, ch1: u32, fg: u32, bg: u32) {
+        self.has_background = true;
+        self.background_color = [ch, ch1, fg, bg];
+    }
 }
 
 #[cfg(test)]

rust/src/pipeline.rs

@@ -1,6 +1,6 @@
 extern crate wasm_bindgen;
 use crate::{
-    globals::{Edge, Matrix3, Vector3, Vertex, CELL_SIZE, NULL_VALUE},
+    globals::{Color, Edge, Matrix3, Vector3, Vertex, CELL_SIZE, NULL_VALUE},
     matrix3::{matrix3_identity, matrix3_transform},
     renderer::Renderer,
     utils::{ascending, map},
@@ -155,17 +155,46 @@ fn fragment_processing(
     }
 }
 
+fn background_processing(
+    has_background: bool,
+    color: Color,
+    buffer: &mut Vec<u32>,
+    rows: isize,
+    cols: isize,
+) {
+    if has_background {
+        for x in 0..cols {
+            for y in 0..rows {
+                let index: usize = ((x + y * cols) as usize) * CELL_SIZE;
+                buffer[index] = color[0];
+                buffer[index + 1] = color[1];
+                buffer[index + 2] = color[2];
+                buffer[index + 3] = color[3];
+            }
+        }
+    } else {
+        buffer.fill(NULL_VALUE);
+    }
+}
+
 #[wasm_bindgen]
 impl Renderer {
     pub fn render(&mut self) -> *const u32 {
-        self.buffer.fill(NULL_VALUE);
+        background_processing(
+            self.has_background,
+            self.background_color,
+            &mut self.buffer,
+            self.rows as isize,
+            self.cols as isize,
+        );
         for shape in &self.shapes {
             let transformed: Vec<Vertex> = vertex_processing(&shape.vertices, &shape.matrix);
             let primitive: Vec<Edge> = primitive_assembly(&transformed, shape.closed);
             let fragment: Vec<Vertex> = rasterization(&primitive);
             let clipped: Vec<usize> = clipping(&fragment, self.cols as isize, self.rows as isize);
             fragment_processing(&clipped, &fragment, &mut self.buffer, self.cols as isize);
         }
+        self.has_background = false;
         self.shapes.clear();
         self.stacks.clear();
         self.mode_view = matrix3_identity();
@@ -184,6 +213,7 @@ mod tests {
         renderer.render();
         assert_eq!(renderer.shapes.len(), 0);
         assert_eq!(renderer.stacks.len(), 0);
+        assert_eq!(renderer.has_background, false);
         assert_eq!(renderer.mode_view[0], 1.0);
         assert_eq!(renderer.mode_view[4], 1.0);
         assert_eq!(renderer.mode_view[8], 1.0);

rust/src/renderer.rs

@@ -11,6 +11,8 @@ pub struct Renderer {
     pub(crate) cols: usize,
     pub(crate) rows: usize,
     pub(crate) stroke_color: Color,
+    pub(crate) has_background: bool,
+    pub(crate) background_color: Color,
     pub(crate) buffer: Vec<u32>,
     pub(crate) shapes: Vec<Shape>,
     pub(crate) mode_view: Matrix3,
@@ -27,6 +29,8 @@ impl Renderer {
             rows,
             buffer,
             stroke_color: [NULL_VALUE, NULL_VALUE, NULL_VALUE, NULL_VALUE],
+            has_background: false,
+            background_color: [NULL_VALUE, NULL_VALUE, NULL_VALUE, NULL_VALUE],
             mode_view: matrix3_identity(),
             stacks: vec![],
             shapes: vec![],

src/app/attributes.js

@@ -12,6 +12,12 @@ export function app$stroke(ch, fg = "#ffffff", bg = null) {
   return this;
 }
 
+export function app$background(ch, fg = "#ffffff", bg = null) {
+  const [n, n1 = NULL_VALUE] = encodeChar(ch);
+  this._renderer.background(n, n1, encodeColor(fg), encodeColor(bg));
+  return this;
+}
+
 function encodeColor(color) {
   if (color === NULL_VALUE || color === null) return NULL_VALUE;
   const { r, g, b } = rgb(color);

src/app/index.js

@@ -1,7 +1,7 @@
 import { Terminal } from "../terminal.js";
 import { Renderer } from "../wasm/index.js";
 import { app$render } from "./render.js";
-import { app$scene, app$stroke } from "./attributes.js";
+import { app$scene, app$stroke, app$background } from "./attributes.js";
 import { app$point, app$line, app$rect, app$pixels } from "./shapes.js";
 import { app$call } from "./control.js";
 import {
@@ -52,6 +52,7 @@ Object.defineProperties(App.prototype, {
   pushMatrix: { value: app$pushMatrix, writable: true, configurable: true },
   popMatrix: { value: app$popMatrix, writable: true, configurable: true },
   stroke: { value: app$stroke, writable: true, configurable: true },
+  background: { value: app$background, writable: true, configurable: true },
   scene: { value: app$scene, writable: true, configurable: true },
   point: { value: app$point, writable: true, configurable: true },
   line: { value: app$line, writable: true, configurable: true },

test/apps/app-line.js

@@ -1,10 +1,10 @@
-import { createApp, background } from "./utils";
+import { createApp } from "./utils";
 
 export async function appLine() {
   const app = await createApp({ cols: 15, rows: 15 });
 
   app
-    .call(background, "·", "#aaa")
+    .call((app) => app.background("·", "#aaa"))
     .call((app) => app.translate(Math.floor(app.cols() / 2), Math.floor(app.rows() / 2)))
     .call((app) => {
       const count = 16;

test/apps/app-rect.js

@@ -1,12 +1,14 @@
-import { createApp, background } from "./utils";
+import { createApp } from "./utils";
 
 export async function appRect() {
   const app = await createApp({ cols: 6, rows: 6 });
 
-  app.call(background, "·", "#aaa").call((app) => {
-    app.stroke("@");
-    app.rect(0, 0, 5, 5).rect(5, 0, 1, 0).rect(5, 5, 0, 0).rect(0, 5, 1, 1);
-  });
+  app
+    .call((app) => app.background("·", "#aaa"))
+    .call((app) => {
+      app.stroke("@");
+      app.rect(0, 0, 5, 5).rect(5, 0, 1, 0).rect(5, 5, 0, 0).rect(0, 5, 1, 1);
+    });
 
   return app.render().node();
 }

test/apps/app-size.js

@@ -1,8 +1,8 @@
-import { createApp, background } from "./utils";
+import { createApp } from "./utils";
 
 export async function appSize() {
   const app = await createApp({ width: 100, height: 60 });
-  app.scene("#4e79a7").call(background, "+", "#76b7b2");
+  app.scene("#4e79a7").background("+", "#76b7b2");
   return app.render().node();
 }
 

test/apps/app-transform.js

@@ -1,11 +1,11 @@
-import { createApp, background } from "./utils";
+import { createApp } from "./utils";
 
 export async function appTransform() {
   const app = await createApp({ rows: 10, cols: 10 });
 
   app
     .scene("#4e79a7")
-    .call(background, "+", "#76b7b2")
+    .call((app) => app.background("+", "#76b7b2"))
     .call((app) => app.stroke("O").point(1, 1))
     .call((app) => app.translate(1, 1).scale(2, 2))
     .call((app) => app.stroke("@").point(1, 1))

test/apps/utils.js

@@ -39,12 +39,3 @@ export function clearable(app, ...clears) {
     clears.forEach((d) => d());
   };
 }
-
-export function background(app, ch, fg) {
-  app.stroke(ch, fg);
-  for (let i = 0; i < app.cols(); i++) {
-    for (let j = 0; j < app.rows(); j++) {
-      app.point(i, j);
-    }
-  }
-}