Created
May 3, 2022 18:43
-
-
Save SamyBencherif/ef915641892a93157bdf71a2b47682ac to your computer and use it in GitHub Desktop.
smol prog for drawing--standalone html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| ce=(t)=>document.createElement(t); | |
| c=ce("canvas"); u=ce("canvas"); | |
| b=document.body=ce("body") | |
| b.style.margin=0 | |
| p=(c)=>{ | |
| c.width = innerWidth; c.height = innerHeight; | |
| c.style.width="100%"; c.style.height="100%"; | |
| c.style.position = "absolute"; c.style.top=0; | |
| b.append(c) | |
| } | |
| p(c); p(u); | |
| d=c.getContext('2d'); | |
| j=u.getContext('2d'); | |
| ae=(e,h)=>b.addEventListener(e,h) | |
| var down = {}; | |
| ae('keydown', (e)=>{down[e.key]=true}); | |
| var eraser_size; var pen1 = {}; var pen2 = {radius:30}; | |
| ae('keydown', (e)=>{ | |
| for (var i=0; i<=9; i++) | |
| { | |
| if (down[')!@#$%^&*('[i]]) | |
| presets[i] = {...brush}; | |
| if (down[i] && presets[i]) | |
| brush = presets[i]; | |
| } | |
| if (down.e) | |
| { | |
| pen1 = {...pen1}; | |
| pen2 = {...pen2}; | |
| brush.red = 255; | |
| brush.green = 255; | |
| brush.blue = 255; | |
| brush.radius = eraser_size || 100; | |
| eraser_size = brush.radius; | |
| } | |
| if (down.p) | |
| { | |
| brush.red = pen1.red || 0; | |
| brush.green = pen1.blue || 0; | |
| brush.blue = pen1.green || 0; | |
| brush.radius = pen1.size || 3; | |
| pen1 = brush; | |
| } | |
| if (down.b) | |
| { | |
| brush.red = pen2.red || 0; | |
| brush.green = pen2.blue || 0; | |
| brush.blue = pen2.green || 0; | |
| brush.radius = pen2.size || 30; | |
| pen2 = brush; | |
| } | |
| }); | |
| ae('keyup', (e)=>{down[e.key]=false}); | |
| circle=(d,nbp)=>(x,y,r)=>{ | |
| if (!nbp) d.beginPath(); | |
| for (var i=0; i<64; i++) | |
| d.lineTo(x+r*Math.cos(i/10), y+r*Math.sin(i/10)) | |
| } | |
| var brush = {radius: 40, red: 0, green: 0, blue: 0, alpha: 255}; | |
| for (i in pen2) brush[i] = pen2[i]; | |
| var ranges = {radius: [1,200]}; | |
| var presets={} | |
| pad = (v)=>(""+v).padStart(2,0); | |
| ae('mousedown', (e)=>{down.z = true}); | |
| ae('mouseup', (e)=>{down.z = false}); | |
| var prevloc | |
| ae('mousemove', (e)=>{ | |
| var [x,y] = [e.offsetX, e.offsetY] | |
| var {radius, red, green, blue, alpha} = brush; | |
| var [r,cr,cg,cb,ca] = [radius, red, green, blue, alpha]; | |
| d.fillStyle = `rgba(${cr},${cg},${cb},${ca/255})`; | |
| if (down.z) | |
| { | |
| d.beginPath() | |
| circle(d)(x,y,r); | |
| if (prevloc) | |
| { | |
| var intrp=300; | |
| var [px,py,pr] = prevloc; | |
| for (var i=0; i<intrp; i++) | |
| { | |
| circle(d,1)(px+(x-px)*i/intrp, py+(y-py)*i/intrp, r); | |
| } | |
| } | |
| d.fill(); | |
| prevloc = [x,y,r] | |
| } | |
| else | |
| prevloc = undefined; | |
| j.clearRect(0,0,innerWidth,innerHeight); | |
| j.fillStyle = `rgba(${cr},${cg},${cb},${ca/255/2})`; | |
| circle(j)(x,y,r); | |
| if ((cr==255 && cg==255 && cb==255) || ca<20) | |
| {j.fill(); j.stroke()} | |
| else if (down.a) | |
| j.stroke(); | |
| else | |
| {j.fill(); j.stroke()} | |
| if (down.s) | |
| brush.red += e.movementX/4; | |
| if (down.d) | |
| brush.green += e.movementX/4; | |
| if (down.f) | |
| brush.blue += e.movementX/4; | |
| if (down.x) | |
| brush.alpha += e.movementX/4; | |
| if (down.a) | |
| brush.radius += e.movementX/4; | |
| for (var i in brush) | |
| { | |
| var rng = ranges[i] || [0,255]; | |
| brush[i] = Math.max(rng[0], Math.min(rng[1], brush[i])); | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment