График функции

Пример побольше, чем на главной: в нём сразу состояние, управление, вычисление, рисование и анимация. Три кнопки выбирают функцию, ползунок меняет параметр k , линия перетекает к новой форме.

Пример живой: нажмите «Запустить», а потом поменяйте что-нибудь в коде — число точек, цвет, саму формулу — и запустите снова.

// `State` объявляет переменные: тип функции и параметр k.
State @kind:"sin" @k:2
  Column crossAxisAlignment:stretch spacing:12
    Row spacing:8
      TextButton onPressed:(){kind = "sin"}
        Text "sin(k·π·x)"
      TextButton onPressed:(){kind = "pow"}
        Text "x^k"
      TextButton onPressed:(){kind = "abs"}
        Text "k·|x|"
    // Ползунок ничего не хранит: он отдаёт новое значение обработчику.
    Slider value:$k min:1 max:5 divisions:4 onChanged:(next){k = next}
    // 21 значение функции: x идёт от -1 до 1 с шагом 0.1.
    State @ys:{map(range(21), (i){kind == "sin" ? sin(k * 3.14159 * (i / 10 - 1)) : (kind == "pow" ? pow(i / 10 - 1, k) : k * abs(i / 10 - 1))})}
      SizedBox height:180
        // `*Animated` ведёт список к новым значениям: линия перетекает, а не прыгает.
        *Animated of:$ys value:@line duration:500 curve:easeOutCubic
          *Stack
            *Points values:$line mode:area fill:0x226938EF
            *Points values:$line mode:line color:0xFF6938EF strokeWidth:2 cap:round join:round
    // Строка-шаблон подставляет значение в текст.
    Text $"k = ${k}"

• @kind:"sin" и @k:2 объявляют переменные; $k читает переменную, выражение пишется в фигурных скобках.
• Кнопка и ползунок ничего не «перерисовывают»: они меняют значение, а всё, что его читает, идёт следом.
• map(range(21), (i){…}) — функция над списком: значения графика считает сама разметка.
• Элементы со звёздочкой рисуют прямо на холсте; *Points сам растягивает линию по высоте.
• Именованные параметры ( mode:area , cap:round ) задают вид.

Что попробовать изменить

• range(21) — число точек. Чтобы линия стала гладкой, возьмите range(81) и замените i / 10 - 1 на i / 40 - 1 во всех трёх местах формулы: x по-прежнему пройдёт от −1 до 1.
• duration:500 у *Animated — время, за которое линия перетекает к новой форме.
• Четвёртая функция: ещё одна кнопка с kind = "cos" и ещё одна ветка в выражении.