keiya · October 18, 2012 22:39
diff --git a/stripe.html b/stripe.html
 <!DOCTYPE html>
 <head>
 	<meta charset='utf-8' />
 <link rel='stylesheet' type='text/css' href="//cdn.keiyac.org/common/reset.css"/>
 <style type='text/css'>
 html,body {
 	background:#000;
 	width:100%;
 	height:100%;
 	overflow:hidden;
 }
 #help {
 	position:absolute;
 	bottom:120px;
 	right:0;
 	margin:10px;
 	width:500px;
 	height:80px;
 }
 </style>
 <title>とてもきらびやかな現代アート風Canvas</title>
 </head>
 <body>
 	<canvas id='stripe'>
 	</canvas>
 	<div id='help'>
 		<dl>
 			<dt>Mouse Y Axis(タテ)</dt>
 			<dd>基準となる色の範囲を決めます。上ほど単色、下にマウスカーソルが行くほど、レインボーになります。</dd>
 			<dt>Mouse Click(押す)</dt>
 			<dd>これが消える</dd>
 		</dl>
 	</div>
 <script src="//cdn.keiyac.org/common/jquery/jquery.min.js"></script>
 <script>
 (function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
 })();
 /*
 * stripe by Keiya Chinen, 2012
 */
 (function(){
 	onload = init;
 	var canvas = document.getElementById('stripe');
 	var ctx,wWidth,wHeight,limit
 	var hueRange = 30;
 	var saturation = 150;
 	var value = 255;
 	var population = 0;
 	var maxOpacity = 0.1;
 	var obj = [];

 	// リサイズしても、「横幅」によりストライプの密度を決めるので安心。
 	function resize() {
 		wWidth = $(document).width();
 		wHeight = $(document).height();
 		$(canvas).attr({width:wWidth,height:wHeight});
 		limit = wWidth / 5;
 		for (var i = obj.length; i < limit; ++i) {
 			obj.push(createStripe());
 		}
 	}

 	// とにかくすべての始まり。イベントをこっそりと追加
 	function init() {
 		if (!canvas||!canvas.getContext) {alert('could not create canvas.');return false;};
 		$(window).bind('resize',resize);
 		resize();
 		ctx = canvas.getContext('2d');
 		requestAnimationFrame(draw)
 		$(window).mousemove(function(e){
 			hueRange = e.pageY / wHeight * 360;
 		});
 		$(document).click(function(){$('#help').toggle()});
 	}

 	// すべてのストライプさんのプロパティを一括変更するならこれで決まり！
 	function applyAllObj(key,value) {
 		for (var k in obj) {
 			obj[k][key] = value;
 		}
 	}

 	// ストライプをつくっちゃうお茶目なファンクション
 	function createStripe() {
 		++population;
 		var generation = parseInt(population / limit,10);

 		// 個体差のため
 		var randColor = Math.random();
 		var randWidth = parseInt(Math.random() * 50,10) + 50;
 		var randStarts = parseInt(Math.random() * (wWidth - randWidth),10);
 		var randDirection = Math.round(Math.random()) == 0 ? -1 : 1;
 		var randSpeed = Math.random() / 9;
 		var randRubberEffect = Math.random() / 10;
 		var randRubberDirection = Math.round(Math.random()) == 0 ? -1 : 1;
 		var randRubberFlex = Math.random() * 50 + 50;
 		return {
 			colorRand : randColor,
 			pos : randStarts,
 			width : randWidth,
 			direction : randDirection,
 			speed : randSpeed,
 			rubber : randRubberEffect,
 			rubberDirection : randRubberDirection,
 			rubberFlex : randRubberFlex,
 			age : 0,
 		};
 	}

 	// 高速でぐ～るぐる！
 	function draw() {
 		var time = ~~new Date;
 		ctx.clearRect(0,0,wWidth,wHeight);
 		for (var k in obj) {
 			//ctx.beginPath();
 			ctx.fillStyle = getColor((time / 100 % 360) + parseInt(obj[k].colorRand * hueRange,10) , saturation ,value , obj[k].age);
 			obj[k].pos += obj[k].direction * obj[k].speed;
 			obj[k].width += obj[k].rubberDirection * obj[k].rubber;

 			// 画面そとにはみ出しちゃったストライプは、新たなストライプに生まれ変わる
 			if (obj[k].pos > wWidth) {
 				obj[k] = createStripe();
 			}
 			else if (obj[k].pos < -1 * obj[k].width) {
 				obj[k] = createStripe();
 			}

 			// 伸縮性のあるストライプに。
 			if (obj[k].width > obj[k].rubberFlex) {
 				obj[k].rubberDirection = -1;
 			}
 			else if (obj[k].width < obj[k].rubberFlex / 2) {
 				obj[k].rubberDirection = 1;
 			}

 			// フェードイン
 			if (obj[k].age < 0.6) {
 				obj[k].age += 0.001;
 			}

 			// なんかこれしないと、ちかっとサブリミナルが発生しちゃう
 			if (obj[k].age > 0.01) {
 				ctx.fillRect(
 					obj[k].pos,
 					0,
 					obj[k].width,
 					wHeight
 				);
 			}
 		}
 		ctx.stroke();
 		ctx.fill();
 		requestAnimationFrame(draw);
 	}

 	// HSV を RGBA (CSS formatted) にして返します。
 	function getColor(h,s,v,alpha) {
 		var hi = Math.floor(h / 60) % 6;
 		var f = (h / 60) - Math.floor(h / 60);
 		var p = Math.round(v * (1 - (s / 255)));
 		var q = Math.round(v * (1 - (s / 255) * f));
 		var t = Math.round(v * (1 - (s / 255) * (1 - f)));
 		var r,g,b;
 		switch (hi) {
 			case 0:
 				r = v; g = t ; b = p;
 				break;
 			case 1:
 				r = q; g = v ; b = p;
 				break;
 			case 2:
 				r = p; g = v ; b = t;
 				break;
 			case 3:
 				r = p; g = q ; b = v;
 				break;
 			case 4:
 				r = t; g = p ; b = v;
 				break;
 			case 5:
 				r = v; g = p ; b = q;
 				break;
 		}
 //		document.title = r+'/'+g+'/'+b;
 		return 'rgba('+r+','+g+','+b+','+alpha+')';
 	}
 }())
 </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset='utf-8' />
	<link rel='stylesheet' type='text/css' href="//cdn.keiyac.org/common/reset.css"/>
	<style type='text/css'>
	html,body {
	background:#000;
	width:100%;
	height:100%;
	overflow:hidden;
	}
	#help {
	position:absolute;
	bottom:120px;
	right:0;
	margin:10px;
	width:500px;
	height:80px;
	}
	</style>
	<title>とてもきらびやかな現代アート風Canvas</title>
	</head>
	<body>
	<canvas id='stripe'>
	</canvas>
	<div id='help'>
	<dl>
	<dt>Mouse Y Axis(タテ)</dt>
	<dd>基準となる色の範囲を決めます。上ほど単色、下にマウスカーソルが行くほど、レインボーになります。</dd>
	<dt>Mouse Click(押す)</dt>
	<dd>これが消える</dd>
	</dl>
	</div>
	<script src="//cdn.keiyac.org/common/jquery/jquery.min.js"></script>
	<script>
	(function() {
	var requestAnimationFrame = window.requestAnimationFrame \|\| window.mozRequestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\| window.msRequestAnimationFrame;
	window.requestAnimationFrame = requestAnimationFrame;
	})();
	/*
	* stripe by Keiya Chinen, 2012
	*/
	(function(){
	onload = init;
	var canvas = document.getElementById('stripe');
	var ctx,wWidth,wHeight,limit
	var hueRange = 30;
	var saturation = 150;
	var value = 255;
	var population = 0;
	var maxOpacity = 0.1;
	var obj = [];

	// リサイズしても、「横幅」によりストライプの密度を決めるので安心。
	function resize() {
	wWidth = $(document).width();
	wHeight = $(document).height();
	$(canvas).attr({width:wWidth,height:wHeight});
	limit = wWidth / 5;
	for (var i = obj.length; i < limit; ++i) {
	obj.push(createStripe());
	}
	}

	// とにかくすべての始まり。イベントをこっそりと追加
	function init() {
	if (!canvas\|\|!canvas.getContext) {alert('could not create canvas.');return false;};
	$(window).bind('resize',resize);
	resize();
	ctx = canvas.getContext('2d');
	requestAnimationFrame(draw)
	$(window).mousemove(function(e){
	hueRange = e.pageY / wHeight * 360;
	});
	$(document).click(function(){$('#help').toggle()});
	}

	// すべてのストライプさんのプロパティを一括変更するならこれで決まり！
	function applyAllObj(key,value) {
	for (var k in obj) {
	obj[k][key] = value;
	}
	}

	// ストライプをつくっちゃうお茶目なファンクション
	function createStripe() {
	++population;
	var generation = parseInt(population / limit,10);

	// 個体差のため
	var randColor = Math.random();
	var randWidth = parseInt(Math.random() * 50,10) + 50;
	var randStarts = parseInt(Math.random() * (wWidth - randWidth),10);
	var randDirection = Math.round(Math.random()) == 0 ? -1 : 1;
	var randSpeed = Math.random() / 9;
	var randRubberEffect = Math.random() / 10;
	var randRubberDirection = Math.round(Math.random()) == 0 ? -1 : 1;
	var randRubberFlex = Math.random() * 50 + 50;
	return {
	colorRand : randColor,
	pos : randStarts,
	width : randWidth,
	direction : randDirection,
	speed : randSpeed,
	rubber : randRubberEffect,
	rubberDirection : randRubberDirection,
	rubberFlex : randRubberFlex,
	age : 0,
	};
	}

	// 高速でぐ～るぐる！
	function draw() {
	var time = ~~new Date;
	ctx.clearRect(0,0,wWidth,wHeight);
	for (var k in obj) {
	//ctx.beginPath();
	ctx.fillStyle = getColor((time / 100 % 360) + parseInt(obj[k].colorRand * hueRange,10) , saturation ,value , obj[k].age);
	obj[k].pos += obj[k].direction * obj[k].speed;
	obj[k].width += obj[k].rubberDirection * obj[k].rubber;

	// 画面そとにはみ出しちゃったストライプは、新たなストライプに生まれ変わる
	if (obj[k].pos > wWidth) {
	obj[k] = createStripe();
	}
	else if (obj[k].pos < -1 * obj[k].width) {
	obj[k] = createStripe();
	}

	// 伸縮性のあるストライプに。
	if (obj[k].width > obj[k].rubberFlex) {
	obj[k].rubberDirection = -1;
	}
	else if (obj[k].width < obj[k].rubberFlex / 2) {
	obj[k].rubberDirection = 1;
	}

	// フェードイン
	if (obj[k].age < 0.6) {
	obj[k].age += 0.001;
	}

	// なんかこれしないと、ちかっとサブリミナルが発生しちゃう
	if (obj[k].age > 0.01) {
	ctx.fillRect(
	obj[k].pos,
	0,
	obj[k].width,
	wHeight
	);
	}
	}
	ctx.stroke();
	ctx.fill();
	requestAnimationFrame(draw);
	}

	// HSV を RGBA (CSS formatted) にして返します。
	function getColor(h,s,v,alpha) {
	var hi = Math.floor(h / 60) % 6;
	var f = (h / 60) - Math.floor(h / 60);
	var p = Math.round(v * (1 - (s / 255)));
	var q = Math.round(v * (1 - (s / 255) * f));
	var t = Math.round(v * (1 - (s / 255) * (1 - f)));
	var r,g,b;
	switch (hi) {
	case 0:
	r = v; g = t ; b = p;
	break;
	case 1:
	r = q; g = v ; b = p;
	break;
	case 2:
	r = p; g = v ; b = t;
	break;
	case 3:
	r = p; g = q ; b = v;
	break;
	case 4:
	r = t; g = p ; b = v;
	break;
	case 5:
	r = v; g = p ; b = q;
	break;
	}
	// document.title = r+'/'+g+'/'+b;
	return 'rgba('+r+','+g+','+b+','+alpha+')';
	}
	}())
	</script>
	</body>
No results found