•  


GitHub - ArunBohra12/PixelCraft: A Pixel Art Editor
Skip to content

ArunBohra12/PixelCraft

 
 

Repository files navigation

PixelCraft

A pixel Art & Animation Creation Tool Built using HTML5 Canvas.
It is a Progressive Web App (PWA) with offline compatibility.
It is mobile-friendly and is very easy to use.

PixelCraft

Overview

This App is Available at both these locations

https://rgab1508.github.io/PixelCraft

https://pixelcraft.web.app

On opening, you will get a screen as Follows

PixelCraft overview

You can choose Any Dimensions for your Canvas, 16 X 16 is the default dimension.
Dimensions below 128 X 128 are preferable for smooth operation and GIF creation.

Toolbar

PixelCraft overview

The List Of all Tools and methods to use them are as follows

Pencil

The Pencil tool is the most basic tool and is used to draw pixels Freehand

Pencil Tool

Eraser

The Eraser tool is used to erase a given pixel 1 pixel at a time. It has dimensions 1 X 1 and is fixed.

Eraser Tool

Paint Tool

The Paint tool is used to Flood Fill a given color with a new color. It works smoothly for dimensions under 128 X 128.

Paint tool

Paint tool

Line Tool

The line tool is used to draw a line segment between 2 points using Bresenham line drawing algorithm.

Click on tool and click on 2 points to draw a line segment between them.

Line Tool

Circle Tool

The Circle Tool is used to draw a circle with a given centre and Radius using Midpoint Circle Algorithm.

Circle Tool

Ellipse Tool

The Ellipse Tool is used to draw an ellipse with given centre and it's radius along x-axis and y-axis.

Ellipse Tool

GIF Tools

Add Frame

This tool adds the current state of canvas to the Frame Stack which can be later loaded or deleted. Each Frame is added with a delay of 100 ms, Same Frame can be multiple time to increase it's duration in GIF.

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6

View Frame

This tool displays a Popup with all the current frames in the Frame stack.

Load A Frame : Click on the Frame.
Delete A Frame : Right Click / Long press on mobile, To delete a Frame.

Frame Panel

Utility Tools

Undo/Redo

The Undo/Redo Functionality is not very advanced and is only capable of undoing/redoing 1 pixel at a time.
It is only useful for correcting small mistakes, hence, it is advised to draw with care, or, add a frame if doing a big change with chances of mistake.

Undo/Redo Tool Undo/Redo Tool

Clear Window

This Tool is used to clear the current Canvas window.

Before:
Clear Window
After:
Claer Window

Advanced Tools

Import image

This Tool is Used to import an image and convert it to Pixel Art of Given Dimensions.

Mona Lisa Mona Lisa Pixelated

Saving Pixel Art and GIF Animation

Once you are done with making your pixel art or animation frames you can export it as a PNG or GIF to share it on other platforms. Let's see how it's done. Save Image

Saving Image

Save Image option is available in the Drop-down on top left corner, It will download a file named canvas.png with dimensions 10 x width X 10 x Height

Saving GIF

After making all the frames and making necessary changes in Frames Panel, you can export the GIF using option present in Dropdown. The dimensions will be same as that of image.

Thanks to @eagleloid for this fix #44

Color Palette & Transparency

The Following colors are available on the color Palette.

Color Palette

You can select any color by clicking on it.

You can also set color Transparency to create translucent colors and create color combinations. This property can be used to create complex patterns with greater flexibility. Right click on color to set transparency value between 0 and 1

Thanks to @mrfoogles for this fix #41

Complex Pattern

PWA Support

This Web App is a Fully Compatible PWA and is installable.

PWA Support

You can install it either from the Dropdown or using the "Add to Home Screen" Button From Options.

Some Pixel Arts Made with PixelCraft

canvas (1)canvas (2)canvascanvas (29)canvas (9)

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.5%
  • HTML 37.6%
  • CSS 11.9%
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본