Building Simpl息

The name is a combination of “simple” and the Japanese word “iki”, which means “breath”.

You can practice breathing with Simpliki at simpliki.app. And you can peruse the source-code on GitHub.

For Simpliki the center is the breathing exercise - the place where you practice diaphragmatic breathing - without that there is no Simpliki.

But I also need a way to get to the breathing exercise - an index screen or something similar.

Personally, when I want to relax and practice mindfulness I don’t like to have too many options to choose from - it takes me out of the experience. So I decided to add a “home” screen with a single button that links to a random exercise.

My girlfriend likes to practice specific exercises so I added an “Explore” button that leads to an index page with all exercises.

An app can have many centers interconnected with different features. I think of the exercise and the home screen as two separate centers, and the index is just a feature between them.

I learned this from Christopher Alexander's design theory. The most apt analogy I found is in a paper that compares this design principle to patterns of a carpet.

Now that I have an idea what I'm building I'll create a breadboard so that I can work out problems on paper instead of experimenting in code. I skipped this step for Simpliki as it was, well, simple. But the breadboard would look something like this.

This also helps me figure out the domain language - what models I have and what their attributes and methods are called.

Design

So I decided to combine the two for Simpliki. I'd use Endel's color-scheme and the animated organic shapes from Headspace.

Starting a new project

rails new simpliki --css=tailwind

bin/rails g model Exercise name:string

bin/rails g model Exercise::Step exercise:belongs_to action:string duration:integer position:integer

bin/rails g scaffold_controller Exercise

bin/rails db:fixtures:load

The ruby tag

Then I remembered reading about the HTML ruby element which is used to show the pronunciation of characters. I thought it would be a nice way to show where the app's name comes from.

<h1 id="logo" class="font-serif">
  <span class="mt-4">Simpl</span>
  <ruby>
	  息
	  <rt class="text-gray-500">iki</rt>
  </ruby>
</h1>

Next I wanted to animate the play button. I've done similar things before so I was quite confident that I could do it quickly.

The basic idea is to have an SVG with a single path that consists of 16 points with Bezier curves that form a circle. The number of points determines how organic and uneven the circle will look in the end - 8 is too blocky, 24 is too smooth, 16 is just right.

Then, every 10ms I change the position of each point slightly and adjust their Bezier curve points to animate the circle.

const NUM_POINTS = 16
const RADIUS = 100

function generatePoints(time) {
  const circlePoints = []
	
  for (let index = 0; index < NUM_POINTS; i++) {
    // Calculate at what angle the point is supposed to be
    const angle = (point.index / NUM_POINTS) * Math.PI * 2
	
    // Convert the angle to coordinates
    const x = RADIUS * Math.cos(angle)
    const y = RADIUS * Math.sin(angle)
	
    circlePoints.push([x, y])
  }

  return circlePoints
}

To form waves, I can change the radius for each point using any function that also includes COS and SIN. That way each point moves in its own little circle which, when put all together, looks like a wave. And to make it consistent the SIN and COS have to include the current time.

const NUM_POINTS = 16
const RADIUS = 100
const RIPPLE_FREQ = 0.5 // determines how quickly the waves move
const RIPPLE_AMPLITUDE = 5 // determines how big the waves are

const circlePoints = []

function generatePoints(time) {
  const circlePoints = []
	
  for (let index = 0; index < NUM_POINTS; i++) {
    // Calculate at what angle the point is supposed to be
    const angle = (point.index / NUM_POINTS) * Math.PI * 2

    // Generate a new radius
    // the values were completely arbitrarily chosen
    // you could also just use sin(time) + cos(time)
    // this just looks nice to me
    const rippleY = Math.sin(time * RIPPLE_FREQ + angle)
    const rippleX = Math.cos(time * RIPPLE_FREQ * 0.7 + angle * 1.3)
    const ripple = (rippleY * 0.6 + rippleX * 0.4) * RIPPLE_AMPLITUDE
	
    // Convert the angle to coordinates
    const x = RADIUS * Math.cos(angle) + (ripple * Math.cos(angle))
    const y = RADIUS * Math.sin(angle) + (ripple * Math.sin(angle))
	
    circlePoints.push([x, y])
  }
  
  return circlePoints
}

Then I can just move the bezier curve anchors in the same way to get a hand-drawn look.

The end effect is subtle, but it makes the circle look friendlier.

<meta name="view-transition" content="same-origin" />

#logo {
  view-transition-name: logo;
}

@keyframes slide-to-top-from-out-of-view {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#exercises {
  view-transition-name: exercises;
}

html:not([data-same-page-visit])[data-turbo-visit-direction="forward"]::view-transition-new(exercises) {
  animation: 0.25s ease-out slide-to-top-from-out-of-view both;
}

<!-- Defines a symbol "foo" as a circle -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="foo" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
  </symbol>
</svg>

<!-- Renders a red circle with a black stroke -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <use href="#foo" fill="red" stroke="black" stroke-width="2"></use>
</svg>

<!-- Renders a blue circle -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <use href="#foo" fill="blue"></use>
</svg>

circle_id = dom_id(@exercise, :circle)

# Renders an animated circle as a symbol with the id circle_id
animated_circle(symbol: circle_id, class: "hidden") +
# Renders the minimum indicator
animated_circle(use: circle_id, class: "absolute inset-0 z-30 w-full select-none", stroke: "black", stroke_width: 2, name: "exercise-circle-min", data: { exercise_target: "minCircle" }) +
# Renders the progress indicator
animated_circle(use: circle_id, class: "absolute inset-0 z-20 w-full select-none", data: { exercise_target: "progressCircle" }) +
# Renders the maximum indicator
animated_circle(use: circle_id, class: "absolute inset-0 z-10 w-full select-none opacity-10", name: "exercise-circle-max", data: { exercise_target: "maxCircle" })

async function inhale(duration, element) {
  return new Promise(resolve => {
    const animation = this.progressCircleTarget.animate([
      { transform: `scale(0.25)` },
      { transform: `scale(1.0)` }
    ], {
      duration: duration * 1000,
      easing: "linear"
    })

    animation.onfinish = () => {
      this.progressCircleTarget.style.transform = `scale(1.0)`
      resolve()
    }
  }
}

async function exhale(duration, element) {
  return new Promise(resolve => {
    const animation = this.progressCircleTarget.animate([
      { transform: `scale(1.0)` },
      { transform: `scale(0.25)` }
    ], {
      duration: duration * 1000,
      easing: "linear"
    })

    animation.onfinish = () => {
      this.progressCircleTarget.style.transform = `scale(0.25)`
      resolve()
    }
  }
}

bin/rails action_text:install

class AddFullTextSearchToExercises < ActiveRecord::Migration[8.0]
  def change
    create_virtual_table :exercise_full_text_search_vectors, :fts5, %w[name description]
  end
end

# frozen_string_literal: true

class Exercise
  module Searchable
    extend ActiveSupport::Concern

    DEFAULT_LIMIT = 25
    VECTOR_TABLE_NAME = FullTextSearchVector.table_name

    included do
      has_one :full_text_search_vector, foreign_key: :rowid, dependent: :destroy

      after_save :create_or_update_full_text_search_vector
    end

    class_methods do
      def search(query)
        return all if query.blank?

        where("#{VECTOR_TABLE_NAME} MATCH ?", escape_fts_match_value(query))
          .joins(:full_text_search_vector)
          .order("bm25(#{VECTOR_TABLE_NAME})")
          .distinct
      end

      def escape_fts_match_value(input)
        input.to_s
          .gsub('"', '""')
          .split(/\s+/)
          .map { |word| %Q("#{word}") }
          .join(" ")
      end

      def create_or_update_all_full_text_search_vectors
        all.find_each(&:create_or_update_full_text_search_vector)
      end
    end

    def create_or_update_full_text_search_vector
      params = {
        id: id,
        name: name,
        description: description.to_plain_text
      }

      sql = if full_text_search_vector
        ActiveRecord::Base.sanitize_sql_array(
          [
            "UPDATE #{VECTOR_TABLE_NAME} SET name = :name, description = :description WHERE rowid = :id",
            params
          ]
        )
      else
        ActiveRecord::Base.sanitize_sql_array(
          [
            "INSERT INTO #{VECTOR_TABLE_NAME} (rowid, name, description) VALUES (:id, :name, :description)",
            params
          ]
        )
      end

      self.class.connection.execute(sql)
    end
  end
end

Exercise.search("box")

  async #fetchNextPageDocument() {
    const url = this.nextPageLinkTarget.href

    const response = await fetch(url, {
      headers: {
        "Accept": "text/html",
      }
    })

    if (response.ok) {
      return new DOMParser().parseFromString(await response.text(), "text/html")
    } else {
      console.error("Failed to fetch next page:", response.status)
      return null
    }
  }

	const doc = await this.#fetchNextPageDocument()

    const newList = doc.querySelector(`[data-${this.identifier}-target="list"]`)

    Array.from(newList.children).forEach(child => {
      this.listTarget.appendChild(child.cloneNode(true));
    });

    const newNextPageLink = doc.querySelector(`[data-${this.identifier}-target="nextPageLink"]`)
    if (newNextPageLink) {
      this.nextPageLinkTarget.replaceWith(newNextPageLink.cloneNode(true))
    } else {
      this.nextPageLinkTarget.remove()
    }