Scalanimate An educational programming platform on top of Scastie - - PowerPoint PPT Presentation
Scalanimate An educational programming platform on top of Scastie Xavier Pantet Scalacenter EPFL January 22, 2018 1/19 Outline Motivation Introduction Already existing solutions Challenges API Implementation Limitations
1/19
Xavier Pantet
Scalacenter EPFL
January 22, 2018
2/19
Motivation Introduction Already existing solutions Challenges API Implementation Limitations Implementation discussion Problems encountered Conclusion Future perspectives Final words
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
dreamincode.net
3/19
Introduction
How did you learn programming?
have no clue about
program
functions, ...
unusable
dreamincode.net
4/19
Introduction
How can we do better?
◮ Not having to install
anything
◮ Create visual programs ◮ Provide immediate and
intuitive feedback to the user
◮ Provide useful functions to
make possible writing cool and usable programs
4/19
Introduction
How can we do better?
◮ Not having to install
anything
◮ Create visual programs ◮ Provide immediate and
intuitive feedback to the user
◮ Provide useful functions to
make possible writing cool and usable programs
4/19
Introduction
How can we do better?
◮ Not having to install
anything
◮ Create visual programs ◮ Provide immediate and
intuitive feedback to the user
◮ Provide useful functions to
make possible writing cool and usable programs
4/19
Introduction
How can we do better?
◮ Not having to install
anything
◮ Create visual programs ◮ Provide immediate and
intuitive feedback to the user
◮ Provide useful functions to
make possible writing cool and usable programs
4/19
Introduction
How can we do better?
◮ Not having to install
anything
◮ Create visual programs ◮ Provide immediate and
intuitive feedback to the user
◮ Provide useful functions to
make possible writing cool and usable programs
5/19
Already existing solutions
Figure: Scratch
◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language
5/19
Already existing solutions
Figure: Scratch
◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language
5/19
Already existing solutions
Figure: Scratch
◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language
5/19
Already existing solutions
Figure: Scratch
◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language
5/19
Already existing solutions
Figure: Scratch
◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language
6/19
Already existing solutions
Figure: WoofJS
◮ Code-based version of Scratch in Javascript ◮ Simple API ◮ Javascript is known to be messy ◮ Main source of inspiration for Scalanimate
6/19
Already existing solutions
Figure: WoofJS
◮ Code-based version of Scratch in Javascript ◮ Simple API ◮ Javascript is known to be messy ◮ Main source of inspiration for Scalanimate
6/19
Already existing solutions
Figure: WoofJS
◮ Code-based version of Scratch in Javascript ◮ Simple API ◮ Javascript is known to be messy ◮ Main source of inspiration for Scalanimate
6/19
Already existing solutions
Figure: WoofJS
◮ Code-based version of Scratch in Javascript ◮ Simple API ◮ Javascript is known to be messy ◮ Main source of inspiration for Scalanimate
6/19
Already existing solutions
Figure: WoofJS
◮ Code-based version of Scratch in Javascript ◮ Simple API ◮ Javascript is known to be messy ◮ Main source of inspiration for Scalanimate
7/19
Already existing solutions
Figure: Doodle
◮ Compositional vector graphics in Scala + Scala.js ◮ Highlights functional programming ◮ Composition, composition and composition ◮ Rather difficult for beginners
7/19
Already existing solutions
Figure: Doodle
◮ Compositional vector graphics in Scala + Scala.js ◮ Highlights functional programming ◮ Composition, composition and composition ◮ Rather difficult for beginners
7/19
Already existing solutions
Figure: Doodle
◮ Compositional vector graphics in Scala + Scala.js ◮ Highlights functional programming ◮ Composition, composition and composition ◮ Rather difficult for beginners
7/19
Already existing solutions
Figure: Doodle
◮ Compositional vector graphics in Scala + Scala.js ◮ Highlights functional programming ◮ Composition, composition and composition ◮ Rather difficult for beginners
7/19
Already existing solutions
Figure: Doodle
◮ Compositional vector graphics in Scala + Scala.js ◮ Highlights functional programming ◮ Composition, composition and composition ◮ Rather difficult for beginners
7/19
8/19
A game is elegant when a small number of basic actions allow the player to do a large number of strategic actions. Jesse Schell
schellgames.com
◮ A simple API for drawings and animations... ◮ ... that offers many possibilities to the end user ◮ Designed for the web (integration into Scastie)
8/19
A game is elegant when a small number of basic actions allow the player to do a large number of strategic actions. Jesse Schell
schellgames.com
What we want:
◮ A simple API for drawings and animations... ◮ ... that offers many possibilities to the end user ◮ Designed for the web (integration into Scastie)
8/19
A game is elegant when a small number of basic actions allow the player to do a large number of strategic actions. Jesse Schell
schellgames.com
What we want:
◮ A simple API for drawings and animations... ◮ ... that offers many possibilities to the end user ◮ Designed for the web (integration into Scastie)
8/19
A game is elegant when a small number of basic actions allow the player to do a large number of strategic actions. Jesse Schell
schellgames.com
What we want:
◮ A simple API for drawings and animations... ◮ ... that offers many possibilities to the end user ◮ Designed for the web (integration into Scastie)
8/19
A game is elegant when a small number of basic actions allow the player to do a large number of strategic actions. Jesse Schell
schellgames.com
What we want:
◮ A simple API for drawings and animations... ◮ ... that offers many possibilities to the end user ◮ Designed for the web (integration into Scastie)
8/19
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
Figure: A colored rotated rectangle
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
Figure: A colored rotated rectangle
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
Figure: A colored rotated rectangle
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
Figure: A colored rotated rectangle
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
Figure: A colored rotated rectangle
9/19
We want the user to be able to:
◮ Draw shapes (circles, rectangles, polygons, ...) ◮ Set fill and border colors ◮ Rotate the shapes ◮ Move them ◮ Show and hide them ◮ Display images ◮ React to basic user input (mouse clicks and key presses) ◮ Detect collisions between shapes and the edges of the drawing
context
Figure: A colored rotated rectangle
9/19
10/19
Classes hierarchy
Figure: Scalanimate’s classes hierarchy
11/19
Click detection
12/19
Animations
Figure: Animations using every()
13/19
Key presses
13/19
Key presses
13/19
Key presses
13/19
Key presses
14/19
Collisions
◮ Separated Axis Theorem (SAT) ◮ Project all the corners of the shapes on the main axes ◮ Only works for convex shapes
Figure: SAT for collision detection
Source: http://www.phailed.me
14/19
Collisions
◮ Separated Axis Theorem (SAT) ◮ Project all the corners of the shapes on the main axes ◮ Only works for convex shapes
Figure: SAT for collision detection
Source: http://www.phailed.me
14/19
Collisions
◮ Separated Axis Theorem (SAT) ◮ Project all the corners of the shapes on the main axes ◮ Only works for convex shapes
Figure: SAT for collision detection
Source: http://www.phailed.me
14/19
Collisions
◮ Separated Axis Theorem (SAT) ◮ Project all the corners of the shapes on the main axes ◮ Only works for convex shapes
Figure: SAT with non convex shapes
14/19
15/19
Implementation discussion
◮ Cumbersome use of Canvas ◮ Strong inheritance to MutableShape ◮ No support for functional programming
15/19
Implementation discussion
◮ Cumbersome use of Canvas ◮ Strong inheritance to MutableShape ◮ No support for functional programming
15/19
Implementation discussion
◮ Cumbersome use of Canvas ◮ Strong inheritance to MutableShape ◮ No support for functional programming
16/19
Problems encountered
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
SVG
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
SVG
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
SVG
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
SVG
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
SVG
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
SVG
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle? ◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle?
Canvas
◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle?
Canvas
◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle?
Canvas
◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle?
Canvas
◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
Problems encountered
◮ Vector graphics ◮ Possible to animate one
element at a time
◮ DOM structure ◮ Slow (?) ◮ Reusing Doodle?
Canvas
◮ Bitmap images ◮ Fast (?) ◮ No representation for shapes ◮ Needs to be refreshed to
create animations
16/19
17/19
Integration into Scastie
Figure: Scastie’s current wireframe
17/19
Integration into Scastie
Figure: Side-by-side integration
17/19
Integration into Scastie
Figure: Separate window integration
18/19
Various ideas
◮ Providing a functional API ◮ Developing a teaching environment ◮ Algorithms visualization ◮ Recursive drawing ◮ Extending possibilities
18/19
Various ideas
◮ Providing a functional API ◮ Developing a teaching environment ◮ Algorithms visualization ◮ Recursive drawing ◮ Extending possibilities
18/19
Various ideas
◮ Providing a functional API ◮ Developing a teaching environment ◮ Algorithms visualization ◮ Recursive drawing ◮ Extending possibilities
18/19
Various ideas
◮ Providing a functional API ◮ Developing a teaching environment ◮ Algorithms visualization ◮ Recursive drawing ◮ Extending possibilities
18/19
Various ideas
◮ Providing a functional API ◮ Developing a teaching environment ◮ Algorithms visualization ◮ Recursive drawing ◮ Extending possibilities
19/19
Final words