Summer of Code/2015/Sugar JS Ports

About You

What is your name?

My name is Utkarsh Tiwari, and I am a 2nd year undergraduate student at Jaypee Institute of Information Technology, India.


What is your email address?

My email address is iamutkarshtiwari@gmail.com


What is your Sugar Labs wiki username?

My Sugar Labs wiki username is iamutkarshtiwari


What is your IRC nickname on irc.freenode.net?

My IRC nickname is iamutkarsh


What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)

My first language of communication is English and I am also comfortable with Hindi.


Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)

Location: Uttar Pradesh, India

Time Zone: UTC + 5:30 (India Standard Time)

Working hours: I usually tend to work in afternoons (1PM-5PM) and nights (9PM-2AM). I will try to be mostly active when most of the mentors come on IRC.


Have you participated in an open-source project before? If so, please send us URLs to your profile pages for those projects, or some other demonstration of the work that you have done in open-source. If not, why do you want to work on an open-source project this summer?

I am new to open source but my first Open Source contribution began by working for Sugar Labs. I feels really nice building up activities and games out of your code which kids could use and learn from to enhance their mental and analytical skills while making their learning process more enjoyable and fun!

Why Sugar Labs?

The Sugar Learning Platform is the core component of a worldwide effort to provide every child with equal opportunity for a quality education. The feeling which we get after developing up something which will benefit millions of children’s education is awesome. If I could use my skills in such a way that even a single child is benefited from it, nothing would make me more happier.

Till date I have made 2 activities for Sugar:-

1. Buttons and Scissors

2. Make them fall


About your project

What is the name of your project?

Name: Abacus JS, Spirolateral JS and Turtle Confusion JS


Describe your project in 10-20 sentences. What are you making? Who are you making it for, and why do they need it? What technologies (programming languages, etc.) will you be using?


Abacus JS is a Javascript port for Sugar’s Abacus activity. Abacus activity is designed to let the kids explore different representations of numbers using different mechanical counting systems developed by the ancient Romans and Chinese. There are several different variants available for exploration. This will help kids improve their speed of mental math calculations using various techniques available for different abacus types.


Spirolateral JS is a Javascript port for Sugar’s Spirolateral activity. This activity is designed to help kids improve their analytical and logical thinking. This activity acts as a precursor for kids to learning programming techniques in future. In this activity the kid need to setup the 5 values such that the turtle prints out the given specific challenge.


Turtle Confusion JS is a Javascript port for Sugar’s Turtle Confusion activity. This activity is more advanced version of Spirolateral wherein the kids has to program the turtle to print out a specific pattern on the screen. This activity provides more advanced tools and functions to operate the turtle logo. This activitity will help learners to get hold of basic programming concepts like ‘repeat’, while loops and help them lay a strong foundation for mathematical concepts of co-ordinate geometry.

Overall these three activities will help kids boost their ‘creativity’ which is a basic quality of geniuses!

Programming language used- Javascript

APIs to be used- Enchant.js and Processing.js. If there would be a need for other libraries, will discuss it with Walter sir. I will be using the already available artwork from their previous Python version. My major focus will be on keep the basic concept intact with some generic UI improvements.


What is the timeline for development of your project? The Summer of Code work period is from May 19 - August 22; tell us what you will be working on each week. (As the summer goes on, you and your mentor will adjust your schedule, but it's good to have a plan at the beginning so you have an idea of where you're headed.) Note that you should probably plan to have something "working and 90% done" by the midterm evaluation (27 June); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then.

Week Task
April 26-May 2 (Pre-Program week)

Discussing the core functionalities and features of Abacus JS, Spirolateral JS and Turtle Confusion JS with my mentor
Walter Sir. Conclude the expected feature. Design the workflow of these three activities. Document a brief report on UI enhancements required if any.

May 3- May 10 Start working on Abacus JS.

1. Design the background layout of Abacus JS.
2. Put up the toolbar buttons from the previous Python version.
3. Design the main frame, rods and beads for Decimal, Suanpan, Soroban and other abacuses. Setting up the bead value changes with corresponding movement.
4. Add custom Abacus support and custom abacus frame setup(including beads values calculations).
5. Enable the toolbar buttons(‘reset’,’copy/paste’).
7. Wrap Up the design and code. Send the final code to Walter sir for review and bug fixes.
8. Document the instructions of Abacus JS on wiki page.

May 11

Designing the basic UI of both Spirolateral and Turtle Flag JS. Get approval of Walter sir.

May 12-May 26 Start working on Spirolateral JS.

1. Create the background layout of Spirolateral and add the existing tool buttons from Python version.
2. Splitting the display area co-ordinates into Target view and Current view.
3. Setting up the 5-digits input box and enabling the 5-number frames for each box when clicked.
4. Programming the turtle movements, based on the fetched inputs. Printing up the patter in Current view pane.
5. Enabling the speed controller bar of the turtle and other ‘Play/Pause’ buttons.
6. Designing the pattern challenges and importing the existing challenges from previous version.
7. Wrapping up the design and other bug fixes.

May 27 Check for code optimization wherever possible and submit the final code to Walter sir for any further additional enhancements if requires.

Document the instructions of Spirolateral JS on wiki page.

May 28 I would like to take a day off, if allowed.
May 29

Start working on Turtle Confusion JS.
Discuss the workflow of Turtle Confusion JS and setup the background layout.
Import the artwork from the previous Python version and add additional artwork to improve the UI.

May 30 Add up the existing tool buttons on the canvas.

Enable the ‘Cartesian’ , ‘Polar Coordinates’ buttons and adjust the layout of the respective graphs.
Adding toggle for ‘hover to help’ and block size increase/decrease buttons.

May 31 Setting up the draggable turtle canvas palette, work on the palete orientation and commands removablitity.

Programming the basic turtle movements based on the values fetched.

June 1- June 10 Programming the Pallette of Pen Commands.
Syncronizing the simultaneous working with Pallette commands tools.

Work on the RBG color set and setting up their functionality with other command palette.

Importing the ‘numeric palette’ operator.

June 11- June 22 Work on numeric palette operators and add images/video and audio support feature to the command palette.

Add flow operators support and test their functionality over ‘stacks’ & ‘push/pop’ request.

June 23- July 2 Programming the ‘kids assistive feature’ for wrong palette command use for the previously developed palettes.
July 3 Apply for Mid-Term Evaluation.
July 4 Add palette of variable block and extra options.le
July 5-July 10 Add support for the media objects palette.
Need to work on figuring out the necessary technologies required for implementing this in Javascript.

Discuss the Journal support feature with my mentor.

July 11- July 15 Enable the addition ‘Run’, ‘Stop’, ‘Help’ + Trash buttons in the toolbar.

Add more new challenges to the pre-existing challenges in the Python version.

Testing the Turtle Confusion JS port myself for a day and send it to Walter sir for quick review.

If allowed, upload the beta version on Sugar-store to get the feedback of kids and other mentors.

July 16- July 20 Wrap up optimization and UI improvements of Abacus JS.

Wrap up optimization and UI improvements of Spirolateral JS.

July 21- July 24

Wrap up optimization and UI improvements of Turtle Confusion JS.

July 25 Get Walter Sir’s quick review on all above three projects.
July 26- July 27 Write up the documentation for Turtle Confusion JS on wiki page.
Update the documentation of Abacus JS and Spirolateral JS
July 28 Organize the entire code and host all demos on respective Sugar domains.


Convince us, in 5-15 sentences, that you will be able to successfully complete your project in the timeline you have described. This is usually where people describe their past experiences, credentials, prior projects, schoolwork, and that sort of thing, but be creative. Link to prior work or other resources as relevant.

  • Prior experience in with Python and graphics programming.
  • Familiar with Github and it’s conventions.
  • No prior commitments in summers, GSoC would be my top priority
  • I am also fluent in Java, C/C++ and Javascript.
  • Developed a couple of activities(games) for Sugar.

My Previous Sugar Projects:

Till date I have built 2 activities(games basically) for Sugar Labs.

1:- Buttons and Scissors:

Ported this android based game (Buttons and Scissors) using Python Libraries (Pygame and Pygtk) to Sugar Environment. This activity is inspired from an android based game. It is designed to improve children's logical thinking and mental ability.

Logic- This game is designed from scratch and works on the "U-T Algorithm"(U-Un T-Tangled). I designed this algorithm to generate such a pattern of buttons on the screen which has atleast one possible way to cutoff all the buttons from the denim.

Rules- It is a puzzle game where you can select buttons only on the same horizontal, vertical or diagonal line. Cut off all the buttons from the scrap of denim to complete the level. Try to complete each level in the shortest time possible to get a better score.

Project Link:

  1. REDIRECT [[1] Buttons and Scissors]



You and the community

If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.


What will you do if you get stuck on your project and your mentor isn't around?


How do you propose you will be keeping the community informed of your progress and any problems or questions you might have over the course of the project?


Miscellaneous

We want to make sure that you can set up a development environment before the summer starts. Please do one of the following: Send us a link to a screenshot of your Sugar development environment with the following modification: when you hover over the XO-person icon in the middle of Home view, the drop-down text should have your email in place of "logout".


It's normal to need assistance with this, so please visit our IRC channel, #sugar on irc.freenode.net, and ask for help.


Describe a great learning experience you had as a child.


Is there anything else we should have asked you or anything else that we should know that might make us like you or your project more?