diff --git a/README.md b/README.md index caa5846..418ed9a 100644 --- a/README.md +++ b/README.md @@ -4,18 +4,19 @@ [Try it on codepen](https://codepen.io/Davay/pen/eYGeGMZ) -![avatar](https://raw.githubusercontent.com/DeFUCC/gun-avatar/master/avatars.gif) +![avatar](https://gun-avatar.js.org/avatars.gif) It takes a public key of 88 symbols and creates a base64 code to be set to an img tag. SEA public key consists of 87 symbols including a dot in the middle, so we can consider it as `(7*4+1)*2`. So the steps to generate a unique picture for the key are like that: -1. We cut one digit from each part of the key. It gives us a pair of numbers, that we use to generate a grayscale vertical background gradient (light or dark) -2. Then we break the remaining 42 characters of each part into 4 groups of 7 numbers. Each group describes a circle: it's coordinates (x,y), it's radius (r) and 4 color parameters in the HSLA model (h,s,l,a). We place these circles on one side of a square canvas. -3. Circles from the first part of the key are bigger and are placed with normal composite mode. Circles from the second part are smaller and placed with 'lighten' composite mode. -4. Then half of the canvas gets reflected to create a nice symmetric 'portrait' to be used as an avatar of a SEA public key. +1. We split the public key in two halves by the dot `.`. +2. We cut one digit from each part of the key. It gives us a pair of numbers, that we use to generate a grayscale vertical background gradient (light or dark) +3. Then we break the remaining 42 characters of each part into 4 groups of 7 numbers. Each group describes a circle: it's coordinates (x,y), it's radius (r) and 4 color parameters in the HSLA model (h,s,l,a). We place these circles on one side of a square canvas. +4. Circles from the first part of the key are bigger and are placed with normal composite mode. Circles from the second part are smaller and placed with 'lighten' composite mode. +5. Then half of the canvas gets reflected to create a nice symmetric 'portrait' to be used as an avatar of a SEA public key. -![avatars](https://raw.githubusercontent.com/DeFUCC/gun-avatar/master/avatar-list.png) +![avatars](https://gun-avatar.js.org/avatar-list.png) ## How to install? @@ -31,16 +32,16 @@ After you add the script to the page you get a custom element `` f ```html ``` @@ -52,15 +53,15 @@ Add the script to the page and then add `gun-avatar` class to an img tag along w ```html ``` @@ -74,10 +75,10 @@ Install the `gun-avatar` package and import the `gunAvatar` function. Then you c import { gunAvatar } from "https://cdn.skypack.dev/gun-avatar"; const pub = - "YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"; + "YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"; document.addEventListener("DOMContentLoaded", () => { - document.getElementById("avatar").src = gunAvatar({ pub, size: 200 }); + document.getElementById("avatar").src = gunAvatar({ pub, size: 200 }); }); ``` @@ -91,10 +92,10 @@ document.addEventListener("DOMContentLoaded", () => { ```html ``` @@ -109,3 +110,4 @@ document.addEventListener("DOMContentLoaded", () => { - [x] add more draw modes - [x] `circles` - [x] `squares` + - [ ] `triangles`? diff --git a/src/patch.js b/src/patch.js index f5d01ca..11534b0 100644 --- a/src/patch.js +++ b/src/patch.js @@ -13,9 +13,7 @@ export default () => { if (!document) return - if (!needPoly()) { - return - } + if (!needPoly()) return const proto = CanvasRenderingContext2D.prototype const original = proto.drawImage