{-# LANGUAGE OverloadedStrings #-}

module Estuary.Tutorials.Punctual (punctualTutorial) where

import Data.Text (Text)
import qualified Data.Map.Strict as Map
import qualified Data.IntMap.Strict as IntMap
import qualified Data.Sequence as Seq

import Estuary.Types.Tutorial
import Estuary.Types.View
import Estuary.Types.TranslatableText
import Estuary.Types.Language
import Estuary.Types.Definition
import Estuary.Types.TextNotation

punctualTutorial :: Tutorial
punctualTutorial = Tutorial {
  tutorialTitle = Map.fromList [
    (English,"Punctual tutorial")
  ],
  tutorialPages = Seq.fromList [
    (TutorialPage {
      tutorialPageTitle = Map.fromList [
        (English,"First Steps")
      ],
      tutorialPageView = GridView 1 2 [
        Views [
          Paragraph [ Text $ Map.fromList [
            (English,"This tutorial will cover some of the basics of making sound and visuals with the Punctual live coding language. You can copy any of the code examples in this tutorial to the editor at the bottom of the page, make sure that Punctual is selected in the drop-down menu, and click Evaluate, to see/hear what they do. You can also click directly on any code examples to copy and evaluate (\"make it go\") automatically. Changing things in the examples is highly recommended! This first set of examples will draw a white circle in various locations. Click on the various examples to try them out (there will be a small delay before each example takes effect):")
            ]],
          Example Punctual "circle [0,0] 0.25 >> rgb",
          Example Punctual "circle [0.5,0] 0.5 >> rgb",
          Example Punctual "circle [-0.5,0.8] 0.75 >> rgb",
          Paragraph [ Text $ Map.fromList [
            (English,"In the above, the first number after the word 'circle' is the left-to-right position of the centre of the circle, with the left edge of the screen being -1, the centre being 0 and the right edge being 1. The second number after the word circle is the bottom-to-top position of the centre of the circle, with the bottom of the screen being -1, the middle being 0, and the top being 1. The third number after the word circle is how big the circle is (its radius). We can also use Punctual to make sound:")
            ]],
          Example Punctual "tri (60m) * (-20)db >> splay",
          Example Punctual "tri (48m) * (-20)db >> splay",
          Example Punctual "tri (72m) * (-20)db >> splay",
          Paragraph [ Text $ Map.fromList [
            (English,"In the above, the word 'tri' refers to a 'triangle wave'. The '60m' '48m' and '72m' change the frequency of the oscillator resulting in different pitches. You can make it quieter by decreasing the -20db to lower values such as -30db or -40db. We can also use Punctual to make sound and visuals at the same time, using similar language. In the example below note how one line ends with => rgb and is drawing a circle on the screen, while the other line ends with => splay and is causing some sound to happen. Notice also that the two lines have a semicolon (;) between them. You can even put the two statements on the same line but you must have a semicolon (;) between them. When you are finished playing with these examples, you can click Next (above) to go to the next page of this tutorial.")
            ]],
          Example Punctual "circle [0.5,-0.5] 0.1 >> rgb;\ntri (63m) * (-20)db >> splay"
          ],
        CodeView 1 0
      ]
    }),
    (TutorialPage {
      tutorialPageTitle = Map.fromList [
        (English,"More drawing examples")
      ],
      tutorialPageView = GridView 1 2 [
        Views [
          Paragraph [ Text $ Map.fromList [
            (English,"Here are some of the simple shapes we can make using Punctual, apart from the circle introduced on the previous page. Copying the examples and then changing the numbers to other numbers will help you figure out what the numbers mean:")
            ]],
          Example Punctual "vline 0 0.002 >> rgb",
          Example Punctual "hline 0 0.002 >> rgb",
          Example Punctual "rect [0,0] [0.5,0.5] >> rgb",
          Example Punctual "point [0,0] >> rgb",
          Paragraph [ Text $ Map.fromList [
            (English,"We can replace any individual number with a set of multiple numbers. When we do this we get different results on different \"channels\" of the visual output - red, green, and blue:")
            ]],
          Example Punctual "vline [-0.25,0,0.25] 0.002 >> rgb",
          Example Punctual "circle [-0.25,0,0.25,0,0,0] 0.25 >> rgb",
          Paragraph [ Text $ Map.fromList [
            (English,"We can also replace any number with an oscillator with a low frequency so that things move around:")
            ]],
          Example Punctual "hline (tri 1) 0.002 >> rgb",
          Example Punctual "hline (tri 2) 0.002 >> rgb",
          Example Punctual "hline (tri 0.25) 0.002 >> rgb",
          Paragraph [ Text $ Map.fromList [
            (English,"Notice the brackets in the preceding examples - they are very important as they make sure that the number gets applied to the oscillator:")
            ]]
          ],
        CodeView 1 0
      ]
    })


  ]
}
