2014

the whole world is peaceful.

インターネットを取り戻す ( perlin noise )

インターネットは皆の物だから、自分のブログを好きな見た目にするのも、他人のブログを好きな見た目で読むのも、勝手にできていいはずだと思う。俺たちのインターネットを取り戻したい。

ブログの背景,ぐにゃぐにゃ動くようにした.パーリンノイズっていうのを使うとぐにゃぐにゃ動かせておもしろい.アカデミー科学技術賞狙える勢いでぐにゃぐにゃ動く.

/*

* はてなブログの背景を記事内の画像にしてぐにゃぐにゃさせる

背景がぐにゃぐにゃになります

** 使い方

以下をコピーして 詳細設定→head要素に貼り付け

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://hitode909.github.io/hatenablog-unofficial-modules/haikei-gunyagunya.js"></script>

perlin noiseの生成に https://github.com/josephg/noisejs を使っています

*/
$(function () {
	var check = function () {
		var src = $('.entry-content img:visible:first').attr('src');
		if (!src) return false;
		$('body').css('background', 'url(' + src + ')');
		return true;
	};

	if (!check()) {
		var timer = setInterval(function () {
			if (check()) {
				clearInterval(timer);
			}
		}, 1000);
	}

	var $style = $('<style>');

	$style.html([
		'#container-inner, .entry-list {',
		'background: rgba(255, 255, 255, 0.9);',
		'}',
		'body {',
		'transition: background-position 0.2s ease-in-out 0, background-size 0.2s ease-in-out 0;',
		'}'
	].join("\n"));
	$('body').append($style);
});

noise.seed(Math.random());

var count = 0.0;

var role = function () {
	$('body').css('background-position', '' + noise.perlin2(count, count * 2) * 100 + 'px ' + noise.perlin2(count * 2, count * 3) * 100 + 'px');
	$('body').css('background-size', '' + ((noise.perlin2(count / 2.0, count) * 250) + 260) + 'px ' + ((noise.perlin2(count / 3.0, count / 2.0) * 250) + 260) + 'px');
	count += 0.05;
};
role();
setInterval(role, 100);

This is a simple library for 2d & 3d perlin noise and simplex noise in javascript. Noise is pretty.

noise.seed(Math.random());

for (var x = 0; x < canvas.width; x++) {
  for (var y = 0; y < canvas.height; y++) {
    // noise.simplex2 and noise.perlin2 return values between -1 and 1.
    var value = noise.simplex2(x / 100, y / 100);

    image[x][y].r = Math.abs(value) * 256; // Or whatever. Open demo.html to see it used with canvas.
  }
}
/*
 * @title hitodenize vakzine
 * @description パーリンノイズでぐにゃぐにゃしている背景(http://hitode909.hatenablog.com/entry/2014/04/23/203032)をとりあえず落ち着かせる ( fork from http://let.hatelabo.jp/furyu-tei/let/hLHVt4H41cYI )
 * @include http://*.hatenablog.com/*
 * @license MIT License
 * @javascript_url
 */

// https://twitter.com/furyutei/status/463979473772085248

(function (w, d) {
	w.$ = w.jQuery = function (f) {
		f = function () {};
		f.css = f.each = f;
		return f
	}
})(window, document)

w.$ = w.jQuery = function (f) { f = function () {}; f.css = f.each = f; return f } これが何をしているのかわからない。

背景動かすのに使っているjQueryの関数を無効化しています(実はその部分だけでも背景は止まります)。単にdiv#containerの背景で上書きしただけだと、100ms毎に背景を動かす処理が走って重いので。

powered by hatena blog.
the nikki system for lifelogging junkies.

all posts © their original owners.
writing is reusable solely under the BY Creative Commons License.