Tag Archives: HTML 5

html 5 programming

JavaScript – the regular expressions example.

This simple tutorial is about how to parse text file using a regular expression, or called regex or regexp. This text processing is very useful to programmers. The parsing area is fill with the source code numbered as input . Using the javascript function named RemoveFirstLineNumbers will retrieve and process the input text by deleting… Read More »

HTML5 – Example calendar – ruler.

This is a simple calendar ruler example make just with HTML5 and one CSS file. The example can be see here. Create one folder and put two file named: index.html and style.css. The style.css file come with this source code:

CSS
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
83
84
85
*,
*:before,
*:after {
    box-sizing: border-box;
}
 
body {
    background: #000;
  }
h1 {
  text-align: center;
  color: white;
  font-family: 'Arial', cursive;
}
 
.calendar {
    position: relative;
    margin: 10px auto;
    width: 400px;
    height: 250px;
    background: #eab57a;
    background-image: -webkit-linear-gradient(right, black 2px, transparent 2px);
    background-image: linear-gradient(to left, black 2px, transparent 2px);
    background-repeat: repeat-x;
    background-size: 5px 15px;
    border-radius: 2px;
}
.calendar:before {
    background-image: -webkit-linear-gradient(right, black 2px, transparent 2px);
    background-image: linear-gradient(to left, black 2px, transparent 2px);
    background-repeat: repeat-x;
    background-size: 5px 15px;
}
.calendar:after {
    content: "";
    position: absolute;
    width: 100%;
    z-index: 3;
    height: 50%;
    top: 10px;
    left: 0;
    background-image: -webkit-linear-gradient(right, black 2px, transparent px);
    background-image: linear-gradient(to left, black 2px, transparent 2px);
    background-repeat: repeat-x;
    background-size: 25px 15px;
}
 
.week {
  position: absolute;
  top: 40px;
  left: 45px;
  word-spacing: 34px;
  font-size: 16px;
  font-family: 'Arial', cursive;
  color: #blue;
}
 
.week:before {
    content: "";
    position: absolute;
    left: -37px;
    width: 18px;
    height: 18px;
    background: black;
    border-radius: 50%;
}
 
.days {
  position: relative;
  top: 80px;
  left: 38px;
  word-spacing: 25px;
  font-size: 18px;
  font-family: 'Arial', cursive;
  color: red;
}
 
.days:before {
    content: "";
    position: relative;
    top: 80px;
    left: 38px;
    width: 18px;
    height: 18px;
}

The index.html file can have this source code:

Haskell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Calendar Jan 2018 : Ruler</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calendar Jan 2018 : Ruler </h1>
<div  class="calendar">
  <div class="week"> L M M J V S D</div>
  <div class="days"> 31 01 02 03 04 05 06</div>
  <div class="days"> 07 08 09 10 11 12 13</div>
  <div class="days"> 14 15 16 17 18 19 20</div>
  <div class="days"> 21 22 23 24 00 00 00</div>
  <div class="days"> 00 00 00 00 00 00 00</div>
</div>
</body>
</html>

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:

XHTML
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;
}