{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "3ad9d78d-8bb6-4d4b-ab5f-fd7bc8ec11ca",
   "metadata": {},
   "source": [
    "## Fast Batch Drawing:\n",
    "To speed up the drawing of many objects ipycanvas offers a batch api to draw many items to the canvas quickly"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3ea1b15d-478b-41a2-83a1-3e66e5ff5d24",
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "from ipycanvas import Canvas, hold_canvas\n",
    "import math"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b3b9c73f-d4fe-4c80-978e-60f4932c69d7",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Batch Draw Rects"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7de46419-aefa-4039-a27c-ad92f903a5ff",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "n_rects = 1000\n",
    "x = np.random.randint(0, canvas.width, size=(n_rects))\n",
    "y = np.random.randint(0, canvas.width, size=(n_rects))\n",
    "width = np.random.randint(10, 40, size=(n_rects))\n",
    "height = np.random.randint(10, 40, size=(n_rects))\n",
    "with hold_canvas():\n",
    "    canvas.fill_style = \"cyan\"\n",
    "    canvas.fill_rects(x, y, width, height)\n",
    "    canvas.line_width = 2\n",
    "    canvas.stroke_style = \"black\"\n",
    "    canvas.stroke_rects(x, y, width, height)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bd1cb3db-2ceb-49d3-87aa-9929b262a066",
   "metadata": {},
   "source": [
    "# Batch Draw Styled Rects"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f051cd10-5cf3-4a6f-bcb3-d10d5528c185",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "n_rects = 1000\n",
    "x = np.random.randint(0, canvas.width, size=(n_rects))\n",
    "y = np.random.randint(0, canvas.width, size=(n_rects))\n",
    "width = np.random.randint(10, 40, size=(n_rects))\n",
    "height = np.random.randint(10, 40, size=(n_rects))\n",
    "colors_fill = np.random.randint(0, 255, size=(n_rects, 3))\n",
    "colors_outline = np.random.randint(0, 255, size=(n_rects, 3))\n",
    "alphas = np.random.random(n_rects)\n",
    "with hold_canvas():\n",
    "    canvas.fill_styled_rects(x, y, width, height, color=colors_fill, alpha=alphas)\n",
    "    canvas.line_width = 2\n",
    "    canvas.stroke_styled_rects(x, y, width, height, color=colors_outline, alpha=alphas)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2117b808-65d2-44dd-a780-dd9100809a68",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Batch Draw Circles\n",
    "draw many circles each cirlcle has the same color"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "82b532b6-06b0-4255-b4fa-e03a6363ddf0",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "# draw n circles with and random radii, random colors, and random alpha values\n",
    "n_circles = 100\n",
    "x = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "y = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "r = np.random.randint(10, 20, size=(n_circles))\n",
    "canvas.fill_style = \"red\"\n",
    "alphas = np.random.random(n_circles)\n",
    "with hold_canvas():\n",
    "    # the filled circles\n",
    "    canvas.fill_circles(x, y, r)\n",
    "    # the outlines\n",
    "    canvas.stroke_style = \"blue\"\n",
    "    canvas.stroke_circles(x, y, r)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7851edd8-2a84-4493-b331-a7cff5a08079",
   "metadata": {},
   "source": [
    "## Batch Draw Styled Circles\n",
    "draw many circles where each circle can have a diferent color and alpha channel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ce545eee-d9c0-47ab-afb7-274fa22389cd",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "n_circles = 1000\n",
    "x = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "y = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "r = np.random.randint(10, 20, size=(n_circles))\n",
    "colors_fill = np.random.randint(0, 255, size=(n_circles, 3))\n",
    "colors_outline = np.random.randint(0, 255, size=(n_circles, 3))\n",
    "alphas = np.random.random(n_circles)\n",
    "with hold_canvas():\n",
    "    canvas.fill_styled_circles(x, y, r, color=colors_fill, alpha=alphas)\n",
    "    canvas.line_width = 2\n",
    "    canvas.stroke_styled_circles(x, y, r, color=colors_outline)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "279d10b5-ed1b-4fa6-8bbe-f25313ad0475",
   "metadata": {},
   "source": [
    "# Batch Draw Arcs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e36c1407-9a46-42fa-b06a-1a8283feee86",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "n_circles = 1000\n",
    "x = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "y = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "r = np.random.randint(10, 20, size=(n_circles))\n",
    "start_angle = np.random.randint(0, 360, size=(n_circles))\n",
    "end_angle = np.random.randint(0, 360, size=(n_circles))\n",
    "start_angle = 0\n",
    "end_angle = math.pi\n",
    "start_angle = np.random.random(n_circles) * math.pi\n",
    "end_angle = np.random.random(n_circles) * math.pi\n",
    "alphas = np.random.random(n_circles)\n",
    "with hold_canvas():\n",
    "    canvas.fill_style = \"cyan\"\n",
    "    canvas.fill_arcs(x, y, r, start_angle, end_angle)\n",
    "    canvas.line_width = 1\n",
    "    canvas.stroke_style = \"black\"\n",
    "    canvas.stroke_arcs(x, y, r, start_angle, end_angle)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "549983e9-f9bb-4ca7-a024-8f1307f15ba8",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Batch Draw Styled Arcs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1e4431ab-e064-448d-ab72-decba895bb7c",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "n_circles = 20\n",
    "x = np.random.randint(0, canvas.width, size=(n_circles))\n",
    "y = np.random.randint(0, canvas.height, size=(n_circles))\n",
    "r = np.random.randint(30, 50, size=(n_circles))\n",
    "start_angle = np.random.random(n_circles) * math.pi\n",
    "end_angle = np.random.random(n_circles) * math.pi\n",
    "colors_fill = np.random.randint(0, 255, size=(n_circles, 3))\n",
    "colors_outline = np.random.randint(0, 255, size=(n_circles, 3))\n",
    "alphas = np.random.random(n_circles)\n",
    "with hold_canvas():\n",
    "    canvas.fill_styled_arcs(x, y, r, start_angle, end_angle, color=colors_fill)\n",
    "    canvas.line_width = 3\n",
    "    canvas.stroke_styled_arcs(x, y, r, start_angle, end_angle, color=colors_outline)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "afea33c6-c6a8-4528-a1d9-7535a6810e9a",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Batch Draw Polygons / LineSegments\n",
    "## Case 1: All Polygons / LineSegments have the same number of points"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "885a5ec6-06a8-4430-815e-63c06f6fa2cb",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "n_polygons = 50\n",
    "\n",
    "# each polygon has 4 points\n",
    "n_points_per_polygon = 4\n",
    "\n",
    "polygons = np.zeros([n_polygons, n_points_per_polygon, 2])\n",
    "\n",
    "polygons[:, 0, 0] = 0.0\n",
    "polygons[:, 0, 1] = 0.0\n",
    "\n",
    "polygons[:, 1, 0] = 1.0\n",
    "polygons[:, 1, 1] = 0.0\n",
    "\n",
    "polygons[:, 2, 0] = 1.0\n",
    "polygons[:, 2, 1] = 1.0\n",
    "\n",
    "polygons[:, 3, 0] = 0.0\n",
    "polygons[:, 3, 1] = 1.0\n",
    "\n",
    "colors_fill = np.random.randint(0, 255, size=(n_polygons, 3))\n",
    "colors_outline = np.random.randint(0, 255, size=(n_polygons, 3))\n",
    "\n",
    "# scale each polygon\n",
    "polygons *= np.linspace(1.0, 200.0, num=n_polygons)[:, None, None]\n",
    "\n",
    "# translate each polygon\n",
    "polygons += np.linspace(1.0, 100.0, num=n_polygons)[:, None, None]\n",
    "\n",
    "points_per_polygon = np.ones([n_polygons]) * n_points_per_polygon\n",
    "with hold_canvas():\n",
    "    canvas.stroke_styled_polygons(polygons, color=colors_fill)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6bf31d36-01af-484c-9360-b97f504532a2",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=800, height=300)\n",
    "\n",
    "n_line_segments = 20\n",
    "\n",
    "n_points_per_line_segment = 500\n",
    "\n",
    "line_segments = np.zeros([n_line_segments, n_points_per_line_segment, 2])\n",
    "\n",
    "x = np.linspace(0, canvas.width, num=n_points_per_line_segment)[None, :]\n",
    "line_segments[:, :, 0] = np.linspace(0, canvas.width, num=n_points_per_line_segment)[\n",
    "    None, :\n",
    "]\n",
    "line_segments[:, :, 1] = (30.0 * np.sin(x * 0.1))[None, :]\n",
    "\n",
    "colors_outline = np.random.randint(0, 255, size=(n_polygons, 3))\n",
    "\n",
    "# translate line segments in y direction\n",
    "line_segments[:, :, 1] += np.linspace(1.0, canvas.height, num=n_line_segments)[:, None]\n",
    "\n",
    "with hold_canvas():\n",
    "    canvas.stroke_styled_line_segments(line_segments, color=colors_fill)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3fb21075-bb46-41a1-b001-5d90f72ebebd",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Batch Draw Polygons / LineSegments\n",
    "## Case 2: Polygons / LineSegments can have different number of Points. Points are specified as list of arrays"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "34643bf9-d9d9-4296-aa02-67531e6f500f",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "canvas = Canvas(width=400, height=400)\n",
    "\n",
    "triangle = [(0, 0), (0, 40), (30, 40)]  # triangle\n",
    "rectangle = [(100, 100), (300, 100), (300, 200), (100, 200)]  # rectangle\n",
    "irregular = np.random.randint(0, 400, size=(5, 2))  # irregular with 5 sides\n",
    "polygons = [triangle, rectangle, irregular]\n",
    "colors = [(255, 0, 0), (0, 255, 0), (0, 0, 255)]\n",
    "\n",
    "with hold_canvas():\n",
    "    canvas.fill_styled_polygons(polygons, color=colors)\n",
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "24ac4301-a9c5-473f-bff1-376e62cc01f1",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Batch Draw Polygons / LineSegments\n",
    "## Case 2: Polygons / LineSegments can have different number of Points. Points given as a flat array"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "272deb5a-fc18-44b0-af01-04f3afb28247",
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=400, height=400)\n",
    "n_polygons = 20\n",
    "points_per_polygon = np.random.randint(3, 6, size=n_polygons)\n",
    "total_points = np.sum(points_per_polygon)\n",
    "polygons = np.random.randint(0, 400, size=[total_points, 2])\n",
    "alpha = np.random.random(n_polygons)\n",
    "colors_fill = np.random.randint(0, 255, size=(n_polygons, 3))\n",
    "colors_outline = np.random.randint(0, 255, size=(n_polygons, 3))\n",
    "\n",
    "with hold_canvas():\n",
    "    # the filling\n",
    "    canvas.fill_styled_polygons(\n",
    "        polygons, points_per_polygon=points_per_polygon, color=colors_fill, alpha=alpha\n",
    "    )\n",
    "\n",
    "    # draw outlines ontop where each line has the same style\n",
    "    canvas.stroke_style = \"black\"\n",
    "    canvas.line_width = 2\n",
    "    canvas.stroke_polygons(polygons, points_per_polygon=points_per_polygon)\n",
    "canvas"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}