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.

These past few weeks in CS 401 have had their moments of progress as well as a few setbacks. The main accomplishment was that a working web app, supported by a server to hold all of the different parts of the app, was completed. Even though it was mostly bare boned, it contains the functionality that we need to push out a completed project. The server is able to handle all necessary basic functions that need to be operational in order for the class to make more progress.

Due to the functionality of the server, the different parts of the app were able to be tested on the iPad which they will be run on. This was where a few setbacks occurred, as the iPad was not running a few aspects of the app as well as they were showing up on desktops. With the example of the puzzle, which Ryan, Kathleen, and myself are working on; The puzzle pieces show up on the screen, but are unable to be selected by touch. The shuffle function work and the pieces are correctly sized and shaped, but no actions can be taken on them. This is a bug that we will work on correcting throughout this next week. The sizing is also off on where the puzzle shows up on the screen, but this is a minor issue compared to the issue affecting the main functions of the puzzle, and will be a secondary task for the week.

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

Since this is the beginning of the project start, our class have being meet for three times. And We decided to use a web based to create the app. And we will use HTML, CSS and JAVA SCRIPT to write code on them. I was reading about a web : https://developer.mozilla.org/en-US/learn , given by the professor in general about how to install and basic function in these three area.
I have learn a couple useful things from the web:
To get start a JavaScript:
“Getting started with JavaScript is very easy. You don’t have to have complicated development programs installed. You don’t have to know how to use a shell, program Make or use a compiler. JavaScript is interpreted by your web browser. All you have to do is save your program as a text file and then open it up in your web browser. That’s it!”
To get start a HTML
” HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor. “
With these simple examples on the web, this week, I am being able to create a local web page.

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

Hello again,

This little demo (someone had lots of fun producing it; not me since I have no drawing talent) was done on a new version of the coloring app I came up with. When you click on the index.html file, it features a slideshow as an intro to the app, it also focuses on a minimalistic User Interface where everything needed is on the screen and would provide immediate and intuitive interaction to users, specially children, who would be able to start sketching and coloring right away. 

As I have mentioned before, while we have been waiting on a decision from the WAM on the ipad setup, the user interface for the coloring app (and maybe other parts of the main application), I spent some time playing around with some jquery plugins, namely slides.js http://slidesjs.com/ and sketch.js https://github.com/soulwire/sketch.js?utm_source=javascriptweekly&utm_medium=email

This app make use of these plugins and allows for (maybe) less, simpler code and smaller file size. The code is on github at https://github.com/betoluna/sketchNcolor , you can fork the repo, clone it and test it in your local machine, or even easier, go to the web server http://cstest.worcester.edu/development/betoluna/sketchNcolor/ and try it there, this will take you right to the intro page. I made some initial testing in the Ipad and it seems to be working without problems.

Until next time 

Beto.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

Hello,

As a curious note, this week while exploring some jquery plugins that would potentially find use in the coloring app, I encountered a situation in which I needed to be able to click on a link  -an <a></a> html element- and not only have the link do its job but, as a side effect also activate or click a second link with that had different purpose.

You may be wondering: why on earth would anyone want to do that? Well, for various different reasons. If you look around on the web and you will definitively find some. It turns out that in this particular case, sketch.js, the plugin I was testing, works by simply using links that work as tool buttons. The link’s href tag just has to point to the id of the canvas and will automatically be considered a tool link.

For the sake of simplicity in the functionality of the app, I wanted to chain links so that the first would act and then trigger the next. My first obvious thought was to nest links. Not good; it cannot be done. According to the World Wide Web Consortium (w3.org), nested links are illegal: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2 Of course there are workarounds for this but, as I was browsing around, I found solutions that were either elaborated or involved defining some jquery functions in which I didn’t want to spend too much time. I kept doing a little more research and was delighted when I bumped into a javascript solution that is beautiful in its simplicity.

As an example, clicking on the first link below, will also trigger the second link after that:

<a href=”#” onclick=”document.getElementById(‘anyId’).click();”></a>

<a id=”anyId” href=’#canvas’ “some javascript”></a>

And that is achieved by just adding: onclick=”document.getElementById(“anyId”).click()”  to the first link where “anyId” is of course the Id of the second link. Simple right? 

Well, if you ever want to chain links in this way, this simple line of code can save the day.

Until next week.

From the blog betoluna » CS WSU by betoluna1 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.