360k

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }
      
      div {
        background-color: #6cf;
        width: 800px;
        height: 450px;
        text-align: center;
        line-height: 280px;
        overflow: hidden;
      }
      
      h1 {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 100px;
        color: #59c;
          text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15);
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Dope on a Rope</h1>
    </div>
  </body>
</html>

Forked Hi There and got Dope on a Rope

redeye

Fork

View Source

Like (1)

Comment (0)

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }
      
      div {
        background-color: #98bd42;
        width: 800px;
        height: 450px;
        text-align: center;
        line-height: 280px;
        overflow: hidden;
      }
      
      h1 {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 120px;
        color: #ddd;
          text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15);
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Hi There</h1>
    </div>
  </body>
</html>

Hi There - CSS 3D Text

adambu1988

Fork

View Source

Like (2)

Comment (2)

<!doctype html>
<html>
	<head>
		<title>Strange Attractor</title>
		<style type="text/css">
		body {
		    background:black;
		    margin:0px;
		    overflow:hidden;
		}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var canvas = document.createElement('canvas'),
		    width = canvas.width = 800,
		    height = canvas.height = 450,
		    halfWidth = width / 2,
		    halfHeight = height / 2,
		    fov = 250,
		    counter = 0,
		    mouseX = 120,
		    mouseY = 73;
		
			var context = canvas.getContext('2d');
			document.body.appendChild(canvas);
			document.body.addEventListener("mousemove", onMouseMove);
			
			var pixels = [];
			// some variables to calculate the strange attractor
			var x = 0.1, y=0.1, z=0.1;
			var a = 5,
			    b = 15,
			    c = 1,
			    interval = 0.01;
			    
			for(var i = 0; i<8000; i++) {
			    
			    // this is the maths for the strange attractor
			    
			    newX = x - (a * x) * interval + (a * y) * interval;
			    newY = y + (b * x) * interval - y * interval - (z * x) * interval;
			    newZ = z - (c * z) * interval + (x * y) * interval;
			    
			    x = newX;
			    y = newY;
			    z = newZ;
			    
			    // add a pixel particle at that position
			    // (we're scaling it up and pushing it
			    // back a little too)
			    pixels.push(new Pixel3D(x*15,y*15,(z*15)-200));
			    
			}
			
			
			// call the render function 30 times a second
			setInterval(render, 1000 / 30);
			
			
			function render() {
			    counter++;
			    
			    // fill the canvas with transparent black
			    // to create a trails effect
			    context.fillStyle = "rgba(0,0,0,0.2)";
			    context.fillRect(0, 0, width, height);
			    // and get the imagedata out of it
			    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
			
			    // iterate through every point in the array
			    var i = pixels.length;
			    while (i--) {
			        var pixel = pixels[i];
			
			        // here's the 3D to 2D formula, first work out
			        // scale for that pixel's z position (distance from
			        // camera)
			        var scale = fov / (fov + pixel.z);
			        // and multiply our 3D x and y to get our
			        // 2D x and y. Add halfWidth and halfHeight
			        // so that our 2D origin is in the middle of
			        // the screen.
			        var x2d = (pixel.x * scale) + halfWidth;
			        var y2d = (pixel.y * scale) + halfHeight;
			
			        // create an oscillating value between 0 and 1
			        // and use that as brightness for each pixel -
			        // this creates the pulsing colour
			        var brightness = (Math.sin((counter-i)*0.1)+1)/2;
			        
			        additiveBlendPixel(imagedata, x2d, y2d,100*brightness+10,80*brightness,240*brightness);
			     
			        // now rotate each 3d pixel around the origin
			        // dependent on the mouse position
			        pixel.rotateX(mouseY*0.0001);
			        pixel.rotateY(mouseX*0.0001);
			
			
			    }
			
				    // and write all those pixel values into the canvas
				    context.putImageData(imagedata, 0, 0);
				
				}
				
				function additiveBlendPixel(imagedata, x, y, r, g, b) {
				    
				    if((x<0) || (x>width) || (y<0) || (y>width)) return;
				    
				    var i = ((y>>0) * imagedata.width + (x>>0)) * 4;
				    
				    r=(imagedata.data[i]+r);
				    g=(imagedata.data[i+1]+g);
				    b=(imagedata.data[i+2]+b);
				
				    //console.log(r,g,b);
				    imagedata.data[i] = r;
				    imagedata.data[i+1] = g;
				    imagedata.data[i+2] = b;
				    imagedata.data[i+3] = 255;
				}
				
				function Pixel3D(x,y,z) {
				    this.x = x;
				    this.y = y;
				    this.z = z;
				    
				    this.rotateY = function(angle){
				
				        cosRY = Math.cos(angle);
				        sinRY = Math.sin(angle);
				
				        var tempz = this.z;;
				        var tempx = this.x;
				
				        this.x= (tempx*cosRY)+(tempz*sinRY);
				        this.z= (tempx*-sinRY)+(tempz*cosRY);
				
				
				    };
				    this.rotateX = function(angle){
				
				        cosRY = Math.cos(angle);
				        sinRY = Math.sin(angle);
				
				        var tempz = this.z;;
				        var tempy = this.y;
				
				        this.y= (tempy*cosRY)+(tempz*sinRY);
				        this.z= (tempy*-sinRY)+(tempz*cosRY);
				
				
				    };
				
				    this.rotateZ = function(angle){
				
				        cosRY = Math.cos(angle);
				        sinRY = Math.sin(angle);
				
				        var tempx = this.x;;
				        var tempy = this.y;
				
				        this.y= (tempy*cosRY)+(tempx*sinRY);
				        this.x= (tempy*-sinRY)+(tempx*cosRY);
				
				
				    };
				}
				
				
				function onMouseMove(e) {
				    mouseX = (halfWidth - e.clientX);
				    mouseY = (halfHeight - e.clientY);
				
				}
		</script>
	</body>
</html>

Strange Attractor - By Seb Lee-Deslisle

adambu1988

Fork

View Source

Like (7)

Comment (1)

<!DOCTYPE html>
<html>
	<head>
		<title>3D Pixel Render</title>
		<style type="text/css">
			body {
				background:black;
				margin:0px;
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var canvas = document.createElement('canvas'),
		    width = canvas.width = window.innerWidth,
		    height = canvas.height = window.innerHeight,
		    halfWidth = width/2,
		    halfHeight = height/2,
		    fov = 250;
		     
			var context = canvas.getContext('2d');
			document.body.appendChild(canvas);
			
			// set up an grid of 3D points that are laid
			// down horizontally on the floor
			
			var pixels = [];
			for(var x = -250; x<250; x+=5) {
			    for(var z = -250; z<250; z+=5) {
			        var pixel = {x:x, y:40, z:z};
			        pixels.push(pixel);
			    }
			}
			
			// call the render function 30 times a second
			setInterval(render,1000/30);
			
			
			function render() {
			
			    // clear the canvas
			    context.clearRect(0,0,width, height);
			    // and get the imagedata out of it
			    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
			    
			    // iterate through every point in the array
			    var i=pixels.length;
			    while(i--){
			        var pixel = pixels[i];
			        
			        // here's the 3D to 2D formula, first work out
			        // scale for that pixel's z position (distance from
			        // camera)
			        var scale = fov/(fov+pixel.z);
			        // and multiply our 3D x and y to get our
			        // 2D x and y. Add halfWidth and halfHeight
			        // so that our 2D origin is in the middle of
			        // the screen.
			        var x2d = (pixel.x * scale) + halfWidth;
			        var y2d = (pixel.y * scale) + halfHeight;
			        
			        // and set that 2D pixel to be green
			        setPixel(imagedata, x2d, y2d, 0, 255, 60);
			        
			        // add 1 to the z position to bring it a little
			        // closer to the camera each frame
			        pixel.z-=1;
			        // if it's now too close to the camera,
			        // move it to the back
			        if(pixel.z<-fov) pixel.z += (fov*2);
			        
			    }
			    
			    // and write all those pixel values into the canvas
			    context.putImageData(imagedata,0,0);
			    
			}
			
			function setPixel(imagedata, x, y, r, g, b) {
			    
			    if((x<0) || (x>width) || (y<0) || (y>width)) return;
			    
			    var i = ((y>>0) * imagedata.width + (x>>0)) * 4;
			
			    imagedata.data[i] = r;
			    imagedata.data[i+1] = g;
			    imagedata.data[i+2] = b;
			    imagedata.data[i+3] = 255;
			}
		</script>
	</body>
</html>

3D Pixel Render - By Seb Lee-Deslisle

adambu1988

Fork

View Source

Like (1)

Comment (0)

Forked Hi There and got Dope on a Rope

redeye

Hi There - CSS 3D Text

adambu1988

Strange Attractor - By Seb Lee-Deslisle

adambu1988

3D Pixel Render - By Seb Lee-Deslisle

adambu1988

Code

Ctrl+F - toggle editor size

Preview

360kb Remaining

Title

By

Title -

Your Website -

Description -

Post to twitter