User:Stonestone/RandomNotes: Difference between revisions

Latest revision as of 10:20, 9 May 2016

Recommendations of tools from Sébastien（全名：赵心悦心中的屌丝）:
https://www.youtube.com/watch?v=uXwSFSoFo9Q Works of him:1)https://www.youtube.com/watch?v=KoF7NIlUy9g 2)https://www.youtube.com/watch?v=v5h1JvlYrow 3)https://vimeo.com/151893504

openFrameworks http://openframeworks.cc/
TouchDesigner (Windows only) https://www.derivative.ca/088/Downloads/
Audio-reaction on Unity https://github.com/keijiro?tab=repositories
Addons http://www.ofxaddons.com/categories
Realtime Sound analysis https://github.com/kylemcdonald/ofxFft
Realtime Sound analysis https://github.com/micknoise/Maximilian
Communities & Samples https://www.shadertoy.com/ https://www.shadertoy.com/view/Ms2SD1
Book http://www.scribd.com/doc/74093210/Generative-Art-Matt-Pearson#scribd https://www.manning.com/books/generative-art http://rutracker.org/forum/viewtopic.php?t=3829690

Test https://iffr.com/en/2016/films/establishing-eden http://exhibitionist.nl/tentoonstelling/establishing-eden/ https://www.youtube.com/watch?v=xXHJ41_1BZ0 https://www.youtube.com/watch?v=mtoerB1I1eQ https://www.youtube.com/watch?v=ed9sf0kdZn4 https://www.youtube.com/watch?v=NOvKpX8xbcI

http://1646.nl/projects/mindplace-thoughtstream https://vimeo.com/126439388

References From David for Nosebleed
ED OP DE BEEK (STAGING SILENCE)
GUIDO
JACCO CLAERBOUT
ISSAC JULIEN
CEAL FLOYER

Done Birthing Stopped Dead

Sometimes I sleep...

~ -- tilde 波浪线 
! -- bang [或 Exclamation mark] 叹号 
@ -- at 
# -- number sign [或 pound sign] 井号 hashtag
$ -- dollar 美元符 
%-- percent 百分号 
^ -- accent 幂 
& -- and 和 
* -- star [或 asterisk] 星号 
( -- open round 左括号
）-- close round 右括号 
+ -- plus 加 
- -- sub [或 midline 或 dash] 减 
= -- equal 等于 
_ -- underline 下划线 
\ -- backslash 反斜线 
| -- vertical [或 bar] 竖线 
{ -- open brace 左花括号 
} -- close brace 右花括号 
[ -- open quad 左方括号 
] -- close quad 左方括号 
: -- colon 冒号 
; -- semicolon 分号 
" -- quote 引号 
' -- single quote 单引号 
? -- question 问号 
/ -- slash 斜线 
< -- open angle (less-than sign) 左尖括号（小于号） 
> -- close angle (greater-than sign)右尖括号（大于号） 
, -- comma 逗号 
. -- dot 点号
还有空白符: 
' ' -- space 空格
'\n' -- newline 换行
'\t' -- table 制表符
\r' -- return ？？？
至于 "..." 不是单个字符，就不列在上面了，英文名为ellipsis （省略符）

德行第一
，

言语第二
，

政事第三
，

文学第四
，

方正第五
，

雅量第六
，

识鉴第七
，

赏誉第八
，

品藻第九
，

规箴第十
，

捷悟第十一
，

夙慧第十二
，

豪爽第十三
，

容止第十四
，

自新第十五
，

企羡第十六
，

伤逝第十七
，

栖逸第十八
，

贤媛第十九
，

术解第二十
，

巧艺第二十一
，

宠礼第二十二
，

任诞第二十三
，

简傲第二十四
，

排调第二十五
，

轻诋第二十六
，

假谲第二十七
，

黜免第二十八
，

俭啬第二十九
，

汰侈第三十
，

忿狷第三十一
，

谗险第三十二
，

尤悔第三十三
，

纰漏第三十四
，

惑溺第三十五
，

仇隙第三十六
。

stickers of I love my home

===============================CSS 居中专区===============================

A.不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
1)加入 table 标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
<style>
table{
    margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>

2)设置 display;inline 方法
改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>

3) 设置 position:relative 和 left:50%;
父元素设置 float，然后给父元素设置 position:relative 和 left:50%
子元素设置 position:relative 和 left:-50% 来实现水平居中
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
<style>
.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;  
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>


 

B.父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
<div class="container">
    hi,imooc!
</div>
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

垂直居中-父元素高度确定的多行文本:
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：
html代码：
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
html代码：
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
css代码：
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。

http://www.imooc.com/code/407

http://www.gfxcamp.com/premiere-2015/


------->Basic DOM<-------

HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
看下面代码:
<a href="http://www.imooc.com">JavaScript DOM</a>

通过ID获取元素
学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
语法:
 document.getElementById(“id”)

Presentation of T & C :https://pad.pzimediadesign.nl/p/stonenotesontc

@@ Line 1: / Line 1: @@
+<span style="font-weight: bold;border-style: solid;border-width: 2px 5px 7px;background-color:#ffc299">[[User:Stonestone/vaporwavefffff| A Guide Book of Vaporwave]]</span>
+<hr />[http://pzwart1.wdka.hro.nl/pad/p/stone-unity5 IN A HURRY UNITY 5]<hr />
+<big>'''Recommendations of tools from Sébastien（全名：赵心悦心中的屌丝）:'''</big><br />
+https://www.youtube.com/watch?v=uXwSFSoFo9Q
+Works of him:1)https://www.youtube.com/watch?v=KoF7NIlUy9g 2)https://www.youtube.com/watch?v=v5h1JvlYrow 3)https://vimeo.com/151893504
+* openFrameworks http://openframeworks.cc/
+*  TouchDesigner (Windows only) https://www.derivative.ca/088/Downloads/
+* Audio-reaction on Unity  https://github.com/keijiro?tab=repositories
+* Addons http://www.ofxaddons.com/categories
+* Realtime Sound analysis https://github.com/kylemcdonald/ofxFft
+* Realtime Sound analysis  https://github.com/micknoise/Maximilian
+* Communities & Samples https://www.shadertoy.com/ https://www.shadertoy.com/view/Ms2SD1
+* Book http://www.scribd.com/doc/74093210/Generative-Art-Matt-Pearson#scribd   https://www.manning.com/books/generative-art http://rutracker.org/forum/viewtopic.php?t=3829690
+<hr />
+<span style="font-weight: bold;border-style: solid;border-width: 2px 5px 7px;">[[User:Stonestone/stonemustknowthem|Test]]</span>
 https://iffr.com/en/2016/films/establishing-eden
 http://exhibitionist.nl/tentoonstelling/establishing-eden/
@@ Line 9: / Line 25: @@
 https://vimeo.com/126439388
 <hr />
-References From David for Nosebleed<br />
+'''References From David for Nosebleed'''<br />
 ED OP DE BEEK (STAGING SILENCE)<br />
 GUIDO<br />
@@ Line 15: / Line 31: @@
 ISSAC JULIEN<br />
 CEAL FLOYER<br />
+<hr />
+<div style="width:3%,float:left;">
+<span style="background:#D1EEEE; color:#000; font-family: Arial; font-size:20px;">Done</span>
+<span style="color:#000; font-weight: bold;font-family: Arial; font-size:30px;">Birthing</span>
+<span style="text-decoration: line-through; color:#000; font-family: Arial; font-size:20px;">Stopped</span>
+<span style="background:black; color:#fff; font-family: Arial; font-size:20px;">Dead</span>
+</div>
+<hr />
+Sometimes I sleep...
+<hr /><pre>
+~ -- tilde 波浪线
+! -- bang [或 Exclamation mark] 叹号
+@ -- at
+# -- number sign [或 pound sign] 井号 hashtag
+$ -- dollar 美元符
+%-- percent 百分号
+^ -- accent 幂
+& -- and 和
+* -- star [或 asterisk] 星号
+( -- open round 左括号
+）-- close round 右括号
++ -- plus 加
+- -- sub [或 midline 或 dash] 减
+= -- equal 等于
+_ -- underline 下划线
+\ -- backslash 反斜线
+| -- vertical [或 bar] 竖线
+{ -- open brace 左花括号
+} -- close brace 右花括号
+[ -- open quad 左方括号
+] -- close quad 左方括号
+: -- colon 冒号
+; -- semicolon 分号
+" -- quote 引号
+' -- single quote 单引号
+? -- question 问号
+/ -- slash 斜线
+< -- open angle (less-than sign) 左尖括号（小于号）
+> -- close angle (greater-than sign)右尖括号（大于号）
+, -- comma 逗号
+. -- dot 点号
+还有空白符:
+' ' -- space 空格
+'\n' -- newline 换行
+'\t' -- table 制表符
+\r' -- return ？？？
+至于 "..." 不是单个字符，就不列在上面了，英文名为ellipsis （省略符）</pre>
+<div style="width:88%; position:relative;font-size:10px; font-family:Times;float:center; padding:1px;margin:10%">
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">德行第一<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">言语第二<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">政事第三<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">文学第四<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">方正第五<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">雅量第六<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">识鉴第七<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">赏誉第八<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">品藻第九<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">规箴第十<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">捷悟第十一<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">夙慧第十二<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">豪爽第十三<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">容止第十四<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">自新第十五<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">企羡第十六<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">伤逝第十七<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">栖逸第十八<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">贤媛第十九<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">术解第二十<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">巧艺第二十一<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">宠礼第二十二<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">任诞第二十三<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">简傲第二十四<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">排调第二十五<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">轻诋第二十六<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">假谲第二十七<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">黜免第二十八<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">俭啬第二十九<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">汰侈第三十<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">忿狷第三十一<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">谗险第三十二<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">尤悔第三十三<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">纰漏第三十四<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">惑溺第三十五<br />，</div>
+<div style="width:1.5em; line-height:1em; float:right;font-size=30px; margin-rignt:4px;font-family:Times;padding:2px;">仇隙第三十六<br />。</div>
+</div>
+<hr /><hr /><hr />
+<span style="font-weight: bold;border-style: solid;border-width: 2px 5px 7px;">[[User:Stonestone/525jbiaoqingbao|stickers of I love my home]]</span>
+<pre>
+===============================CSS 居中专区===============================
+A.不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
+)加入 table 标签
+第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
+<div>
+<table>
+  <tbody>
+    <tr><td>
+    <ul>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+    </ul>
+    </td></tr>
+  </tbody>
+</table>
+</div>
+第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
+<style>
+table{
+    margin:0 auto;
+}
+ul{list-style:none;margin:0;padding:0;}
+li{float:left;display:inline;margin-right:8px;}
+</style>
+)设置 display;inline 方法
+改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子
+<body>
+<div class="container">
+    <ul>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+    </ul>
+</div>
+</body>
+<style>
+.container{
+    text-align:center;
+}
+.container ul{
+    list-style:none;
+    margin:0;
+    padding:0;
+    display:inline;
+}
+.container li{
+    margin-right:8px;
+    display:inline;
+}
+</style>
+) 设置 position:relative 和 left:50%;
+父元素设置 float，然后给父元素设置 position:relative 和 left:50%
+子元素设置 position:relative 和 left:-50% 来实现水平居中
+<body>
+<div class="container">
+    <ul>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+    </ul>
+</div>
+</body>
+<style>
+.container{
+    float:left;
+    position:relative;
+    left:50%
+}
+.container ul{
+    list-style:none;
+    margin:0;
+    padding:0;
+    position:relative;
+    left:-50%;
+}
+.container li{float:left;display:inline;margin-right:8px;}
+</style>
+B.父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
+<div class="container">
+    hi,imooc!
+</div>
+<style>
+.container{
+    height:100px;
+    line-height:100px;
+    background:#999;
+}
+</style>
+垂直居中-父元素高度确定的多行文本:
+方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
+说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：
+html代码：
+<body>
+<table><tbody><tr><td class="wrap">
+<div>
+    <p>看我是否可以居中。</p>
+    <p>看我是否可以居中。</p>
+    <p>看我是否可以居中。</p>
+    <p>看我是否可以居中。</p>
+    <p>看我是否可以居中。</p>
+</div>
+</td></tr></tbody></table>
+</body>
+css代码：
+table td{height:500px;background:#ccc}
+因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
+方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
+html代码：
+<div class="container">
+    <div>
+        <p>看我是否可以居中。</p>
+        <p>看我是否可以居中。</p>
+        <p>看我是否可以居中。</p>
+        <p>看我是否可以居中。</p>
+        <p>看我是否可以居中。</p>
+    </div>
+</div>
+css代码：
+<style>
+.container{
+    height:300px;
+    background:#ccc;
+    display:table-cell;/*IE8以上及Chrome、Firefox*/
+    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
+}
+</style>
+这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
+http://www.imooc.com/code/407
+</pre>
+http://www.gfxcamp.com/premiere-2015/
+<pre>
+------->Basic DOM<-------
+HTML文档可以说由节点构成的集合，三种常见的DOM节点:
+. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
+. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
+. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
+看下面代码:
+<a href="http://www.imooc.com">JavaScript DOM</a>
+通过ID获取元素
+学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
+语法:
+ document.getElementById(“id”)
+</pre>
+<hr /><hr />
+Presentation of T & C :https://pad.pzimediadesign.nl/p/stonenotesontc