Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Bitmap Editor with Save (Updated)
ID	6592462445346816
Created	12 years ago, 1387174029836
Updated	10 years ago, 1423086413358
Code	/* Suggestions: more colors and color creator scrolling undo filled shapes zoom capabilities larger images flood fill rectangle tool ellipse tool smaller data format / var gl = 16; // grid length / Change the grid length to make the sprite larger or smaller. You still have access to any number of colors. 64 will let you design photo-realistic sprites. 48 gives you pixels for most details 32 is a common size that balances detail with image data size. 16 is for traditional sprites including the Mega-Man style. '8-bit' actually refers to the computer processor and has nothing to do with sprite size and more to do with the number of colors (maximum of 256). Earlier graphics were character based or had only 2 colors (white and black). The IBM CGA card let you have 4 colors! For a vintage blocky look with advantages, set grid length to 12. Use the middle 8x8 square. The 2-pixel border allows for effects that extend beyond the body (cape, flag, sword, bow, shadow, etc.) For old-school sprites set the grid length to 16 and use only 4 or 8 colors in your program. / /* * IMPORTANT MESSAGE: * * 5/14/2014 New imageDraw(io,x,y,w,h,a) CENTERS with x,y * FLIPS with negative w,h - ROTATES with a * * 4/10/2014 New imageDraw removes pixel gaps * 4/5/2014 New imageDraw corrects images before draw() * 4/3/2014 New imageDraw function is faster and renders * better images by creating an image object inside the data * container. * * Replace older imageDraw functions in any of your programs * with the following. Just copy and paste. / var imageDraw = function (io,x,y,w,h,a){ / 5/14/2014 Bitmap Editor with Save by Troy Cook https://www.khanacademy.org/cs/bitmap-editor-with-save/6592462445346816 x,y are CENTER position; negative w/h will FLIP image; a is ROTATION angle/ if(io.ready){ pushMatrix(); pushStyle(); imageMode(CENTER); translate(x,y); rotate(a); if(w<0){scale(-1,1); } if(h<0){ scale(1,-1); } image(io.i,0,0,abs(w),abs(h)); popStyle(); popMatrix(); return true; } pushMatrix(); pushStyle(); rectMode(CORNERS); noStroke(); translate(x,y); rotate(a); translate(-w/2,-h/2); var xs=w/io.gw; var ys=h/io.gh; for(var py in io.ia){ for(var px in io.ia[py]){ fill(io.ic[io.ia[py][px]]); rect(round(pxxs),round(pyys),round(pxxs+xs),round(pyys+ys)); } } popMatrix(); popStyle(); if(io.i===undefined){ io.i=createGraphics(ceil(abs(w)/io.gw)io.gw,ceil(abs(h)/io.gh)io.gh,P2D); return false; } if(!io.i.background){ return false; } io.i.background(0x00010101); io.i.scale(io.i.width/io.gw,io.i.height/io.gh); for(var py in io.ia){ for(var px in io.ia[py]){ io.i.stroke(io.ic[io.ia[py][px]]); io.i.point(px,py); } } io.ready=true; imageDraw(io,x,y,w,h,a); return true; }; / * Thanks to: * ϾΛÐΞ ТHΞ ŁΞΛŦΞЯ: help-screen suggestion * Light Runner: Safari browser testing * * GREAT NEWS! * * This program has been tested and works with ..... * * FIREFOX, CHROME, INTERNET EXPLORER 10 11, SAFARI * * With Firefox, use the mouse to hightlight and copy the * contents from the console log window. Paste it. Enjoy! / /* * GRID EDITOR * * The motivation to create this program was inspired by * wbwalp. That person had started something but never * finished. I wanted an icon, avatar and sprite editor for * the longest time and never started. Thank you to wbwalp * for the getting my programming juices flowing. So, I * proceeded to create a new one. The code from wbwalp's * program didn't work for me and so I started from scratch. * I was surprised to see a copy of my program saved as * wbwalp's. I just assumed wbwalp would complete what * was started. I guess not. That program did have potential. * * * When you start something, finish it. Do not give up. * * * Anyway, if you want the latest features then please * visit this program. I was going to post the next amazing * feature but I'll wait awhile and see how this program * is received. I want to work out any problems first before * moving on to the next feature that will knock your * socks off. Can anybody guess what it may be????? * * If you want more features or have comments * about the program please post in the TIPS & THANKS * section. That will reduce clutter in the community * discussion area. * * If you do have questions about different programming * techniques, hurdles, code, commands and methods, do * post them in the Questions section. I or someone else * will be happy to answer them. * * General Information: * * Use this program to create bitmap images * in 64 colors (you can add more colors, too!) * * Pick a color then draw on the area. The gray * x's are clear areas and will be transparent * when drawn to the screen. * * Click each pixel or hold the button to * drag a color across the screen. * * Click the right button to make the pixel * transparent. * * When you are finished click the SAVE W/CODE button * and a console area will pop up with code * to copy and paste to your program. * * Enjoy! * * Troy Cook * * Further explanations: * * The ERASE button will clear the image * to the color that you have chosen from the * palette of colors on the right. You can * choose transparent (the gray x) or any color * displayed. When you press the ERASE button * it will clear the image and place that color * into each cell. * * The SAVE W/CODE button generates a code stream * in the console log window that appears * at the bottom of the output screen. * Click anywere in the box to make that * area have the focus. Now press the control * key and A which is the command to select * all. Now press control and C to copy the * highlighted text. Now open a new browser * window with Khan Academy loaded and choose * New Program. Click in the code window and * press control V to paste what you just * copied into it. * * After you copy the code, you will receive * an error due to the extra characters from * the console log window. Move all the way * to the bottom of the code and you will see * a comment that says * "delete everything below this line" * Do just that. Highlight all the extra * characters below the line and delete them. * * If you want to add more images to that program then * create another image and click on SAVE IMAGE. * Copy and paste the code to the bottom of the New Program * and it will add another bitmap object to your program * without duplicating the function commands. You can add * as many as you want and each object receives its own * unique name. They will appear arranged in a grid and you'll * be able to see all of them at one time. Change the names, * position and sizes to suit your needs. * * Save this new program to retain the image(s). * * Go back to the original browser window * and click on the X to close the console * log window. Continue editing and save * another image if you want. / /* * Colors are a matter of style and taste. They don't have * to be the traditional 8, 16, 64 or 256 sized palettes * that were the limitations of older systems. You have * millions to choose from. The color chooser is now expanded * and you are very welcome to create your own palette by * editing the one below. Change or expand the palette, just * DON'T CHANGE THE FIRST ENTRY. LEAVE IT AS CLEAR. * * You can change the palette anytime and it will not affect * images that you have saved into another program. In fact, * each image has it's own palette. You could have hundreds * of sprites in one program and each could have its own * range of colors! * * Be careful when increasing the palette beyond 32 colors. * The color chooser may get cluttered and difficult to see. / var colors = [ 0x00010101, // clear (do not change) I'm serious 0xFF000000, // black 0xFF222222, 0xFF444444, 0xFF666666, 0xFF888888, 0xFFAAAAAA, // now dark enough to skip every other 0xFFBBBBBB, 0xFFCCCCCC, 0xFFDDDDDD, 0xFFEEEEEE, // grays.... 0xFFFFFFFF, // white // blue 0xFF000088, 0xFF0000BB, 0xFF0000DD, 0xFF0000FF, 0xFF5555FF, 0xFFAAAAFF, // green 0xFF006600, 0xFF008800, 0xFF00BB00, 0xFFAADDAA, 0xFFBBFFBB, 0xFFDDFFDD, // cyan 0xFF006666, 0xFF008888, 0xFF00BBBB, 0xFF00DDDD, 0xFF00FFFF, 0xFF88FFFF, // red 0xFF660000, 0xFF880000, 0xFFBB0000, 0xFFDD0000, 0xFFFF0000, 0xFFFF8888, // magenta 0xFF660066, 0xFF880088, 0xFFBB00BB, 0xFFDD00DD, 0xFFFF00FF, 0xFFFF88FF, // yellow 0xFF888800, 0xFFBBBB00, 0xFFDDDD00, 0xFFFFFF00, 0xFFFFFF55, 0xFFFFFFAA, // brown / orange 0xFF663300, 0xFF884400, 0xFFAA5500, 0xFFCC6600, 0xFFEE7700, 0xFFFF8800, // skin tones 0xFFCCAA88, 0xFFCCBB99, 0xFFDDBB99, 0xFFDDCCAA, 0xFFEECCAA, 0xFFEEDDBB, 0xFFFFDDBB, 0xFFFFEECC, // customize your palette with more colors // DO THIS BEFORE YOU EDIT YOUR IMAGE // remove the comment marks from the beginning of a // line and choose the color // you may need to restart the program before the // new colors will appear // Save as a Spin-off to save your palette //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), //color(0, 0, 0), // if you add more than 16 colors then the color // chooser may get cluttered ]; colors[0]=0x00010101; // some people just want to change it var sx = 0; // save x var sy = 0; // save y var saveCoords = function(){ sx += 100; if (sx>350){ sy += 100; sx %= 100; } if (sy>350){ sx += 20; sy = sy % 100 + 20; } }; // io is the image object // contains image array, color palette array, // grid width & height var io = { ia: [], ic: [], gw:gl, gh:gl }; // initialize image var imageInit = function(w,h,v){ // w width // h height // v value var a = []; // working array for (var y = 0; y<h; y++){ a.push([]); for (var x = 0; x<w; x++){ a[y].push(v); } } return a; }; var colorInit = function(c){ var a = []; for (var i=0; i<c.length; i++){ a.push(c[i]);}a[0]=0x00010101; // some people just want to change it return a; }; var imageEdit = function(io,x,y,w,h,e){ e = (e === undefined)?0:e; pushMatrix(); translate(x,y); rectMode(CORNERS); strokeWeight(1); var ih = io.ia.length; var iw = io.ia[0].length; var ys = h/ih; var xs = w/iw; for (var r in io.ia){var sy = rys; for (var c in io.ia[r]){var sx = cxs;var v = io.ia[r][c]; if (e > 0 && v === 0){ stroke(220); line(sx+xs/4,sy+ys/4,sx+xs3/4,sy+ys3/4); line(sx+xs/4,sy+ys3/4,sx+xs3/4,sy+ys/4); } noStroke(); var fc = io.ic[v]; fill(fc); rect(round(sx),round(sy),round(sx+xs)-e,round(sy+ys)-e); } } popMatrix();rectMode(CORNER); }; var imageMouse = function(io,x,y,w,h,mx,my){ var ih = io.ia.length; var iw = io.ia[0].length; var ys = h/ih; var xs = w/iw; var r = floor((my-y)/ys); var c = floor((mx-x)/xs); if (r>=0 && r<ih && c>=0 && c<iw){ return {r:r, c:c}; } return 0; }; var colorMouse = function(io,x,y,w,h,mx,my){ var it = io.ic.length; var ih = ceil(it/2); var iw = 2; var xs = w/iw; var ys = h/ih; var c = floor((mx-x)/xs); var r = floor((my-y)/ys); var i = r2+c; if (c>=0 && c<iw && r>=0 && r<ih && i>=0 && i<it){ return i; } return -1; }; var imageSet = function(io,r,c,v){ io.ia[r][c] = v; }; var colorDraw = function(io,x,y,w,h,icv){ // ic color array // x,y upper left corner // w,h width height // translate to rows then columns pushMatrix(); translate(x,y); rectMode(CORNER); var it = io.ic.length; var ih = ceil(it/2); var ys = h/ih; var iw = 2; var xs = w/iw; for (var r=0; r<ih; r++){ var sy = rys; for (var c=0; c<iw; c++){ var sx = cxs; var i = riw+c; var fc = io.ic[i]; if (fc !== undefined){ if (icv === i){ stroke(0); strokeWeight(2); fill(255,0,0); rect(sx-4,sy-4,xs+8,ys+8); fill(255); } if (i === 0){ // draw clear symbol x stroke(210); strokeWeight(1); line(sx+xs/4,sy+ys/4,sx+xs3/4,sy+ys3/4); line(sx+xs/4,sy+ys3/4,sx+xs3/4,sy+ys/4); } else { // fill rectangle noStroke(); fill(fc); rect(sx+1,sy+1,ceil(xs)-2,ceil(ys)-2); } } } } popMatrix(); }; var uniqueId = function(){ return hex(((((year()12+month())31+day())24+hour())60+minute())60+second(),10); }; var imageSave = function(io,m){ // ia image array // ic image color array // m is mode, 0 or default is to save code and image // 1 saves just the image m = (m === undefined)?0:m; var t =""; var id = uniqueId(); if (m === 0){ t += "var imageDraw = "+imageDraw+";\n"; } t += "var io"+id+" = {/* created with Bitmap Editor with Save by Troy Cook https://www.khanacademy.org/cs/bitmap-editor-with-save/6592462445346816 / ia: ["; for (var r=0; r<io.ia.length; r++){ if (r>0){ t += ","; } t += "["; for (var c=0; c<io.ia[r].length; c++){ if (c>0){ t += ","; } t += io.ia[r][c]; } t += "]"; } t += "],"; t += "ic: ["; for (var c=0; c<io.ic.length; c++){ if (c>0){ t += ","; } t += "0x"+hex(io.ic[c],8); } t += "],gw: "+io.gw+", gh: "+io.gh+"};"; t += "\nimageDraw(io"+id+","+sx+","+sy+",50,50);\n"; t += "/ click here, press ctrl-A then ctrl-C /\n/ paste it into your program with ctrl-V /\n/ delete these comments and everything below /\n\n"; println(t); }; io.ia = imageInit(io.gw,io.gh,0); io.ic = colorInit(colors); strokeWeight(1); var icv = 7; var page = 3; var p1bg = true; var p1id = true; var p1cd = true; var p1bd = true; var bgi = false; //var bgi = getImage("cute/None"); // if you want to edit a previous image // copy it from your program // it begins with var ioXXXXXX = // copy from var = to }; // paste the image object below this comment section and before draw // change the var ioXXXXX = to var io = and restart the program draw = function() { switch(page){ case 0: // edit screen if (p1bg){ background(255); p1id = true; p1cd = true; p1bd = true; p1bg = false; } if (p1id){ fill(255, 255, 255); noStroke(); rect(0,0,352,352); if(bgi){ image(bgi,0,0,352,352); } imageEdit(io,0,0,352,352,1); p1id = false; } if (p1cd){ fill(255, 255, 255); noStroke(); rect(353,0,47,357); colorDraw(io,358,0,40,352,icv); p1cd = false; } if (p1bd){ noStroke(); fill(200); rect(0,375,60,30); rect(70,375,60,30); rect(140,375,60,30); rect(360,375,40,30); fill(0); textAlign(CENTER,CENTER); textSize(12); text("SAVE\nw/CODE",30,388); text("SAVE\nIMAGE",100,388); text("PREVIEW\nHELP",170,388); text("ERASE",380,388); text("Clears image to the selected color",300,368); p1bd = false; } break; case 1: // preview full background(230, 246, 247); imageEdit(io,0,0,400,400); fill((millis()%1000>500)?0:255); text("Full screen preview. Click to continue...",200,390); break; case 2: // preview tile background(230, 246, 247); var px=0,py=0,ps=1; while (py < 400){ imageEdit(io,px,py,io.gwps,io.ghps); px += io.gwps; if (px>=400){ px = 0; py += io.gh*ps; } ps += 0.5; } fill((millis()%1000>500)?0:255); text("Various size preview. Click to continue...",200,390); break; case 3: // help screen background(190, 235, 247); textAlign(CENTER,CENTER); fill(0); textSize(30); text("Bitmap Editor with Save",200,30); textSize(15); text("The drawing area represents each pixel in your image with an individual cell. Initially, each is filled with 'x' and that indicates it will be transparent. Click the mouse on a color choice from the palette on the right. A red box will show your current color. The 'x' indicates transparency. Click the mouse on a block in the image and it will change to the current color. You can choose another color and change the cells at any time. You can draw color onto many cells by holding down the mouse button and moving the mouse across the image. The right mouse button lets you change the cells back to transparent without having to choose that color first.\n\nIf you want to erase the screen to another color or back to transparent then click a color first then click ERASE.\n\nClick the PREVIEW-HELP button to see the two preview screens and Help Screens.\n\nClick to continue...",10,40,380,350); break; case 4: // help screen 2 background(195, 247, 221); textAlign(CENTER,CENTER); fill(0); textSize(30); text("SAVING YOUR IMAGE",200,30); textSize(15); text("You can save the image on the screen to another program. First, click on the SAVE W/CODE button and you will see a small black window appear at the bottom of the output screen. That is the console log and has the code necessary to recreate the image in your new\b program. You must copy everything that is in that window and paste into the new\b program.\n\nIf you are using Firefox then highlight everything in the box with the mouse. You cannot use the special short-cut keys or right-click menu. With other browsers click the mouse once in the console log window. Press Ctrl-A to highlight all the text then Ctrl-C to copy it.\n\nRight-click on New\b Program and select Open New\b Tab or Window. Go to the new\b tab or window. Click the mouse in the code window on the left. Press Ctrl-V to paste the code there. Your image will appear in full screen.\n\nClick to continue...",10,40,380,350); } }; mouseClicked = function(m){ var mx = mouseX; var my = mouseY; if (page > 0){ page = (page+1)%5; p1bg = true; return; } var im = imageMouse(io,0,0,352,352,mx,my); if (im !== 0){ if (mouseButton === RIGHT){ // set pixel to clear imageSet(io,im.r,im.c,0); } else { // opaque color imageSet(io,im.r,im.c,icv); } p1id = true; } // if mode is editing then don't check // for color change or other buttons if (m === 1){ return; } // Check if color chosen var cm = colorMouse(io,358,0,40,352,mx,my); if (cm >= 0){ icv = cm; p1cd = true; } // Check if save with code if (mx<=60 && my>=375){ imageSave(io,0); saveCoords(); } // Check if save image if (mx>= 80 && mx<=140 && my>=375){ imageSave(io,1); saveCoords(); } // Check if preview image if (mx>160 && mx<=200 && my>=375){ page = 1; } // Check if erased if (mx>=360 && my>=375){ io.ia = imageInit(io.gw,io.gh,icv); p1id = true; } }; mouseDragged = function(){ mouseClicked(1); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgICy9PnaCww
Votes	388
Spin-Offs	195
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Troy Cook
Author Name	onetruetroy
Author ID	kaid_1050040908180717789041673
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739459739517
Updated	8 months ago, 1744828472168
Source Deleted	unknown