Add clock example #545

antfu · 2020-01-16T08:13:45Z

This example is not written by me. I just found it on the snippet site and there are no current examples utilize the 曆法 lib. I think the clock is a perfect example of it.

LingDong- · 2020-01-16T16:47:44Z

Interesting, but:

Hands do not move (have to refresh)
Does not show correct time (at least not for my timezone)
Scale on the clock is confusing - is it tilted？
Clock is good idea, implementation can be better, let me see how I can fix it

antfu · 2020-01-16T16:52:02Z

I have made a clock that moves. But setInterval will not be canceled on rerun/example switch.

I think maybe we can wrap the executing code in iframe for better isolation.

You can try it out in ide

吾嘗觀「「曆法」」之書。方悟「今何紀元時」「彼時何小時」「彼刻何刻」「彼分何分」「彼秒何秒」之義。
吾嘗觀「「畫譜」」之書。方悟「備紙」「擇筆」「蘸色」「落筆」「運筆」「提筆」「設色」「裱畫」之義。
吾嘗觀「「算經」」之書。方悟「倍圓周率」「正弦」「餘弦」之義。

施「今何紀元時」。名之曰「紀元時」。
施「彼時何小時」於「紀元時」。名之曰「小時」。
施「彼刻何刻」於「紀元時」。名之曰「刻」。
施「彼分何分」於「紀元時」。名之曰「分」。
施「彼秒何秒」於「紀元時」。名之曰「秒」。

有數四百。名之曰「紙縱」。
有數四百。名之曰「紙橫」。
除二於「紙縱」。名之曰「半縱」。
除二於「紙橫」。名之曰「半橫」。
吾有一數。名之曰「比例」。

若「半橫」小於「半縱」者。
  昔之「比例」者。今「半橫」是矣。
若非。
  昔之「比例」者。今「半縱」是矣。
云云。

吾有一術。名之曰「縱坐標」。欲行是術。必先得一數。曰「南」。是術曰。
  乘「南」以「比例」。減其於「半縱」。乃得矣。
是謂「縱坐標」之術也。

吾有一術。名之曰「橫坐標」。欲行是術。必先得一數。曰「東」。是術曰。
  乘「東」以「比例」。減其於「半橫」。乃得矣。
是謂「橫坐標」之術也。

吾有一術。名之曰「極坐標」。欲行是術。必先得二數。曰「距」。曰「角」。是術曰。
  施「餘弦」於「角」。乘其以「距」。取一以施「縱坐標」。名之曰「縱」。
  施「正弦」於「角」。乘其以「距」。取一以施「橫坐標」。名之曰「橫」。
  吾有一物。名之曰「坐標」。其物如是。
    物之「「橫」」者。數曰「橫」。
    物之「「縱」」者。數曰「縱」。
  是謂「坐標」之物也。乃得「坐標」。
是謂「極坐標」之術也。

吾有一術。名之曰「畫鐘面」。
欲行是術。必先得一物。曰「紙」。一數。曰「半徑」。
是術曰。

  有數一千零二十四。名之曰「割圓」。
  夫「半徑」。夫零。取二以施「極坐標」。名之曰「始坐標」。
  夫「紙」。夫「始坐標」之「「橫」」。夫「始坐標」之「「縱」」。取三以施「落筆」。

  有數一。名之曰「甲」。
  為是「割圓」遍。
    除「甲」以「割圓」。乘其以「倍圓周率」。名之曰「乙」。
    夫「半徑」。夫「乙」。取二以施「極坐標」。名之曰「坐標」。
    夫「紙」。夫「坐標」之「「橫」」。夫「坐標」之「「縱」」。取三以施「運筆」。
    加「甲」以一。昔之「甲」者。今其是矣。
  云云。

  施「蘸色」於「紙」於「「鈦白」」。
  施「設色」於「紙」。
  施「蘸色」於「紙」於「「黑」」。
  施「提筆」於「紙」。

  有數零。名之曰「丙」。

  為是六十遍。
    除「丙」以六十。乘其以「倍圓周率」。名之曰「丁」。
    夫「半徑」。夫「丁」。取二以施「極坐標」。名之曰「正刻外坐標」。
    夫「紙」。夫「正刻外坐標」之「「橫」」。夫「正刻外坐標」之「「縱」」。取三以施「落筆」。
    乘九分五於「半徑」。夫「丁」。取二以施「極坐標」。名之曰「正刻內坐標」。
    夫「紙」。夫「正刻內坐標」之「「橫」」。夫「正刻內坐標」之「「縱」」。取三以施「運筆」。
    施「提筆」於「紙」。
      
    加「丙」以一。昔之「丙」者。今其是矣。
  云云。
    
    
  有數零。名之曰「丙」。
    
  為是十二遍。
    除「丙」以十二。乘其以「倍圓周率」。名之曰「戊」。
    夫「半徑」。夫「戊」。取二以施「極坐標」。名之曰「初刻外坐標」。
    夫「紙」。夫「初刻外坐標」之「「橫」」。夫「初刻外坐標」之「「縱」」。取三以施「落筆」。
    乘八分五於「半徑」。夫「戊」。取二以施「極坐標」。名之曰「初刻內坐標」。
    夫「紙」。夫「初刻內坐標」之「「橫」」。夫「初刻內坐標」之「「縱」」。取三以施「運筆」。
    施「提筆」於「紙」。

    加「丙」以一。昔之「丙」者。今其是矣。
  云云。
    
是謂「畫鐘面」之術也。

吾有一術。名之曰「畫指針」。
欲行是術。必先得一物。曰「紙」。五數。曰「角」。曰「針長」。曰「尾長」。曰「針角」。曰「尾角」。
是術曰。

  夫「針長」。加「針角」於「角」。取二以施「極坐標」。名之曰「甲」。
  乘負一於「尾長」。減「尾角」於「角」。取二以施「極坐標」。名之曰「乙」。
  乘負一於「尾長」。加「尾角」於「角」。取二以施「極坐標」。名之曰「丙」。
  夫「針長」。減「針角」於「角」。取二以施「極坐標」。名之曰「丁」。

  夫「紙」。夫「甲」之「「橫」」。夫「甲」之「「縱」」。取三以施「落筆」。
  夫「紙」。夫「乙」之「「橫」」。夫「乙」之「「縱」」。取三以施「運筆」。
  夫「紙」。夫「丙」之「「橫」」。夫「丙」之「「縱」」。取三以施「運筆」。
  夫「紙」。夫「丁」之「「橫」」。夫「丁」之「「縱」」。取三以施「運筆」。
  夫「紙」。夫「甲」之「「橫」」。夫「甲」之「「縱」」。取三以施「運筆」。

  施「蘸色」於「紙」於「「花青」」。
  施「設色」於「紙」。

是謂「畫指針」之術也。

吾有一術。名之曰「执笔」。是術曰。

  施「(()=>document.getElementById("out").innerHTML="")」。
  施「今何紀元時」。名之曰「紀元時」。
  施「彼時何小時」於「紀元時」。名之曰「時」。
  施「彼分何分」於「紀元時」。名之曰「分」。
  施「彼刻何刻」於「紀元時」。名之曰「刻」。乘其以一十五。加其於「分」。昔之「刻」者。今其是矣。
  施「彼秒何秒」於「紀元時」。名之曰「秒」。
  
  除「秒」以六十。加其於「分」。昔之「分」者。今其是矣。
  除「分」以六十。加其於「時」。昔之「時」者。今其是矣。
    
  除「分」以六十。乘其以「倍圓周率」。乘其以負一。名之曰「分角」。
  除「時」以十二。乘其以「倍圓周率」。乘其以負一。名之曰「時角」。
  除「秒」以六十。乘其以「倍圓周率」。乘其以負一。名之曰「秒角」。


  施「備紙」於「紙橫」。於「紙縱」。名之曰「紙」。
  施「畫鐘面」於「紙」。於九分。
  施「畫指針」於「紙」。於「秒角」。於八分。於一分。於三毫。於一分。
  施「畫指針」於「紙」。於「分角」。於七分五釐。於一分。於三毫。於三分。
  施「畫指針」於「紙」。於「時角」。於五分五釐。於八釐。於五毫。於五分。
  施「裱畫」於「紙」於「「out」」。

是謂「执笔」之術也。

施「(x=>setInterval(x, 500))」於「执笔」。

LingDong- · 2020-01-16T17:07:51Z

Now that's pretty cool!!

Timezone still doesn't seem right, perhaps we can use 時差 in 西曆法 stdlib.
For clearing intervals, perhaps we can hijack setInterval so that it saves its own ID to a global array, and when re-running, the IDE clear all the intervals stored in that array. I'm full of hacks XD
And I have been meaning to add setInterval/requestAnimationFrame to STDLIB, they're key for making animated/interactive stuff.

antfu · 2020-01-16T19:05:56Z

I think the original clock is meant for some ancient clock. Anyway, maybe a modern clock system is better for demonstration purposes. I have updated the code above and corrected the timezone (hopefully).

~~Will update the code once the setInterval problem get solved (and very soon the PR is coming!)~~ #552

antfu · 2020-01-16T19:34:21Z

For clearing intervals, perhaps we can hijack setInterval so that it saves its own ID to a global array, and when re-running, the IDE clear all the intervals stored in that array. I'm full of hacks XD

Maybe hijack is not a best solution for this. Some other use case like infinite loops, setTimeout or anything that has side effects can not be fully cover by hijack. Please try out the iframe solution, I think it may solve most of these problems. :)

And I have been meaning to add setInterval/requestAnimationFrame to STDLIB, they're key for making animated/interactive stuff.

Definitely! Looking forward to that.

LingDong- · 2020-01-17T03:06:40Z

EDIT: NVMD. Check out your new version, works perfectly

LingDong- · 2020-01-17T03:23:10Z

Oh wait, it only works for the first 15 minutes of an hour.

This is more correct:
(minute is 分+刻*15, in current snippet this calculation is done but not used)

吾嘗觀「「曆法」」之書。方悟「今何紀元時」「彼時何小時」「彼刻何刻」「彼分何分」「彼秒何秒」之義。
吾嘗觀「「畫譜」」之書。方悟「備紙」「擇筆」「蘸色」「落筆」「運筆」「提筆」「設色」「裱畫」之義。
吾嘗觀「「算經」」之書。方悟「倍圓周率」「正弦」「餘弦」之義。

施「今何紀元時」。名之曰「紀元時」。
施「彼時何小時」於「紀元時」。名之曰「小時」。
施「彼刻何刻」於「紀元時」。名之曰「刻」。
施「彼分何分」於「紀元時」。名之曰「分」。
施「彼秒何秒」於「紀元時」。名之曰「秒」。

有數四百。名之曰「紙縱」。
有數四百。名之曰「紙橫」。
除二於「紙縱」。名之曰「半縱」。
除二於「紙橫」。名之曰「半橫」。
吾有一數。名之曰「比例」。

若「半橫」小於「半縱」者。
  昔之「比例」者。今「半橫」是矣。
若非。
  昔之「比例」者。今「半縱」是矣。
云云。

吾有一術。名之曰「縱坐標」。欲行是術。必先得一數。曰「南」。是術曰。
  乘「南」以「比例」。減其於「半縱」。乃得矣。
是謂「縱坐標」之術也。

吾有一術。名之曰「橫坐標」。欲行是術。必先得一數。曰「東」。是術曰。
  乘「東」以「比例」。減其於「半橫」。乃得矣。
是謂「橫坐標」之術也。

吾有一術。名之曰「極坐標」。欲行是術。必先得二數。曰「距」。曰「角」。是術曰。
  施「餘弦」於「角」。乘其以「距」。取一以施「縱坐標」。名之曰「縱」。
  施「正弦」於「角」。乘其以「距」。取一以施「橫坐標」。名之曰「橫」。
  吾有一物。名之曰「坐標」。其物如是。
    物之「「橫」」者。數曰「橫」。
    物之「「縱」」者。數曰「縱」。
  是謂「坐標」之物也。乃得「坐標」。
是謂「極坐標」之術也。

吾有一術。名之曰「畫鐘面」。
欲行是術。必先得一物。曰「紙」。一數。曰「半徑」。
是術曰。

  有數一千零二十四。名之曰「割圓」。
  夫「半徑」。夫零。取二以施「極坐標」。名之曰「始坐標」。
  夫「紙」。夫「始坐標」之「「橫」」。夫「始坐標」之「「縱」」。取三以施「落筆」。

  有數一。名之曰「甲」。
  為是「割圓」遍。
    除「甲」以「割圓」。乘其以「倍圓周率」。名之曰「乙」。
    夫「半徑」。夫「乙」。取二以施「極坐標」。名之曰「坐標」。
    夫「紙」。夫「坐標」之「「橫」」。夫「坐標」之「「縱」」。取三以施「運筆」。
    加「甲」以一。昔之「甲」者。今其是矣。
  云云。

  施「蘸色」於「紙」於「「鈦白」」。
  施「設色」於「紙」。
  施「蘸色」於「紙」於「「黑」」。
  施「提筆」於「紙」。

  有數零。名之曰「丙」。

  為是六十遍。
    除「丙」以六十。乘其以「倍圓周率」。名之曰「丁」。
    夫「半徑」。夫「丁」。取二以施「極坐標」。名之曰「正刻外坐標」。
    夫「紙」。夫「正刻外坐標」之「「橫」」。夫「正刻外坐標」之「「縱」」。取三以施「落筆」。
    乘九分五於「半徑」。夫「丁」。取二以施「極坐標」。名之曰「正刻內坐標」。
    夫「紙」。夫「正刻內坐標」之「「橫」」。夫「正刻內坐標」之「「縱」」。取三以施「運筆」。
    施「提筆」於「紙」。
      
    加「丙」以一。昔之「丙」者。今其是矣。
  云云。
    
    
  有數零。名之曰「丙」。
    
  為是十二遍。
    除「丙」以十二。乘其以「倍圓周率」。名之曰「戊」。
    夫「半徑」。夫「戊」。取二以施「極坐標」。名之曰「初刻外坐標」。
    夫「紙」。夫「初刻外坐標」之「「橫」」。夫「初刻外坐標」之「「縱」」。取三以施「落筆」。
    乘八分五於「半徑」。夫「戊」。取二以施「極坐標」。名之曰「初刻內坐標」。
    夫「紙」。夫「初刻內坐標」之「「橫」」。夫「初刻內坐標」之「「縱」」。取三以施「運筆」。
    施「提筆」於「紙」。

    加「丙」以一。昔之「丙」者。今其是矣。
  云云。
    
是謂「畫鐘面」之術也。

吾有一術。名之曰「畫指針」。
欲行是術。必先得一物。曰「紙」。五數。曰「角」。曰「針長」。曰「尾長」。曰「針角」。曰「尾角」。
是術曰。

  夫「針長」。加「針角」於「角」。取二以施「極坐標」。名之曰「甲」。
  乘負一於「尾長」。減「尾角」於「角」。取二以施「極坐標」。名之曰「乙」。
  乘負一於「尾長」。加「尾角」於「角」。取二以施「極坐標」。名之曰「丙」。
  夫「針長」。減「針角」於「角」。取二以施「極坐標」。名之曰「丁」。

  夫「紙」。夫「甲」之「「橫」」。夫「甲」之「「縱」」。取三以施「落筆」。
  夫「紙」。夫「乙」之「「橫」」。夫「乙」之「「縱」」。取三以施「運筆」。
  夫「紙」。夫「丙」之「「橫」」。夫「丙」之「「縱」」。取三以施「運筆」。
  夫「紙」。夫「丁」之「「橫」」。夫「丁」之「「縱」」。取三以施「運筆」。
  夫「紙」。夫「甲」之「「橫」」。夫「甲」之「「縱」」。取三以施「運筆」。

  施「蘸色」於「紙」於「「花青」」。
  施「設色」於「紙」。

是謂「畫指針」之術也。

吾有一術。名之曰「执笔」。是術曰。

  施「(()=>document.getElementById("out").innerHTML="")」。
  施「今何紀元時」。名之曰「紀元時」。
  施「彼時何小時」於「紀元時」。名之曰「時」。
  施「彼分何分」於「紀元時」。名之曰「分」。
  施「彼刻何刻」於「紀元時」。名之曰「刻」。
  施「彼秒何秒」於「紀元時」。名之曰「秒」。
  
  乘「刻」以十五。加其於「分」。昔之「分」者。今其是矣。
  
  除「秒」以六十。加其於「分」。昔之「分」者。今其是矣。
  除「分」以六十。加其於「時」。昔之「時」者。今其是矣。
    
  除「分」以六十。乘其以「倍圓周率」。乘其以負一。名之曰「分角」。
  除「時」以十二。乘其以「倍圓周率」。乘其以負一。名之曰「時角」。
  除「秒」以六十。乘其以「倍圓周率」。乘其以負一。名之曰「秒角」。


  施「備紙」於「紙橫」。於「紙縱」。名之曰「紙」。
  施「畫鐘面」於「紙」。於九分。
  施「畫指針」於「紙」。於「秒角」。於八分。於一分。於三毫。於一分。
  施「畫指針」於「紙」。於「分角」。於七分五釐。於一分。於三毫。於三分。
  施「畫指針」於「紙」。於「時角」。於五分五釐。於八釐。於五毫。於五分。
  施「裱畫」於「紙」於「「out」」。

是謂「执笔」之術也。

施「(x=>setInterval(x, 500))」於「执笔」。

Let me push it.

EDIT: pushed: c4bf9c9

Add clock example

antfu added 2 commits January 16, 2020 16:08

chore: add clock example

8df474c

chore: ignore it

8bbf547

antfu mentioned this pull request Jan 16, 2020

Typecheck for IDE #551

Merged

antfu mentioned this pull request Jan 16, 2020

Use iframe for ide output #552

Merged

feat: update clock example

0e90675

LingDong- merged commit 6145e8b into wenyan-lang:master Jan 17, 2020

antfu mentioned this pull request Jan 17, 2020

v0.3.0 #554

Merged

LingDong- added a commit that referenced this pull request Jan 20, 2020

Merge pull request #545 from antfu/example/clock

40d1f34

Add clock example

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add clock example #545

Add clock example #545

antfu commented Jan 16, 2020

LingDong- commented Jan 16, 2020 •

edited

Loading

antfu commented Jan 16, 2020 •

edited

Loading

LingDong- commented Jan 16, 2020 •

edited

Loading

antfu commented Jan 16, 2020 •

edited

Loading

antfu commented Jan 16, 2020

LingDong- commented Jan 17, 2020 •

edited

Loading

LingDong- commented Jan 17, 2020 •

edited

Loading

Add clock example #545

Add clock example #545

Conversation

antfu commented Jan 16, 2020

LingDong- commented Jan 16, 2020 • edited Loading

antfu commented Jan 16, 2020 • edited Loading

LingDong- commented Jan 16, 2020 • edited Loading

antfu commented Jan 16, 2020 • edited Loading

antfu commented Jan 16, 2020

LingDong- commented Jan 17, 2020 • edited Loading

LingDong- commented Jan 17, 2020 • edited Loading

LingDong- commented Jan 16, 2020 •

edited

Loading

antfu commented Jan 16, 2020 •

edited

Loading

LingDong- commented Jan 16, 2020 •

edited

Loading

antfu commented Jan 16, 2020 •

edited

Loading

LingDong- commented Jan 17, 2020 •

edited

Loading

LingDong- commented Jan 17, 2020 •

edited

Loading