-
変更する夢
作品を見る 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
-
numerical nostalgia II
作品を見る http://etext-music.com/works/svg/Art_3.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="10" y="20" width="50" height="50" opacity="0.82"> <animate attributeName="xlink:href" begin="0s" dur="7s" repeatCount="indefinite" values="n0.bmp; n1.bmp; n2.bmp; n3.bmp; n4.bmp; n5.bmp; n6.bmp; n7.bmp; n8.bmp; n9.bmp" /> </image> <rect x="10" y="20" width="50" height="50" style="stroke:#222222; stroke-width:2; fill-opacity:0; stroke-opacity:0.5"/> <image x="10" y="70" width="50" height="50" opacity="0.92"> <animate attributeName="xlink:href" begin="0s" dur="22s" repeatCount="indefinite" values="n0.bmp; n1.bmp; n2.bmp; n3.bmp; n4.bmp; n5.bmp; n6.bmp; n7.bmp; n8.bmp; n9.bmp" /> </image> <rect x="10" y="70" width="50" height="50" style="stroke:#222222; stroke-width:2; fill-opacity:0; stroke-opacity:0.5"/> <image x="10" y="120" width="50" height="50" opacity="0.97"> <animate attributeName="xlink:href" begin="0s" dur="36s" repeatCount="indefinite" values="n0.bmp; n1.bmp; n2.bmp; n3.bmp; n4.bmp; n5.bmp; n6.bmp; n7.bmp; n8.bmp; n9.bmp" /> </image> ・・・・・・・・ <rect x="1860" y="970" width="50" height="50" style="stroke:#222222; stroke-width:2; fill-opacity:0; stroke-opacity:0.5"/> <image x="1860" y="1020" width="50" height="50" opacity="0.92"> <animate attributeName="xlink:href" begin="0s" dur="20s" repeatCount="indefinite" values="n0.bmp; n1.bmp; n2.bmp; n3.bmp; n4.bmp; n5.bmp; n6.bmp; n7.bmp; n8.bmp; n9.bmp" /> </image> </svg>
CG 2014mugen
-
numerical nostalgia I
作品を見る http://etext-music.com/works/svg/Art_2.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"> <text x="1820" y="163" font-size="17" font-weight="bold" font-family="DIGITAL-7"> <animate attributeType="XML" attributeName="fill" dur="5s" repeatCount="indefinite" values="green; black; green" /> 7</text> <text x="121" y="889" font-size="20" font-weight="bold" font-family="DIGITAL-7"> <animate attributeType="XML" attributeName="fill" dur="4s" repeatCount="indefinite" values="green; black; green" /> 2</text> ・・・・・・・・ <text x="941" y="635" font-size="19" font-weight="bold" font-family="DIGITAL-7"> <animate attributeType="XML" attributeName="fill" dur="22s" repeatCount="indefinite" values="green; black; green" /> 1</text> </svg>
CG 2014mugen
-
interactive tile
作品を見る http://etext-music.com/works/svg/Art_1b_rect_a.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"> <a id="11" xlink:href="#11a1"> <rect x="1" y="1" width="98" height="98"> <animate id="11a1" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="blue; black; blue" /> <animate id="11a2" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="red; black; red" begin="none" /> <animate id="11a3" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="gold; black; gold" begin="none" /> <animate id="11a4" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="silver; black; silver" begin="none" /> </rect> <script><![CDATA[var color11={"#11a1":"#11a2", "#11a2":"#11a3","#11a3":"#11a4","#11a4":"#11a1"}; var el11=document.getElementById("11"); el11.addEventListener("click", function(ev){this.setAttribute("xlink:href", color11[this.getAttribute("xlink:href")]);}, false);]]></script> </a> ・・・・・・・・ <a id="19011001" xlink:href="#19011001a1"> <rect x="1901" y="1001" width="98" height="98"> <animate id="19011001a1" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="blue; black; blue" /> <animate id="19011001a2" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="red; black; red" begin="none" /> <animate id="19011001a3" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="gold; black; gold" begin="none" /> <animate id="19011001a4" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="silver; black; silver" begin="none" /> </rect> <script><![CDATA[var color19011001={"#19011001a1":"#19011001a2", "#19011001a2":"#19011001a3","#19011001a3":"#19011001a4","#19011001a4":"#19011001a1"}; var el19011001=document.getElementById("19011001"); el19011001.addEventListener("click", function(ev){this.setAttribute("xlink:href", color19011001[this.getAttribute("xlink:href")]);}, false);]]></script> </a> </svg>
CG 2014mugen
-
interactive circle
作品を見る http://etext-music.com/works/svg/Art_1a.html ・円をクリックすると色を赤に変更できます。好きな場所の円の色を変更して楽しめます。 ・全画面モード(F11)がおすすめ。 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="1080px" style="background:black"> <a xlink:href="#6040"> <circle cx="60" cy="40" r="30"> <animate attributeType="XML" attributeName="fill" dur="29s" repeatCount="indefinite" values="blue; black; blue" /> <animate id="6040" attributeType="XML" attributeName="fill" dur="29s" repeatCount="indefinite" values="red; black; red" begin="none" /> </circle> </a> ・・・・・・・・ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="1080px" style="background:black"> <a xlink:href="#6040"> <circle cx="60" cy="40" r="30"> <animate attributeType="XML" attributeName="fill" dur="29s" repeatCount="indefinite" values="blue; black; blue" /> <animate id="6040" attributeType="XML" attributeName="fill" dur="29s" repeatCount="indefinite" values="red; black; red" begin="none" /> </circle> </a>
CG 2014mugen
-
rectangle animateion 6
作品を見る http://etext-music.com/works/svg/SVG03_2.html <svg width="640" height="640" style="background:black"> <rect x="0" y="0" width="50" height="800"><animate attributeType="XML" attributeName="fill" dur="17s" repeatCount="indefinite" values="silver;black;gold;red;black;silver" /></rect> <rect x="50" y="0" width="50" height="800"><animate attributeType="XML" attributeName="fill" dur="32s" repeatCount="indefinite" values="silver;black;gold;red;black;silver" /></rect> ・・・・・・・・ <rect x="800" y="0" width="50" height="800"><animate attributeType="XML" attributeName="fill" dur="16s" repeatCount="indefinite" values="silver;black;gold;red;black;silver" /></rect> </svg>
CG 2014mugen
-
rectangle animateion 5
作品を見る http://etext-music.com/works/svg/SVG03_1.html <svg width="640" height="640" style="background:black"> <rect x="0" y="0" width="80" height="80"><animate attributeType="XML" attributeName="fill" dur="11s" repeatCount="indefinite" values="snow;red;green;blue;snow" /></rect> <rect x="0" y="80" width="80" height="80"><animate attributeType="XML" attributeName="fill" dur="44s" repeatCount="indefinite" values="snow;red;green;blue;snow" /></rect> ・・・・・・・・ <rect x="700" y="700" width="80" height="80"><animate attributeType="XML" attributeName="fill" dur="31s" repeatCount="indefinite" values="snow;red;green;blue;snow" /></rect> </svg>
CG 2014mugen