MORE PROCESSING.JS!!

April 17, 2011 Leave a comment

As you may or may not know I am currently enrolled in DPS909 course at Seneca College. For this course I am working on the open source project Processing.js. My job is to help make it better by fixing bugs and finishing tickets. Since my last update I fixed update my old patches and worked on the following bugs:

Bug 833: Fix ellipse 3D to take noStroke and noFill values

This bug describes how ellipses created in 3D sketches do not handle noStroke and noFill values. The noFill value was fixed in bug 1075 which I fixed last release. I checked to see whether or not the noStroke check needed to be added and due to the nature of ellipse. Stroke is not being draw in the beginshape/endshape partition of ellipse if it is not set and if the check is added fill breaks.

Bug 1007: Improve the performance of the arc

The arc function in processing.js is slow and need to be optimized. In the past processing.js used the canvas tags arc function but changed to utilize its own begin shape/end shape functions. This made the arc behave like P5 but caused a serious decrease in speed. I used the sin and cos look up tables so calculations do not have to be made every time an arc is created.

Bug 1199: Remove usages of parseFloat and parseInt as cast operators.

This bug show how in the processing.js library parseInt function is used to change float numbers into integers and parseFloat function is used to change integer numbers into floats. This may cause performance a hit. For this patch I did not have to worry about parseFloat because it is changed in bug 1007. So to check the performance of float to integer. The results and test is located here.

Bug 1144: Arc 3d fill is done improperly

This bug occurs when an Arc is created in a 3D sketch it always have a stroke even if noStroke() is used. To fix this issue I had to change the shape type the Triangle Fan which prevents this issue from occurring. I also created a ref test to ensure this problem does not arise in the future.

Advertisements

JavaScript Float to Int

April 17, 2011 Leave a comment

In JavaScript how can you convert a float like 3.3333 to just 3. Well there are many ways like Math.floor, Math.ceil, Math.round, parseInt, and toFixed(0). One problem which is fastest and what are the results of the new number? I made a test page that finds this out by looping 10000000 times converting the number 5.97655676758 into a integer and outputting the new number and time it took to compute.

  var j = 5.97655676758;
  //Math.floor  
  start = new Date();
  for (var i = 0; i <10000000; i++) {
    var k = Math.floor(j);
  }
  document.getElementById('results').innerHTML = "Floor: " + (new Date() -start) + " Result: " + k + "<br/>";
  //Math.ceil
  start = new Date();
  for (var i = 0; i <10000000; i++) {
    var k = Math.ceil(j);
  }
  document.getElementById('results').innerHTML += "Ceil: " + (new Date() -start) + " Result: " + k + "<br/>";
  //Math.round
  start = new Date();
  for (var i = 0; i <10000000; i++) {
    var k = Math.round(j);
  }
  document.getElementById('results').innerHTML += "Round: " + (new Date() -start) + " Result: " + k + "<br/>";
  //parseInt
  start = new Date();
  for (var i = 0; i <10000000; i++) {
    var k = parseInt(j);
  }
  document.getElementById('results').innerHTML += "parseInt: " + (new Date() -start) + " Result: " + k + "<br/>";
  //toFixed
  start = new Date();
  for (var i = 0; i <10000000; i++) {
    var k = j.toFixed(0);
  }
  document.getElementById('results').innerHTML += "toFixed: " + (new Date() -start) + " Result: " + k + "<br/>";

The results were:
Mac OS X 10.6.7 Safari
Floor: 294 Result: 5
Ceil: 316 Result: 6
Round: 337 Result: 6
parseInt: 868 Result: 5
toFixed: 4025 Result: 6
Mac OS X 10.6.7 FF4
Floor: 151 Result: 5
Ceil: 164 Result: 6
Round: 173 Result: 6
parseInt: 122 Result: 5
toFixed: 1721 Result: 6

From these results we can see that for speed Math.floor is the best being the fastest in Safari and second fastest in FF4. While for both speed and accuracy Math.round is king.

Fixefox Bug

March 29, 2011 Leave a comment

So you want to fix a bug in Firefox but you don’t know where to start. Well I’ll tell you how:
Step 1: Find a bug

Head over to Mozilla’s Bugzilla and search “student-project”. This will give you a list of bugs that employees at Mozilla believe students can handle and work on. For our class we took bug 565031.

Step 2: Reproduce Bug

Create a webpage that creates the bug and will be you test case.

Step 3: Test bug in different browsers / Check bug validity

The bug might work in other browsers or be handled differently, so  it should be tested how this bug appears in other browsers and if the bug is valid.

Step 4: Learn and understand the code / create Fix

You need to analyze the code where the bug is originating and understand why and how it does everything it needs to. Once you understand the code create the patch to fix the bug.

Step 5: Create a test to be added for this fix

In this case we need to create a parser test that will ensure that this patch works.

Step 6: Review

Set the status in Bugzilla for the the patch so it will be reviewed. (More details to come)

Here is the picture of the process from class:

Remember this bug can be discussed in the #Seneca IRC channel.

Deleting If Statements

March 29, 2011 Leave a comment

Ok for this weeks assignment the class had to modify Firefox to have the following changes:

  • Alway make new tabs be created next to the current tab
  • Change switching tabs using ctrl key to the alt key

These patches were not to difficult but hard to find. The 1st part David Humphrey showed us in class and the second we had to find.

To complete these patch all that need to be do was delete some if statements.

The first part Firefox provides the functionality so that if the tab is related it opens beside the selected tab. All I had to do was remove the if statement that checks if  it related and make this have by default and the patch will be done.

File: tabBrowser.xml Line:1286
Old:


if ((aRelatedToCurrent == null ? aReferrerURI : aRelatedToCurrent) &amp;&amp;                Services.prefs.getBoolPref("browser.tabs.insertRelatedAfterCurrent")) {
  let newTabPos = (this._lastRelatedTab || this.selectedTab)._tPos + 1;
  this.moveTabTo(t, newTabPos);
  this._lastRelatedTab = t;
}

New:

let newTabPos = (this._lastRelatedTab || this.selectedTab)._tPos + 1;
this.moveTabTo(t, newTabPos);
this._lastRelatedTab = t;

For the second part I had to change the if the set the NUM_SELECT_TAB_MODIFIER so it is alway set to alt. So now the alt key controls the switching of tabs.

File: browser-sets.inc Line:341
Old:

#ifdef XP_GNOME
#define NUM_SELECT_TAB_MODIFIER alt
#else
#define NUM_SELECT_TAB_MODIFIER accel
#endif

New:

#define NUM_SELECT_TAB_MODIFIER alt
Categories: School Tags: , ,

Processing.js I choose you!

March 11, 2011 Leave a comment

Ok for my DPS909 course we get to work on two projects (Processing.js and Popcorn.js) and help make them better by fixing bugs and finishing tickets. With advice from David Humphrey I chose Processing.js specifically the 3D bugs because of my previous work with WebGL and 3d libraries (C3DL). I decided to goto the 3D man himself, Andor. He was happy to give me some of his tickets. He gave me 4 (bug 361, 603, 852, 672). While I was working on these bugs Jon Buckley found a new bug and decided to ask Andor about it but found me. I created a reduced test case for him then decided to take the bug for myself (bug 1075). Once I fixed the bug I created a test case and while creating it I found a new bug in arc fill in 3d (bug 1144). I created a bug, filled it, created a reduced test case, and assigned it to myself (currently working on it :D).

So lets talk about what I did:

Bug 361: text-width example doesn’t work in chrome

This was a bug on the home page that teaches people ho to use text width inside Processing.js, but it was improper processing code and didn’t work inside regular processing. I fixed the code to work in processing and the tested it in processing.js.

Bug 603: static beginCamera/endCamera examples broken in repo

This was to broken static beginCamera/endCamera examples that didn’t work in processing.js but worked in processing. After testing in processing I found that it was improper processing code and was a bug that it was working in processing before, so I deleted these tests from the repo.

Bug 852: Fix 3D ref tests

Three tests were broken in processing.js because of point smoothing and WebGL. The problem is that Processing can’t turn point smoothing off and Processing.js can’t turn point smoothing on because it is not available in WebGL, so the tests had to be redone.

Bug 672: Reduce calls to uniformMatrix

UniformMatrix is a function in Processing.js that is very expensive so I had to figure out a way to reduce calls. Every update the projection matrix would be calling uniformMatrix when this is not necessary. I made it so it only changes when the projection matrix is changed in p.ortho and p.frustum.

Bug 1075: 3D PGraphics always draws below 2D shapes

This was extremely simple. Someone forgot to check if fill is one and all filled ellipse when created in 3D, all I did was add a check.

 

Bugs Ready for Review

February 11, 2011 Leave a comment

OK so I finished my bugs for my 0.1 release. 😀

So both bugs went pretty smoothly. My 1st fix in popcorn needed some work so I fixed it up and added the unit tests to show it in action :D. Next in was processing.js time. Thanks to Scott the hard part was taken care of for me, I liked that. After another meeting with him he showed me what he wanted done better and I got on it.

My job was to make it so the developer can create a page with a processing sketch and no work need to be done for it to work on an iPod, iPad, or iPhone. Also I had to make it so that the mouse event listeners were turned off when a touch event was fired. Also while testing Scott’s current hack I noticed that the canvas was highlighted every time it was touched and it made the sketch look odd. I decided to make a function that does these thing automatically when a touch event is fired for the 1st time. Once this was completed I sent this patch up for review. I did this using GIT GUI.

Steps To Set Bug For Review

1. Open GIT GUI

2. select the repository

3. rescan for the changes you made

4. select the changes you would like

5. click the tab Commit >Stage To Commit (this is the add command in GIT Bash)

6. type a Commit Message explaining the changes

7. click Commit button

8. click the Push button

9. enter Username and Password

10. goto lighthouse and post a link to the location of the bug on github and change status of bug to peer review

As alway hope I helped and wasn’t to boring. See you next time.

My bugs are located here:

https://processing-js.lighthouseapp.com/projects/41284-processingjs/tickets/bins/261844

https://webmademovies.lighthouseapp.com/projects/63272-popcorn-js/tickets/bins/261829

Categories: School Tags: , ,

Trying and Failing

February 1, 2011 1 comment

Ok, so for my 0.1 release for my DPS909 class I am working on 2 bugs. One in popcorn.js (An open source project about adding meta-data to HTML5 video) and one in processing.js (An open source project for a visual programming language to make visualizations using the canvas tag). In processing.js i need to handle touch events of all “idevices” (iPod touch, iPad, iPhone). In popcorn and need to create multiple instances for the popcorn class.

I decided to start by meeting with Scott (he works at CDOT on many open scouse projects). Scott has made a hack similar to my processing.js bug and he posted comments on my popcorn bug as well. After my meeting I decided to start my work on popcorn.

Setup With GIT GUI

Steps

  1. get yourself a github account and login
  2. find the projects you will be working with popcorn.js (https://github.com/webmademovies/popcorn-js) and processing.js (https://github.com/annasob/processing-js)
  3. fork the project (click the fork button lol)
  4. download GIT (GIT GUI  is windows only)
  5. open GIT GUI
  6. select Clone Existing Repository
  7. go to your github
  8. click the project you wanna work with
  9. copy and paste  as source location in GIT GUI
  10. pick where you what your local copy in target directory
  11. click clone
  12. once the repository is cloned select Branch >create
  13. name it your bug number
  14. get to work

Once I was setup I used minefield(browser)  and firebug (add-on) to walk through the code and figure out how popcorn works. I did many walk-throughs and still have now clue lol. I created a patch that I believe works, but I’m going to talk to Scott in person for a better explination of the code and how he would like the patch.

Well thats all for now. Next time it show you how to push code using GIT GUI (it’s super EZ)

Categories: School Tags: , ,