{"id":21884999,"url":"https://github.com/codegasms/fluxicons","last_synced_at":"2025-03-22T01:40:21.562Z","repository":{"id":232341319,"uuid":"783523281","full_name":"codegasms/fluxicons","owner":"codegasms","description":"Identicons \u0026 Canvas Implementation For FLUX","archived":false,"fork":false,"pushed_at":"2024-04-30T15:49:44.000Z","size":110,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T23:15:26.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codegasms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-08T04:08:26.000Z","updated_at":"2024-04-30T15:49:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"569c4391-9884-456b-8f0c-af9fc60648fc","html_url":"https://github.com/codegasms/fluxicons","commit_stats":null,"previous_names":["codegasms/fluxicons"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegasms%2Ffluxicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegasms%2Ffluxicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegasms%2Ffluxicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegasms%2Ffluxicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegasms","download_url":"https://codeload.github.com/codegasms/fluxicons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244894308,"owners_count":20527669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T10:18:14.867Z","updated_at":"2025-03-22T01:40:21.543Z","avatar_url":"https://github.com/codegasms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fluxicon (Identicon For FLUX)\n\n## Usage\n\n```typescript\n    import fluxicons from '@codegasms/fluxicons';\n\n    const message = 'Hello World';\n    const size = 512;\n\n    // Method 1\n    const fluxiconData: Buffer = fluxicons.fluxicon(message, size, 'data');\n    const fluxiconBuffer: Buffer = fluxicons.fluxicon(fluxiconData);\n\n    fs.writeFileSync('fluxicons_hello_world.png', fluxiconBuffer);\n\n    // Method 2\n    const fluxiconBuffer: Buffer = fluxicons.fluxicon(message, size, 'image');\n    fs.writeFileSync('fluxicons_hello_world.png', fluxiconBuffer);\n```\n\n## What Is A Fluxicon?\n\n```Fluxicons```, our Identicons, are simple “pixel” sprites that are generated using a hash (using ```@codegasms/sha256```) of (anything).\n\nThe algorithm walks through the hash and generates a tom loads of properties such as:\n\n1. The shape defining the Fluxicon grid\n2. Color of the Fluxicon\n3. Type of the shapes\n4. Rotation of the shapes\n5. Inversion of the shapes\n\nThese shapes are then stitched together to ```create a buffer``` which defines the Fluxicon. Due to a variety in the properties, each generated Fluxicon is ensured to be ```unique```.\n\n## Generating A Fluxicon\n\n### Defining Shapes In The Grid\n\nThe ```Grid``` is indexed as follows:\n\n```shell\n   0  1  2  3  4\n   5  6  7  8  9\n  10 11 12 13 14\n  15 16 17 18 19\n  20 21 22 23 24\n```\n\nWe need to create some shapes using combination of indices.\n\n| Shape# | Indices                    | Shape Description                                     |\n|--------|----------------------------|------------------------------------------------------|\n| Shape 0      | (0, 4, 24, 20)             | ```Square Shape (4x4), Covers The Entire Grid```           |\n| Shape 1      | (0, 4, 20)                 | ```Triangle Shape (3x3), Covers The Top-Left Corner```     |\n| Shape 2      | (2, 24, 20)                | ```Equilateral Triangle Shape (3x3), Covers The Middle```  |\n| Shape 3      | (0, 2, 20, 22)             | ```Z-Shape, Covers The Left Side```                        |\n| Shape 4      | (2, 14, 22, 10)            | ```Diamond Shape, Covers The Middle```                      |\n| Shape 5      | (0, 14, 24, 22)            | ```Kite Shape, Covers The Middle With Buldge On Right```    |\n| Shape 6      | (2, 24, 22, 13, 11, 22, 20)| ```Serpienski Triangle Shape, Covers The Middle```          |\n| Shape 7      | (0, 14, 22)                | ```Triangle Shape, Covers The Middle```                     |\n| Shape 8      | (6, 8, 18, 16)             | ```Square Shape (2x2), Covers The Middle```                 |\n| Shape 9      | (4, 20, 10, 12, 2)         | ```2 x Triangle Shape, Covers The Middle With Buldge On Left``` |\n| Shape 10     | (0, 2, 12, 10)             | ```Square Shape (2x2), Covers The Top-Left Corner```        |\n| Shape 11     | (10, 14, 22)               | ```Triangle Shape, Covers The Bottom With Buldge Towards Bottom``` |\n| Shape 12     | (20, 12, 24)               | ```Triangle Shape, Covers The Bottom With Buldge Towards Top``` |\n| Shape 13     | (10, 2, 12)                | ```Triangle Shape, Covers The Top-Left Corner With Buldge Towards Right``` |\n| Shape 14     | (0, 2, 10)                 | ```Triangle Shape, Covers The Top-Left Corner With Buldge``` |\n\n```javascript\nvar shape0 = new Array(0, 4, 24, 20);\n...\nvar shape14 = new Array(0, 2, 10);\n\nvar middleShapeType = new Array(0, 4, 8, 15)   // shape0, shape4, shape8, Special shape (Inverse Middle Shape)\nvar shapeType = new Array(shape0, shape1, shape2, shape3, shape4, shape5, shape6, shape7, shape8, shape9, shape10, shape11, shape12, shape13, shape14, shape0);\n```\n\n### Defining Properties For The Grid\n\nThe entire ```Grid``` is divided into 3 parts:\n\n1. Center Shape (Middle Shape)\n2. Corner Shape (Top-Left, Top-Right, Bottom-Left, Bottom-Right)\n3. Side Shape (Top, Bottom, Left, Right)\n\nWe have to define the following set of properties for each of the Shapes:\n\n1. Type (Taken from the ```shapeType``` array) : ```0-14```\n2. Invert (Boolean, whether to invert the shape or not) : ```True/False```\n3. Turn (Number, how many times to turn/rotate the shape) : ```0-3 represents 0, 90, 180, 270 degrees```\n\n```javascript\n    // genCode is SHA256 Hashed Value i.e.\n    // var genCode = (hash.charCodeAt(0) \u003c\u003c 24) | (hash.charCodeAt(1) \u003c\u003c 16) | (hash.charCodeAt(2) \u003c\u003c 8) | hash.charCodeAt(3); \n\n    genCode,\n    size,\n\n    middleType: middleShapeType[genCode \u0026 3],\n    middleInvert: ((genCode \u003e\u003e 2) \u0026 1) != 0,\n\n    cornerType: (genCode \u003e\u003e 3) \u0026 15,\n    cornerInvert: ((genCode \u003e\u003e 7) \u0026 1) != 0,\n    cornerTurn: (genCode \u003e\u003e 8) \u0026 3,\n\n    sideType: (genCode \u003e\u003e 10) \u0026 15,\n    sideInvert: ((genCode \u003e\u003e 14) \u0026 1) != 0,\n    sideTurn: (genCode \u003e\u003e 15) \u0026 3,\n\n    red: (genCode \u003e\u003e 27) \u0026 31,\n    green: (genCode \u003e\u003e 21) \u0026 31,\n    blue: (genCode \u003e\u003e 16) \u0026 31,\n```\n\n### Generating The Fluxicon Shapes\n\nTo generate the shapes, we need to define the path and color of the shape in a canvas. In order to do this, we do the following steps:\n\n1. Define the properties of the shape w.r.t. the canvas\n    - ```shapeType``` is smashed within the defined array size\n    - ```turn``` is smashed within the range ```0-3``` representing ```0, 90, 180, 270``` degrees\n    - ```invert``` is set to ```True``` if the shape is ```15``` (Special Case)\n    - ```vertices``` of the shapes are extracted from the ```shapeType``` array into ```points``` variable\n    - ```shapeScale``` \u0026 ```shapeOffset``` is calculated based on the size of the shape\n2. Fill the ```Background``` of the canvas with foreground or background color depending on the ```invert``` property\n3. Build the path of the shape\n    - Translate the canvas to the center of the shape\n    - Rotate the canvas based on the ```turn``` property\n    - Begin the path\n    - Move the canvas to the first vertex of the shape\n    - Loop through the vertices of the shape and draw the path\n    - Close the path\n4. Fill the shape with the foreground or background color depending on the ```invert``` property\n5. Restore the context of the canvas\n\n```javascript\nfunction generateShape(context2d, xCoordinate, yCoordinate, size, shape, invert, turn, foregroundColor, backGroundColor) {\n    shape = shape % shapeType.length;           // To make sure the shape is within the range of the shapeType array\n    turn % 4;                            // To make sure the turn is 0, 90, 18 or 270 degrees\n    invert = shape == 15 ? !invert : invert;    // Invert the shape if the shape is 15 (SPECIAL CASE)\n\n    var points = shapeType[shape];\n    var shapeScale = size / 4;\n    var shapeOffset = size / 2;\n\n    context2d.save();\n\n    // Fill The Background\n    context2d.fillStyle = invert ? foregroundColor : backGroundColor;\n    context2d.fillRect(xCoordinate, yCoordinate, size, size);\n\n    // Build The Shape Path\n    context2d.translate(xCoordinate + shapeOffset, yCoordinate + shapeOffset);\n    context2d.rotate(turn * (Math.PI / 2));\n\n    context2d.beginPath();\n\n    context2d.moveTo((points[0] % 5 * shapeScale - shapeOffset), (Math.floor(points[0] / 5) * shapeScale - shapeOffset));\n    for (var i = 1; i \u003c points.length; i++) {\n        context2d.lineTo((points[i] % 5 * shapeScale - shapeOffset), (Math.floor(points[i] / 5) * shapeScale - shapeOffset));\n    }\n\n    context2d.closePath();\n\n    // Fill The Shape\n    context2d.fillStyle = invert ? backGroundColor : foregroundColor;\n    context2d.fill();\n\n    // Restore The Context\n    context2d.restore();\n}\n```\n\n### Generating The Fluxicon\n\nNow that we have the ```Data``` and the ```Shapes``` defined, we can generate the Fluxicon iteratively by drawing each generated shape on the canvas. The iteration is as follows:\n\n1. Draw The Middle Shape\n2. Draw The Corner Shapes\n    - Top Left\n    - Top Right\n    - Bottom Right\n    - Bottom Left\n3. Draw The Side Shapes\n    - Top\n    - Right\n    - Bottom\n    - Left\n\nThe colors are generated based on the ```RGB``` values of the ```Data``` and the ```Shapes``` are generated based on the properties of the ```Data```.\n\n```javascript\nfunction generateFluxicon(data) {\n    var canvas = Canvas.createCanvas(data.size, data.size);\n    var context2d = canvas.getContext('2d');\n\n    var shapeDivision = data.size / 3;\n\n    var middleType = data.middleType;\n    ...\n    var blue = data.blue;\n\n    var foreGroundColor = 'rgb(' + (red \u003c\u003c 3) + ',' + (green \u003c\u003c 3) + ',' + (blue \u003c\u003c 3) + ')';\n    var backGroundColor = 'rgb(' + (255 - red) + ',' + (255 - green) + ',' + (255 - blue) + ')';\n\n    // Draw The Middle Shape\n    generateShape(context2d, shapeDivision, shapeDivision, shapeDivision, middleType, middleInvert, 0, foreGroundColor, backGroundColor);\n\n    // Draw The Corner Shapes (Top Left, Top Right, Bottom Right, Bottom Left)\n    generateShape(context2d, 0, 0, shapeDivision, cornerType, cornerInvert, cornerTurn++, foreGroundColor, backGroundColor);\n    generateShape(context2d, shapeDivision * 2, 0, shapeDivision, cornerType, cornerInvert, cornerTurn++, foreGroundColor, backGroundColor);\n    generateShape(context2d, shapeDivision * 2, shapeDivision * 2, shapeDivision, cornerType, cornerInvert, cornerTurn++, foreGroundColor, backGroundColor);\n    generateShape(context2d, 0, shapeDivision * 2, shapeDivision, cornerType, cornerInvert, cornerTurn++, foreGroundColor, backGroundColor);\n\n    // Draw The Side Shapes (Top, Right, Bottom, Left)\n    generateShape(context2d, shapeDivision, 0, shapeDivision, sideType, sideInvert, sideTurn++, foreGroundColor, backGroundColor);\n    generateShape(context2d, shapeDivision * 2, shapeDivision, shapeDivision, sideType, sideInvert, sideTurn++, foreGroundColor, backGroundColor);\n    generateShape(context2d, shapeDivision, shapeDivision * 2, shapeDivision, sideType, sideInvert, sideTurn++, foreGroundColor, backGroundColor);\n    generateShape(context2d, 0, shapeDivision, shapeDivision, sideType, sideInvert, sideTurn++, foreGroundColor, backGroundColor);\n\n    return canvas.toBuffer();\n}\n```\n\n\u003e The generated Fluxicon is returned as a ```Buffer``` object, so that it can be converted into any desirable file format.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegasms%2Ffluxicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegasms%2Ffluxicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegasms%2Ffluxicons/lists"}