walterbender commented 7 months ago

Ticket Contents

Description

While Sugar has lots of activities, you can never have enough math games and puzzles. There is a great website with lots of ideas (See https://www.cut-the-knot.org/) for Sugar activities. This project would be to develop 6 to 8 new activities based on some of Bogomolny's ideas (or some of your own ideas).

We are interested in these games:

In the proposal, please mention some specific ideas for games.

Goals & Mid-Point Milestone

Goals

[ ] [Game 1]
[ ] [Game 2]
[ ] [Game 3]
[ ] [Game 4]
[ ] [Goals Achieved By Mid-point Milestone]
[ ] [Game 5]
[ ] [Game 6]
[ ] [Game 7]
[ ] [Game 8]

Setup/Installation

The games will need to run in the Sugar environment and be coded in Python using GTK3 and the Sugar Toolkit. The pygame/sugargame module will be a useful resource as well.

To set up the Sugar environment, please refer to these docs.

Expected Outcome

Some new Sugar activities that are math-oriented that run in the Sugar environment. It would be great if they were also individually packaged for Flatpak.

Acceptance Criteria

The games need to be implemented as stand-alone Sugar activities. They must adhere to the Sugar HI guidelines and be oriented towards 6- to 12-year olds.

Implementation Details

Use:

Python3
sugar-toolkit-gkt3
sugargames

Mockups/Wireframes

Product Name

Math Games

Organisation Name

Sugar Labs

Domain

⁠Education

Tech Skills Needed

Python

Mentor(s)

@chimosky @walterbender

How to Apply

See C4GT.

abshek7 commented 6 months ago

Hi @walterbender, @chimosky,

I hope this message finds you well. I came across the Math Games project for DMP 2024, and I'm very interested in contributing. The idea of developing new activities based on Bogomolny's games for Sugar Labs caught my attention, and I'm eager to apply my skills in Python and my passion for educational technology to this initiative.

Could you please share any prerequisites or specific steps I should follow to begin contributing? I'm keen on making a meaningful impact through this project and would love to discuss any potential ideas or areas where my contributions could be most valuable.

Thank you for considering my interest. Looking forward to your guidance and hoping to be part of this project

walterbender commented 5 months ago

Weekly Goals:

Week 1:

[x] Sync up goals with Sugar team.
[x] Scaling and responsiveness for Towers of Hanoi.
[x] Keep aspect ratio in Towers of Hanoi.

Week 2:

[x] Tower of Hanoi graphical improvements.
[x] Improve game-play of Towers of Hanoi.
[x] Make game state manager for Towers of Hanoi.

Week 3:

[x] More graphical improvements to Towers of Hanoi.
[x] Add pause menu to Towers of Hanoi.

Week 4:

[x] Create buttons for various levels in Towers of Hanoi.

Week 5:

[x] Graphical changes to Number guessing game.
[x] Improve game-play of Number guessing game.
[x] Add more game modes

Week 6:

[x] Improvements to Help menu in Number guessing game.

Weeks 7 & 8:

[x] Progress - Three Utilities
[x] Progress - Fractals

Week 9:

[x] Graphical improvements to Three utilities.
[x] Fix bugs in Three utilities.

Week 10:

[x] Add parameter controls to Fractals.
[x] Create sprite classes for simulate button and fractal iterator.
[x] Add game state for Fractals main menu.
[x] Graphical changes to Fractals

Week 11 & 12:

[x] Graphical changes to Bunny Islands.
[x] Improvement of Bunny Islands game play.
[x] Create game state for Puzzle board.
[ ] Improvement of Puzzle board game play.

shivam1750 commented 5 months ago

hie hi , I also want to work on this

chimosky commented 5 months ago

Hi @shivam1750, someone has already been chosen to work on this issue for DMP.

You can checkout our docs to learn how to contribute to Sugar Labs. Looking forward to your contributions!

muskan006 commented 5 months ago

Ok

On Fri, Jun 14, 2024, 11:47 PM Ibiam Chihurumnaya @.***> wrote:

Hi Shivam, someone has already been chosing to work on this issue for DMP.

You can checkout our docs https://github.com/sugarlabs/sugar-docs to learn how to contribute to Sugar Labs. Looking forward to your contributions!

— Reply to this email directly, view it on GitHub https://github.com/sugarlabs/DMP/issues/6#issuecomment-2168536138, or unsubscribe https://github.com/notifications/unsubscribe-auth/APFYTXB4LBYWL2MO4HKYPO3ZHMXTDAVCNFSM6AAAAABF5P2FFOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRYGUZTMMJTHA . You are receiving this because you commented.Message ID: @.***>

vaibhav-sangwan commented 5 months ago

Weekly Learnings & Updates (To be filled by contributor)

Week 1

Scaling approaches for Pixel Art.
Implementation of the approaches in Pygame, and testing them out with Tower Of Hanoi Activity.
Importance of Design Choices: Absolute vs StretchToFill vs KeepAspectRatio, Base Resolution, Aspect Ratio and Tile Size

Week 2

Dithering - the process of using patterns to create the illusion of greater color depth.
Outlining and it's impact in giving the sprites a cartoonish feel.
Game States and creation of a simple Game State Manager for Tower Of Hanoi activity. A game state refers to a particular phase or screen that the player interacts with. It could be as simple as a main menu, a pause menu, or as complex as in-game levels, cutscenes, and game-over screens. Each state has its own unique set of rules, visuals, and user interactions. By managing these game states effectively, we can control the flow of gameplay and provide players with a seamless and immersive experience.
The importance of non-core elements of the game. Introducing randomly generated moving clouds to Tower Of Hanoi enhanced it's visual appeal. This is not important for the gameplay in any sense, however adding them to the game proved to be the right choice.

Week 3

Creation of multi-line text renderer using pygame: I implemented a utility function that can be used in future games as well. This function takes a block of text and a surface on which the text needs to be rendered. Moreover, it takes the starting position, as well as right-margin. It works by iteratively blitting every word on the surface and then updating the values of x and y for the next word to be rendered. If the currernt word exceeds the surface limit, then y is updated, and text is moved to new line.
Importance of filler backgrounds to avoid having blank lines on screen.
Implementation of fade-in and fade-out effect for clouds: I used linear interpolation to correctly set the opacity of clouds such that they give an impression of fading into and fading out of scenes.

Week 4

Creation and switiching of multiple game states: I created game states for Help Menu, Level Select Menu and Pause Menu. To enhance user experience, I had to include ways to switch back and forth between different game states.
Importance of testing and bug fixing: when run from main, the Tower Of Hanoi activity was stretching more than the available resolution. Similar other scaling issued were encountered during testing that needed to be fixed.
Introduction to flake8 - a Python linting tool that checks your Python codebase for errors, styling issues and complexity. Many styling errors got introduced during the development of these game states which needed to be fixed. This made me realize the importance of clean and standardised way of coding in Python.

Week 5

Importance of modular code in creation of scalabale applications: I refactored the code for Number guessing activity so that it is divided into component classes and different game states instead of one single large file.
Multiple ways of enhancing user experience in Classic Mode: The traditional method to play this game is to guess a number and then computer telling the user whether their guess is correct, too low or too high. However, using colors to represent closeness to the target seemed like a more user friendly and more engaging way to achieve the same result. To achieve this, I implemented a triple color gradient using linear interpolation. If the computer thinks of the number 23, then the number having maximum distance from it, is 99. And it is colored the darkest shade of red. As we move closer to 23, the color of number boxes first changes to shades of yellow, and then finally it changes into shades of green.\
Enhancing the UI of Rev Mode in number guessing activity by adding outline-on-hover effect to various buttons and by adding instructions to the game mode instead of directing the users immediately to the gameplay screen.

Week 6

Implementation of Particle System in Pygame and the effect it has on visual experience of the game: I wanted to add a particle eruption effect to number boxes in Number Guessing activity. This would enhance the visual eaxperience of users. But while trying to add this effect, I faced multiple problems. First of all, there was no such feature provided by pygame. So I implemented a particle system in which multiple sprites would be generated and emitted from a source position. These sprites would emit in random directions at a constant speed and their size would start diminishing as they move away from the source. When their size becomes 0, they are removed from the particle group and collected by Python's Garbage Collector.
Implementation of free-falling movement under gravity: These particles, however, moved in a straight line. They were giving an effect similar to shooting stars rather than particle eruptions. To achieve the effect of eruptions, I split their velocities into x and y components using trigonometry. And every frame, an acceleration is added to the y component of velocity. This gave a similar effect to that of objects freely falling under gravity.
Creation of a page system in Help Menu of the game: During the creation of game state for Help Menu, I realised that the content wasn't fitting on the screen. So, I split the information about rev mode and classic mode in two different pages and created a page flip button that would switch the content on help menu's screen. This approach can be implemented in future games as well where the number of pages exceed 2.

Week 7

Implementation of animated background for Three Utilities Main Menu: consists of a light-grey grid where the intersections of rows and columns meet to make nodes. These nodes then function as sources and sinks of supply lines. Nodes are chosen at random to work as a source of supply lines. Then a neighboring node is chosen at random to work as a sink of the supply line. A supply line is emitted from the source node and moves with a constant speed towards the sink node. The rendering of these supply lines was pretty tricky, as the supply lines could be in any of the following phases, each of which needed to be handled differently: Generating - line hasn't been generated to it's full length. Transmitting - line has completely generated and is moving towards the sink node. Sinking - line is falling into the sink node, with it's visible length reducing every frame. Destroyed - when line has completely fallen into the sink node, it's to be removed from the memory.

Week 8

Generation of fractals using L-systems: For the generation of fractals, I came across the concept of Lindenmayor systems (or L-systems). Originally the L-Systems (short term for Lindenmayer systems) were devised to provide a formal description of the development of simple multi cellular organisms while illustrating the neighborhood relationships between plant cells. Later on, this system was extended to describe higher plants and complex branching structures. The realistic modeling of plant growth is of very high value to biology, physics and also for computer graphics (e.g. video games are using and still working on it to improve plants/forests rendering).
L-Systems consist of formal grammars which includes alphabets, constants, axioms and production rules. These L-Systems can generate sentences in an iterative manner by starting with the axiom and applying the production rules on each iteration. The generated string is very hard to interpret as is. It needs to be parsed and correctly depicted using visual elements to derive a meaningful pattern. These patterns are nothing but the fractals we are looking for.

Week 9

Importance of testing and bug fixing: One of the puzzle breaking bugs was that the supply line wasn't being rendered if the mouse went out of intermediate screen boundary. To overcome this, I added a boundary background and made appropriate changes in the Utility class to not let mouse, and hence the supply lines out of this boundary.
Creation of win screen and help menu to Three Utilities.

Week 10

Enhancing UX with parameter controls instead of key events: the fractal formation can be controlled with these controls Add parameter controls. These controls consist of sliders for properties such as angle, initial angle, number of iterations and thickness. These sliders also consist of step-up and step-down buttons to enhance the user experience. These sliders have a slider ball inside of them which can be moved using a mouse hold over them. Their x-position then changes according to the position of the mouse. The property value is calculated using a linear interpolation method. The minimum property value is attached to the leftmmost slider ball position and the maximum property value is attached to the rightmost slider ball position. To provide finer control to the users, the step buttons are provided on the sliders.
Using pygame's draw submodule to make interactive logos: When you move to touch any of the characters in the game logo, they move away and up from their original position giving a cool little effect. Instead of making different movable sprites for different characters, I made the logo such that it consists of two instances of game name's text rendered over it. Then I hide one of the instances by drawing over it using pygame's draw submodule. Whenever the user tries to move their mouse over to a character, the rectangle drawn over other instance moves downwards to the visible instance, giving an illusion that the character is moving upwards.

Week 11

Importance of good game design prior to development: The puzzle board game consists of a grid on which all the puzzle tiles can be placed. These tiles will be automatically snapped to the grid when mouse is hovered over it. The major components are Grid and Tile. Tiles can exist in the following states: Placed or Unplaced Focused or Unfocused When mouse is clicked on an unplaced tile, it is put into focus. Any tile that was previously in focus will be returned to it's previous state - whether placed or unplaced. Now, when a tile is in focused state, certain actions can be performed on it. If the tile is placed and focused, deletion from grid operation can be performed on it using 'D' key. Else if tile is focused and unplaced, rotate clockwise and rotate anticlockwise operations can be performed on it using right and left arrow keys respectively.
Creation of Grid System in pygame and implementing methods such as snapToGrid: The tiles also have a snap method attached to them that controls their snapping to grid behaviour. The grid is divided into rows and columns. So, the snap method gets the topleft coordinate of the held tile, and makes it a multiple of row and cell height, giving the effect of snapping. Also, tint colors are added to the held tiles. A red tint suggests that the held tile cannot be placed because some or all of the underlying cells are occupied. Whereas a green tint suggests that the tile can be successfully placed.

Week 12

Using multisourced BFS to check for win: Implemented a multisourced Breadth First Search algorithm from all blue bunnies. If the search encounters any red bunny, then it means that blue bunnies can reach red bunnies, hence failing the win criteria.
Enhancing user experience and accessibility by adding buttons instead of using key events and improving the visual elements: Added the buttons for delete tile operation, rotate tile clockwise operation and rotate tile anticlockwise operation. Updated the puzzleboard background to include ocean and a beach on which the grid and tiles are placed, setting up a light and vacation mood to the overall game theme.

sugarlabs / DMP

[DMP 2024]: Math Games #6