Category Archives: javascript
Create a starfield with Three.js .
You need to create two files into your folder and use this filenames : index.html and starfield.js . First file index.html come this source code:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>WebGL Tunnel</title> </head> <body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script> <script src="starfield.js"></script> </body> </html> |
The next file is a java script and come with this source code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
var mouseX = 0, mouseY = 0; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var cubecam = new THREE.CubeCamera(0.1, 120, 256); // mipmap filter cubecam.renderTarget.minFilter = THREE.LinearMipMapLinearFilter; scene.add(cubecam); var renderer = new THREE.WebGLRenderer({ antialias: true }); // background renderer.setClearColor( 0x000000, 0 ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.z = -110; camera.lookAt(scene.position); // mesh group to add objects var group = new THREE.Group(); scene.add(group); // add lights var light = new THREE.AmbientLight( 0x404040 ); // soft white light scene.add( light ); var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); directionalLight.position.set( 0, 0, 1 ); scene.add( directionalLight ); //make starfield var geometry = new THREE.Geometry(); for (i = 0; i < 1000; i++) { var vertex = new THREE.Vector3(); vertex.x = Math.random()*1000-500; vertex.y = Math.random()*1000-500; vertex.z = Math.random()*1000-500; geometry.vertices.push(vertex); } var starField = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({ size: 0.1, color: 0xffffff }) ); scene.add(starField); starField.position.z = 100; var time = new THREE.Clock(); var render = function () { camera.position.x = mouseX * 0.5; camera.position.y = -mouseY * 0.5; camera.lookAt(scene.position); starField.rotation.z += 0.0005; starField.material.color.setHSL(0, 1, 1); cubecam.updateCubeMap( renderer, scene ); renderer.render(scene, camera); requestAnimationFrame(render); }; render(); // use mouse and resize events document.addEventListener( 'mousemove', onDocumentMouseMove, false ); window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onDocumentMouseMove( event ) { mouseX = event.clientX - window.innerWidth/2; mouseY = event.clientY - window.innerHeight/2; } |
JavaScript – Processing.js 2D library – part 003.
In this tutorial I will show you how to use images with processing.js. You can use image from your computer or from url. Let’s see one simple code example:
|
1 2 3 4 5 6 7 8 9 10 11 |
PImage img; void setup() { background(10); size(300,300); img = loadImage("http://i.imgur.com/sb3qile.jpg"); } void draw() { image(img, 0,0); } |
You can see same example on openprocessing web tool. The openprocessing web tool allow you to use Processing.js and P5.js .
JavaScript – FlipClock .
Another tutorial about javascript and HTML5 . The FlipClock is a javascript source code and tool to let you to make a flip clock . As you know : A flip clock is an electromechanical, digital time keeping device with the time indicated by numbers that are sequentially revealed by a split-flap display. This javascript come […]
JavaScript – Thunderforest Maps API .
The Thunderforest Maps let you to use map styles in your apps and on your websites. You can have a free account see: Hobby Project You can also buy it: Solo Developer Small Business Large Business The maps come with this map layers: OpenCycleMap Transport Landscape Outdoors Transport Dark Spinal Map Pioneer Mobile Atlas Neighbourhood […]
JavaScript – start with TypeScript .
About TypeScript is an open-source language and compiler that runs both in the browser -through SystemJS and on NodeJS. Is developed by Microsoft, like an open-source language and compiler that runs both in the browser through SystemJS and on NodeJS. Now TypeScript compiles to clean, simple JavaScript code. You can runs on any browser, in […]