I have been waiting on the png’s from the Worcester Art Museum WAM this past week so I am a bit late on this weeks blog.  However I made some changes to the layout last night after meeting with them.  The changes where small and some things are just holding there places now until I can get the png’s,  The extra colors button will be getting a gradient rainbow sort of look.  The tool buttons will be updated with art that flows better and the clear undo and redo buttons will be refreshed as well.  I am still having an issue with undo needing to be clicked twice in mobile safari.  I wish I knew what was causing that.  I am going to create a canvas to house the buttons and I am thinking that should solve the problem but I still am crossing my fingers.  I will update my progress over the weekend.

Till then.

Jason Hintlian

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

It has not been a very productive week developing the coloring page.  I have been waiting on response from the Worcester Art Museum WAM regarding the user interface UI.  My partner and I have two separate concepts for the UI, so we have provided WAM with both so they can decide what they like from each.  Then the plan is to combine the two versions.  Currently there are issues with slow color selection for both versions on the iPad.  I was able to fix the problem in my version but regarding tool selection.  The fix is as simple as calling the change tool method with jQuery instead of on-click in the HTML file.  I will fix the colors If we will be using my version.  There is also one other issue in my version.  When you click undo you have to click twice before the event will fire on the iPad.  This only is happening in mobile safari to my knowledge.  I believe a possible fix would be to create the undo clear and redo button in their own canvas, which should also fix a placement onresize issue I was having on my laptop.

Till next time.

Jason Hintlian

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

So I spent this weekend buried in my laptop, redesigning my coloring app interface.  Originally, I had a few tool buttons and selection menus on the right hand side of the screen. The canvas for drawing was positioned in the the center of the page and the coloring page selection area was on the far right.   The new design compacts everything on the right hand side of the screen.  That means no more menus that open up over the drawing screen.  In addition to a new interface, I just couldn’t resist adding some new functionality.  I started with undo and redo buttons, then I added clear and finally a spray paint tool which helped to even out the look of the new UI.

Rearranging the UI took a bit of time but it was relatively simple. First, I added color buttons for the featured colors the Worcester Art Museum wants displayed.  Then I resized the size menu and shoved it over to the right.  After that I recoded the coloring page scroll window to be horizontal, shrunk it to size, and sent it to the right.  I rearranged all the buttons into the right side UI including new animated undo, redo, and clear buttons and that was that.  

Undo and Redo were a piece of cake and I have to give full credit to http://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx author Chtiwi Malek.  His methods for handling undo and redo for a drawing app specifically, worked so perfectly, I found it unnecessary to make any modifications other than those necessary to add it to my program.  His solution was to take a snapshot of the screen after each mouse event and then store those images in an array.  Then you can traverse the images in the array using undo and redo.  I am having am issue on the iPad where you have to click the undo and redo buttons twice before they fire.  This does not happen on the computer however and thus far I can find no reason for the problem.  Clear will not only clear the page currently but it will also refresh the undo redo array so you cannot undo clear.  I am debating whether or not it should refresh the array though because hitting clear on accident would not be so good.  After that I decided to tackle spray paint.

Spray paint was actually very easy to implement. You set up two arrays one with width multiples <= 1 and the other with alpha values <= 1. The larger widths have the lighter alpha values and the small widths have the darker values.  It creates the effect of a well faded tip.  However, I found for larger tips you must increase the number of widths you are using or else the different alpha values in the tip will be distinguishable to the eye.  The effect can create a sort of cool pattern but for a spray tool it was undesirable.

I almost forgot, I changed the color wheel to a smaller wheel with no shaded regions.  the color wheel menu is activated by the color palette button.  When activated it takes the place of the original paint colors.  I created a slider bar similar to a volume bar for selecting the shade of the color.  The slider works as far as animation goes but there is no logic for shading or lightening the current color yet.  Work for this week I suppose.

Anyway that just about wraps it up for this week.

Till next time.

Jason

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

Happy Easter Everyone,

It was an awesome weekend, had a big party at my house with the whole family… 30+ people.  Food was great mimosa was even better… haha.  So I spent I bit of time testing  my drawing app on the iPad.  I was trying to fix a page bouncing issue.  Obviously, this is a problem that has come up before for other developers.  I started working on the tests pretty late so I probably overlooked the obvious due to being a bit tired but this is what happened.  

The Worcester Art Museum tested our coloring app this week, but when the user drags on the screen you just get a page bounce effect.  According to all my research, the way to fix this problem is very simple: you just add the event.preventDefault(); to your touchmove event.  However, I tested this fix several times and it did not work.  The problem I believe, that when I updated our repository it also updated our testing server… this is not the case.  I will be waiting to get access from our Server team so that I can debug my code on the iPad.   I think the fix will be very simple once I can access the server for testing.  Spray paint will have to wait for now.

Till next time.

Jason Hintlian.

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

 Hello again

 The past two weeks have really been very eventful as far as the coloring app goes.

I have spent most of my spring break writing code and I am not the least bit regretful… well perhaps a little bit.  I at least managed to squeeze in a few flicks this week so not a total loss.  I started this week with a very slow flood fill algorithm a few minor inconsistencies with clicking and several other short comings.  As I mentioned In last week blog update though, I got the flood fill algorithm working very fast and I will explain how. Aside from that I have completely abandoned redraw because it is slow with flood fill.  In addition to all this I rewrote all the event to work with jQuery mobile and even rigged up new toggle button for tools and menus to fix issues on the iPad.  I also added fading scroll indication arrows to the scroll menu this week, cleaned up all the code and segmented each piece of functionality with comments.

 So lets start with redraw and why we are not going to use it.  Though I don’t doubt there is some way to make redraw efficient, I have found a much easier solution to the problem redraw had solved for me.  Originally I switched to redrawing each event click so I could avoid drawing over the coloring outline  by drawing after each click.  This allowed the flood fill to interact with the outline image and anything drawn to screen as well.  The problem was the redrawing of flood fill is very costly and after a few flood fills had been applied the code became sluggish.  The solution was actually quite simple in the end.  The flood fill algorithm has to check the canvas pixel memory directly during it process for speed, its very fast. The pixels data is divided into 4 bytes one for Red Green Blue and Alpha(Transparency).  The flood fill algorithm has to compare RGB values for the drawing canvas so it knows what to color, so why not make comparison to the outline canvas at the same time, it certainly would be more efficient than redrawing.  Well that’s exactly what I did, I wrote a simple method that just checks the alpha value for the outline canvas and added the necessary checks to the algorithm.

 That leads me to the topic of pixel memory access.  As it turns out, it’s easy to access the pixel memory it just can be a bit confusing.  So you can get pixel data by calling getImageData() on the context of your canvas.  This gives you a pixel at an x and y coordinates. The pixel memory is ordered top to bottom left to right.  Imagine a 9 pixel canvas ordered like this. 

 X and Y Memory Address

 00   01   02    0   12   24

10   11   12 = 4   16   28

20   21   22    8   20   32

 If you are at the pixel memory address of 12 you can traverse to 24 with (y * widthOfGrid + x) *4) because at memory address 12,  x and y = (0, 1) so you can see that(1* 3 + 0) * 4 = 12 so Our location + (y * widthOfGrid + x) *4) brings us to the pixel to our right and like wise you would subtract to move to the left.  That is the secret to fast flood fill algorithms in javascript.  That and don’t use recursion due to stack limitation but that’s a whole different topic.

A few other small changes where the size menu was set to close when you clicked the button but not the menu itself.  It was suggested that that would be better so that was fixed right away this week along with a few other changes to buttons. The Worcester Art Museum had also suggested disappearing scroll arrows would be nice for the coloring outline selection menu, so I did that this week too.  I found an easy tutorial at jsfiddle.net that worked quite well, I modified it to work with two arrows and that was that.  I also did a lot of work rigging and making toggle buttons for the tools size and color menus.

I think that about wraps it up, Next week spray paint!

Till next time.

Jason Hintlian

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

So this will be a relatively short blog as I am deeply engrossed in coding the coloring page.  I have been working on a flood fill feature for the coloring page for four days now, It has not been an easy task.  The only way to make a fast flood fill method is to directly access the pixels memory.  I was lucky enough to find a flood fill javascript file that does this and I have been working to change my algorithm to do the same.  In light of this new fill feature multiple canvases seemed like they would be more of a hindrance than a benefit, so I have refactored the code to use a redraw method in order to keep the outline image untouched.  The concepts used where taken from a tutorial at http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/.

I am currently trying to address a pixel matching issue with my flood fill algorithm as well as finding a way to handle redrawing the fill feature.  There will be a long blog that will come hopefully soon if a figure all this out, that will explain flood fill and the redrawing method in detail.

UPDATE: I wanted to quickly update this blog to just let everyone know that I got my floodFill algorithm working and it is very fast.  I also got it working in the redraw method.  The next step will be to optimize redraw so it only redraws what it has to.

Till next time.

Jason

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

Hello again,

So there have been no new developments for the coloring page.  I have been waiting for concrete commitment on layout from the Worcester Art Museum but as of yet there seems to be no consensus as to how the page should ultimately look.  That said I was still busy this week.

I spent Monday night trying to understand why the puzzle teams code won’t load the image on the pieces.  Unfortunately I could not solve their problem, but I did find an alternative solution which even came with a few extra bells and whistles, like a timer and movement counter as well as snap positioning.  Its basically a javascript file built on top of jQuery which is provided as freeware by google.  I even showed of a pic of my dog Chewie, seen in the photo above.

Well, you might be wondering at this point, why the title of this article is Git Hub Headache.  I would answer that question with “Git Hub was a huge headache this week”.  I tried to learn the Git Hub command lines this week, which was not so bad.  Sompop’s Git Hub power point presentation was definitely helpful. I could clone the repository, I could add my files to a branch, but I could not figure out how to actually commit them.  After a while spent with no luck, I decided to change strategies.

I then tried to clone the repository with netbeans, but netbeans wanted me to make a project file which did not make sense seeing the 401Project is not being developed exclusively in netbeans.  After a few hours spinning my wheels… I decided to just go to the website thinking there must be some way to do this from that end.  I selected the development branch and cloned the repository.  Then I added my files and committed them to what I thought was the development branch.  However when I checked to see if it had uploaded correctly the changes had been made to the master branch.

At this point I was becoming thoroughly frustrated.  I looked for a few ,minutes for a way to remove the upload but then just moved on.  My last attempt was in the Git Hub app fro mac.  It took a bit of looking but I was able to branch off the development branch and commit my files.  However my branch contained all the file from the development branch an I was not sure If that was normal.  I suppose it would be, so you can run the whole application but only be change your particular part.  At this point I was just happy the files were uploaded.

Any way that was it for the week.  Hopefully next week will be more fruitful.

Till next time.

Jason Hintlian

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

Hello again.

Not so much a busy week as much as a busy weekend, as far as the drawing app goes.  I did not have a single free moment to work on it during the week with the middle of the term upon us.  However last night, or should I say yesterday at about 2pm I began working on the app again and I did not stop until around 2:30am the following day only to sleep five hours and then continue working.  So despite hold backs throughout the week I have made some significant improvements to the drawing app. Oh and all the code is on GitHub at https://github.com/JasonHintlian/WArtMuseumColor  I will work this week to get this added as a branch of of our 401Project on GitHub, hopefully with all the  comments too.

There have been some major advancements in the User Interface UI this week including new cool buttons a new size selection menu and a few new ancient approved colors from the Worcester Art Museum WAM.  On top of that I have corrected the issue of thumbnails squishing which was nothing more than a quick change to some css and added a few arrows to symbolize a scrolling option.  I now that the WAM would like the button to disappear when the scroll reaches its end like many iOS application but that may not be so easy to do in a web application.  It will certainly be a topic for research this week.

So too the implementation.  First the new buttons just set there background to the current color, like the old color button but now they are overlaid with a partially transparent image.  This is achieved in css by setting the background to the desired image.  I creates the illusion of a wet paint brush and bubble styled sizes.  Next I built a new pop up canvas to hold the different sizes.  I chose this method as opposed to size buttons linked through html because it allows the user to easily expand or hide the menu.  In addition we can reference the x and y coordinates of a mouse-down event in order to set the size based on the position of our mouse.  There are six images that make up the size menu one permanent partially transparent background  and five different pointer images drawn with respect to the current size.  Though I am quite certain I can reduce this down to one pointer image and then just redraw it were necessary that will have to wait till next week.

The third new change this week is simply the proper sizing of the coloring images and  fe extra colors.  In addition I did add a few arrows to the scroll menu, but they have no functionality other than being a visual queue to the user that “this area can scroll”.  I would certainly like to add some functionality to those buttons so I will look into that this week.  Other than that all our coloring images are now the official images form WAM. That was a quick change, I did resize the images for the thumbnails but that should not make any difference visually but it goes a long way toward improving the smoothness of scrolling.

Overall this weeks effort was geared towards creating the UI that WAM wants so hopefully they approve of the newer buttons and the size selection menu.  There new set of colors made a nice addition to the app but I would like to find a copy of photoshop we can “legally” use to make a better looking color wheel with ultimately more color and shades to select.  So this weeks agenda will most likely be focused on scrolling and a better color wheel as well as creating a branch off of our 401Project repository.  Should all the UI expectations be met early enough I would also like to work on  a sub-pixel curve algorithm to create a smoother painting experience, but we will see how it goes.

Anyway till next time.

Jason

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

It has been a slow week due to many other responsibilities taking precedence over the Coloring App.  I won’t bore you with the details but suffice it to say; it was not even close to as much fun.  Regardless I still managed to make some progress.  Though I was hoping to have implemented several major changes with comments and have them uploaded to Github it just was not possible with my busy schedule.  

I am a computer science tutor at Quinsigamond Community College as well as a volunteer teacher assistant; and I have become inundated with students now that we are five weeks into the semester. I am only a basic level tutor but students from data structures in c++ have requested my help because there is no advanced tutor. Consequently, I spent a good deal of time this week getting reacquainted with c++ syntax.  Perhaps I can work on the Coloring App more tomorrow.  Either way will comment and upload the changes soon to Github.

Well, now that I have partially explained why I did not accomplish nearly as much as I did last week; on to to the changes.  This week I implemented a new way to select colors, which in it self helped to usher in the use of multiple canvases.  A true life saver.  So earlier in the week I realized we would need to find some way to add more than nine colors to our app, obviously.  So after a bit searching I found a method that allows you to pull the color data directly from a pixel on canvas.  You can use this data to set the color of the paint.  So the basic idea is you can use any picture but we will use one with a variety of colors we can select from.  I am sure a color palette will be provided by the Worcester Art Museum, our client.  They have chosen to use specific colors that would have been similar to the paint colors one might find in ancient Greece.  In the mean time, I have added a temporary picture for testing that is opened and collapsed with click of a new paint button.

In the beginning of testing the canvas, it would push the other canvasses around the screen which is how I ended up learning how to use multiple layers of canvas.  Which turns out is very important.  Up until now the picture outline we are coloring was drawn to the screen over the users painting any time the mouse moved; so the user was unable to draw over the outline of the picture.  this is the same method used in many short drawing to canvas tutorials.  But, wouldn’t it be better if we did not have to worry about all that. Queue multiple canvases.  Now the picture is a canvas simply layered over the drawing Canvas, much simpler. Hopefully I don’t find some reason It won’t work down the road, like a fill paint feature.  I am still pondering how that will be handled.  On top of that I have functional buttons now for selecting different coloring book pages and switched to a more appropriate layout for our client.  However there are still a great many loose ends to tie up and comments to write.  I suppose there is no time like the present.

Till next week.

Jason Hintlian

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

Hello again,

So it’s been a crazy week, I spent countless hours trying to figure out how this whole html5, css, and javascript project thing works.  Who would have thought it would be so confusing, just trying to figure out how to set up a test project?  To only then realize you were foolish for ever thinking it was difficult.  Great, right.  I guess what I am trying to say is things are progressing steadily though perhaps not as smoothly as  I had originally intended.  
    This past week, I scoured the internet for every fragment of information involving coloring to an html5 canvas I could find.  Ah, that reminds me, this week we chose teams for our Worcester Art Museum project; I chose to be on the coloring book team because I thought it would be challenging but fun as well.  I am delighted to say there are a vast amount of web development resources available on the Internet.  I found a tutorial that helped me work through some of the html5 canvas basics, but after detailed study into a few of the subtopics, I opted to change a vast majority of the code I started with.  
    One choice I have made is to avoid jQuery, I know what your thinking why?  jQuery is so useful.  Especially know that I have learned “how all the cool kids call jQuery” a quote taken from some random site, for an idea which they in turn took from the widely known boilerplate template.  Let me explain; it may come as a surprise to some, perhaps not many, but jQuery is nothing more than a javascript file with a vast amount of helpful tools; about ten thousand lines of tools, uncompressed.  However if you only need a very small portion of the library it make more sense to make up your own solution, rather than sacrifice load time.  Or at the very least just take what you want from the jQuery library.  Probably no big deal if your on your own laptop, but everyone browses the internet on their phone know so performance is key.
    Any way now to the progress.  This week, I designed a very simple coloring web page based on html5 css javascript and jQuery, which I later discarded for the homegrown solution, no jQuery.  Thus far, as of friday night 2/8/13 I have a fully functional drawing to app which draws whether you click the mouse or not, functionality lost to the abandonment of jQuery, but soon to come back, …just saying. With a palette of nine colors and an eraser I call the refresh button lol, me and Beto; my team partner a poised to strike a blow in the name of free source code.  
    I must say it is nice to finally work on a project that has a value to the public.  I suppose the only thing that brought my pure jubilation of having a working webpage back to reality, was when I gave it to my daughter to test. Within ten seconds she asked where is the eraser, to which I replied just hit the refresh button and be quiet.  She’s five.

Till next week.

Jason

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.