mio-U-M

// js
var app = new Vue({
  el: '#app',
  data: {
    activeClass: ""
  },
  computed: {
    classObject : function () {
    return {
     decorationRed: this.activeClass.includes("0"),

mio-U-M

<div id="app">
  <p class="text-basic" v-bind:class="classObject">CLASS CHANGE SAMPLE</p>
  <input type="text" v-model="activeClass"/>
  <p class="explain">type below strings</p>
  <ul class="typelist">
    <li>"0":text color change into red.</li>
    <li>"1":text color change into blue.</li>
    <li>"2":text color change into green.</li>
    <li>"-":add underline to text.</li>
    <li>".":change background color into gray.</li>

mio-U-M

float random (in vec2 _st) {
    return fract(sin(dot(_st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}

mio-U-M

// min(含む)からmax(含む)までのランダムな数
// @min : 最小値
// @max : 最大値
function random(min, max) {
    return Math.random() * (max - min) + min
}

mio-U-M

// pattern
$ease          : cubic-bezier(0.25, 0.1, 0.25, 1);
$linear        : cubic-bezier(0, 0, 1, 1);
$easeIn        : cubic-bezier(0.42, 0, 1, 1);
$easeOut       : cubic-bezier(0, 0, 0.58, 1);
$easeInOut     : cubic-bezier(0.42, 0, 0.58, 1);

$easeInSine    : cubic-bezier(0.47, 0, 0.745, 0.715);
$easeOutSine   : cubic-bezier(0.39, 0.575, 0.565, 1);
$easeInOutSine : cubic-bezier(0.445, 0.05, 0.55, 0.95);

mio-U-M

// 値の線形補間の公式
// @from  : 始点
// @to    : 終点
// @alpha : 位置
function lerp(from, to, alpha) {
  return (from * (1 - alpha)) + (to * alpha);
}

mio-U-M

// 値の範囲変換の公式
// @val     : 変換したい値
// @toMin   : 変換後の最小値
// @toMax   : 変換後の最大値
// @fromMin : 変換前の最小値
// @fromMax : 変換前の最大値
function map(val, toMin, toMax, fromMin, fromMax) {
    if(val <= fromMin) {
      return toMin;
    }

mio-U-M

class Vector {
    static calcLength(x, y){
        return Math.sqrt(x * x + y * y);
    }
    
    static calcDistance(x0, y0, x1, y1){
        let x = x1 - x0;
        let y = y1 - y0;
        return Vector.calcLength(x, y);
    }

mio-U-M

class CanvasUtil {
  constructor(canvas){
    this.canvas = canvas;
    this.ctx = this.canvas.getContext('2d');
  }
  
  clear(){
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
  

mio-U-M

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}