World

Developer
François Chazal
Size
5,903 Kb
Views
26,312
  1. World Previews
  2. World HTML Codes
  3. World CSS Codes
  4. World JS Codes

How do I make an world?

What is a world? How do you make a world? This script and codes were developed by François Chazal on 21 September 2022, Wednesday.

World Previews
IQ Test

World - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>World</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html { font-size: 11px;
}
body { overflow: hidden; min-height: 100%; font: 1em/1.5em 'Roboto Condensed', sans-serif;
}
/************************************/
#about { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
#about-title { position: absolute; left: 25px; bottom: 25px; font-size: 2em; font-weight: 700;
}
#about-author { position: absolute; left: 25px; top: 27px; font-size: .9em; font-weight: 300;
}
/************************************/
#console { position: fixed; top: 0px; right: 0px; width: 200px; bottom: 50px; margin: 0px; padding: 5px; background: rgba(0, 0, 0, 0.1); font-size: .9em; color: rgba(0, 0, 0, 0.5);
}
#console::before { display: block; content: 'CONSOLE'; font-size: 1.1rem; font-weight: bold; margin-bottom: 5px;
}
/************************************/
#content { position: absolute; width: 100%; height: 100%;
}
#content canvas { width: 100%; height: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> ze a<section id="content">
</section>
<section id="console">
</section>
<section id="about"> <div id="about-title">World</div> <div id="about-author">an experimentation by François Chazal (@fchazal)</div>
</section> <script src="js/index.js"></script>
</body>
</html>

World - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html { font-size: 11px;
}
body { overflow: hidden; min-height: 100%; font: 1em/1.5em 'Roboto Condensed', sans-serif;
}
/************************************/
#about { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
#about-title { position: absolute; left: 25px; bottom: 25px; font-size: 2em; font-weight: 700;
}
#about-author { position: absolute; left: 25px; top: 27px; font-size: .9em; font-weight: 300;
}
/************************************/
#console { position: fixed; top: 0px; right: 0px; width: 200px; bottom: 50px; margin: 0px; padding: 5px; background: rgba(0, 0, 0, 0.1); font-size: .9em; color: rgba(0, 0, 0, 0.5);
}
#console::before { display: block; content: 'CONSOLE'; font-size: 1.1rem; font-weight: bold; margin-bottom: 5px;
}
/************************************/
#content { position: absolute; width: 100%; height: 100%;
}
#content canvas { width: 100%; height: 100%;
}

World - Script Codes JS Codes

requireScripts([]);
azea
/* BEGINNING OF LOADING BLOCK ****************/
addEvent(window, "pageReady", function() { Console.init('#console'); Display.init('#content'); var frotte = new phi.Force(-1,-1,-1); frotte.compute = function(object) { var force = new phi.Vector(); force.setX(this.value.x*object.speed.x); force.setY(this.value.y*object.speed.y); force.setZ(this.value.z*object.speed.z); return force; } var point = new phi.Point(0, 0, 100); point.addForce(frotte); this.addObject(point);
});
/* LIBRARY : Object Extension
***********************************************/
Object.prototype.extend = function(parent, overrides)
{ var object = this; var parent = parent || Object; var overrides = overrides || {}; object.prototype = parent.prototype; object.prototype.constructor = object; object.prototype.parent = parent; object.parent = parent; for (i in overrides) object.prototype[i] = overrides[i];
}
/* END OF LOADING BLOCK **********************/
var phi = {}; // Physic library
/* OBJECT : phi.Vector
**********************************************/
phi.Vector = function(x,y,z) { this.init(x||0,y||0,z||0);
};
phi.Vector.extend(null, { x: null, y: null, z: null, init: function(x,y,z) { this.x = x; this.y = y; this.z = z; }, setX: function(x) { this.x = x; return this; }, setY: function(y) { this.y = y; return this; }, setZ: function(z) { this.z = z; return this; }, reset: function() { return this.mul(0); }, clone: function() { return new phi.Vector(this.x, this.y, this.z); }, toString: function() { return '('+this.x+', '+this.y+', '+this.z+')'; }, add: function(vector) { this.x += vector.x; this.y += vector.y; this.z += vector.z; return this; }, sub: function(vector) { this.x -= vector.x; this.y -= vector.y; this.z -= vector.z; return this; }, mul: function(scalar) { this.x *= scalar; this.y *= scalar; this.z *= scalar; return this; }, div: function(scalar) { this.x /= scalar; this.y /= scalar; this.z /= scalar; return this; }, dot: function(vector) { return this.x*vector.x + this.y*vector.y + this.z*vector.z; }, cross: function(vector) { return new phi.Vector( this.y*vector.z - this.z*vector.y, this.z*vector.x - this.x*vector.z, this.x*vector.y - this.y*vector.x ); }
});
/* OBJECT : phi.Object
**********************************************/
phi.Object = function(x,y,z) { this.position = new phi.Vector(x||0,y||0,z||0);
};
phi.Object.extend(null, { position: null, update: function(t, dt, dt_2) {}, render: function(context) {}
});
/* OBJECT : phi.Point (inherit) phi.Object
**********************************************/
phi.Point = function(x,y,z) { phi.Point.parent.call(this, x, y, z); this.position_old = this.position.clone(); this.speed = new phi.Vector(); this.acceleration = new phi.Vector();
};
phi.Point.extend(phi.Object, { position_old: null, speed: null, acceleration: null, forces: [], mass: 0, addForce: function(force) { this.forces.push(force); }, update: function(t, dt, dt_2) { var position = this.position.clone(); this.acceleration.reset(); for (var id = 0; id < this.forces.length; id++) this.acceleration.add(this.forces[id].compute(this)); position.mul(2); position.sub(this.position_old); position.add(this.acceleration.mul(dt_2)); this.speed = position.clone().sub(this.position).div(dt); this.position_old = this.position; this.position = position; }, render: function(context) { context.fillStyle = '#f00'; context.beginPath(); context.arc(this.position.x, this.position.z, 1, 0, Math.PI*2, true); context.fill(); }
});
/* OBJECT : phi.Constraint
**********************************************/
phi.Constraint = function(x,y,z) { this.init(x||0,y||0,z||0);
};
phi.Constraint.extend(null, { init: function(x,y,z) { }
});
/* OBJECT : phi.Force
**********************************************/
phi.Force = function(x,y,z) { this.init(x||0,y||0,z||0);
};
phi.Force.extend(null, { value: null, init: function(x,y,z) { this.value = new phi.Vector(x,y,z); }, compute: function(object) { return this.value; }
});
/* OBJECT : phi.World
**********************************************/
phi.World = function() { this.init();
};
phi.World.extend(null, { time: null, forces: [], objects: [], position: [], boundaries: [], init: function(x_min, y_min, x_max, y_max) { this.time = (new Date()).getTime(); // let's add gravity this.addForce(new phi.Force(0, 0, -9.81)); }, addObject: function(object) { object.addForce(this.forces[0]); this.objects.push(object); }, addForce: function(force) { this.forces.push(force); }, update: function() { var t = (new Date()).getTime(); var dt = (t - this.time) / 1e3; var dt_2 = dt * dt; Console.clear(); Console.info('Time = '+t); Console.info('Delta = '+dt); for (var id = 0; id < this.objects.length; id++) { this.objects[id].update(t, dt, dt_2); Console.info('Object['+id+'].pos = '+this.objects[id].positions[0]); Console.info('Object['+id+'].speed = '+this.objects[id].speed); } this.time = t; }, drawOrigin: function(context) { context.strokeStyle = '#000'; context.beginPath(); context.moveTo(0,0); context.lineTo(0,1); context.moveTo(0,0); context.lineTo(1,0); context.stroke(); }, render: function(context) { var scale = 10; context.translate(Math.floor(context.canvas.width/2)+0.5, Math.floor(context.canvas.height/2)+0.5); context.scale(scale,-scale); context.lineWidth = 1/scale; this.drawOrigin(context); for (var id = 0; id < this.objects.length; id++) { context.save(); this.objects[id].render(context); context.restore(); } }
});
/* ELEMENT : Display
**********************************************/
var Display = { domElement: null, context: null, world: null, init: function(id) { var container = document.querySelector(id); this.domElement = document.createElement('canvas'); alert(''); addEvent(window, 'resize', this.resize, this); container.appendChild(this.domElement); this.resize(); this.context = this.domElement.getContext('2d'); this.world = new phi.World(); this.update(); }, resize: function() { this.domElement.width = this.domElement.offsetWidth; this.domElement.height = this.domElement.offsetHeight; }, update: function() { var self = this; this.world.update(); this.context.clearRect(0,0,this.domElement.width,this.domElement.height); this.context.save(); this.world.render(this.context); this.context.restore(); this.getAnimationFrame()(function() { self.update() }); }, getAnimationFrame: function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) }; }
}
/* ELEMENT : Console
**********************************************/
var Console = { element: null, init: function(id) { this.element = document.querySelector(id); }, info: function(html) { this.element.innerHTML += html+'<br>'; }, clear: function(html) { this.element.innerHTML = ''; }
}
/* LIBRARY : Requirements Management
***********************************************/
function requireScripts(list) { var dom = false; var scripts = []; for (var id in list) scripts.push({ url: list[id], loaded: false }); function onScriptReady(evt) { scripts[evt.target.getAttribute('data-ID')].loaded = true; checkReadyState(); } function onDomReady(evt) { dom = true; checkReadyState(); } function checkReadyState() { var ready = dom; for (i=0; i<scripts.length; i++) { ready = ready && scripts[i].loaded; } if (ready) fireEvent(window, 'pageReady'); } for (var id in scripts) { var domElement = document.createElement('script'); domElement.type = 'text/javascript'; domElement.setAttribute('data-ID', id); domElement.src = scripts[id].url + '?' + (new Date().getTime()); addEvent(domElement, 'load', onScriptReady); addEvent(domElement, 'readystatechange', onScriptReady); document.getElementsByTagName('head')[0].appendChild(domElement); } addEvent(window, 'DOMContentLoaded', onDomReady);
}
/* LIBRARY : Event Management
***********************************************/
function addEvent(eventTrigger, eventName, eventHandler, scopeElement) {	var scopedEventHandler = null;	if (scopeElement === undefined)	scopedEventHandler = eventHandler; else scopedEventHandler = function(e) { eventHandler.apply(scopeElement, [e]); } eventTrigger.addEventListener(eventName, scopedEventHandler, false);
}
function fireEvent(eventTrigger, eventName, eventData) {	var evt = null;	if (typeof Event !== 'undefined') {	evt = new Event(eventName);	} else {	evt = document.createEvent("Event");	evt.initEvent(eventName, true, true);	} evt.data = eventData; eventTrigger.dispatchEvent(evt);
}
function removeEvent(eventTrigger, eventName, eventHandler) { eventTrigger.removeEventListener(eventName, eventHandler, false);
}
World - Script Codes
World - Script Codes
Home Page Home
Developer François Chazal
Username fchazal
Uploaded September 21, 2022
Rating 3
Size 5,903 Kb
Views 26,312
Do you need developer help for World?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

François Chazal (fchazal) Script Codes
Name
Ribbon Animated Effect
Obama
HExa
Parallax Scrolling
The Cube
Folding Panel
WebTechs Animated Logo
Penrose Triangle CSS
Logo
Hexagona
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!