wanabe · May 6, 2016 01:40
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
  <meta charset="UTF-8">
 </head>

 <body>
  <script src="//cdn.opalrb.org/opal/0.9.2/opal.min.js"></script>
  <script src="//cdn.opalrb.org/opal/0.9.2/opal-parser.min.js"></script>
  <script src="//cdn.opalrb.org/opal/0.9.2/external/opal-browser-0.2.0.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
  <script>Opal.load('opal-parser')</script>
  <div id="container"></div>
  
  <script id="vertexShader" type="x-shader/x-vertex">
    void main()	{
      gl_Position = vec4( position, 1.0 );
    }
  </script>
  
  <script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec2 resolution;
    uniform float time;
    void main()	{
      vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
      float a = time*40.0;
      float d,e,f,g=1.0/40.0,h,i,r,q;
      e=400.0*(p.x*0.5+0.5);
      f=400.0*(p.y*0.5+0.5);
      i=200.0+sin(e*g+a/150.0)*20.0;
      d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
      r=sqrt(pow(abs(i-e),2.0)+pow(abs(d-f),2.0));
      q=f/r;
      e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
      d=sin(e*g)*176.0+sin(e*g)*164.0+r;
      h=((f+d)+a/2.0)*g;
      i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
      h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
      h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
      i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
      i=mod(i/5.6,256.0)/64.0;
      if(i<0.0) i+=4.0;
      if(i>=2.0) i=4.0-i;
      d=r/350.0;
      d+=sin(d*d*8.0)*0.52;
      f=(sin(a*g)+1.0)/2.0;
      gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
    }
  </script>
  
  <script type="text/ruby">
  class App
    class << self
      def run
        new.run
      end
    end
  
    def initialize
  	@camera = Native(`new THREE.Camera`)
      @scene = Native(`new THREE.Scene()`)
  	@renderer = Native(`new THREE.WebGLRenderer()`)
  	@renderer.setPixelRatio( $$.devicePixelRatio )
      container = $document['container']
  	container << @renderer.domElement.to_n
  	@renderer.setSize( $$.innerWidth, $$.innerHeight )
      @animate = method(:animate).to_proc
    end
  
    def animate
      $$.requestAnimationFrame @animate
      render
      @renderer.render(@scene, @camera)
    end
  end
  
  class MyApp < App
    def initialize
      super
  
      @camera.position.z = 1;
      geometry = Native(`new THREE.PlaneGeometry( 2, 2 )`)
      @uniforms = Native(uniforms.to_n)
      material_arg = {
          uniforms: @uniforms, 
          vertexShader: $document['vertexShader'].text, 
          fragmentShader: $document['fragmentShader'].text
      }
  	material = Native(`new THREE.ShaderMaterial( material_arg.$to_n() )`)
  	mesh = Native(`new THREE.Mesh( geometry.$to_n(), material.$to_n() )`)
  	@scene.add( mesh )
      
      @uniforms.resolution.value.x = @renderer.domElement.width
      @uniforms.resolution.value.y = @renderer.domElement.height
    end
    
    def uniforms
      {
        time: { type: "f", value: 1.0 },
        resolution: { type: "v2", value: Native(`new THREE.Vector2()`) }
  	}
     end
  
    def render
      @uniforms.time.value += 0.05
    end
  end
  
  MyApp.new.animate
  </script>
 </body>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	</head>

	<body>
	<script src="//cdn.opalrb.org/opal/0.9.2/opal.min.js"></script>
	<script src="//cdn.opalrb.org/opal/0.9.2/opal-parser.min.js"></script>
	<script src="//cdn.opalrb.org/opal/0.9.2/external/opal-browser-0.2.0.js"></script>
	<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
	<script>Opal.load('opal-parser')</script>
	<div id="container"></div>

	<script id="vertexShader" type="x-shader/x-vertex">
	void main() {
	gl_Position = vec4( position, 1.0 );
	}
	</script>

	<script id="fragmentShader" type="x-shader/x-fragment">
	uniform vec2 resolution;
	uniform float time;
	void main() {
	vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
	float a = time*40.0;
	float d,e,f,g=1.0/40.0,h,i,r,q;
	e=400.0(p.x0.5+0.5);
	f=400.0(p.y0.5+0.5);
	i=200.0+sin(eg+a/150.0)20.0;
	d=200.0+cos(fg/2.0)18.0+cos(eg)7.0;
	r=sqrt(pow(abs(i-e),2.0)+pow(abs(d-f),2.0));
	q=f/r;
	e=(rcos(q))-a/2.0;f=(rsin(q))-a/2.0;
	d=sin(eg)176.0+sin(eg)164.0+r;
	h=((f+d)+a/2.0)*g;
	i=cos(h+rp.x/1.3)(e+e+a)+cos(qg6.0)*(r+h/3.0);
	h=sin(fg)144.0-sin(eg)212.0*p.x;
	h=(h+(f-e)q+sin(r-(a+h)/7.0)10.0+i/4.0)*g;
	i+=cos(h2.3sin(a/350.0-q))184.0sin(q-(r4.3+a/12.0)g)+tan(rg+h)184.0cos(rg+h);
	i=mod(i/5.6,256.0)/64.0;
	if(i<0.0) i+=4.0;
	if(i>=2.0) i=4.0-i;
	d=r/350.0;
	d+=sin(dd8.0)*0.52;
	f=(sin(a*g)+1.0)/2.0;
	gl_FragColor=vec4(vec3(fi/1.6,i/2.0+d/13.0,i)dp.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)d*(1.0-p.x),1.0);
	}
	</script>

	<script type="text/ruby">
	class App
	class << self
	def run
	new.run
	end
	end

	def initialize
	@camera = Native(`new THREE.Camera`)
	@scene = Native(`new THREE.Scene()`)
	@renderer = Native(`new THREE.WebGLRenderer()`)
	@renderer.setPixelRatio( $$.devicePixelRatio )
	container = $document['container']
	container << @renderer.domElement.to_n
	@renderer.setSize( $$.innerWidth, $$.innerHeight )
	@animate = method(:animate).to_proc
	end

	def animate
	$$.requestAnimationFrame @animate
	render
	@renderer.render(@scene, @camera)
	end
	end

	class MyApp < App
	def initialize
	super

	@camera.position.z = 1;
	geometry = Native(`new THREE.PlaneGeometry( 2, 2 )`)
	@uniforms = Native(uniforms.to_n)
	material_arg = {
	uniforms: @uniforms,
	vertexShader: $document['vertexShader'].text,
	fragmentShader: $document['fragmentShader'].text
	}
	material = Native(`new THREE.ShaderMaterial( material_arg.$to_n() )`)
	mesh = Native(`new THREE.Mesh( geometry.$to_n(), material.$to_n() )`)
	@scene.add( mesh )

	@uniforms.resolution.value.x = @renderer.domElement.width
	@uniforms.resolution.value.y = @renderer.domElement.height
	end

	def uniforms
	{
	time: { type: "f", value: 1.0 },
	resolution: { type: "v2", value: Native(`new THREE.Vector2()`) }
	}
	end

	def render
	@uniforms.time.value += 0.05
	end
	end

	MyApp.new.animate
	</script>
	</body>
No results found