User:Stonestone/RandomNotes: Difference between revisions
Stonestone (talk | contribs) No edit summary |
Stonestone (talk | contribs) No edit summary |
||
(19 intermediate revisions by the same user not shown) | |||
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 | https://iffr.com/en/2016/films/establishing-eden | ||
http://exhibitionist.nl/tentoonstelling/establishing-eden/ | http://exhibitionist.nl/tentoonstelling/establishing-eden/ | ||
Line 62: | Line 78: | ||
\r' -- return ??? | \r' -- return ??? | ||
至于 "..." 不是单个字符,就不列在上面了,英文名为ellipsis (省略符)</pre> | 至于 "..." 不是单个字符,就不列在上面了,英文名为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.不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多): | |||
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 | |||
</pre> | |||
http://www.gfxcamp.com/premiere-2015/ | |||
<pre> | |||
------->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”) | |||
</pre> | |||
<hr /><hr /> | |||
Presentation of T & C :https://pad.pzimediadesign.nl/p/stonenotesontc |
Latest revision as of 11: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 (省略符)
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
。
===============================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