「8cm×12cmの小さなアート」の作品#260は、物体落下シミュレーションphysicSketchを使って作った画面をキャプチャしただけ。
physicSketchは、あんどうやすしさん作成のJavaScriptライブラリ。
http://d.hatena.ne.jp/technohippy/20110308#1299593240
作品#260の元をサンプルページとして、以下のところに置いた。
https://ok2nd.sakura.ne.jp/w-map/psketch/
https://ok2nd.github.io/tool/psketch/
Addボタンを押すと、その度図形が追加される。作品#260は図形を数個追加した時点で画面をキャプチャした。
Addボタンを次々に押して図形をたくさん追加して、そのまま放置してみると、図形同士がぶつかりあったり、結合が切れたり、勝手にくっついたりして予測不能な複雑な動きをする。Addボタンを連続で押しすぎるとハングするので注意。
「8cm×12cmの小さなアート」に作品を14個(#257－#270)追加。
今回の作品#260～#270は、描いていない。パソコンで作成してプリントアウトした。
#260の作成については、以下に記載。
物体落下シミュレーションphysicSketchを使ってアート作品
#261はドライフラワーを写真に撮って加工した画像とテクスチャ画像を合わせた。以下に記載。
ImageMagick(convert)とAdobe Photoshop CS2でアート作品作成
#262から#270の作成については、以下に記載。
《8cm×12cmの小さなアート》
https://ok2nd.sakura.ne.jp/art/?p=8
7月に入ると、暑くて、関西では山歩きをする気になれない。六甲山は最高峰地点でも932m。六甲ケーブル山上駅が標高737.5m。神戸の街に比べて4度ほど低いぐらい。天気が悪くて風が吹けば体感温度はかなり下がるが、真夏で晴天ならかなり暑い。
近畿以西の最高峰を調べて見ると、四国の石鎚山が1,982mで、2000m以上の山が無い。
近畿地方：八経ヶ岳：1,915m
中国地方：大山：1,729m
四国地方：石鎚山：1,982m
九州本土：九重連山・中岳：1,791m
屋久島：宮之浦岳：1,936m
軽井沢や清里高原も1000m-1400m程度で夏は十分暑かった。やはり、北海道や東北北部を除けば2000mは超えないと夏涼しくはない。
乗鞍岳は3,026m。乗鞍山頂(畳平)バス停で2,702mもある。標高2716mというバス停もある。手軽に3000m近くまでいける。さすがに涼しい。2011年8月に行った時は天気が悪くて寒いぐらいだった。天気が悪くて大した写真は撮れなかったが、涼しさは伝わってくる。
でも、関西から行くには遠すぎる。関西にも乗鞍岳が欲しい。
無限スクロールを実現するJavaScript「Infinite Scroll」を「8cm×12cmの小さなアート」で試してみた。
https://ok2nd.sakura.ne.jp/art/infinite/
<div id="contents">
<div id="gallery">
<a class="img"><span style="background-image: url('../thumbs/a001.jpg')"></span></a>
<a class="img"><span style="background-image: url('../thumbs/a002.jpg')"></span></a>
.....
<nav id="page-nav" style="display:none;">
<a href="index.php?p=2"></a>
</nav>
</div>
</div>
<script>
$(function(){
var $container = $('#gallery');
$container.infinitescroll(
{
navSelector: '#page-nav',
nextSelector: '#page-nav a',
itemSelector: '.img, .popImg',
loading: {
finishedMsg: '',
img: ''
}
}
);
});
</script>
ローディング画像など、余分なものは出さないようにしている。
1点だけ問題があった。永久に無限ループしてしまう。
次々に読み込んでいくページを、次のようにPHPで自動生成している。
index.php?p=2
index.php?p=3
index.php?p=4
...
各ページのHTMLでは、次に読み込むページを、次のように指定する。
<nav id="page-nav" style="display:none;">
<a href="index.php?p=2"></a>
</nav>
最後のページでは、このナビゲーションを外すようにしても効果なし。PHPページの引数(?p=xxx)が最後のページを超えたら何もHTMLを返さないようにして解決。
<?php
if ($page_current > $page_end) {
exit();
}
?>
使っている「Infinite Scroll」は最新版ではない。version 2.0b2.110713を使用。
--------
合わせて、サムネイル画像クリックによる大きな画像のポップアップ機能追加で嵌まったので備忘録。
ポップアップ画像をdisplay:none;にしておいて、onclick()でdisplay:''にして画像表示するところはうまくいくが、そのポップアップ画像クリックでポップアップ画像をdisplay:none;で消すのが出来なかった。
<script>
var popupNo = '';
function popupImage(no) {
if (popupNo != '') {
$('#'+popupNo).css('display','none');
}
popupNo = no;
$('#'+no).css('display','');
}
function popupOff(no) {
$('#'+no).css('display','none');
popupNo = '';
}
</script>
Infinite ScrollのitemSelectorで指定する追加要素のセレクタclass="img"の内側にポップアップ画像を入れているとうまくいかない。セレクタ"img"の外側にポップアップ画像を出すことでうまくいく。この場合、itemSelectorで指定する追加要素を'.img, .popImg'と２つ指定してやる事。
【うまくいかない方法】
<a class="img" onclick="popupImage('001')">
<img class="popImg" id="001" src="../art/a001.jpg"
style="display: none;" onclick="popupOff('001')">
<span style="background-image: url('../thumbs/a001.jpg')"></span>
</a>
【うまくいく方法】
<a class="img" onclick="popupImage('001')">
<span style="background-image: url('../thumbs/a001.jpg')"></span>
</a>
<img class="popImg" id="001" src="../art/a001.jpg"
style="display: none;" onclick="popupOff('001')">
サムネイル画像クリックによる大きな画像のポップアップでは、
http://rgrg.blog61.fc2.com/blog-entry-593.html
のJavaScriptを使った別バージョンも作成。
https://ok2nd.sakura.ne.jp/art/infinite-b/
この場合のHTMLは以下。
<div id="contents">
<div id="gallery">
<a class="img" onclick="popupImage('../art/a001.jpg')">
<span style="background-image: url('../thumbs/a001.jpg')"></span></a>
<a class="img" onclick="popupImage('../art/a002.jpg')">
<span style="background-image: url('../thumbs/a002.jpg')"></span></a>
.....
<nav id="page-nav" style="display:none;">
<a href="index.php?p=2"></a>
</nav>
</div>
</div>>
【もう一つの備忘録】
ページをスクロールしても、ポップアップ画像を画面中央にするためには、CSSのpositionを'absolute'でなく'fixed'にする。
3年前に買ったシラサギカヤツリの花が咲いた。
陶器の鉢に水を入れて、買った時の株をそのまま入れているだけ。冬には一旦枯れたようになるが、枯れた葉を切っておくと、また緑の葉が出てきて、真ん中の軸が伸びて先端に白い可憐な花を咲かせる。肥料とかはやっていない。水のみ。
といっても、これは花では無いらしい。花茎の先の花穂の周りの苞（ほう）という部分が白くなって花に見えるらしい。
【後日追記】
5年目の2019年も花（苞）が咲いた。
6年目の2020年も花（苞）が咲いた。
7年目の2021年も花（苞）が咲いた。相変わらず、肥料とかは全くやっていない。水のみ。
