Final Update

Hi guys,

Sorry for not giving new updates for a month now, I decided to write really detailed git commits so this got left behind. This is the final GSOC update but not the last update about turtle3D :).

Going through the project implementation is 90% complete now and some final touches remain which I will soon update. The basic foundation is all set now. Positioning, bitmap generation, bitmap scaling and camera work really well. Scaling is the only major thing that needs work now and hence the 90% completion tag.

I have also added smooth animation for camera angle change, would probably implement the same for the turtle. Here are the camera screenshots:

Screen Shot 2015-08-24 at 11.29.59 pm

Figure 1 : Shows the camera angle change.

Screen Shot 2015-08-24 at 11.37.22 pm

Figure 2 : The palettes now do not have scroll instead have pages, pages work fine and in fact are pretty neat. (Pages were used because clipping in 3D is relatively difficult).

  • Soon the pages will work with swipe right and left and would show page bubble at bottom

Screen Shot 2015-08-25 at 1.29.22 am

The right menu cartesian icon is now used for the grid and polar icon is used for the axes. (I am yet to find a better icon). Next update would include all samples viewer bug fix and clear fix.

Screen Shot 2015-08-25 at 1.33.45 am\Screen Shot 2015-08-25 at 1.36.01 am

New Palette of turtle movement and camera are now finalised and are working well.Screen Shot 2015-08-25 at 1.46.35 am

Multiple turtles are now properly supported, camera is not for each different turtle and all turtle share the same camera, later we can maybe have named camera’s likes actions,

That is it from my side at the moment, I will continue to push updates regularly. I will soon share a list of known bugs, if you find any other bugs do comment here on this blog or open a bug on github.

Repo :

Live Site :

GSOC was a great experience and Sugar is doing a commendable thing, it is delightful to be part of such a beautiful project.

Thanks 🙂


Week’s Target,

  • Tuesday : 
    • Fix remaining portions of palette.js. Event handlers and bug testing. (Done)
    • Fix the basic syntactical errors of block.js, and blocks.js and logo.js. (block and block 50% done)
    • Add the extrude feature in the other node. (Shifted to Monday)
  • Wednesday :
    • Start positioning fixes to block and blocks.js. Complete the basic bitmap setups and basic block functions. (30% complete)
    • Complete the fixing of rudimentary errors in logo.js.
  • Thursday :
    • Complete the fixing of blocks.js and block.js, add event and error handlers and remove remaining bugs.
    • Start work on logo.js basic functions.
  • Friday :
    • Continue work on logo.js and fix the basic erros in turtle.js.
    • Add chase camera in the other node.
  • Saturday :
    • Complete logo.js.
  • Sunday :
    • Start with completing the bug fixes in logo.js.
    • Complete the basic functions in turtle.js.
  • Monday :
    • Complete the turtle.js implementation.
    • Fix Bugs in weeks work.

Work Done in this week

This weeks work was pretty interesting considering that for the first time the results of my work was visible on the canvas, I have made headways into porting blocks.js, block.js and logo.js. These are the files that are responsible for putting the scripting blocks on the screen.

24th June (Wednesday) : I fixed bugs in the earlier implementations of utils.js and trash.js. In utils.js I fixed the getBounds function and added the functionality in it to give the global coordinates outside of its parent container and also to give height and width of the bound separately. In trash.js I fixed the over trash can function to match with scaling.

25th June (Thursday) :  I started with fixing the menu scrolling today. I had to struggle a bit with positioning because three.js positions everything according to the center so we need the width and height of the current block as well if we are to set the position of an object from screen edge, this leads to complications sometimes as was the case with the scrolling. But having successfully implemented the scrolling, now I can implement the same in other areas as well which require scrolling, like the palette.

26th June (Friday) : I started with fixing blocks.js and block.js, fixed the basic addChild errors first and ported the create palette function, this allowed to adding of the basic scripting block on the screen. It looks good though the positioning is a bit off at the moment and there are no event handlers to drag and drop but it being there means that the destination is close now.

27th June (Saturday) : Today I started work on positioning the palette blocks inside the palettes and handle the drag handler. Moved ahead in porting, fixed several console errors so that palette blocks are visible inside the palettes. The background and the menuContainer are aligned properly but the palette blocks and up and down arrows are not getting positioned properly. Also ported grids and fixed the help box.

28th June (Sunday) : I found out that the errors in positioning were caused due to race condition occurring due to local storage palette load. Fixed the problem and started the positioning of the blocks.

29th June  (Monday) : I finalised the palette.js today, everything in the palette works now. Only some bugs are left, also finished some parts of blocks.js.

Updated the live preview. Click here.

From now onwards,

  • Instead of weekly blog updates, will update the blog everyday.
  • More frequent github commits with complete description.
  • Weekly targets.

Last Week’s Work

Monday 15th June: I improved the mouse binding library further. Further I added these as a event handler to the object3D of three.js. This way the mouse events have exactly the same syntax as easel js causing ease in portability and understanding. I also added the pressmove handler.

Tuesday 16th June: I worked on generalising the bounding box to groups as well. I have written a a function get2Dbounds which return bounds for even containers. Such functionality was missing in three.js out of the box. This functionality recursively checks all its children and computes the final bound of the complete group.

Wednesday 17th June : Today I worked on fixing a bug in the mouse binding. Initially the mouse binding were selecting all the objects that were being intersected. This was not desirable. When dragging and dropping objects only the top object is desired to be selected. Along with this anything that is not visible on stage should not be included in the intersection. I corrected these two bugs in the binding today.

Thursday 18th June : Worked on Completing the porting of trash.js to three. Everything works fine and the hover and hover out is responding quite well. I guess the mouse binding library I worked on has bore fruit.

Friday 19th June : Started porting portions of palette.js. Marked the areas which do not require porting and ported half of the framework. Also started work on the side node. Started the implementation of the camera features in the project. Also got the idea of including a chase camera other than the basic perspective camera.

Saturday 20th June : Got stuck on a pretty difficult bug. The first palette icon came out correctly with the texture fitting well but the second icon had both the first and second texture and so on. Approached my mentor with the problem and also posted the problem on stack overflow. Tried host of options, saw if it were some kind of closure error but to no avail. Spent at least 11 hours that day trying to fix that bug but did not work out.

Sunday 21th June : Started work on texture mapping and 3D model import, this node will take some time to update considering that I am focussing on mainly on porting the scripting first to three. Ignored the terrible texture bug and went on transcribing palette.js.

Monday 22nd June :  Finally someone on stackoverflow responds with a workaround to that problem. Apparently because of some bug in the the browser relating to binding of textures in canvas this thing occurs. The workaround is to load the image in a canvas and then use the canvas as a texture, seems inefficient but well it works, will test later on the efficiency of this method as well as some other solution if possible at the end.

Tuesday 23rd June : Transcribed 60% of palette.js. Tomorrow or max by day after tomorrow, palettes will be completely ported to three. This would leave logo.js and blocks.js, both of which are very large but have relatively less to port. After the porting is complete I can hook up both nodes of the project, one in which I have the turtle that already does the 3D art and the other one(graphical scripting) that I developed currently.

Like always, Github updated, preview updated.

PS : I am pushing active commits on github because I run my source files from a server. Maybe I should push the whole server onto github. Will do so tomorrow.

MouseEvents.js – Small Module that allows easy mouse event binding to three.js objects

I have created a nifty library that allows to easily bind mouse events to three.js objects/groups/meshes works for both orthographic and perspective cameras and allows most of the actions allowed by easel js. On the other hand I worked today to create camera change methods. Will compile and update the initial prototype tomorrow.

The library can be viewed/reviewed/downloaded here: Repo Preview

EDIT 1 :Tested the mouseout and mouseover events with 1000 objects, stats gave a fps of 50. Not that bad but definitely could be improved.

EDIT 2 : Added pressmove and pressup functionality, haven’t tried touch support and need to optimise code but other than that all easel mouse events are now covered and can be implemented in three.js.

Weekly plan

Had a chat with my mentor regarding the difficulties I am facing with implementing the 2D graphical part in three.js. Finally it was decided that we are going to use 2 libraries, one for 2D and the other for the 3D implementation. This will allow for some work to be done quickly so that flow is created. Later on if time permits I will start trying to write code to cover the graphical scripting also in three.js.

Timeline: (Weekly timeline)

  • 8th June (Monday) : Cleanup the prototype code and push commit on github as well as sugar developer list for review.
  • 9th June (Tuesday) : Properly integrate support for multiple turtles and start blocks.
  • 10th June(Wednesday) : Add different camera view support and add blocks in the palette for the same.
  • 11th June(Thursday) : Add Different lighting support and add blocks in the palette for the same.
  • 12th June(Friday) : Code cleanup and review meeting.