Anurag Bhatnagar's Blog

Finally getting down to coding the MouseLock implementation in Firefox

Continuing development on the implementation of the mouse lock bug, I’ve caught up to my fellow students and Prof. Humphrey in DPS909 by setting up the lock() method.

In my last blog post on the implementation of the MouseLock bug I mentioned I had a working build of firefox with the MouseLockable class code. Yesterday I was able to add the init() and lock() methods to the class, and re-build successfully. I also did a small test in the web console of the nightly build to test the code:

The lock() and unlock() methods are not yet implemented, but I am just changing the value of a variable to test that the code works so far, here it is:

nsresult
nsDOMMouseLockable::Init(nsIDOMWindow* aContentWindow)
{
  NS_ENSURE_ARG_POINTER(aContentWindow);
  // Hang on to the window so we can check for fullscreen
  mWindow = aContentWindow;
  return NS_OK;
}

/* void lock (); */
NS_IMETHODIMP nsDOMMouseLockable::Lock()
{
  mWindow->GetFullScreen(&mIsLocked);  
  mIsLocked = PR_TRUE;
  return NS_OK;
}

/* void unlock (); */
NS_IMETHODIMP nsDOMMouseLockable::Unlock()
{
  mIsLocked = PR_FALSE;
  return NS_OK;
}

/* bool islocked (); */
NS_IMETHODIMP nsDOMMouseLockable::Islocked(bool *_retval NS_OUTPARAM)
{
  NS_ENSURE_ARG_POINTER(_retval);	
  *_retval = mIsLocked;
  return NS_OK;
}

Since my last post, I pulled in code from humphd, diogogmt and rhung into my repository and merged their changes with mine.

Here is my latest commit after the merges and the lock() method code.

Tinkering with Firefox Code as a beginner – lessons learned

I was fortunate to have a good start in building firefox for the first time – except the windows style line endings error – I didn’t have any other difficulties and was able to get the build running locally quickly.

However, when I started to play around to make a change to the source code, I started getting into a lot of trouble. I have been trying to re-build firefox for about the last 4 hours, and only now got it to work again. Here’s what happened and what I learned:

For my first mod to the code, I thought I would insert a printf statement just before an error that I was getting on my build:

The error was inside a .cpp file inside my object directory. Even though it was inside my objdir, I thought it will be safe to make a change, as I was modifying a cpp file and not .obj file. I made the following change to the code, just before the line that threw the exception that I saw in my build.

if ( aInstancePtr )
      {
        nsCOMPtr<nsISupportsWeakReference> factoryPtr = do_QueryInterface(aInstancePtr, &status);
        printf("My first printf! Woohoo!");
        NS_ASSERTION(factoryPtr, "Oops!  You're asking for a weak reference to an object that doesn't support that.");
        if ( factoryPtr )
          {
            status = factoryPtr->GetWeakReference(&result);
          }
        // else, |status| has already been set by |do_QueryInterface|
      }

I ran the make command again in a different objdir and waited for the new ff to build, but it kept stalling at different steps. I waited for over 30 minutes the first time, and then an hour and so on but the make command would just freeze. I tried building with slightly different config options (disabling debug and test just to build quickly), but it still kept hanging.

During this whole time that it was building and failing, I was going over the different folders and files of the source code. While the folder names and file names made some sense, opening the file and trying to understand the code made far lesser sense. Even in files I thought I will be able to follow the more code I read, I got lost very quickly.

Then, I made a small change to one of the only files I could make sense of:

\mozilla-central\browser\branding\nightly\pref\firefox-branding.js

There were no comments for the lines I changed, but they were self-explanatory – they set the default url for firefox. I changed the value of the url from about:blank to the url for Planet CDOT.

pref("startup.homepage_override_url","http://zenit.senecac.on.ca/~chris.tyler/planet/");
pref("startup.homepage_welcome_url","http://zenit.senecac.on.ca/~chris.tyler/planet/");

I made the same change in another similar file I found, but then reverted it back, because I thought this was the reason my build didn’t work (the comments had warned not to make the change):

\mozilla-central\browser\branding\nightly\locales\browserconfig.properties

# Do NOT localize or otherwise change these values
browser.startup.homepage=about:blank

I had been trying the re-build in another objdir all this while because I wanted to save the working build I had, and also preserve one of the changes I had made to a .cpp file inside it. This is when I realized how silly it is to modify a file (whichever type of file) inside the objdir – because the changes will just get overwritten with a new build. And if you don’t rebuild, the changes will never take effect. (I know….I can’t believe it took me to long to realize this :P)

So it was pretty straight-forward from here, I delete all the other objdirs I had created leaving the original one that worked. I ran the make command again, targeting the same objdir – the build worked, taking just 16 minutes, as most of the object files didn’t have to be compiled again.

I knew my printf change was a lost cause, but I was hoping to see if the other change I made (changing the default url) would work. I didn’t expect it to work because there was the other properties files that still clearly defined the start-up homepage as ‘about:blank’, but somehow – and you’ll just have to trust me on this (or try it for yourself) – the default url that the firefox nightly build opened with was Planet CDOT!

While going through the c++ code and the “wall” of text during the builds, I noticed a lot of interface names and class names began with the prefix ‘ns’. For example, nsIArray. I wondered if this was a remnant of the code borrowed into the Mozilla project from ‘Netscape’. I have seen the NS prefix in class names in ios code library (iPhone) too, but that was because that code was imported from NextStep, which was the second company founded by Steve Jobs after he left Apple, which was merged back into Apple when he re-joined.

So I googled to see if my assumption was right, and it turns out the stated reason for why a lot of the code has the ‘ns’ prefix is because it stands for ‘Namespace’. Strange.

Anyway, in that search I also came across this useful article:

https://developer.mozilla.org/En/Mozilla_Coding_Style_Guide

Stay tuned for my first working printf in Mozilla code…

Making a Firefox Debug Build on Windows

As the first step towards setting up my development environment for working on the Mouse Lock Implementation on Firefox, I cloned the unofficial Mozilla Central repo, having sanitized it for windows style line-endings. I checked out a branch that I will work on for the bug.

Next step was to download the Mozilla build package for Windows, that includes most of the tools I will need to setup, configure and then debug the Mozilla code.

After installing it I ran the start-msvc10 bat file and navigated to the mozilla-central directory. I edited the .mozconfig file for the firefox debug build with the following options:

. $topsrcdir/browser/config/mozconfig
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/ff-dbg-objdir
mk_add_options MOZ_MAKE_FLAGS=-j5
ac_add_options --enable-application=browser
ac_add_options --disable-optimize 
ac_add_options --enable-debug
ac_add_options --enable-tests

The documentation I consulted for these configurations can be found here.

The next step was to just call the make command to do its thing:

time make -f client.mk build > log.txt

The log file of my make command is available here.

In an compile time of 32 minutes, my Intel i3 dual core took just 4 and a half minutes (running up to 5 processes concurrently as set in the configure options), to compile about 3680 object files (to calculate this, run this command on your objdir -> find . -name ‘*.obj’ -type f | wc -l).

I found my local firefox build in this location: \mozilla-central\ff-dbg-objdir\dist\bin

It ran with a lot of warnings, which I understand is normal, but I did get a local build of firefox in debug mode working on my machine!

Next step…diving into the code and start hacking. Stay tuned…

Impressions from FSOSS 2011

This was the third year I attended Free Software and Open Source Symposium, having volunteered at the event back in my first year (2008). As usual I expected a large number of speakers from Mozilla and Seneca to come, and was pleasantly surprised to see an even bigger turn-out, like Red Hat which I believe was a first. (2011 Speakers).

I want to discuss my impressions from two of the presentations I attended.

Building a Commercial Game Using Processing.js for Cross-platform Delivery by Daniel Hodgin and David Perit

Being familiar with Processing.js and now even hacking pjs as part of my open source project, I was curious to attend this presentation. I was already well-aware of several advantages developing a game in pjs might have, given that it runs on a browser, which makes cross-platform delivery easier, but the presentation left me with a better understanding overall.

The presentation was introduced by Dawn Mercer who is championing the project at FSOSS, and then by the founder and CEO of SpongeLabs, Jeremy Friedberg. Jeremy introduced his company and the objectives of this collaboration with FSOSS. His goal was to develop an educational game that could reach a large number of students easily. Specifically, his interest was in developing a game that was able to better impart the lessons of Mendelian genetics to students in high school. He said he had come to a realization that the era of installed software was gone, and to reach his target audience of students in schools, he would have to find another way of delivery, one that could circumvent downloading and installing new software, as most school computers don’t have admin rights. He also wanted to find a solution that relied on as little of external plug-ins as possible, for the same reason.

In collaborating with CDOT, he found the solution in processing.js.

From here the lead developer of the project – Daniel Hodgin took over and went over a brief overview of additional advantages that processing.js (pjs) had to offer for such a project. It was apparent that as an open technology, having no licensing fees was a big factor in their decision to select pjs. Also the fact that a large part of development of pjs was done right here at CDOT, it made it easier for the developers to be able to reach the developers of pjs as they needed some assistance. Daniel actually mentioned an instance when he came across a bug in pjs, and he took it up with John Buckley at CDOT, and was able to get it resolved within a matter of hours. In such cases an open technology offers great advantage as opposed to one where the support might not be as readily available or the documentation might not be as thorough, and that requires additional plug-ins to run. Ofcourse, one of the main benefits of pjs was that it can run on a browser and had practically no compile time, and from the perspective of SpongeLabs who want to get the game out there to the students, it is a perfect way to do so.
The presenters had a positive outlook of open source technologies, evident not just in the fact they were using pjs in their project, but the advantages they listed and the fact they worked at CDOT. The CEO of SpongeLab who was sponsoring the project shared the enthusiasm of the developers in using an open source technology in this case, as pjs was able to meet all of the minimum requirements they had from it.

Take control of your TV with XBMC by Lawrence Mandel

The second talk that I attended was by an employee of Mozilla – Lawrence Mandel – who was a fan of xbmc and so decided to spread the word about it at FSOSS.
XBMC was started as the X-box Media Centre project in 2004. It is licensed under GPL-2 and is thus an open source project. The project developed its own governing body by 2005 and its developer base around the world started growing rapidly. It outgrew as a media centre just for the xbox and can now be run on any device such as a game console or Apple/Google TV after jail-breaking.
The main objective of XBMC is to be able to control your tv and the content on it. XBMC’s interface allows you to access all your digital media – photos, videos, music from a hard-drive and easily sort through it. It runs on all platforms – Windows, mac, linux and ios. In some technical specifications it performs better than Apple tv, such as the video quality. While Apple TV cannot play media higher than 720p, xbmc allows the user to watch even in 1080p. The user-interface of the media centre is one of its main features that make it quick and easy to navigate through a large media library, finding favorite items easily, or the next episode in a tv series etc. Being an open source project, its interface and functionality is highly customizable. Several vendors and third party developers have developed their own add-ons to the platform, for selected content or to add functionality. For example, several add-ons exist that allow you to live stream sports content on your tv, or news, or even Netflix and Youtube.
The presented mentioned there were a few other open source projects doing the same thing, but didn’t go into any detail comparing them. He demoed how xbmc can be used to control content via a network – by connecting all the TVs in a home and then controlling them from an android phone or a tablet.

The speakers of both the talks displayed a great deal of enthusiasm for the open source projects that were behind the products that they were using – pjs and xbmc. The presenters in both the cases were not directly involved in the development community, yet could appreciate how the open source model was able to create a good quality product. Both the speakers made a point to compare the benefits of the project being open source as opposed to a commercial project, in terms of less restrictive licensing terms.

This year’s FSOSS was a newer experience for me as it is my first conference since I am actively taking part in an open source project. There are some points that came to my mind as I attended the talks this year:

As the lead developer in the first talk demoed the headway they were able to make in their project in just 4 months, I couldn’t help but think the tremendous advantage they had in using a language as pjs. In addition to the points mentioned by the speaker, I realized how beneficial their project was to the pjs community as well. While a large developer community assured the longevity of pjs, projects such as the genetics game also bring more attention to the pjs project. It is a symbiosis relationship where the developers using pjs are assured by the fact that the project won’t get abandoned anytime soon, while the open source community finds a client who can test their product, find more bugs and give the project some direction.

I am sure the application of pjs in game development will influence the functionality that is developed into the project. As the popularity of pjs for game development grows, it will inevitably push the open source project into developing more functionality in 3D, better rendering, more audio and keyboard controls. As the requirements of game developers grows – for example, faster loading of images and better caching of images for animations – the better influence it will have on the development of pjs. One more huge benefit of using an open source technology is that when a third party developers finds some functionality is lacking in pjs or any other project, they can add it themselves, and even contribute it back to the community as a plug-in.
This collaboration between developers who use the product and the open source community also helps improve the efficiency of the code as more of it is re-used, the documentation of the code improves and so does the functionality.

One of the big features of open source projects is of course their licensing terms. This also plays a big role in encouraging others to adopt the technology and develop it further and contribute something back to the project. In the xbmc talk, the presenter discussed one of the main advantages that xbmc had over Apple TV was that the content did not have to be DRM protected, unlike Apple TV, where all content had to be managed through iTunes – a black box for users. The open source alternative to Apple TV allows users to customize the look, the functionality, extend the functionality and use it however the users wants to use it without the restrictive terms most commercial software have.

I have been a big user of WordPress and jQuery over the past 3 years and I have developed some plug-ins myself and customized others. I can see how the users that use these projects influence their future development. It allows developers to stand on each other’s shoulders and produce something that, because of its open nature, offers a great deal more advantages than another similar commercial project.

These features are also evident in several other large open source projects that have attracted large developer communities around them – Android, Mozilla, Arduino and of course Linux.

Update: Link to Building a Commercial Game Using Processing.js for Cross-platform Delivery presentation

Adding a check for IE9’s non-HTML 5 mode

This is another bug on processing.js that I’ve been working on. It is much simpler than the other bug I am working on, so I switched to working on this one yesterday to have something ready for release by today.

The bug is here

The issue: If you try running processing.js in IE9’s compatibility mode without the Doctype directive, processing.js will not work, because without the directive IE9 will render the web page and run java-script as IE5 would. [1].

The Test: Navigate to this URL and try to run the following sketch in Internet Explorer 9’s compatibility mode:

void setup ()
{
    size( 200, 200 );
}

void draw ()
{
    for ( int i = 0; i < 5; i++ )
    {
        fill(random(200));
        ellipse(random(width),random(height),random(100),random(100));
    }
    filter( BLUR );
}

Now try it again, at this URL. Notice the only difference between the two pages is the doctype directive is missing on the second page, and so the Output box on the page also shows an error in processing the java-script.

The Fix: Add a check to make sure that if the doctype directive is missing in the HTML code, and the browser is IE9 running in compatibility mode, the user or the developer would be aware of it.

This is what I came up with:

  /* IE9 Compatibility mode fix */
  
  if (navigator.appName == 'Microsoft Internet Explorer') {
	var vMode = document.documentMode; // get the documentMode if browser is IE
	if (vMode == 9) { 
		var doctype = document.doctype;
		if (doctype == "null") {  // if browser is IE9, check to make sure the doctype for html 5 is declared, or warn the user/developer
			// alert("Doctype Directive is missing"); 
			throw("DocType directive is missing. The recommended DocType in IE 9 is the HTML 5 DocType: <!DOCTYPE html>"); }
	} 
  }	
  /* IE9 Compatibility mode fix end */

Most of it is self-explanatory if not already explained in the comments. The bigger issue I had was where do I insert the code. Intuitively, it should go somewhere right in the beginning when the sketch is being setup. So I ran through a sketch in FF, to use Firebug’s java-script debugging tool to trace the method call stack. It seems this is the code that keeps the loop function running:

looping = window.setInterval(function() {
        try {
          curSketch.onFrameStart();
          p.redraw();
          curSketch.onFrameEnd();
        } catch(e_loop) {
          window.clearInterval(looping);
          throw e_loop;
        }
      }, curMsPerFrame);

But this is obviously called once the loop() gets going. Just browsing through the top of the main processing.js file to see what’s the first thing that is run, (since js is compiled from top-bottom), I found some code that were browser fixes. Figuring this is where my code should go too, I inserted it there, and tested it in IE9 by using alerts(). I know alerts() is probably a horrible way to test, but sometimes I find it simpler to just find out the value in a variable as script sees it. I need to get more use to firebug’s java-script debugger 🙂

My commits, for what should be 0.2: https://github.com/anuragbhatnagar/processing-js/commits/t1606

Roadblock with the main bug assigned to me

After switching my project from a more complicated bug to two bugs in processing-js that I think I can manage, I first started working on the larger bug for the release for this Thursday.

The bug is here.

The issue: If you apply the filter() with the ‘blur’ property on any of the shapes, the whole canvas begins to shift up and to the left.

After a lot of code reading and debugging using Firebug’s javascript breakpoints (very cool and powerful stuff!) , I isolated the bug to this section of code:

for (y = 0; y < aImgHeight; y++) {
        for (x = 0; x < aImgWidth; x++) {
          cb = cg = cr = ca = sum = 0;
          read = x - sharedBlurRadius;
          if (read<0) {
            bk0 = -read;
            read = 0;
          } else {
            if (read >= aImgWidth) {
              break;
            }
            bk0=0;
          }
          for (i = bk0; i < sharedBlurKernelSize; i++) {
            if (read >= aImgWidth) {
              break;
            }
            offset = (read + yi) *4;
            m = sharedBlurKernal[i];
            ca += m * pix[offset + 3];
            cr += m * pix[offset];
            cg += m * pix[offset + 1];
            cb += m * pix[offset + 2];
            sum += m;
            read++;
          }
          ri = yi + x;
          a2[ri] = ca / sum;
          r2[ri] = cr / sum;
          g2[ri] = cg / sum;
          b2[ri] = cb / sum;
        }
        yi += aImgWidth;
      }

      yi = 0;
      ym = -sharedBlurRadius;
      ymi = ym*aImgWidth;

      for (y = 0; y < aImgHeight; y++) {
        for (x = 0; x < aImgWidth; x++) {
          cb = cg = cr = ca = sum = 0;
          if (ym<0) {
            bk0 = ri = -ym;
            read = x;
          } else {
            if (ym >= aImgHeight) {
              break;
            }
            bk0 = 0;
            ri = ym;
            read = x + ymi;
          }
          for (i = bk0; i < sharedBlurKernelSize; i++) {
            if (ri >= aImgHeight) {
              break;
            }
            m = sharedBlurKernal[i];
            ca += m * a2[read];
            cr += m * r2[read];
            cg += m * g2[read];
            cb += m * b2[read];
            sum += m;
            ri++;
            read += aImgWidth;
          }
          offset = (x + yi) *4;
          pix[offset] = cr / sum;
          pix[offset + 1] = cg / sum;
          pix[offset + 2] = cb / sum;
          pix[offset + 3] = ca / sum;
        }
        yi += aImgWidth;
        ymi += aImgWidth;
        ym++;
      }

However, I wasn’t able to get much done with this. I found some useful references to guide me, like: http://processingjs.org/learning/topic/blur

But it’s been taking long to understand the variables, the logic of the code and what might be causing the canvas to shift. I was expecting to find some code which might be using the translate() function, which might hint where I could start. No such luck yet 😛
So for this release, I switched to working on the other bug that is assigned to me, and I will get back to this bugger later.

Why I am an Atheist

In response to: http://freethoughtblogs.com/pharyngula/2011/10/08/call-for-submissions/

I can remember back to when I was around 7 years old, and I was sitting in Hindi class (in Jaipur, India). We were learning antonyms in Hindi. The word ‘Aastik’ came up – a person who believes in God, the antonym to which is ‘Nastik’. That was my first realization that it was even possible to be a non-believer.

I had always assumed that God was omnipresent – watching me at all times and making sure I didn’t do anything bad. Back then, I was even scared of having any bad thoughts, as I believed God could read my mind.

On my way back home after that day in school, I distinctly remember asking my dad, how someone can be a non-believer, how is it possible that they don’t acknowledge the existence of God? I don’t remember what he replied.

The home I grew up in wasn’t too religious. However, God did creep unknowingly into every sphere of my daily life. Every evening after sunset, we weren’t allowed to turn on any lights in the house before a short prayer to God. We had to respect books, pens, pencils or anything that we use in school as they helped us get knowledge, which was equivalent to God. So dropping a book or a pencil was as good as disrespecting God, and if you ever did – you had to quickly pick it up and touch it to your forehead and then kiss it, or you risked getting shunned by the knowledge God. My parents weren’t strict about it, but we were expected to pray to God before we ate, before we slept and after shower in the morning. I don’t even remember what my beliefs were at that point. It wasn’t so much about religion, or Hinduism, or any particular God, it was just that I accepted the existence of God.

A few years later we moved to Kuwait. I had developed a keen interest in Astronomy, and so on my birthday, our family friends gifted me Cosmos by Carl Sagan. I remember the first thing I turned to when I started reading the book – the few colored pages in the middle of the book with photos. Photos of nebulas, galaxies, planets and the one that has been etched in my brain from the first time I saw it – two human footprints side by side, one is from Tanzania 3.6 million years ago and the other from the Moon. I remember being mesmerized by the book and just lost in the thoughts about the Universe, its size, its age… From that point, it wasn’t too long before my belief in God was gone.

My parents weren’t too hard on me, as I continued most of the practices I had developed since I was a child and they believed I was just going through a phase. That was right around the time we got our first computer and access to the internet. I remember spending hours surfing Astronomy websites, reading freely available lectures on Black-holes, Einstein, Physics…creating backup of my favorite astronomy photos on floppy drives… I still have my collection 

I remember when the Mars Pathfinder landed on Mars in ’97, for some odd reason, I felt, here it is, the concrete proof God doesn’t exist. I’m still not sure why. But from then on, my reasons for being an Atheist just grew. I took a lot of pleasure every-time I learned that a famous scientist was also an Atheist and debated religion every chance I got with an attitude of almost pity towards others who were still prisoners of religion.

Not until my university years did I become less militant and actually developed an interest in studying world religions. I also became a politics junkie. The more I read; I realized that by being so confident that my views were right, I wasn’t much different from anyone else who is religious and confident they are the ones who are right. So I’m slightly more tolerant of other’s religion now.

I realize now that the skepticism that grew out of reading Cosmos has shaped my life since then, as repeatedly it has pushed me towards accepting the authority of a scientist or a scientific book/journal, more than that of my parents, my priest or any religious text.

A Reassuring Fable:

More here: The Sagan Series

Processing-js bugs for my project

Since I’m already a little familiar with the processing-js (pjs) code, and have the repository setup on my local machine and my github account, I thought I would just select another pjs bug to work on, rather than jump ship and join another open source project.
I found two bugs that I think I can take on. One is relatively simple and the other will take me more time, so hopefully together they will make up for my project for this semester.

bug #1606 – There seems to be a problem running pjs in compatibility mode of IE9. It seems the HTML tags used to link ths pjs code inside the html code does not work in compatibility mode, but works fine in the standard IE9 mode. So the objective is to alert the developer coding in pjs if he has not used the correct HTML tags, that his sketch might not run in IE9 compatibility mode.

#1392 – This is a bug with the filter() function in pjs. When the ‘blur’ argument is passed, the sketch starts doing something funny. It starts moving the whole canvas up and to the left very slowly, as if transposing the whole canvas up and to the left.

So I’m going to be looking into these bugs and posting my findings here as I make any progress. Stay tuned!

Starting anew…with my processing.js project

So the 3D rounded rect bug seems it might be much more complicated than I thought…

I thought I would achieve it similar to how the 2D rounded rectangle was done:

// Translate the stroke by (0.5, 0.5) to draw a crisp border
      if (!doFill || doStroke) {
        curContext.translate(0.5, 0.5);
      }
      curContext.beginPath();
      curContext.moveTo(x + tl, y);
      curContext.lineTo(x + width - tr, y);
      curContext.quadraticCurveTo(x + width, y, x + width, y + tr);
      curContext.lineTo(x + width, y + height - br);
      curContext.quadraticCurveTo(x+width,y+height,x+width-br,y+height);
      curContext.lineTo(x + bl, y + height);
      curContext.quadraticCurveTo(x, y + height, x, y + height - bl);
      curContext.lineTo(x, y + tl);
      curContext.quadraticCurveTo(x, y, x + tl, y);
      if (!doFill || doStroke) {
        curContext.translate(-0.5, -0.5);
      }
      executeContextFill();
      executeContextStroke();

It basically takes the parameter for the radius of the roundness passed by the user (tl) and then uses it to draw the 2d rectangle one step at a time. So it moves the index to a specific point. Then draws a line to another point, then a curve, then a line…and so on. It uses the parameters passed by the user to calculate the length of the line or the curve etc.

I thought the 3D rounded rectangle could be done the same way…

First, draw a 2D rectangle with rounded borders, just as in the code above. Then duplicate it and transpose it by the width of the 3d shape, and then draw the curved borders between the vertices just as in the code above.

Well, it turns out its not so simple. Processing-js, as one would imagine, uses OpenGL for 3D rendering. The way it handles 3D shapes is completely different from the way it handles 2D shapes, and so drawing a 3D rounded rectangle is a much more complicated bug. Suffice to say its out of my league, at-least for the purposes of this semester.

So I’ve selected 2 other bugs to work on – #1606 and #1392 More to come in next blog post.

Got firefox to render the 3D objects

After an hour or so searching on the web to find and download this mysterious “P3D renderer” that was referenced to in the error message (rotateY() can only be used with a renderer that supports 3D, such as P3D or OPENGL.), I found an example of a 3D sketch in processing.js that provided me the solution.

Thanks to Andor Salga for this example: http://processingjs.org/content/learning/3D_ide/index.php

Apparently, to render a 3D object, I have to pass ‘P3D’ as the third argument in the size function, such as so:

void setup(){
  size(500, 500, P3D);
}

void draw(){  


translate(100, 80, 0); 
rotateY(0.5);
box(60);

}

Result in firefox is:

Perhaps I will bring it to someone’s attention that it is missing from the size function’s documentation page: http://processingjs.org/reference/size_
The sketch still doesn’t run in Processing 2.0. I mean it renders, but is buggy as the screen keeps flickering. Works perfectly in Firefox though, so I think I will continue using firefox to test my code for the 3D stuff.

So the target is in sight…I mean that literally, I can see the 3D cube, whose edges have to be rounded 🙂