Skip to content

FredrikMeyer/mspaint

Repository files navigation

MS Paint look-a-like in React

https://github.com/fredrikmeyer/mspaint/actions/workflows/build-and-test.yml/badge.svg

https://github.com/fredrikmeyer/mspaint/actions/workflows/codeql-analysis.yml/badge.svg

See result in paint.fredrikmeyer.net.

Install and run

Do yarn install and yarn start.

Build

yarn install

Script to generate icons

Run python cut_image.py to cut the screenshot of the toolbar into smaller images.

Icons

https://react-icons.github.io/react-icons/search?q=twitter

CSS processing

CSS is written mostly with SCSS and organized with CSS Modules.

@startuml
[SCSS] -> [CSS] : transpile
[CSS] -> [processed CSS] : PostCSS\n(autoprefixer, etc)
@enduml

css_processing.png

Inspiration

./inspiration.png/

See this YouTube video.

This one has several Windows 3.10 screenshots.

Windows 3.10 emulator.

React hooks-inspiration

react-use (mange hooks)

https://codeheir.com/2022/08/21/comparing-flood-fill-algorithms-in-javascript/

Se den hacker-vidoen (ca 21 min uti), eksempel på tegning. Ideer:rotering, kopering, cut/paste

https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

Litteratur

Midpoint circle algorithm https://imruljubair.github.io/teaching/material/CSE4203/Chapter%20-%208%20(part%20-%20B).pdf https://uomustansiriyah.edu.iq/media/lectures/12/12_2020_06_26!11_47_57_PM.pdf

Bresenham linjealgoritme http://members.chello.at/easyfilter/canvas.html