-
RnA
アルバムを聴く https://yamazawa.bandcamp.com/album/rna
実験音楽 2014mugen
-
A*B*C*D*E
アルバムを聴く https://yamazawa.bandcamp.com/album/a-b-c-d-e
実験音楽 2014mugen
-
Temperature - 2013 SP
作品を見る http://etext-music.com/htmlart/10S.html 。全画面モード(F11)がおすすめ。
実験音楽 2014mugen
-
Temperature - 2013
作品を見る http://etext-music.com/htmlart/10.html 。全画面モード(F11)がおすすめ。
実験音楽 2014mugen
-
RnA - D20141
作品を見る http://etext-music.com/htmlart/08.html 。全画面モード(F11)がおすすめ。
実験音楽 2014mugen
-
Apparition - 紺碧の花びら
作品を見る http://etext-music.com/htmlart/02.html 。全画面モード(F11)がおすすめ。
実験音楽 2014mugen
-
変更する夢
作品を見る http://etext-music.com/works/svg/D3_6.html ・タイルをタップすると色を変更できます。 ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>変更する夢</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="margin:0; background-color:black;"> <script> svg=d3.select("body").append("svg").attr("width",1920-8).attr("height",1080-8) svg.selectAll() .data(d3.range(16*9)) .enter() .append("rect").attr("width",120).attr("height",120).attr("stroke","black").attr("stroke-width",1) .attr("x",function(d){return ((d+16)%16)*120}) .attr("y",function(d){return Math.floor(d/16)*120}) .attr("fill","snow") .attr("opacity",function(){return Random(1,8)/10}) .each(loop) .on("click",function(){d3.select(this).attr("fill",RandomSelect("red","green","blue","gold"))}) .on("dblclick",function(){d3.select(this).attr("fill","snow")}) function loop(){ var c=d3.select(this); (function repeat(){ t=Random(1000,20000) c=c .transition().duration(t) .attr("opacity",function(){return Random(1,8)/10}) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
崩れ去る夢
作品を見る http://etext-music.com/works/svg/D3_5_4_1.html ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>崩れ去る夢</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="margin:0; background-color:black;"> <script> wx=1920; wy=1080; px=16; py=9; svg=d3.select("body").append("svg").attr("width",wx-8).attr("height",wy-8) svg.selectAll() .data(d3.range(px*py)) .enter() .append("rect").attr("width",wx/px).attr("height",wy/py).attr("stroke","black").attr("stroke-width",1) .attr("x",function(d){return (d+px)%px*wx/px}) .attr("y",function(d){return Math.floor(d/px)*wy/py}) .attr("fill",function(){return RandomSelect("Teal","Deepskyblue","Seagreen","Royalblue","red")}) .attr("opacity",function(){return Random(1,8)/10}) .each(loop) function loop(){ var c=d3.select(this); (function repeat(){ t=Random(1000,20000) c=c .transition().duration(t) .attr("opacity",function(){return Random(1,8)/10}) .attr("transform",function(d){return "rotate("+Random(60)+" "+((d+px)%px*wx/px)+","+(Math.floor(d/px)*wy/py)+")"}) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
青と赤の風景 III
作品を見る http://etext-music.com/works/svg/D3_5_3_2.html ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>青と赤の風景 III</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="margin:0; background-color:black;"> <script> wx=1920; wy=1080; px=16; py=9; svg=d3.select("body").append("svg").attr("width",wx-8).attr("height",wy-8) svg.selectAll() .data(d3.range(px*py)) .enter() .append("rect").attr("width",wx/px).attr("height",wy/py).attr("stroke","black").attr("stroke-width",1) .attr("x",function(d){return (d+px)%px*wx/px}) .attr("y",function(d){return Math.floor(d/px)*wy/py}) .attr("transform",function(){return "skewX(" + Random(-90,90) + ")"}) .attr("fill",function(){return RandomSelect("Teal","Deepskyblue","Seagreen","Royalblue","red")}) .attr("opacity",function(){return Random(1,8)/10}) .each(loop) function loop(){ var c=d3.select(this); (function repeat(){ t=Random(1000,20000) c=c .transition().duration(t) .attr("transform",function(){return "skewX(" + Random(-90,90) + ")"}) .attr("opacity",function(){return Random(1,8)/10}) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
青と赤の風景 II
作品を見る http://etext-music.com/works/svg/D3_5_1_3.html ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>青と赤の風景 II</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="margin:0; background-color:black;"> <script> wx=1920; wy=1080; px=16; py=3; svg=d3.select("body").append("svg").attr("width",wx-8).attr("height",wy-8) svg.selectAll() .data(d3.range(px*py)) .enter() .append("rect").attr("width",wx/px).attr("height",wy/py).attr("stroke","black").attr("stroke-width",1) .attr("x",function(d){return (d+px)%px*wx/px}) .attr("y",function(d){return Math.floor(d/px)*wy/py}) .attr("transform",function(){return "skewX(" + Random(-90,90) + ")"}) .attr("transform",function(){return "skewY(" + Random(-90,90) + ")"}) .attr("fill",function(){return RandomSelect("Teal","Deepskyblue","Seagreen","Royalblue","red")}) .attr("opacity",function(){return Random(1,8)/10}) .each(loop) function loop(){ var c=d3.select(this); (function repeat(){ t=Random(1000,20000) c=c .transition().duration(t) .attr("transform",function(){return "skewX(" + Random(-90,90) + ")"}) .attr("transform",function(){return "skewY(" + Random(-90,90) + ")"}) .attr("opacity",function(){return Random(1,8)/10}) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
青と赤の風景 I
作品を見る http://etext-music.com/works/svg/D3_5_1_1.html ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="refresh" content="10" > <title>青と赤の風景 I</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="margin:0; background-color:black;"> <script> wx=1920; wy=1080; px=16; py=1; svg=d3.select("body").append("svg").attr("width",wx-8).attr("height",wy-8) svg.selectAll() .data(d3.range(px*py)) .enter() .append("rect").attr("width",wx/px).attr("height",wy/py).attr("stroke","black").attr("stroke-width",1) .attr("x",function(d){return (d+px)%px*wx/px+Random(-200,200)}) .attr("y",function(d){return Math.floor(d/px)*wy/py}) .attr("fill",function(){return RandomSelect("Teal","Deepskyblue","Seagreen","Royalblue","red")}) .attr("opacity",function(){return Random(1,8)/10}) .each(loop) function loop(){ var c=d3.select(this); (function repeat(){ t=Random(1000,20000) c=c .transition().duration(t) .attr("opacity",function(){return Random(1,8)/10}) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
出版の行方
作品を見る http://etext-music.com/works/svg/D3_3_5.html ・全画面モード(F11)がおすすめ。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>出版の行方</title> <script src="my.js"></script> <script src="d3.js"></script> <style> @font-face { font-family:Splendid ES; src:url(Splendid ES.ttf) format("truetype"); } </style> </head> <body style="margin:0; background-color:black;"> <script> svg=d3.select("body").append("svg").attr("width",1920-4).attr("height",1080-4) svg.selectAll() .data(d3.range(20)) .enter() .append("text") .text(function(){return RandomSelect("SVG","D3","ePub","HTML5","CSS3","dbookPRO")}) .attr("font-family","Splendid ES, cursive") .each(loop) function loop(){ var c=d3.select(this); (function repeat(){ t=Random(2000,20000) c=c .transition().duration(t) .attr("x",Random(1,1920)) .attr("y",Random(1,1080)) .attr("text-anchor","middle") .attr("fill","rgb("+Random(255)+","+Random(255)+","+Random(255)+")") .attr("font-size",Random(32,320)+"px") .attr("opacity",Random(2,8)/10) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
夜光虫
作品を見る http://etext-music.com/works/svg/D3_2_2.html ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Refresh" content="60"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>夜光虫</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="margin:0; background-image:url('bgimg_b.jpg')"> <script> svg=d3.select("body").append("svg").attr("width",1920-8).attr("height",1080-8) svg.selectAll() .data(d3.range(1,200)) .enter() .append("circle") .attr("cx",function(){return Random(1920)}) .attr("cy",function(){return Random(1080)}) .attr("r",function(){return Random(1,4)}) .attr("fill",function(){return RandomSelect("Teal","Palegreen","Seagreen")}) .attr("opacity",0) .each(loop) function loop(){ var c=d3.select(this); (function repeat(){c=c .transition().duration(2000) .attr("r",function(){return Random(1,4)}) .attr("opacity",function(){return Random(1,8)/10}) .each("end",repeat) })(); } </script> </body> </html>
CG 2014mugen
-
UFO on the desk
作品を見る http://etext-music.com/works/svg/D3_1_2.html ・全画面モード(F11)がおすすめ。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>UFO on the desk</title> <script src="my.js"></script> <script src="d3.js"></script> </head> <body style="background-image:url('bgimg.jpg')"> <body> <div id="canvas"></div> <script> d3.select("#canvas").append("svg").attr("width",500).attr("height",500) .append("circle").attr("cx",250).attr("cy",250).attr("r",200) .attr("fill","gold").attr("opacity",0.8) .transition().each("end",repeat); function repeat(){ c = d3.select(this); (function repeat(){ c=c .transition().duration(2000) .attr("r",0) .transition().duration(2000) .attr("r",200) .attr("fill",function(){return "rgb("+Random(255)+","+Random(255)+","+Random(255)+")"}) .each("end",repeat); })() }; </script> </body> </html>
CG 2014mugen
-
Rainbow Ring 2014
作品を見る http://etext-music.com/works/svg/Art_4w.html ・全画面モード(F11)がおすすめ。 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1912px" height="1072px" style="background:black"> <image x="1" y="1" width="120" height="120" xlink:href="ring.png"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="9s" from="0 61,61" to="360 61,61" repeatCount="indefinite" /> </image> <image x="1" y="121" width="120" height="120" xlink:href="ring.png"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="55s" from="0 61,181" to="360 61,181" repeatCount="indefinite" /> </image> ・・・・・・・ <image x="1801" y="961" width="120" height="120" xlink:href="ring.png"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="18s" from="0 1861,1021" to="360 1861,1021" repeatCount="indefinite" /> </image> </svg>
CG 2014mugen