{"id":20596078,"url":"https://github.com/davidfig/pixel","last_synced_at":"2026-04-22T07:32:26.697Z","repository":{"id":57404918,"uuid":"92004791","full_name":"davidfig/pixel","owner":"davidfig","description":"Javascript library to generate pixel art and animated scenes","archived":false,"fork":false,"pushed_at":"2019-05-09T01:47:44.000Z","size":1046,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T00:47:27.432Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/davidfig.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}},"created_at":"2017-05-22T02:48:10.000Z","updated_at":"2024-02-15T07:59:56.000Z","dependencies_parsed_at":"2022-09-03T17:03:23.194Z","dependency_job_id":null,"html_url":"https://github.com/davidfig/pixel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidfig","download_url":"https://codeload.github.com/davidfig/pixel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242231436,"owners_count":20093636,"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-16T08:15:04.532Z","updated_at":"2026-04-22T07:32:26.665Z","avatar_url":"https://github.com/davidfig.png","language":"JavaScript","readme":"## pixel.js\npixel drawing and animation libraries\n\n## rationale\nI use these libraries as part of my Pixel Editor and Animation suite (not yet released publicly).\n\n## Live Example\n\nhttps://davidfig.github.io/pixel/\n\n## Installation\ninclude pixel.js in your project or add to your workflow\n\n    yarn add yy-pixel\n\n## API\n### pixel.js\n```js\n    /**\n     * create a sprite with the Pixel-Editor data\n     * @param {object} data\n     * @param {RenderSheet} sheet\n     * @param {object} data imported from .json (from Pixel-Editor)\n     * @param {RenderSheet} sheet - rendersheet for rendering pixel sprite\n     * @param {number=150} animationTime in milliseconds per frame\n     * @event stop - animation finishes and stops\n     * @event loop - animation loops\n     * @event link - animation link to another animation\n     * @event frame - animation changes frame\n     */\n    constructor(data, sheet, animationTime)\n\n    /**\n     * @param {number} index of frame\n     * @return {object} returns {width: n, height: m }\n     */\n    size(index)\n\n    /**\n     * adds the frames to the RenderSheet\n     * @param {boolean} force the render even if sheet already contains these sprites\n     */\n    render(force)\n\n    /**\n     * adds the frames to the RenderSheet\n     * @param {object} data from Pixel-Editor\n     * @param {RenderSheet} sheet\n     */\n    static add(data, sheet)\n\n    /**\n     * adds an individual frame to the rendersheet\n     * @param {number} index\n     * @param {object} data\n     * @param {RenderSheet} sheet\n     */\n    static addFrame(index, data, sheet)\n\n    /**\n     * find the largest width of the frames\n     * @static\n     * @param {object} data\n     * @return {number} largest width\n     */\n    static largestFrameWidth(data)\n\n    /**\n     * find the largest height of the frames\n     * @static\n     * @param {object} data\n     * @return {number} largest height\n     */\n    static largestFrameHeight(data)\n\n    /**\n     * find the largest width of the frames\n     * @returns {number} largest width\n     */\n    largestWidth()\n\n    /**\n     * find the largest width of the frames\n     * @returns {number} largest height\n     */\n    largestHeight()\n\n    /**\n     * starts a manual animation\n     * @param {array} animation\n     * @param {boolean} reverse\n     * @param {number} time - use this time instead of animationTime\n     */\n    animateManual(animation, reverse, time)\n\n    /**\n     * starts a named animation\n     * @param {string} name of animation\n     * @param {boolean} reverse - flip the sprite\n     * @param {number} time - use this time instead of animationTime\n     */\n    animate(name, reverse, time)\n\n    /**\n     * stops any animation\n     */\n    stop()\n\n    /**\n     * updates the pixel\n     * @param {number} elapsed\n     * @return {boolean} whether the sprite changed\n     */\n    update(elapsed)\n\n    /**\n     * change the sprite to a certain frame\n     * @param {number} index of frame\n     */\n    frame(index)\n\n```\n### pixel-sheet.js\n```js\n/**\n * sheet of pixels\n * @param {object[]} map\n * @param {string} map.name\n * @param {number} map.x\n * @param {number} map.y\n * @param {number} map.width\n * @param {number} map.height\n * @param {array} data - original data set to pull pixel from\n * @param {RenderSheet} sheet\n */\nmodule.exports = function PixelSheet(map, data, sheet)\n\n```\n### pixelart.js\n```js\n    /**\n     * draw and fill rectangle\n     * @param {number} x1 - x\n     * @param {number} y2 - y\n     * @param {number} radius - radius\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    rectFill: function (x1, y1, w, h, color, c)\n\n    /**\n     * draw circle\n     * from https://en.wikipedia.org/wiki/Midpoint_circle_algorithm\n     * @param {number} x0 - x-center\n     * @param {number} y0 - y-center\n     * @param {number} radius - radius\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    circle: function (x0, y0, radius, color, c)\n\n    /**\n     * draw arc\n     * @param {number} x0 - x-start\n     * @param {number} y0 - y-start\n     * @param {number} radius - radius\n     * @param {number} start angle (radians)\n     * @param {number} end angle (radians)\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    arc: function (x0, y0, radius, start, end, color, c)\n\n    /**\n     * draw and fill circle\n     * @param {number} x0 - x-center\n     * @param {number} y0 - y-center\n     * @param {number} radius - radius\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    circleFill: function (x0, y0, radius, color, c)\n\n    /**\n     * draw ellipse\n     * from http://cfetch.blogspot.tw/2014/01/wap-to-draw-ellipse-using-midpoint.html\n     * @param {number} xc - x-center\n     * @param {number} yc - y-center\n     * @param {*} rx - radius x-axis\n     * @param {*} ry - radius y-axis\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    ellipse(xc, yc, rx, ry, color, c)\n\n    /**\n     * draw and fill ellipse\n     * @param {number} xc - x-center\n     * @param {number} yc - y-center\n     * @param {number} rx - radius x-axis\n     * @param {number} ry - radius y-axis\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    ellipseFill(xc, yc, rx, ry, color, c)\n\n    /**\n     * draw and fill polygon\n     * @param {number[]} vertices\n     * @param {string} color\n     * @param {CanvasRenderingContext2D} [c]\n     */\n    polygonFill: function (vertices, color, c)\n\n    /**\n     * gets data for use with yy-pixel.Pixel file format\n     * @param {number} x0 - starting point in canvas\n     * @param {number} y0\n     * @param {number} width\n     * @param {number} height\n     * @param {HTMLContext} c\n     */\n    getPixels: function (x0, y0, width, height, c)\n\n```\n## license  \nMIT License  \n(c) 2017 [YOPEY YOPEY LLC](https://yopeyopey.com/) by [David Figatner](https://twitter.com/yopey_yopey/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidfig%2Fpixel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidfig%2Fpixel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidfig%2Fpixel/lists"}