new 2.html

À propos

Type de fichier: Fichier HTML de 13 Ko (text/html)
Confidentialité: Fichier public, envoyé le 27 mars 2014 à 23:39, depuis l'adresse IP 82.229.x.x (France)
Sécurité: Ne contient aucun Virus ou Malware connus - Dernière vérification: 15 heures
Statistiques: La présente page de téléchargement a été vue 701 fois depuis l'envoi du fichier
Page de téléchargement: https://www.petit-fichier.fr/2014/03/27/new-2/ Copier
Aperçu du fichier

<html class=" -webkit-"><head><meta charset="UTF-8">

<link rel="stylesheet" href="http://s.codepen.io/assets/reset/reset.css"><script src="http://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<style>body {
  background: #111 url(/images/classy_fabric.png);
}

canvas {  
  background: radial-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 1));
  display: block; 
}

#gui {
  left: 0;
  position: fixed;
  top: 0;
}</style><style type="text/css">.dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;transition:opacity 0.1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1 !important}.dg.main:hover .close-button,.dg.main .close-button.drag{opacity:1}.dg.main .close-button{-webkit-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;transition:opacity 0.1s linear;border:0;position:absolute;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-x:hidden}.dg.a.has-save ul{margin-top:27px}.dg.a.has-save ul.closed{margin-top:0}.dg.a .save-row{position:fixed;top:0;z-index:1002}.dg li{-webkit-transition:height 0.1s ease-out;-o-transition:height 0.1s ease-out;-moz-transition:height 0.1s ease-out;transition:height 0.1s ease-out}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;overflow:hidden;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid rgba(0,0,0,0)}.dg li.title{cursor:pointer;margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li > *{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:9px}.dg .c select{margin-top:5px}.dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean *{cursor:pointer}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0px 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco, monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px 'Lucida Grande', sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px 4px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2fa1d6}.dg .cr.number input[type=text]{color:#2fa1d6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.function:hover,.dg .cr.boolean:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2fa1d6}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}
</style></head><body>
<div id="gui"><div class="dg main" style="width: 245px;"><ul><li class="cr number"><div><span class="property-name">Total Orbitals</span><div class="c"><input type="text"></div></div></li><li class="cr number has-slider"><div><span class="property-name">Speed</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 60.83333333333333%;"></div></div></div></div></li><li class="cr number has-slider"><div><span class="property-name">Scale</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 11.11111111111111%;"></div></div></div></div></li><li class="cr number has-slider"><div><span class="property-name">Radius Jitter</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 0%;"></div></div></div></div></li><li class="cr number has-slider"><div><span class="property-name">Hue Jitter</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 0%;"></div></div></div></div></li><li class="cr number has-slider"><div><span class="property-name">Clear Alpha</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 10%;"></div></div></div></div></li><li class="cr boolean"><div><span class="property-name">Toggle Orbitals</span><div class="c"><input type="checkbox" checked="checked"></div></div></li><li class="cr number has-slider"><div><span class="property-name">Orbital Alpha</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 100%;"></div></div></div></div></li><li class="cr boolean"><div><span class="property-name">Toggle Light</span><div class="c"><input type="checkbox" checked="checked"></div></div></li><li class="cr number has-slider"><div><span class="property-name">Light Alpha</span><div class="c"><div><input type="text"></div><div class="slider"><div class="slider-fg" style="width: 5%;"></div></div></div></div></li><li class="cr function"><div><span class="property-name">Clear</span><div class="c"><div class="button"></div></div></div></li></ul><div class="close-button" style="width: 245px;">Close Controls</div></div></div>
<!--

Canvas Orbital Trails v2
------------------------
Click and drag anywhere on the screen to create new trails.

-->
<script>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('data-t') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script><script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
<script>var sketch = Sketch.create(),
    center = {
      x: sketch.width / 2,
      y: sketch.height / 2
    },
    orbs = [],    
    dt = 1,
    opt = {
      total: 0,
      count: 100,
      spacing: 2,
      speed: 65,
      scale: 1,
      jitterRadius: 0,
      jitterHue: 0,
      clearAlpha: 10,
      toggleOrbitals: true,
      orbitalAlpha: 100,
      toggleLight: true,      
      lightAlpha: 5,
      clear: function(){
        sketch.clearRect( 0, 0, sketch.width, sketch.height ),
        orbs.length = 0; 
      }
    };

var Orb = function( x, y ){
  var dx = ( x / opt.scale ) - ( center.x / opt.scale ),
	    dy = ( y / opt.scale ) - ( center.y / opt.scale );
  this.angle = atan2( dy, dx );
  this.lastAngle = this.angle;
	this.radius = sqrt( dx * dx + dy * dy );
  this.size = ( this.radius / 300 ) + 1;
	this.speed = ( random( 1, 10 ) / 300000 ) * ( this.radius ) + 0.015;
};

Orb.prototype.update = function(){  
  this.lastAngle = this.angle;
  this.angle += this.speed * ( opt.speed / 50 ) * dt;
  this.x = this.radius * cos( this.angle );
  this.y = this.radius * sin( this.angle );
};

Orb.prototype.render = function(){
  if(opt.toggleOrbitals){
    var radius = ( opt.jitterRadius === 0 ) ? this.radius : this.radius + random( -opt.jitterRadius, opt.jitterRadius );
   radius = ( opt.jitterRadius != 0 && radius < 0 ) ? 0.001 : radius;
    sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 50%, ' + ( opt.orbitalAlpha / 100 ) + ' )';
    sketch.lineWidth = this.size;			
    sketch.beginPath();
    if(opt.speed >= 0){
      sketch.arc( 0, 0, radius, this.lastAngle, this.angle + 0.001, false );
    } else {
      sketch.arc( 0, 0, radius, this.angle, this.lastAngle + 0.001, false );
    };
    sketch.stroke();
    sketch.closePath();
  };
  
  if(opt.toggleLight){
    sketch.lineWidth = .5;
    sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 70%, ' + ( opt.lightAlpha / 100 ) + ' )';
    sketch.beginPath();
    sketch.moveTo( 0, 0 );
    sketch.lineTo( this.x, this.y );
    sketch.stroke();
  };
};

var createOrb = function( config ){
  var x = ( config && config.x ) ? config.x : sketch.mouse.x,
      y = ( config && config.y ) ? config.y : sketch.mouse.y;
	orbs.push( new Orb( x, y ) );
};

var turnOnMove = function(){
	sketch.mousemove = createOrb;	
};

var turnOffMove = function(){
	sketch.mousemove = null;	
};

sketch.mousedown = function(){
  createOrb();
  turnOnMove();
};

sketch.mouseup = turnOffMove;

sketch.resize = function(){
  center.x = sketch.width / 2;
  center.y = sketch.height / 2;
  sketch.lineCap = 'round';
};
sketch.setup = function(){  
  while( opt.count-- ){
    createOrb( {
      x: random( sketch.width / 2 - 300, sketch.width / 2 + 300 ), 
      y: random( sketch.height / 2 - 300, sketch.height / 2 + 300 ) 
    } );
  };
};

sketch.clear = function(){
  sketch.globalCompositeOperation = 'destination-out';
  sketch.fillStyle = 'rgba( 0, 0, 0 , ' + ( opt.clearAlpha / 100 ) + ' )';
	sketch.fillRect( 0, 0, sketch.width, sketch.height );
  sketch.globalCompositeOperation = 'lighter';
};

sketch.update = function(){
  dt = ( sketch.dt < 0.1 ) ? 0.1 : sketch.dt / 16;
  dt = ( dt > 5 ) ? 5 : dt;
  var i = orbs.length;
  opt.total = i;
  while( i-- ){ 
    orbs[i].update();
  }
};
sketch.draw = function(){
  sketch.save();
  sketch.translate( center.x, center.y );
  sketch.scale( opt.scale, opt.scale );
  var i = orbs.length;
	while( i-- ){	
    orbs[i].render();	
  }
  sketch.restore();
};
gui = new dat.GUI( { autoPlace: false } )
gui.add( opt, 'total' ).name( 'Total Orbitals' ).listen();
gui.add( opt, 'speed' ).min( -300 ).max( 300 ).step( 1 ).name( 'Speed' );
gui.add( opt, 'scale' ).min( 0.5 ).max( 5 ).step( 0.001 ).name( 'Scale' );
gui.add( opt, 'jitterRadius' ).min( 0 ).max( 5 ).step( 0.001 ).name( 'Radius Jitter' );
gui.add( opt, 'jitterHue' ).min( 0 ).max( 90 ).step( 1 ).name( 'Hue Jitter' );
gui.add( opt, 'clearAlpha' ).min( 0 ).max( 100 ).step( 1 ).name( 'Clear Alpha' );
gui.add( opt, 'toggleOrbitals' ).name( 'Toggle Orbitals' )
gui.add( opt, 'orbitalAlpha' ).min( 0 ).max( 100 ).step( 1 ).name( 'Orbital Alpha' );
gui.add( opt, 'toggleLight' ).name( 'Toggle Light' );
gui.add( opt, 'lightAlpha' ).min( 0 ).max( 100 ).step( 1 ).name( 'Light Alpha' );
gui.add( opt, 'clear' ).name( 'Clear' );
customContainer = document.getElementById( 'gui' );
customContainer.appendChild(gui.domElement);
document.onselectstart = function(){
  return false;
};//@ sourceURL=pen.js
</script><canvas class=" sketch" height="255" width="806"></canvas>
</body></html>
Partager le fichier

Télécharger new 2.html

Télécharger le fichier (13 Ko)