{"id":13727248,"url":"https://github.com/taenykim/interactive-pixelator","last_synced_at":"2025-04-08T15:26:11.073Z","repository":{"id":41589008,"uuid":"271241749","full_name":"taenykim/interactive-pixelator","owner":"taenykim","description":"🌇 🌃 upload image and make interactive pixel art 🕹 ","archived":false,"fork":false,"pushed_at":"2023-01-06T14:56:46.000Z","size":36731,"stargazers_count":26,"open_issues_count":37,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T13:18:58.949Z","etag":null,"topics":["art","canvas","image","image-processing","interactive","javascript","pixel","pixelator","typescript"],"latest_commit_sha":null,"homepage":"https://interactive-pixelator.vercel.app","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/taenykim.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":"2020-06-10T10:00:11.000Z","updated_at":"2024-01-25T03:46:07.000Z","dependencies_parsed_at":"2023-02-06T05:32:05.375Z","dependency_job_id":null,"html_url":"https://github.com/taenykim/interactive-pixelator","commit_stats":null,"previous_names":["taenykim/pixelator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taenykim%2Finteractive-pixelator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taenykim%2Finteractive-pixelator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taenykim%2Finteractive-pixelator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taenykim%2Finteractive-pixelator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taenykim","download_url":"https://codeload.github.com/taenykim/interactive-pixelator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657270,"owners_count":20974346,"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":["art","canvas","image","image-processing","interactive","javascript","pixel","pixelator","typescript"],"created_at":"2024-08-03T01:03:45.969Z","updated_at":"2025-04-08T15:26:11.053Z","avatar_url":"https://github.com/taenykim.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Interactive pixelator\n\n![npm](https://img.shields.io/npm/v/interactive-pixelator)\n![GitHub](https://img.shields.io/github/license/taenykim/interactive-pixelator)\n![dependencies](https://img.shields.io/badge/dependencies-none-brightengreen)\n![typed](https://badgen.net/badge/icon/Typed?icon=typescript\u0026label\u0026labelColor=555555\u0026color=blue)\n\n🌇 🌃 upload image and make interactive pixel art 🕹\n\n**[Demo page](https://interactive-pixelator.vercel.app) / [NPM page](https://www.npmjs.com/package/interactive-pixelator)**\n\n## 🌟 Feature\n\n\u003ctable width='100%' \u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eOriginal Image\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eChange Pixel size\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/examples/demo-cra/public/ralph-sample.jpg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/images/pixelsize1.gif\"/\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eChange Pixel type\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eChange Grid size\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/images/pixeltype1.gif\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/images/gridsize1.gif\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eChange Grid color\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eDraw freely\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/images/gridcolor1.gif\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/images/drawing1.gif\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eChange filter\u003c/strong\u003e\u003c/td\u003e\n\u003ctd style=\"color:blue;\" align=\"center\"\u003e\u003cstrong \u003ecoming soon\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width='200px' src=\"https://raw.githubusercontent.com/taenykim/interactive-pixelator/master/images/filter.gif\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## 🌈 How to use\n\n### 1. NPM install\n\n```BASH\n$ npm i interactive-pixelator\n```\n\n### 2. Create DOM container\n\n\u003e 🔥 Set width and height on the DOM element.\n\n```html\n\u003cdiv id=\"DOM-element-id\"\u003e\u003c/div\u003e\n```\n\n### 3. And make Interactive Pixel Art!\n\n\u003e If necessary, Add a controller, download button, etc. (reference : **[Demo page](https://interactive-pixelator.vercel.app)**)\n\n```typescript\nimport { Pixelator } from \"interactive-pixelator\";\n\nnew Pixelator(\"DOM-element-id\", \"image URL\", {\n    // options\n    pixelSize: number, // 1~ (default:100)\n    gridSize: number, // 0~ (default:10)\n    gridColor: string, // #000000 (default:#ffffff)\n    pixelType: string, // [square(default), roundsquare, circle, original]\n    filterType: string // [none(default), grayscale, invert]\n    });\n\n//prettier-ignore\n```\n\n## 🏎 Demo play\n\n\u003e I used create-react-app ! ☺️ [source code](https://github.com/taenykim/interactive-pixelator/tree/master/examples/demo-cra)\n\n```BASH\n$ git clone https://github.com/taenykim/interactive-pixelator.git\n$ cd example/demo-cra\n$ npm install\n$ npm start\n```\n\n## ✏️ And..\n\n**This project is in progress.**\n\n**please give me a lot of advice and support.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaenykim%2Finteractive-pixelator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaenykim%2Finteractive-pixelator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaenykim%2Finteractive-pixelator/lists"}