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 Implementation discussion Problems encountered Conclusion Future perspectives Final words 2/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, dreamincode.net functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation Introduction How did you learn programming? 1. Install a bunch of tools you have no clue about 2. Write a “Hello World” program 3. Compile and run it ? 4. Realise it’s useless 5. Learn about variables, dreamincode.net functions, ... 6. Your programs are ugly and unusable 7. No UI and user controls! 3/19

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation Already existing solutions Figure: Scratch ◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language 5/19

Motivation Already existing solutions Figure: Scratch ◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language 5/19

Motivation Already existing solutions Figure: Scratch ◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language 5/19

Motivation Already existing solutions Figure: Scratch ◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language 5/19

Motivation Already existing solutions Figure: Scratch ◮ “Block-assembling” ◮ Fairly simple and intuitive for beginners ◮ Slow ◮ Not a programming language 5/19

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Motivation 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

Challenges 7/19

Challenges 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

Challenges A game is elegant when a small number of basic actions allow the player to do a large Jesse Schell number of strategic actions. 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

Challenges A game is elegant when a small number of basic actions allow the player to do a large Jesse Schell number of strategic actions. 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

Challenges A game is elegant when a small number of basic actions allow the player to do a large Jesse Schell number of strategic actions. 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

Challenges A game is elegant when a small number of basic actions allow the player to do a large Jesse Schell number of strategic actions. 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

User API 8/19

API 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