Created
December 25, 2017 09:30
-
-
Save max-lv/40882db608c27c42e3de4fd40be1cf11 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/jojoyasame
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| background: #777; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="200px" height="200px"></canvas> | |
| <button id="but">step</button> | |
| <script id="jsbin-javascript"> | |
| const ctx = canvas.getContext('2d'); | |
| const SCALE = 5; | |
| const pallet = [ | |
| '#a24', // 0 - red | |
| '#2a4', // 1 - green | |
| '#24a', // 2 - blue | |
| '#000', // 3 - black | |
| '#fff', // 4 - white | |
| ] | |
| function drawImg(_x,_y,img) { | |
| let w = img.length; | |
| for(var x=0;x<w;x++) { | |
| for(var y=0;y<w;y++) { | |
| ctx.fillStyle = pallet[parseInt(img[y][x])]; | |
| ctx.fillRect((_x+x)*SCALE,(_y+y)*SCALE,SCALE,SCALE); | |
| } | |
| } | |
| } | |
| function getImgSlice(_x,_y,size,img) { | |
| let new_img = []; | |
| for(var y=_y;y<_y+size;y++) { | |
| new_img.push(img[y].slice(_x,_x+size)); | |
| } | |
| return new_img; | |
| } | |
| function sliceImg(size, img) { | |
| let slices = []; | |
| let w = img.length; | |
| slices.push(getImgSlice(x,y,size,img)); | |
| } | |
| } | |
| return slices; | |
| } | |
| let img = [ | |
| '4444', | |
| '4333', | |
| '4303', | |
| '4333', | |
| ]; | |
| console.log(sliceImg(3,img)); | |
| let offset = 0; | |
| sliceImg(3,img).map(i=>{ | |
| offset += 5; | |
| drawImg(offset, 10, i); | |
| }); | |
| function crateStates(nstates,size) { | |
| let out = []; | |
| for(var x=0;x<size;x++) { | |
| for(var y=0;y<size;y++) { | |
| let state = []; | |
| for(var n=0;n<nstates;n++) { | |
| state.push(true); | |
| } | |
| } | |
| } | |
| const step = () => { | |
| console.log('hey'); | |
| } | |
| but.onclick = step; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body { | |
| background: #777; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const ctx = canvas.getContext('2d'); | |
| const SCALE = 5; | |
| const pallet = [ | |
| '#a24', // 0 - red | |
| '#2a4', // 1 - green | |
| '#24a', // 2 - blue | |
| '#000', // 3 - black | |
| '#fff', // 4 - white | |
| ] | |
| function drawImg(_x,_y,img) { | |
| let w = img.length; | |
| for(var x=0;x<w;x++) { | |
| for(var y=0;y<w;y++) { | |
| ctx.fillStyle = pallet[parseInt(img[y][x])]; | |
| ctx.fillRect((_x+x)*SCALE,(_y+y)*SCALE,SCALE,SCALE); | |
| } | |
| } | |
| } | |
| function getImgSlice(_x,_y,size,img) { | |
| let new_img = []; | |
| for(var y=_y;y<_y+size;y++) { | |
| new_img.push(img[y].slice(_x,_x+size)); | |
| } | |
| return new_img; | |
| } | |
| function sliceImg(size, img) { | |
| let slices = []; | |
| let w = img.length; | |
| slices.push(getImgSlice(x,y,size,img)); | |
| } | |
| } | |
| return slices; | |
| } | |
| let img = [ | |
| '4444', | |
| '4333', | |
| '4303', | |
| '4333', | |
| ]; | |
| console.log(sliceImg(3,img)); | |
| let offset = 0; | |
| sliceImg(3,img).map(i=>{ | |
| offset += 5; | |
| drawImg(offset, 10, i); | |
| }); | |
| function crateStates(nstates,size) { | |
| let out = []; | |
| for(var x=0;x<size;x++) { | |
| for(var y=0;y<size;y++) { | |
| let state = []; | |
| for(var n=0;n<nstates;n++) { | |
| state.push(true); | |
| } | |
| } | |
| } | |
| const step = () => { | |
| console.log('hey'); | |
| } | |
| but.onclick = step; | |
| </script></body> | |
| </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
| body { | |
| background: #777; | |
| } |
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
| const ctx = canvas.getContext('2d'); | |
| const SCALE = 5; | |
| const pallet = [ | |
| '#a24', // 0 - red | |
| '#2a4', // 1 - green | |
| '#24a', // 2 - blue | |
| '#000', // 3 - black | |
| '#fff', // 4 - white | |
| ] | |
| function drawImg(_x,_y,img) { | |
| let w = img.length; | |
| for(var x=0;x<w;x++) { | |
| for(var y=0;y<w;y++) { | |
| ctx.fillStyle = pallet[parseInt(img[y][x])]; | |
| ctx.fillRect((_x+x)*SCALE,(_y+y)*SCALE,SCALE,SCALE); | |
| } | |
| } | |
| } | |
| function getImgSlice(_x,_y,size,img) { | |
| let new_img = []; | |
| for(var y=_y;y<_y+size;y++) { | |
| new_img.push(img[y].slice(_x,_x+size)); | |
| } | |
| return new_img; | |
| } | |
| function sliceImg(size, img) { | |
| let slices = []; | |
| let w = img.length; | |
| slices.push(getImgSlice(x,y,size,img)); | |
| } | |
| } | |
| return slices; | |
| } | |
| let img = [ | |
| '4444', | |
| '4333', | |
| '4303', | |
| '4333', | |
| ]; | |
| console.log(sliceImg(3,img)); | |
| let offset = 0; | |
| sliceImg(3,img).map(i=>{ | |
| offset += 5; | |
| drawImg(offset, 10, i); | |
| }); | |
| function crateStates(nstates,size) { | |
| let out = []; | |
| for(var x=0;x<size;x++) { | |
| for(var y=0;y<size;y++) { | |
| let state = []; | |
| for(var n=0;n<nstates;n++) { | |
| state.push(true); | |
| } | |
| } | |
| } | |
| const step = () => { | |
| console.log('hey'); | |
| } | |
| but.onclick = step; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment