Mathematical induction games - Revision history

Cclewley at 13:22, 9 February 2022

2022-02-09T13:22:38Z

← Older revision		Revision as of 13:22, 9 February 2022
Line 117:		Line 117:
	* [https://www.imperial.ac.uk/brand-style-guide/visual-identity/brand-colours/ The Imperial Brand colours]		* [https://www.imperial.ac.uk/brand-style-guide/visual-identity/brand-colours/ The Imperial Brand colours]
	* [https://googology.fandom.com/wiki/Kirby-Paris_hydra Googology Wiki article on the Kirby-Paris Hydra]. In the version we implemented, n is always 1.		* [https://googology.fandom.com/wiki/Kirby-Paris_hydra Googology Wiki article on the Kirby-Paris Hydra]. In the version we implemented, n is always 1.
			[[Category:Project pages]]
	[[Category:~~Visualisation~~ Project ~~Pages~~]]

DenizAydin: move /* Useful links */ to the end

2021-12-13T15:51:08Z

move Useful links: to the end

← Older revision		Revision as of 15:51, 13 December 2021
Line 95:		Line 95:

	The starting cactus is chosen to be large enough for it to grow a fair amount as it gets eaten, but still be relatively quick to beat as slightly larger cacti get out of hand very fast! When there is no more cactus the following message is displayed:<blockquote>The cactus is defeated! But now the beetle will starve - could it have sustained itself forever?</blockquote>This poses an extra (impossible) challenge to the user and attempting it will force them to think about why the cactus will run out rather than just mindlessly clicking through it.		The starting cactus is chosen to be large enough for it to grow a fair amount as it gets eaten, but still be relatively quick to beat as slightly larger cacti get out of hand very fast! When there is no more cactus the following message is displayed:<blockquote>The cactus is defeated! But now the beetle will starve - could it have sustained itself forever?</blockquote>This poses an extra (impossible) challenge to the user and attempting it will force them to think about why the cactus will run out rather than just mindlessly clicking through it.

	~~== Useful links ==~~

	* [https://www.imperial.ac.uk/brand-style-guide/visual-identity/brand-colours/ The Imperial Brand colours]
	* [https://googology.fandom.com/wiki/Kirby-Paris_hydra Googology Wiki article on the Kirby-Paris Hydra]. In the version we implemented, n is always 1.

	==Progress and Future Work==		==Progress and Future Work==
Line 108:		Line 103:
	* Designing slides that go after the visualisation to explain the inductive argument in detail, as well as the broader concept of mathematical induction it is an example of. This would ordinarily be done in the lecture it is shown in, but having this built in to the visualisation would allow it to be used as a learning tool for people outside the course as well.		* Designing slides that go after the visualisation to explain the inductive argument in detail, as well as the broader concept of mathematical induction it is an example of. This would ordinarily be done in the lecture it is shown in, but having this built in to the visualisation would allow it to be used as a learning tool for people outside the course as well.

	The prototype Beetle and Cactus game functions and could ~~potentially~~ be used in lectures but is not a complete visualisation design. As such there is a lot of future work that could be done here:		The prototype Beetle and Cactus game functions and could be used in lectures but is not a complete visualisation design. As such there is a lot of future work that could be done here:

	* Making a new wiki page for it, as it will likely be a seperate visualisation entirely from The Game of Frogs.		* Making a new wiki page for it, as it will likely be a seperate visualisation entirely from The Game of Frogs.
Line 117:		Line 112:
	* An "auto-play" feature that just eats away at the cactus without user input.		* An "auto-play" feature that just eats away at the cactus without user input.
	* Improving visuals, eg making the cactus look more realistic.		* Improving visuals, eg making the cactus look more realistic.

			== Useful links ==

			* [https://www.imperial.ac.uk/brand-style-guide/visual-identity/brand-colours/ The Imperial Brand colours]
			* [https://googology.fandom.com/wiki/Kirby-Paris_hydra Googology Wiki article on the Kirby-Paris Hydra]. In the version we implemented, n is always 1.

	[[Category:Visualisation Project Pages]]		[[Category:Visualisation Project Pages]]

DenizAydin: /* Progress and Future Work */

2021-12-13T15:47:56Z

Progress and Future Work

← Older revision		Revision as of 15:47, 13 December 2021
Line 32:		Line 32:

	==Design Overview==		==Design Overview==
			By our staff partner's reccomendation we focused on fleshing out one of the visualisation designs while viewing the other as a bonus task.

	We provide:		We provide:

Line 40:		Line 42:
	<blockquote>''In The Game of Frogs, you swim or you die.''</blockquote>		<blockquote>''In The Game of Frogs, you swim or you die.''</blockquote>
	[[File:FrogGameSlide1.jpg\|none\|frame\|Page 1 is an introduction explaining the motiviation of induction in the context of computer science]]		[[File:FrogGameSlide1.jpg\|none\|frame\|Page 1 is an introduction explaining the motiviation of induction in the context of computer science]]
	[[File:FrogGameSlide2.jpg\|none\|frame\|Page 2 introduces the setup, explaining the rules.]]		[[File:FrogGameSlide2.jpg\|none\|frame\|Page 2 introduces the setup, explaining the rules. Note: The completed visualisation should display the water the log is floating on]]
	[[File:FrogGameSlide3.jpg\|none\|frame\|Clicking the start button begins the animation, which runs until all frogs fall off. The user is then asked to consider whether this happens in general before moving on to the next page.]]		[[File:FrogGameSlide3.jpg\|none\|frame\|Clicking the start button begins the animation, which runs until all frogs fall off. The user is then asked to consider whether this happens in general before moving on to the next page.]]
	[[File:FrogGameSlide5.jpg\|none\|frame\|Page 3 is the main visualisation. Users can change the number of frogs, the speed and direction of each individual frog and then observe the results.]]		[[File:FrogGameSlide5.jpg\|none\|frame\|Page 3 is the main visualisation. Users can change the number of frogs, the speed and direction of each individual frog and then observe the results.]]
Line 80:		Line 82:

	==== Frog Velocities ====		==== Frog Velocities ====
	The velocity of each individual frog can be changed by varying the slider above it. Sliders are ideal for this task as they are good for variables where full precision is not necessary. To make the purpose of these sliders intuitive, snail and hare icons are shown and the slider body gets thicker towards the top, indicating a rise in intensity as the slider goes up. With many frogs changing the velocities one by one is annoying so a button is provided to randomize all of them to get a varied spread of speeds without taking too long. ~~For convenience~~ we have added the option to select all frogs at once and allow the user to toggle any single slider to change the speeds of all the frogs together.		The velocity of each individual frog can be changed by varying the slider above it. Sliders are ideal for this task as they are good for variables where full precision is not necessary. To make the purpose of these sliders intuitive, snail and hare icons are shown and the slider body gets thicker towards the top, indicating a rise in intensity as the slider goes up. With many frogs changing the velocities one by one is annoying so a button is provided to randomize all of them to get a varied spread of speeds without taking too long. In response to feedback we have added the option to select all frogs at once and allow the user to toggle any single slider to change the speeds of all the frogs together.

	In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.		In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.
Line 93:		Line 95:

	The starting cactus is chosen to be large enough for it to grow a fair amount as it gets eaten, but still be relatively quick to beat as slightly larger cacti get out of hand very fast! When there is no more cactus the following message is displayed:<blockquote>The cactus is defeated! But now the beetle will starve - could it have sustained itself forever?</blockquote>This poses an extra (impossible) challenge to the user and attempting it will force them to think about why the cactus will run out rather than just mindlessly clicking through it.		The starting cactus is chosen to be large enough for it to grow a fair amount as it gets eaten, but still be relatively quick to beat as slightly larger cacti get out of hand very fast! When there is no more cactus the following message is displayed:<blockquote>The cactus is defeated! But now the beetle will starve - could it have sustained itself forever?</blockquote>This poses an extra (impossible) challenge to the user and attempting it will force them to think about why the cactus will run out rather than just mindlessly clicking through it.

	~~Further goals for this project could be an "auto" button that would eat away the cactus without user input, and more variance/customisability in the inital configuration.~~

	== Useful links ==		== Useful links ==
Line 102:		Line 102:

	==Progress and Future Work==		==Progress and Future Work==
	*~~''Is~~ the design ~~finalised?~~''		We are happy to say we have succeeded in our goal of a complete design for The Game of Frogs. Nevertheless there are opportunities for future work to consider:
	No, ~~it is a draft~~.
			* Of course, actually constructing the visualisation in Javascript.
			* Creating vector sprites for the components involved.
			* Designing slides that go after the visualisation to explain the inductive argument in detail, as well as the broader concept of mathematical induction it is an example of. This would ordinarily be done in the lecture it is shown in, but having this built in to the visualisation would allow it to be used as a learning tool for people outside the course as well.

			The prototype Beetle and Cactus game functions and could potentially be used in lectures but is not a complete visualisation design. As such there is a lot of future work that could be done here:

			* Making a new wiki page for it, as it will likely be a seperate visualisation entirely from The Game of Frogs.
			* Figuring out why it doesn't work on some people's browsers.
			* Supplementing the prototype with an educational preamble and an animated explanation of the rules.
			* Designing an explanation of the inductive argument which this time is more complicated as it typically uses ordinals, at least in the general case.
			* Adding the choice of mutltiple starting cacti, or even custom user-defined ones.
			* An "auto-play" feature that just eats away at the cactus without user input.
			* Improving visuals, eg making the cactus look more realistic.

	~~However further work could be including an explanation of the inductive arguments, and incorporating the beetle and cactus demonstration into the broader design with it's own introduction.~~
	[[Category:Visualisation Project Pages]]		[[Category:Visualisation Project Pages]]

DenizAydin: fix bold subsubheading

2021-12-13T15:06:48Z

fix bold subsubheading

← Older revision		Revision as of 15:06, 13 December 2021
Line 84:		Line 84:
	In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.		In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.

	==== ~~'''~~Animation Speed~~'''~~ ====		==== Animation Speed ====
	With differing frog numbers, the run time for the game will differ and it may be more ideal if the user can change the animation speed to improve engagement with the game. For example, a simulation with a high frog count would take relatively longer for the game to conclude, so allowing the user to speed up the animation while it is running with a slider will help sustain focus.		With differing frog numbers, the run time for the game will differ and it may be more ideal if the user can change the animation speed to improve engagement with the game. For example, a simulation with a high frog count would take relatively longer for the game to conclude, so allowing the user to speed up the animation while it is running with a slider will help sustain focus.

DenizAydin: Include a couple of links

2021-12-13T15:06:10Z

Include a couple of links

← Older revision		Revision as of 15:06, 13 December 2021
Line 27:		Line 27:
	The first thought experiment is "The Game of Frogs", where n frogs slide back and forth on a 1-dimensional frictionless log. If two frogs collide, they bounce off eachother, and if they reach the end of the log they fall into the water and are removed from the game. It seems obvious that each frog must eventually fall into the water, but how can one prove this? After the lecture, the students should be able to provide such an inductive argument.		The first thought experiment is "The Game of Frogs", where n frogs slide back and forth on a 1-dimensional frictionless log. If two frogs collide, they bounce off eachother, and if they reach the end of the log they fall into the water and are removed from the game. It seems obvious that each frog must eventually fall into the water, but how can one prove this? After the lecture, the students should be able to provide such an inductive argument.

	The second is "The Beetle and the Cactus". A beetle is attempting to eat a cactus which has a tree structure, where every segment can have other segments branching off of it. When it eats one of the outermost "leaf" segments the segment immedietly before it gets duplicated, along with every one of it's descendents. The question is whether or not the beetle can finish off the whole cactus. At first the cactus appears to grow exponentially making the task seem impossible, but the surprising fact is that not only can the beetle eat the whole cactus regardless of the starting configuration, it cannot be avoided so long as it keeps eating. The inductive argument here is more complicated, as the cactus can get bigger before it gets smaller. Because of this a a complete proof is not expected from the students, but it would be nice for them to be able to describe a rough overview of how such an argument would work.		The second is "The Beetle and the Cactus" (also known as the Kirby-Paris Hydra). A beetle is attempting to eat a cactus which has a tree structure, where every segment can have other segments branching off of it. When it eats one of the outermost "leaf" segments the segment immedietly before it gets duplicated, along with every one of it's descendents. The question is whether or not the beetle can finish off the whole cactus. At first the cactus appears to grow exponentially making the task seem impossible, but the surprising fact is that not only can the beetle eat the whole cactus regardless of the starting configuration, it cannot be avoided so long as it keeps eating. The inductive argument here is more complicated, as the cactus can get bigger before it gets smaller. Because of this a a complete proof is not expected from the students, but it would be nice for them to be able to describe a rough overview of how such an argument would work.

	For our visualisation, Mark has stated that it is not strictly necessary for the inductive arguments to be explained within the visualisation for them to be of use in his lecture. The main intent is for the visualisation to make the abstract thought experiments more real for the students to play with and the teaching will be done around them. Our designs will at least have self contained instructions for use, but we may consider including an overview of the inductive arguments.		For our visualisation, Mark has stated that it is not strictly necessary for the inductive arguments to be explained within the visualisation for them to be of use in his lecture. The main intent is for the visualisation to make the abstract thought experiments more real for the students to play with and the teaching will be done around them. Our designs will at least have self contained instructions for use, but we may consider including an overview of the inductive arguments.
Line 95:		Line 95:

	Further goals for this project could be an "auto" button that would eat away the cactus without user input, and more variance/customisability in the inital configuration.		Further goals for this project could be an "auto" button that would eat away the cactus without user input, and more variance/customisability in the inital configuration.

			== Useful links ==

			* [https://www.imperial.ac.uk/brand-style-guide/visual-identity/brand-colours/ The Imperial Brand colours]
			* [https://googology.fandom.com/wiki/Kirby-Paris_hydra Googology Wiki article on the Kirby-Paris Hydra]. In the version we implemented, n is always 1.

	==Progress and Future Work==		==Progress and Future Work==

DenizAydin: SPAG and slight rewordings

2021-12-13T14:55:24Z

SPAG and slight rewordings

← Older revision		Revision as of 14:55, 13 December 2021
Line 1:		Line 1:
	~~''This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.''~~

	==Contributors==		==Contributors==
	*Zerui Qian, Department of Physics, Student partner from October 2021		*Zerui Qian, Department of Physics, Student partner from October 2021
Line 18:		Line 16:
	2. Visualising "The beetle and the cactus".		2. Visualising "The beetle and the cactus".

	This is a thought experiment to get students thinking about Mathematical Induction. We would like to have a visualisation for this scenario that will allow the students to experiment with the idea (e.g. initial cactus set-up and beetle's rules). The core learning outcome here is that a student should be able to provide an inductive argument to show why the beetle can (and will) eventually consume the whole cactus. This thought experiment has also been referred to as "Hercules and the Hydra" and has an existing online visualisation. <blockquote>''I'd be happy with the students only tackling one of these two visualisations (not that I would be unhappy if they did both!''		This is a thought experiment to get students thinking about Mathematical Induction. We would like to have a visualisation for this scenario that will allow the students to experiment with the idea (e.g. initial cactus set-up and beetle's rules). The core learning outcome here is that a student should be able to provide an inductive argument to show why the beetle can (and will) eventually consume the whole cactus. This thought experiment has also been referred to as "Hercules and the Hydra" and has an existing online visualisation. <blockquote>''I'd be happy with the students only tackling one of these two visualisations (not that I would be unhappy if they did both!)''

	- Mark </blockquote>		- Mark </blockquote>

	==Aims & Learning Outcomes==		==Aims & Learning Outcomes==
	*''Explain the motivation for your visualisation.''

	*''Introduce the subject of your visualisation.''
	*''Which module and year is it intended for and which setting (lecture or self study)?''
	*''List learning outcomes. E.g.: "After using this visualisation, students should be able to explain that..."''

	These two game visualisations will be shown during a lecture of COMP400018 - Discrete Mathematics, Logic and Reasoning. They will also be available for self-study so that students can validate what we have discussed in the lecture.		These two game visualisations will be shown during a lecture of COMP400018 - Discrete Mathematics, Logic and Reasoning. They will also be available for self-study so that students can validate what we have discussed in the lecture.

Line 67:		Line 59:

	===Graphical Design===		===Graphical Design===
	~~<remove this section when ready>~~		A key goal of the design process was to have the abstract mathematical problem appear more familiar to the user, in order to keep them actively engaged. We chose to implement the conventional icons like the start/stop/pause buttons one would expect in any interactive animation; the user does not need to be reminded what the purpose of these are and so we save clutter on the display by using them. Given the theme of animals we also thought a nice touch would be to include hare/snail symbols to indicate the speeds of the frogs.

	~~Talk about:~~
	*Familiar icons
	*colour scheme (based on Imperial brand colours)
	*Use of ~~space (text panel~~, ~~why~~ the ~~sliders are vertical)~~
	*How all the ~~transitions are going~~ to be ~~smoothed~~
	*Arrows change colour and ~~size~~ to ~~convey velocity~~
	</~~remove this section when ready>~~

	~~A key part of the design process was~~ to ~~have~~ the ~~fairly bare-bones concept of the mathematical problem appear more familiar to the user, in order to keep them passively engaged. Given the theme of animals, we thought a nice touch~~ would ~~be to include hare/snail symbols to indicate the speeds of the frogs~~ in ~~motion.~~		We chose also to implement the conventional start/stop/pause buttons one would expect in any interactive animation

	We ~~chose also to implement the conventional start/stop/pause buttons one~~ would ~~expect~~ in ~~any interactive animation; the user does not need to~~ be ~~reminded what these are and so we save clutter on the display by using them~~.		The red (wood), green (frog), and blue (water) colour scheme is vibrant and complements Imperial's own colour scheme which we use in our UI. We felt this choice would look engaging and clear in its simplicity, as well as be consistent as an ImpVis visualisation.

	~~The red (wood), green (frog), and blue (water) colour scheme~~ of the game ~~lent itself well~~ to the ~~use~~ of ~~Imperial's own colour scheme~~ to ~~use~~ in ~~our UI~~. ~~We felt~~ this ~~choice would look clear~~, ~~in its simplicity, as well as be appropriate as an ImpVis visualisation~~.		We wanted the configuration of the game to be highly interactive for the user; enabling them to customise the speeds of the frogs individually with sliders allows them to get their hands on the problem at hand in an engaging way. By implementing vertical sliders we simultaneously provide this option to the user, and take up dead space caused by the one-dimensional horizontal aspect of the game.

	~~We wanted~~ the ~~configuration~~ of ~~the game to~~ be ~~highly interactive for the user; enabling them to customise the speeds of~~ the frogs ~~with sliders allows them to get their hands on~~ the ~~problem~~ at ~~hand in an engaging way. By implementing vertical sliders we simultaneously provide this option to~~ the ~~user~~, and ~~take up dead space caused by~~ the one~~-dimensional aspect of the visualisation~~.		To keep from the visualisation feeling plain, one possible feature of an implementation of this design could be a page transition in which the log, frogs, etc. are dropped onto the screen (featuring water) at the start of a new page, and drift offscreen at the end of one.

	To keep from the visualisation feeling plain, one possibly feature of an implementation of this design could be a page transition in which the log, frogs, et al are dropped onto the screen (featuring water) at the start of a new page, and washed away by a stream at the end of one.		In keeping with mathematical conventions, the velocities of the frogs are indicated by vectors to provide feedback for when the user changes them. In an extreme case of many frogs being hard to keep track of, we can employ a colour scheme to indicate the parity (direction) of their motion.

	In keeping with mathematical ~~tradition~~, the velocities of the frogs are indicated by vectors~~, this makes it clear~~ to the user ~~what the current behaviour of each element of the visualisation is~~. In an extreme case of many frogs being hard to keep track of, we employ a colour scheme to indicate the parity (direction) of their motion.

	===Interaction Design===		===Interaction Design===
Line 98:		Line 80:

	==== Frog Velocities ====		==== Frog Velocities ====
	The velocity of each individual frog can be changed by varying the slider above it. Sliders are ideal for this task as they are good for variables where full precision is not necessary. To make the purpose of these sliders intuitive, snail and hare icons are shown and the slider body gets thicker towards the top, indicating a rise in intensity as the slider goes up. With many frogs changing the velocities one by one is annoying so a button is provided to randomize all of them to get a varied spread of speeds without taking too long. ~~In addition to this~~ we have added the option to select all frogs at once and allow the user to toggle any single slider to change the speeds of all the frogs together		The velocity of each individual frog can be changed by varying the slider above it. Sliders are ideal for this task as they are good for variables where full precision is not necessary. To make the purpose of these sliders intuitive, snail and hare icons are shown and the slider body gets thicker towards the top, indicating a rise in intensity as the slider goes up. With many frogs changing the velocities one by one is annoying so a button is provided to randomize all of them to get a varied spread of speeds without taking too long. For convenience we have added the option to select all frogs at once and allow the user to toggle any single slider to change the speeds of all the frogs together.

	In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.		In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.

	'''Animation Speed'''		==== '''Animation Speed''' ====
			With differing frog numbers, the run time for the game will differ and it may be more ideal if the user can change the animation speed to improve engagement with the game. For example, a simulation with a high frog count would take relatively longer for the game to conclude, so allowing the user to speed up the animation while it is running with a slider will help sustain focus.
	In differing frog numbers, the run time for the game will differ and it may be more ideal if the user can ~~toggle~~ the animation speed to improve engagement with the game. For example, a ~~stimulation~~ with a high frog count would take relatively longer for the game to ~~finish and~~ conclude, so by allowing the user to speed up the animation ~~and~~ sustain focus ~~and productive learning~~.

	=== Beetle and Cactus ===		=== Beetle and Cactus ===
	The Beetle and Cactus prototype is intended more as a technical demonstration ~~that~~ a full design, but there are still some design decisions that go into it. The cactus itself is based on the prickly pear plant, as it the desired node-tree structure. This also makes the colour scheme very contrasting with the green body nodes and the pink clickable edge nodes.		The Beetle and Cactus prototype is intended more as a technical demonstration than a full design but there are still some design decisions that go into it. The cactus itself is based on the prickly pear plant, as it has the desired node-tree structure. This also makes the colour scheme very contrasting with the green body nodes and the pink clickable edge nodes.

	The main thing the prototype does is provide a solution to the problem of displaying the full cactus and animating it's growth. Each of the descendants of a node are evenly spread out (by angle) around it, and when a node is removed the duplication of it's parent is smoothly animated with transparency so the user can clearly see what is being changed. An animation speed slider is provided so they can speed it up if they ~~just~~ wish to click through the ~~entire~~ cactus.		The main thing the prototype does is provide a solution to the problem of displaying the full cactus and animating it's growth. Each of the descendants of a node are evenly spread out (by angle) around it, and when a node is removed the duplication of it's parent is smoothly animated with transparency so the user can clearly see what is being changed. An animation speed slider is provided so they can speed it up if they wish to click through the cactus faster.

	The starting cactus is chosen to be large enough for it to grow a fair amount as it gets eaten, but still be relatively quick to beat as slightly larger cacti get out of hand very fast! When there is no more cactus the following message is displayed:<blockquote>The cactus is defeated! But now the beetle will starve - could it have sustained itself forever?</blockquote>This poses an extra (impossible) challenge to the user and attempting it will force them to think about why the cactus will run out rather than just mindlessly clicking through it.		The starting cactus is chosen to be large enough for it to grow a fair amount as it gets eaten, but still be relatively quick to beat as slightly larger cacti get out of hand very fast! When there is no more cactus the following message is displayed:<blockquote>The cactus is defeated! But now the beetle will starve - could it have sustained itself forever?</blockquote>This poses an extra (impossible) challenge to the user and attempting it will force them to think about why the cactus will run out rather than just mindlessly clicking through it.

	Further goals for this project could be an "auto" button that would eat away the cactus without user input, and more variance/~~choice~~ in the inital configuration.		Further goals for this project could be an "auto" button that would eat away the cactus without user input, and more variance/customisability in the inital configuration.

	==Progress and Future Work==		==Progress and Future Work==

KellyChang: /* Interaction Design */

2021-12-08T16:29:15Z

Interaction Design

← Older revision		Revision as of 16:29, 8 December 2021
Line 101:		Line 101:

	In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.		In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.

			'''Animation Speed'''

			In differing frog numbers, the run time for the game will differ and it may be more ideal if the user can toggle the animation speed to improve engagement with the game. For example, a stimulation with a high frog count would take relatively longer for the game to finish and conclude, so by allowing the user to speed up the animation and sustain focus and productive learning.

	=== Beetle and Cactus ===		=== Beetle and Cactus ===

KellyChang: /* Frog Velocities */

2021-12-08T16:09:17Z

Frog Velocities

← Older revision		Revision as of 16:09, 8 December 2021
Line 98:		Line 98:

	==== Frog Velocities ====		==== Frog Velocities ====
	The velocity of each individual frog can be changed by varying the slider above it. Sliders are ideal for this task as they are good for variables where full precision is not necessary. To make the purpose of these sliders intuitive, snail and hare icons are shown and the slider body gets thicker towards the top, indicating a rise in intensity as the slider goes up. With many frogs changing the velocities one by one is annoying so a button is provided to randomize all of them to get a varied spread of speeds without taking too long.		The velocity of each individual frog can be changed by varying the slider above it. Sliders are ideal for this task as they are good for variables where full precision is not necessary. To make the purpose of these sliders intuitive, snail and hare icons are shown and the slider body gets thicker towards the top, indicating a rise in intensity as the slider goes up. With many frogs changing the velocities one by one is annoying so a button is provided to randomize all of them to get a varied spread of speeds without taking too long. In addition to this we have added the option to select all frogs at once and allow the user to toggle any single slider to change the speeds of all the frogs together

	In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.		In addition, clicking on the frog will flip its direction. Hovering over a frog will show a blue circular arrow in order to make this obvious before the user does it.

MaxBingham: /* Graphical Design */

2021-12-08T15:57:49Z

Graphical Design

← Older revision		Revision as of 15:57, 8 December 2021
Line 78:		Line 78:

	A key part of the design process was to have the fairly bare-bones concept of the mathematical problem appear more familiar to the user, in order to keep them passively engaged. Given the theme of animals, we thought a nice touch would be to include hare/snail symbols to indicate the speeds of the frogs in motion.		A key part of the design process was to have the fairly bare-bones concept of the mathematical problem appear more familiar to the user, in order to keep them passively engaged. Given the theme of animals, we thought a nice touch would be to include hare/snail symbols to indicate the speeds of the frogs in motion.

			We chose also to implement the conventional start/stop/pause buttons one would expect in any interactive animation; the user does not need to be reminded what these are and so we save clutter on the display by using them.

	The red (wood), green (frog), and blue (water) colour scheme of the game lent itself well to the use of Imperial's own colour scheme to use in our UI. We felt this choice would look clear, in its simplicity, as well as be appropriate as an ImpVis visualisation.		The red (wood), green (frog), and blue (water) colour scheme of the game lent itself well to the use of Imperial's own colour scheme to use in our UI. We felt this choice would look clear, in its simplicity, as well as be appropriate as an ImpVis visualisation.

MaxBingham: updated graphical design section

2021-12-08T15:53:07Z

updated graphical design section

← Older revision		Revision as of 15:53, 8 December 2021
Line 67:		Line 67:

	===Graphical Design===		===Graphical Design===
			<remove this section when ready>

	Talk about:		Talk about:
	*Familiar icons		*Familiar icons
Line 73:		Line 75:
	*How all the transitions are going to be smoothed		*How all the transitions are going to be smoothed
	*Arrows change colour and size to convey velocity		*Arrows change colour and size to convey velocity
			</remove this section when ready>

			A key part of the design process was to have the fairly bare-bones concept of the mathematical problem appear more familiar to the user, in order to keep them passively engaged. Given the theme of animals, we thought a nice touch would be to include hare/snail symbols to indicate the speeds of the frogs in motion.

			The red (wood), green (frog), and blue (water) colour scheme of the game lent itself well to the use of Imperial's own colour scheme to use in our UI. We felt this choice would look clear, in its simplicity, as well as be appropriate as an ImpVis visualisation.

			We wanted the configuration of the game to be highly interactive for the user; enabling them to customise the speeds of the frogs with sliders allows them to get their hands on the problem at hand in an engaging way. By implementing vertical sliders we simultaneously provide this option to the user, and take up dead space caused by the one-dimensional aspect of the visualisation.

			To keep from the visualisation feeling plain, one possibly feature of an implementation of this design could be a page transition in which the log, frogs, et al are dropped onto the screen (featuring water) at the start of a new page, and washed away by a stream at the end of one.

			In keeping with mathematical tradition, the velocities of the frogs are indicated by vectors, this makes it clear to the user what the current behaviour of each element of the visualisation is. In an extreme case of many frogs being hard to keep track of, we employ a colour scheme to indicate the parity (direction) of their motion.

	===Interaction Design===		===Interaction Design===
	In the main visualisation, buttons that start, pause, and reset the game are located at the upper left corner of the visualisation section. All buttons have icons, and in many cases these are so universal and familiar that text labels are not necessary. Buttons that cannot be interacted with at the current moment are "grayed out". Otherwise all buttons are colour-coded: yellow for pause, red for reset, green and red for adding and removing frogs.		In the main visualisation, buttons that start, pause, and reset the game are located at the upper left corner of the visualisation section. All buttons have icons, and in many cases these are so universal and familiar that text labels are not necessary. Buttons that cannot be interacted with at the current moment are "grayed out". Otherwise all buttons are colour-coded: yellow for pause, red for reset, green and red for adding and removing frogs.