typo correction

README.md

@@ -11,22 +11,22 @@ Live Examples:
 - https://johnedchristensen.github.io/diver/src/?filename=string.py
 ## About
 A simple python package that makes it easy to share interactive visuals on the web.
-Uses pyodide to run python directly in the browser, meaning code can be shared with others without any need to download/install/configure python. 
+Uses Pyodide to run python directly in the browser, meaning code can be shared with others without any need to download/install/configure python. 
 
 It also can be served from a static website server, meaning it is simple to embed visuals on personal websites/blogs.
 
 ## Features
 - [x] Render static images to a canvas element
 - [x] live reloading development server
-- [x] Render animated canvas/webgl
-- [ ] pythonic drawing api (with beginner/user friendly documentation/examples)
+- [x] Render animated canvas/WebGL
+- [ ] pythonic drawing API (with beginner/user friendly documentation/examples)
 - [x] Write code in browser
 - [-] in browser LSP features like inline docs, autocomplete, linting, type checking
 - [ ] Human friendly documentation (with live running/editable examples of course)
 - [ ] Share feature. Generate link to custom sketches
-- [ ] Embeding mode, for embedding in blog posts, etc.
-- [ ]? collaborative editing/ 1 way live sharing 
-    - Only planning to do this if it doesn't require hosting a server. Currently looking into yjs + codemirror
+- [ ] Embedding mode, for embedding in blog posts, etc.
+- [ ]? Collaborative editing/ 1 way live sharing 
+    - Only planning to do this if it doesn't require hosting a server. Currently looking into yjs + CodeMirror
 
 ## Usage
 The current state of the library is in very active development. Expect breaking changes.
@@ -35,7 +35,7 @@ The current state of the library is in very active development. Expect breaking
 
 ### 2D Canvas API
 
-[This example (squares.py)](https://johnedchristensen.github.io/diver/src/?filename=squares.py) draws to canvas using the javascript canvas API. This is much more performant, and can run at higher resolutions/framerates. To use this mode you'll need to know (or learn) how to use the [canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
+[This example (squares.py)](https://johnedchristensen.github.io/diver/src/?filename=squares.py) draws to canvas using the JavaScript canvas API. This is much more performant, and can run at higher resolutions/frame rates. To use this mode you'll need to know (or learn) how to use the [canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
 
 ### Best of both worlds (for me)
 
@@ -44,7 +44,7 @@ A more user friendly API is planned that will have better documentation integrat
 
 ## Limitations
 
-While many popular python packages run great in the browser, not all packages can. See https://pyodide.org/en/stable/usage/packages-in-pyodide.html for a list of packages that will work out of the box.
+While many popular python packages run great in the browser, not all packages can. See https://Pyodide.org/en/stable/usage/packages-in-Pyodide.html for a list of packages that will work out of the box.
 
 ## Development
 - [ ] Add details on how to get up and running

src/sketches/leaves.py

@@ -0,0 +1,150 @@
+from js import CanvasRenderingContext2D
+from diver import CanvasManager
+import math as m
+from dataclasses import dataclass
+import numpy as np
+
+WIDTH = 3200
+HEIGHT = WIDTH
+print("hello from draw.py")
+
+
+@dataclass
+class Point:
+    x: float
+    y: float
+
+
+@dataclass
+class Color:
+    r: int
+    g: int
+    b: int
+    a: int = 255
+
+    def to_string(self):
+        return f"rgba({self.r},{self.g},{self.b},{self.a})"
+
+
+@dataclass
+class DiverCtx:
+    ctx: CanvasRenderingContext2D
+    def draw_line(self, p1: Point, p2: Point|None = None, c: Color|None=None,width: int|None = None):
+        ctx = self.ctx
+        if c is not None:
+            ctx.strokeStyle = c.to_string()
+        if width is not None:
+            ctx.lineWidth = 1
+
+        if p2 is not None:
+            ctx.moveTo(p1.x, p1.y)
+            ctx.lineTo(p2.x, p2.y)
+        if p1 is not None:
+            ctx.lineTo(p1.x, p1.y)
+        ctx.stroke()
+    def drawT1(self,width=50):
+
+        ctx = self.ctx
+        ctx.save()
+        ctx.moveTo(0,0)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-m.pi/2)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-(m.pi-m.pi/2))
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-m.pi/2)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.stroke()
+        ctx.restore()
+
+    def drawT2(self,width=50):
+        #angle=30
+        ctx = self.ctx
+        ctx.save()
+        ctx.moveTo(0,0)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-m.pi/6)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-(m.pi-m.pi/6))
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-m.pi/6)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.stroke()
+        ctx.restore()
+
+    def drawT3(self,width=50):
+        #angle=30
+        ctx = self.ctx
+        ctx.save()
+        ctx.moveTo(0,0)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-m.pi/4)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-(m.pi-m.pi/4))
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.rotate(-m.pi/4)
+        ctx.lineTo(width,0)
+        ctx.translate(width,0)
+        ctx.stroke()
+        ctx.restore()
+
+
+
+
+def update(self: CanvasManager, t):
+    canvas = self.canvas
+    dtx = DiverCtx(self.ctx)
+    canvas.width = WIDTH
+    canvas.height = HEIGHT
+    w, h = WIDTH, HEIGHT
+
+    dtx.ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    dtx.ctx.translate(w * 0.5, h * 0.5)
+    dtx.ctx.scale(4,4)
+    dtx.ctx.lineWidth = 2
+    dtx.ctx.strokeStyle = "#d3c6aa"
+
+    rotate_angle =  2*m.pi*t /1000  * 1/2
+    a1 = .2
+    wave1 = (1-a1)+m.sin(rotate_angle) *a1
+    a2 = .2
+    wave2 = .3+m.sin(rotate_angle) *a2
+    l = 50 
+    l1 = l +l *wave1
+    l2 = l *wave2
+    for i in range(12):
+        dtx.drawT2(l1)
+        dtx.ctx.rotate(m.pi/6)
+
+    dtx.ctx.lineWidth = 1
+    for i in range(12):
+        dtx.drawT2(l1//2)
+        dtx.ctx.rotate(m.pi/6)
+
+    dtx.ctx.strokeStyle = "#d3c6aa"
+    dtx.ctx.beginPath()
+    dtx.ctx.fillStyle = "#83C092"
+    dtx.ctx.lineWidth = 1
+    for i in range(12):
+        dtx.drawT2(l2)
+        dtx.ctx.rotate(m.pi/6)
+
+    dtx.ctx.fill()
+    for i in range(12):
+        dtx.drawT2(l2)
+        dtx.ctx.rotate(m.pi/6)
+
+
+canvasManager = CanvasManager(update)