v2.2.5

Okazari · Jun 11, 2019 · ec0efed · ec0efed
2 parents 0db9150 + 502f36f
commit ec0efed
Show file tree

Hide file tree

Showing 12 changed files with 924 additions and 53 deletions.
diff --git a/CONTRIBUTING_KR.md b/CONTRIBUTING_KR.md
@@ -0,0 +1,49 @@
+기여하기
+==========
+어떤 Pull Request든 환영합니다. 당신은 이러한 방법으로 프로젝트에 코딩을 시작할수 있습니다.
+ + 프로젝트를 Fork합니다.
+ + 당신의 Repositoty에 Clone합니다.
+ + npm install 을 실행합니다.
+ + 개발 웹서버를 설치하기 위해 메인 폴더에서 npm start를 실행합니다.
+ + 리듬을 즐기세요!
+
+새로운 댄스 추가하기
+---------
+
+2.2.x 버전에서 댄스 추가는 쉽습니다,
++ `src\dances`에 새로운 폴더를 생성합니다.
++ 이 파일은 당신의 새로운 춤 함수를 반드시 export해야 합니다.
++ 이 파일은 reset 함수를 반드시 export해야 합니다.
+
+여기에 jump.js의 예시가 있습니다.
+
+```js
+/* The function signature is :
+ * @elem: 당신이 효과를 지정할 html 요소
+ * @value: 현재 pulse 비율 (0부터 1까지 설정가능)
+ * @options: 당신이 마지막 인자로 줄 수 있는 옵션
+ */
+export default (elem, value, options = {}) => {
+  const max = options.max || 30
+  const min = options.min || 0
+  const jump = (max - min) * value
+  elem.style.transform = `translateY(${-jump}px)`
+}
+
+/* The reset function signature is :
+ * @elem: The element to reset
+ */
+export const reset = elem => {
+  elem.style.transform = ''
+}
+```
++ Import 하고 Dancer.js파일의 생성자에 등록합니다.
+```js
+import jump, { reset as resetJump } from './dances/jump.js'
+class Dancer {
+  constructor() {
+    this.registerDance('jump', jump, resetJump)
+  }
+}
+```
++ Commit을 하고 PR를 만드세요. 그리고 모두가 당신의 기여를 즐기는 것을 보세요! :)
diff --git a/GulpFile.js b/GulpFile.js
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
+# Contribute
+
+
 <♫/> Rythm.js - v2.2.4
 ======================
 
@@ -200,6 +203,13 @@ Here are the built-in dances and their options:
 + fontSize
   + min: Minimum value given to `font-width`. Default: `0.8`
   + max: Maximum value given to `font-width`. Default: `1.2`
++ tilt
+  + min: Minimum value given to `tilt`. Default: `20`
+  + max: Maximum value given to `tilt`. Default: `25`
+  + reverse: Boolean to make effect from max to min. Default: `false`
++ fontColor
+  + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[0,0,0]`
+  + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[255,255,255]`
 
 To see each visual effect, you can go to the [Demo](https://okazari.github.io/Rythm.js/).
 

diff --git a/demo/example.js b/demo/example.js
@@ -54,7 +54,7 @@ window.onload = function() {
   rythm.addRythm('borderWidth1', 'borderWidth', 0, 2)
   rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, { min: 2, max: 9 })
   rythm.addRythm('fontSize1', 'fontSize', 0, 2)
-  rythm.addRythm('fontSize2', 'fontSize', 0, 2, { min: .9, max: 1.1 })
+  rythm.addRythm('fontSize2', 'fontSize', 0, 2, { min: 0.9, max: 1.1 })
   rythm.addRythm('radius1', 'radius', 0, 10, { min: 0, max: 30 })
   rythm.addRythm('radius2', 'radius', 0, 10, { reverse: true, min: 0, max: 30 })
   rythm.addRythm('blur1', 'blur', 0, 10)
@@ -78,6 +78,13 @@ window.onload = function() {
   rythm.addRythm('thanks', 'shake', 0, 10, { min: -10, max: 10 })
   rythm.addRythm('contributor-avatar', 'pulse', 0, 10, { min: 0.5, max: 1.1 })
   rythm.addRythm('contributor-login-link', 'kern', 0, 10, { min: 0, max: 5 })
+  rythm.addRythm('tilt1', 'tilt', 0, 10)
+  rythm.addRythm('tilt2', 'tilt', 0, 10, { reverse: true })
+  rythm.addRythm('fontColor1', 'fontColor', 0, 10)
+  rythm.addRythm('fontColor2', 'fontColor', 0, 10, {
+    from: [0, 0, 255],
+    to: [255, 0, 255],
+  })
 
   var onMicClick = function() {
     if (rythm.stopped === false) {

diff --git a/demo/rythm.css b/demo/rythm.css
@@ -32,18 +32,10 @@ h1 {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1em; 
+  font-size: 1.5em;
   min-width: 150px;
 }
 
-.fontSize__placeholder {
-  height: 20px;
-  width: 20px;
-  margin-right: 10px; 
-  background-color: white;
-  display: inline-block;
-}
-
 #quote {
   flex-direction: column;
   margin: 20px;
@@ -215,8 +207,7 @@ a:hover {
   margin: 5px 10px;
 }
 
-
-.rythm-kern {
+.font-dance {
   font-size: 2em;
   width: 40px;
   text-align: center;

diff --git a/index.html b/index.html
@@ -6,10 +6,9 @@
     <link rel="stylesheet" href="./demo/rythm.css" media="screen" title="no title" charset="utf-8">
   </head>
   <body>
-    <!-- <audio id="audio" src="samples/rythmC" autoplay=""></audio> -->
     <div class="container">
       <h1 class="shake3">
-        Rythm.js - v2.2.4
+        Rythm.js - v2.2.5
       </h1>
       <h2>
         A javascript library that makes your page dance.
@@ -30,10 +29,10 @@ <h2>
         <a class="twist3" href="https://github.com/Okazari/Rythm.js">View on github</a>
         <a class="twist1" href="https://github.com/Okazari/Rythm.js/releases">Release notes</a>
       </div>
+      <h1>
+        Basic usage
+      </h1>
       <section>
-        <h3>
-          Basic usage
-        </h3>
         <div class="demo">
           <div class="rythm rythm-bass">♫</div>
           <pre class="prettyprint">
@@ -53,6 +52,52 @@ <h3>
           </pre>
         </div>
       </section>
+      <h1>
+        Added in v2.2.5
+      </h1>
+      <section>
+        <h3>
+          Tilt
+        </h3>
+        <div class="demo">
+          <div class="rythm tilt1">♫</div>
+          <pre class="prettyprint">
+            rythm.addRythm('tilt1', 'tilt', 0, 10)
+          </pre>
+        </div>
+        <div class="demo">
+          <div class="rythm tilt2">♫</div>
+          <pre class="prettyprint">
+            rythm.addRythm('tilt2', 'tilt', 0, 10, {
+              reverse : true
+            })
+          </pre>
+        </div>
+      </section>
+      <section>
+        <h3>
+          Font-color
+        </h3>
+        <div class="demo">
+          <div class="rythm font fontColor1">
+            <div class="font__placeholder"></div>Font-color !
+          </div>
+          <pre class="prettyprint">
+            rythm.addRythm('fontColor1', 'color', 0, 10)
+          </pre>
+        </div>
+        <div class="demo">
+          <div class="rythm font fontColor2">
+            <div class="font__placeholder"></div>Font-color !
+          </div>
+          <pre class="prettyprint">
+            rythm.addRythm('fontColor2', 'color', 0, 10 {
+              from: [0,0,255],
+              to:[255,0,255]
+            })
+          </pre>
+        </div>
+      </section>
       <h1>
         Added in v2.2.4
       </h1>
@@ -62,22 +107,22 @@ <h3>
         </h3>
         <div class="demo">
           <div class="rythm font fontSize1">
-            <div class="fontSize__placeholder"></div>Font-dance !
+            <div class="font__placeholder"></div>Font-dance !
           </div>
           <pre class="prettyprint">
-                  rythm.addRythm('fontSize1', 'fontSize', 0, 2)
-              </pre>
+            rythm.addRythm('fontSize1', 'fontSize', 0, 2)
+          </pre>
         </div>
         <div class="demo">
           <div class="rythm font fontSize2">
-            <div class="fontSize__placeholder"></div>Font-dance !
+	          <div class="font__placeholder"></div>Font-dance !
           </div>
           <pre class="prettyprint">
-                  rythm.addRythm('fontSize', 'fontSize', 0, 2, {
-                    min: 0.5,
-                    max: 2
-                  })
-                </pre>
+            rythm.addRythm('fontSize', 'fontSize', 0, 2, {
+              min: 0.5,
+              max: 2
+            })
+          </pre>
         </div>
       </section>
       <h1>
@@ -100,11 +145,11 @@ <h3>
             <div class="borderWidth2"></div>
           </div>
           <pre class="prettyprint">
-                  rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, {
-                    min: 2,
-                    max: 10
-                  })
-                </pre>
+            rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, {
+              min: 2,
+              max: 10
+            })
+          </pre>
         </div>
       </section>
       <h1>
@@ -172,7 +217,7 @@ <h3>
           Kern
         </h3>
         <div class="demo">
-          <div class="rythm rythm-kern kern1">𐇑🕪 rythm.js</div>
+          <div class="rythm font kern1">𐇑🕪 rythm.js</div>
           <pre class="prettyprint">
             rythm.addRythm('kern1', 'kern', 0, 10 , {
               min: -5,
@@ -181,7 +226,7 @@ <h3>
           </pre>
         </div>
         <div class="demo">
-          <div class="rythm rythm-kern kern2">𐇑🕪 rythm.js</div>
+          <div class="rythm font kern2">𐇑🕪 rythm.js</div>
           <pre class="prettyprint">
             rythm.addRythm('kern2', 'kern', 0, 10 , {
               min: -5,

diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "rythm.js",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "",
   "main": "rythm.js",
   "files": [
     "rythm.js",
     "rythm.min.js"
   ],
   "scripts": {
-    "start": "concurrently --kill-others  \"npm run serve\" \"npm run build -- -w\"",
+    "start": "concurrently --kill-others  \"watch-http-server -o .\" \"npm run build -- -w\"",
     "serve": "gulp serve",
     "prepublish": "npm run build",
     "test": "echo \"No test specified\" && exit 0",
@@ -22,7 +22,9 @@
   },
   "author": "Benjamin Plouzennec <[email protected]>",
   "license": "GPL-3.0",
-  "dependencies": {},
+  "dependencies": {
+    "watch-http-server": "^0.7.6"
+  },
   "devDependencies": {
     "babel-eslint": "^7.1.1",
     "babel-plugin-external-helpers": "^6.22.0",

diff --git a/rythm.js b/rythm.js