view from above, not center

draw_12_rects_and_send.py

@@ -1,108 +1,182 @@
 #!/usr/bin/env python3
 """
-draw_12_rects_thick_outline.py
+draw_12_slanted_top_bottom.py
 
-800 × 600 ARGB framebuffer.
+* 800 × 600 ARGB framebuffer (A,R,G,B each 1 byte)
-12 tall rectangles (aspect 1 : 12) placed side‑by‑side with a gap.
+* 12 rectangles, aspect 1 : 12, 5 px gap, 100 px empty margin at top & bottom
-Only the rectangle outline is drawn, the border thickness can be changed
+* each rectangle has an individual tilt angle (degrees) stored in
-with the constant LINE_THICKNESS (default = 3 pixels).
+  ROT_ANGLES_DEG[12]
-
+* the top and bottom edges are *slanted* while the left‑ and right‑hand
-The complete framebuffer is streamed to a TCP server listening on
+  edges remain perfectly vertical
-localhost:12345 (payload is prefixed with a 4‑byte big‑endian length).
+* outline colour = opaque white, thickness = LINE_THICKNESS (default = 3 px)
+* the raw buffer (with a 4‑byte length prefix) is streamed to a TCP server
+  listening on localhost:12345
 """
 
+import math
 import socket
 import sys
 
 # ----------------------------------------------------------------------
-# Frame‑buffer configuration
+# 1️⃣ Frame‑buffer configuration
 # ----------------------------------------------------------------------
 FB_WIDTH  = 800                # horizontal pixels
 FB_HEIGHT = 600                # vertical   pixels
 BPP       = 4                  # bytes per pixel (A,R,G,B)
 
 # ----------------------------------------------------------------------
-# Geometry of the 12 rectangles
+# 2️⃣ Margins & rectangle geometry (before slant)
 # ----------------------------------------------------------------------
-RECT_HEIGHT = 400                # fill the whole image vertically
+MARGIN_TOP    = 100            # empty band at the very top
-RECT_WIDTH  = RECT_HEIGHT // 12       # 600 / 12 = 50 px (maintains 1:12)
+MARGIN_BOTTOM = 150            # empty band at the very bottom
 
-SPACING = 10                            # pixels between two neighbours
+RECT_HEIGHT = FB_HEIGHT - MARGIN_TOP - MARGIN_BOTTOM   # usable height = 400 px
+RECT_WIDTH  = RECT_HEIGHT // 12                       # ≈ 33 px  (aspect 1 : 12)
+
+SPACING      = 10                                       # gap between rectangles
 TOTAL_RECT_W = 12 * RECT_WIDTH + 11 * SPACING
 X0_START     = (FB_WIDTH - TOTAL_RECT_W) // 2          # centre the whole strip
 
 # ----------------------------------------------------------------------
-# Outline thickness (change this to whatever you need)
+# 3️⃣ Outline thickness (you may change it)
 # ----------------------------------------------------------------------
-LINE_THICKNESS = 4                     # >=1 ; thicker than 1 pixel
+LINE_THICKNESS = 5            # ≥ 1 pixel
 
 # ----------------------------------------------------------------------
-# Helper – write a pixel into the bytearray (no bounds check for speed)
+# 4️⃣ Per‑rectangle tilt angles (degrees)
+# ----------------------------------------------------------------------
+# You can generate these programmatically, read them from a file, etc.
+ROT_ANGLES_DEG = [
+    0,   5,  10,  15,  20,  25,
+    30, 35,  40,  45,  50,  85
+]
+assert len(ROT_ANGLES_DEG) == 12, "Exactly 12 angles are required."
+
+# ----------------------------------------------------------------------
+# Helper – write a single pixel (bounds‑checked)
 # ----------------------------------------------------------------------
 def set_pixel(buf: bytearray, x: int, y: int, color: tuple) -> None:
     """Write an ARGB pixel at (x, y).  `color` = (A,R,G,B)."""
-    offset = (y * FB_WIDTH + x) * BPP
+    if 0 <= x < FB_WIDTH and 0 <= y < FB_HEIGHT:
-    buf[offset:offset + 4] = bytes(color)      # A,R,G,B order
+        off = (y * FB_WIDTH + x) * BPP
+        buf[off:off + 4] = bytes(color)      # A,R,G,B order
 
 
 # ----------------------------------------------------------------------
-# Fill a rectangular region (used for thick edges)
+# Helper – draw a thick line (Bresenham + square brush)
 # ----------------------------------------------------------------------
-def fill_rect(buf: bytearray, x0: int, y0: int, w: int, h: int, color: tuple) -> None:
+def draw_thick_line(buf: bytearray,
-    """Write a solid w × h block of `color` starting at (x0, y0)."""
+                    x0: int, y0: int,
-    # Clip to the frame buffer – safety net for very thick lines at the border
+                    x1: int, y1: int,
-    x0 = max(0, x0)
+                    color: tuple,
-    y0 = max(0, y0)
+                    thickness: int) -> None:
-    w = min(w, FB_WIDTH - x0)
+    """Draw a line from (x0,y0) to (x1,y1) using a square brush of `thickness`."""
-    h = min(h, FB_HEIGHT - y0)
+    dx = abs(x1 - x0)
+    dy = -abs(y1 - y0)
+    sx = 1 if x0 < x1 else -1
+    sy = 1 if y0 < y1 else -1
+    err = dx + dy                     # error term
 
-    row_bytes = w * BPP
+    while True:
-    pixel_bytes = bytes(color)
+        # paint a filled square centred on the current pixel
+        for ty in range(-thickness // 2, thickness // 2 + 1):
+            for tx in range(-thickness // 2, thickness // 2 + 1):
+                set_pixel(buf, x0 + tx, y0 + ty, color)
 
-    for y in range(y0, y0 + h):
+        if x0 == x1 and y0 == y1:
-        off = (y * FB_WIDTH + x0) * BPP
+            break
-        buf[off:off + row_bytes] = pixel_bytes * w
+        e2 = 2 * err
+        if e2 >= dy:
+            err += dy
+            x0 += sx
+        if e2 <= dx:
+            err += dx
+            y0 += sy
 
 
 # ----------------------------------------------------------------------
-# Build the framebuffer
+# 5️⃣ Build the framebuffer (background + white slanted‑top/bottom rectangles)
 # ----------------------------------------------------------------------
 def build_framebuffer() -> bytearray:
-    """Create an ARGB buffer, fill it black and draw the thick‑outline rectangles."""
+    """Create the ARGB buffer and draw the 12 rectangles with slanted top/bottom."""
-    # 1️⃣ background = opaque black (A,R,G,B)
+    # ----- background: opaque black -----
     fb = bytearray(FB_WIDTH * FB_HEIGHT * BPP)
-    bg_color = (255, 0, 0, 0)                # opaque black
+    bg = (255, 0, 0, 0)                # A,R,G,B = opaque black
-    fb[:] = bg_color * (FB_WIDTH * FB_HEIGHT)
+    fb[:] = bg * (FB_WIDTH * FB_HEIGHT)
+
+    WHITE = (255, 255, 255, 255)      # colour of the outlines
+
+    half_w = RECT_WIDTH // 2          # half the (un‑slanted) width
+
+    y_top    = MARGIN_TOP
+    y_bottom = FB_HEIGHT - MARGIN_BOTTOM - 1   # inclusive bottom row
 
-    # 2️⃣ draw each rectangle outline
     for idx in range(12):
-        # ── colour palette (feel free to change) ───────────────────────
+        # --------------------------------------------------------------
-        rect_color = (255, 255, 255, 255)         # opaque
+        # 1️⃣  Un‑slanted left edge of the rectangle (including spacing)
+        # --------------------------------------------------------------
+        orig_x0 = X0_START + idx * (RECT_WIDTH + SPACING)
 
-        # left‑most X coordinate of the *inner* rectangle (the border belongs to it)
+        # --------------------------------------------------------------
-        x0 = X0_START + idx * (RECT_WIDTH + SPACING)
+        # 2️⃣  Centre X coordinate (kept fixed while slanting)
-        y0 = 100
+        # --------------------------------------------------------------
-        w  = RECT_WIDTH
+        cx = orig_x0 + half_w
-        h  = RECT_HEIGHT
 
-        # ── thick edges ──────────────────────────────────────────────────
+        # --------------------------------------------------------------
+        # 3️⃣  Angle for this rectangle
+        # --------------------------------------------------------------
+        angle_rad = math.radians(ROT_ANGLES_DEG[idx])
+        sin_a = math.sin(angle_rad)
+
+        # --------------------------------------------------------------
+        # 4️⃣  Vertical offset applied to the *ends* of the top/bottom lines
+        #     (the spec says: sin(angle) * RECT_WITH / 2)
+        # --------------------------------------------------------------
+        offset = sin_a * half_w   # because RECT_WITH/2 == half_w
+
+        # --------------------------------------------------------------
+        # 5️⃣  Coordinates of the four line end‑points
+        # --------------------------------------------------------------
         # top edge
-        fill_rect(fb, x0, y0, w, LINE_THICKNESS, rect_color)
+        x0_top = cx - int(math.cos(angle_rad) * half_w)
+        y0_top = int(round(y_top    + offset))
+
+        x1_top = cx + int(math.cos(angle_rad) * half_w) 
+        y1_top = int(round(y_top    - offset))
 
         # bottom edge
-        fill_rect(fb, x0, y0 + h - LINE_THICKNESS, w, LINE_THICKNESS, rect_color)
+        x0_bot = cx - int(math.cos(angle_rad) * half_w)
+        y0_bot = int(round(y_bottom - offset))
 
-        # left edge
+        x1_bot = cx + int(math.cos(angle_rad) * half_w)
-        fill_rect(fb, x0, y0, LINE_THICKNESS, h, rect_color)
+        y1_bot = int(round(y_bottom + offset))
 
-        # right edge
+        # --------------------------------------------------------------
-        fill_rect(fb, x0 + w - LINE_THICKNESS, y0, LINE_THICKNESS, h, rect_color)
+        # 6️⃣  Draw the four sides
+        # --------------------------------------------------------------
+        # top (slanted)
+        draw_thick_line(fb, x0_top, y0_top, x1_top, y1_top,
+                        WHITE, LINE_THICKNESS)
+
+        # bottom (slanted)
+        draw_thick_line(fb, x0_bot, y0_bot, x1_bot, y1_bot,
+                        WHITE, LINE_THICKNESS)
+
+        # left vertical side – from the *top‑left* endpoint down to the
+        # *bottom‑left* endpoint
+        draw_thick_line(fb, x0_top, y0_top, x0_bot, y0_bot,
+                        WHITE, LINE_THICKNESS)
+
+        # right vertical side – from the *top‑right* endpoint down to the
+        # *bottom‑right* endpoint
+        draw_thick_line(fb, x1_top, y1_top, x1_bot, y1_bot,
+                        WHITE, LINE_THICKNESS)
 
     return fb
 
 
 # ----------------------------------------------------------------------
-# Send the buffer to the TCP server
+# 6️⃣ Send the framebuffer to the TCP server (localhost:12345)
 # ----------------------------------------------------------------------
 def send_framebuffer(buf: bytearray,
                      host: str = "127.0.0.1",
@@ -110,7 +184,7 @@ def send_framebuffer(buf: bytearray,
     """Open a TCP socket, connect, and stream the whole framebuffer."""
     try:
         with socket.create_connection((host, port), timeout=5) as sock:
-            # optional length prefix (many protocols expect it)
+            # optional 4‑byte length prefix – many simple protocols expect it
             length_prefix = len(buf).to_bytes(4, byteorder="big")
             sock.sendall(length_prefix + buf)
             print(f"✔ Sent {len(buf)} bytes to {host}:{port}")
@@ -119,7 +193,7 @@ def send_framebuffer(buf: bytearray,
 
 
 # ----------------------------------------------------------------------
-# Main entry point
+# 7️⃣ Main entry point
 # ----------------------------------------------------------------------
 def main() -> None:
     fb = build_framebuffer()
@@ -128,3 +202,4 @@ def main() -> None:
 
 if __name__ == "__main__":
     main()
+

draw_12_tilted_rects.c

@@ -0,0 +1,232 @@
+/*=====================================================================
+  draw_12_tilted_rects.c
+  ---------------------------------------------------------------
+  Creates an 800×600 ARGB frame‑buffer, draws 12 white rectangles
+  whose top and bottom edges are slanted (as in the Python example
+  you supplied) and streams the buffer to a TCP server on
+  localhost:12345.
+
+  Compile (Linux / macOS):
+      gcc -Wall -O2 draw_12_tilted_rects.c -lm -o draw_12_tilted_rects
+
+  Run:
+      ./draw_12_tilted_rects
+
+  -------------------------------------------------------------------*/
+#include <stdio.h>
+#include <stdlib.h>
+#include <stdint.h>
+#include <string.h>
+#include <math.h>
+#include <errno.h>
+#include <unistd.h>
+#include <arpa/inet.h>
+#include <sys/socket.h>
+
+#define FB_W            800          /* framebuffer width                */
+#define FB_H            600          /* framebuffer height               */
+#define BPP             4            /* bytes per pixel (A,R,G,B)        */
+#define FRAMEBUF_SIZE   (FB_W * FB_H * BPP)
+
+#define MARGIN_TOP      100
+#define MARGIN_BOTTOM   150
+
+#define SPACING         10            /* space between rectangles         */
+#define LINE_THICKNESS  4            /* thickness of outline (pixels)    */
+#define NUM_RECTS       12
+
+/*---------------------------------------------------------------*/
+/* 1. Per‑rectangle tilt angles (in degrees).  Edit as you wish. */
+static int16_t rotAnglesDeg[NUM_RECTS] = {
+    0,   5,  10,  15,  20,  25,
+    30, 35,  40,  45,  50,  55
+};
+
+/*---------------------------------------------------------------*/
+/* 2. ARGB colour helpers                                         */
+static const uint32_t COL_BLACK = 0xFF000000;   /* opaque black  */
+static const uint32_t COL_WHITE = 0xFFFFFFFF;   /* opaque white  */
+
+/*---------------------------------------------------------------*/
+/* 3. Simple pixel write (bounds‑checked)                         */
+static inline void set_pixel(uint8_t *fb, int x, int y, uint32_t col)
+{
+    if (x < 0 || x >= FB_W || y < 0 || y >= FB_H)
+        return;                     /* ignore out‑of‑bounds writes      */
+    uint32_t *dst = (uint32_t *)(fb + (y * FB_W + x) * BPP);
+    *dst = col;
+}
+
+/*---------------------------------------------------------------*/
+/* 4. Thick line – Bresenham + square brush                     */
+static void draw_thick_line(uint8_t *fb,
+                            int x0, int y0,
+                            int x1, int y1,
+                            uint32_t col,
+                            int thickness)
+{
+    int dx = abs(x1 - x0);
+    int dy = -abs(y1 - y0);
+    int sx = (x0 < x1) ? 1 : -1;
+    int sy = (y0 < y1) ? 1 : -1;
+    int err = dx + dy;               /* error term                     */
+
+    while (1) {
+        /* paint a square centred on the current pixel */
+        for (int ty = -thickness/2; ty <= thickness/2; ++ty) {
+            for (int tx = -thickness/2; tx <= thickness/2; ++tx) {
+                set_pixel(fb, x0 + tx, y0 + ty, col);
+            }
+        }
+        if (x0 == x1 && y0 == y1) break;
+        int e2 = 2 * err;
+        if (e2 >= dy) { err += dy; x0 += sx; }
+        if (e2 <= dx) { err += dx; y0 += sy; }
+    }
+}
+
+/*---------------------------------------------------------------*/
+/* 5. Build the whole framebuffer                                 */
+static void build_framebuffer(uint8_t *fb)
+{
+    /* 5.1 background = opaque black */
+    for (size_t i = 0; i < FRAMEBUF_SIZE; ++i) fb[i] = 0;
+    uint32_t *pix = (uint32_t *)fb;
+    for (size_t i = 0; i < FB_W * FB_H; ++i) pix[i] = COL_BLACK;
+
+    /* 5.2 geometry that does NOT depend on the angle */
+    const int usable_h   = FB_H - MARGIN_TOP - MARGIN_BOTTOM;          /* 400 */
+    const int rect_h     = usable_h;                                   /* 400 */
+    const int rect_w     = rect_h / 8;                                /* ≈33 */
+    const int half_w     = rect_w / 2;
+
+    const int total_rect_w = NUM_RECTS * rect_w + (NUM_RECTS - 1) * SPACING;
+    const int x0_start = (FB_W - total_rect_w) / 2;                    /* centre strip */
+
+    const int y_top    = MARGIN_TOP;
+    const int y_bottom = FB_H - MARGIN_BOTTOM - 1;                     /* inclusive */
+
+    /* 5.3 draw each rectangle */
+    for (int i = 0; i < NUM_RECTS; ++i) {
+        /* ---- centre X (kept fixed while tilting) ---- */
+        int orig_x0 = x0_start + i * (rect_w + SPACING);
+        int cx      = orig_x0 + half_w;          /* centre X coordinate */
+
+        /* ---- angle in radians, sin and cos ---- */
+        double angle_rad = rotAnglesDeg[i] * M_PI / 180.0;
+        double sin_a = sin(angle_rad);
+        double cos_a = cos(angle_rad);
+
+        /* ---- vertical offset applied to the end‑points of the top/bottom lines ---- */
+        double offset = sin_a * half_w;          /* sin(angle) * (RECT_W/2) */
+
+        /* ---- X offsets for the slanted top/bottom edges ---- */
+        double x_offset = cos_a * half_w;        /* cos(angle) * (RECT_W/2) */
+
+        /* ---- compute the four end‑points (rounded to nearest integer) ---- */
+        int x0_top = (int)round(cx - x_offset);
+        int y0_top = (int)round(y_top    + offset);
+        int x1_top = (int)round(cx + x_offset);
+        int y1_top = (int)round(y_top    - offset);
+
+        int x0_bot = (int)round(cx - x_offset);
+        int y0_bot = (int)round(y_bottom + offset);
+        int x1_bot = (int)round(cx + x_offset);
+        int y1_bot = (int)round(y_bottom - offset);
+
+        /* ---- draw the four sides (thick) ---- */
+        draw_thick_line(fb, x0_top, y0_top, x1_top, y1_top,
+                        COL_WHITE, LINE_THICKNESS);   /* top   */
+        draw_thick_line(fb, x0_bot, y0_bot, x1_bot, y1_bot,
+                        COL_WHITE, LINE_THICKNESS);   /* bottom*/
+
+        /* vertical sides – use the X coordinates of the *top* points;
+           the Y‑coordinates are taken from the corresponding top/bottom
+           endpoint, therefore they are automatically different when the
+           angle ≠ 0 or 180. */
+        draw_thick_line(fb, x0_top, y0_top, x0_bot, y0_bot,
+                        COL_WHITE, LINE_THICKNESS);   /* left  */
+        draw_thick_line(fb, x1_top, y1_top, x1_bot, y1_bot,
+                        COL_WHITE, LINE_THICKNESS);   /* right */
+    }
+}
+
+/*---------------------------------------------------------------*/
+/* 6. Send the framebuffer over TCP (length‑prefixed)            */
+static int send_framebuffer(const uint8_t *fb, size_t len,
+                            const char *host, uint16_t port)
+{
+    struct sockaddr_in srv;
+    int sock = socket(AF_INET, SOCK_STREAM, 0);
+    if (sock < 0) {
+        perror("socket");
+        return -1;
+    }
+
+    memset(&srv, 0, sizeof(srv));
+    srv.sin_family = AF_INET;
+    srv.sin_port   = htons(port);
+    if (inet_pton(AF_INET, host, &srv.sin_addr) <= 0) {
+        perror("inet_pton");
+        close(sock);
+        return -1;
+    }
+
+    if (connect(sock, (struct sockaddr *)&srv, sizeof(srv)) < 0) {
+        perror("connect");
+        close(sock);
+        return -1;
+    }
+
+    /* ---- optional 4‑byte length prefix (big‑endian) ---- */
+    uint32_t be_len = htonl((uint32_t)len);
+    if (write(sock, &be_len, sizeof(be_len)) != sizeof(be_len)) {
+        perror("write length prefix");
+        close(sock);
+        return -1;
+    }
+
+    /* ---- send the raw buffer ---- */
+    size_t sent = 0;
+    while (sent < len) {
+        ssize_t n = write(sock, fb + sent, len - sent);
+        if (n <= 0) {
+            perror("write framebuffer");
+            close(sock);
+            return -1;
+        }
+        sent += n;
+    }
+
+    close(sock);
+    return 0;
+}
+
+/*---------------------------------------------------------------*/
+int main(void)
+{
+    uint8_t *framebuf = malloc(FRAMEBUF_SIZE);
+    if (!framebuf) {
+        fprintf(stderr, "Failed to allocate framebuffer (%zu bytes)\n",
+                (size_t)FRAMEBUF_SIZE);
+        return EXIT_FAILURE;
+    }
+
+    while(1){
+        for(uint8_t i=0; i<sizeof(rotAnglesDeg)/sizeof(rotAnglesDeg[0]); i++)
+            rotAnglesDeg[i]=(rotAnglesDeg[i]+3)%180;
+
+	build_framebuffer(framebuf);
+	if (send_framebuffer(framebuf, FRAMEBUF_SIZE, "127.0.0.1", 12345) != 0) {
+	    fprintf(stderr, "Failed to send framebuffer\n");
+	    free(framebuf);
+	    return EXIT_FAILURE;
+	}
+
+	usleep(100000);
+    }
+
+    printf("Framebuffer (%zu bytes) sent successfully.\n", (size_t)FRAMEBUF_SIZE);
+    free(framebuf);
+    return EXIT_SUCCESS;
+}