I am trying to figure out the following code. But the problem is that it is giving me an error saying Uncaught Reference error: Detector is not defined. Can some one help me with this. I am not able to figure out what is wrong. I have included all the needed javascript plugins along with this file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="WebGL experiments - Connected Earth experiment">
<meta name="keywords" content="callum,chrome,collada,earth,example,experiments,globe,google,hurricane tracker,linden,opengl,planet,sample,shader,spline,three.js,webgl,">
<link rel="stylesheet" media="all" href="button.css" />
<script src="three.min.js"></script>
<script src="Detector.js"></script>
<script src="Tween.js"></script>
<script src="planet.js"></script>
<script src="latlng.js"></script>
<script src="city_locations.js"></script>
<script src="Stats.js"></script>
<style>
body {
background: #000;
padding: 0;
margin: 0;
color: #fff;
font-family:"Lucida Console", Monaco, monospace;
text-align:left;
overflow: hidden;
}
#container canvas {
background: #000;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
#help {
position: absolute;
top: 50%;
width: 350px;
height: 400px;
left: 50%;
margin-left: -175px;
margin-top: -200px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
border: 5px solid #666;
padding: 10px;
overflow: auto;
pointer-events: none;
}
#controls {
position: absolute;
top: 8px;
width:800px;
height: 38px;
left: 50%;
text-align: center;
margin-left: -450px;
background-color: rgba(30, 60, 3, 0.7);
border-radius: 10px;
border: 5px solid #666;
padding: 10px;
overflow: auto;
}
h2 {
text-align: center;
color: #ff9;
}
a {
color: #9f9;
text-decoration: none;
}
.hide {
opacity: 0;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.show {
opacity: 1;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
img.cornered {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
}
</style>
<title>callum.com - Connected Planet</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35129047-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<script>
var planetTilt = latlngDeg2rad(23.5);
console.log(planetTilt);
var planetRadius = 6378;
var rotationSpeed = 0.3;
var cloudsScale = 1.02;
var height = window.innerHeight;
var width = window.innerWidth;
var camera, controls, scene, renderer, geometry, meshPlanet, meshClouds;
var clock = new THREE.Clock();
var cameraZoomFactor = 7;
var displayHelp = false;
var curZoom = 100;
var markerGeom;
var markerMaterial;
var stats;
function onWindowResize(event) {
width = window.innerWidth;
height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
controls.screen.width = width;
controls.screen.height = height;
camera.radius = (width + height) / 4;
}
function init() {
if (!Detector.webgl) Detector.addGetWebGLMessage();
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
clearAlpha: 1,
clearColor: 0x000000,
antialias: true
});
renderer.setSize(width, height);
renderer.sortObjects = true;
renderer.autoClear = false;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.domElement.style.position = 'absolute';
var container = document.getElementById('container');
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(25, width / height, 50, 1e7);
camera.position.z = planetRadius * cameraZoomFactor;
scene.add(camera);
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.3;
controls.noZoom = true;
controls.noPan = true;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.4;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.right = '0px';
document.body.appendChild( stats.domElement );
var dirLight = new THREE.DirectionalLight(0xFFFFFF);
dirLight.position.set(1, 0, 1)
.normalize();
scene.add(dirLight);
var camLight = new THREE.DirectionalLight(0xffffff);
camera.add(camLight);
var ambientLight = new THREE.AmbientLight(0x999999);
scene.add(ambientLight);
var planet = new cpPlanet({
planet_radius: planetRadius,
planet_tilt_rad: planetTilt,
planet_cloud_texture: "cloud.png",
planet_surface_texture: "earth_surface.jpg",
planet_normals_texture: "earth_normals.jpg",
planet_specular_texture: "earth_specular.jpg",
planet_geom_segments: 64,
planet_geom_rings: 64,
use_surface_shader: true,
create_combined_mesh: false
});
meshPlanet = planet.surface_mesh;
scene.add(meshPlanet);
meshClouds = planet.cloud_mesh;
scene.add(meshClouds);
// markers and tracks
var marker_radius = 32;
var marker_color = 0xff0000;
markerGeom = new THREE.SphereGeometry(marker_radius, 5, 5);
markerMaterial = new THREE.MeshPhongMaterial({
ambient: 0x030303,
color: marker_color,
specular: 0x990000,
shininess: 80,
shading: THREE.SmoothShading
});
// need to update a bunch of stuff when window size changes
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
var delta = clock.getDelta();
meshPlanet.rotation.y += rotationSpeed * rotationSpeed * delta;
meshClouds.rotation.y += rotationSpeed * 1.25 * rotationSpeed * delta;
controls.update();
TWEEN.update();
stats.update();
renderer.clear();
renderer.render(scene, camera);
}
function addData(locs) {
var index = Math.floor(Math.random() * locs.length) - 1;
var start_lat = locs[index].lat;
var start_lng = locs[index].lng;
var data_size = 30;
var start = Math.floor(Math.random() * locs.length) - 1;
if (start + data_size > locs.length) {
start = locs.length - data_size - 1;
}
var hue = Math.random();
var i;
for (i = start; i < start + data_size; i++) {
var obj = locs[i];
if (i != index) {
addTrack(start_lat, start_lng, obj.lat, obj.lng, planetRadius, hue);
addMarker(obj.lat, obj.lng, planetRadius);
}
}
}
function zoomToStart() {
new TWEEN.Tween({
scale: 1
})
.to({
scale: 100
}, 2500)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(function () {
var true_scale = this.scale / 100;
meshPlanet.scale.set(true_scale, true_scale, true_scale);
meshClouds.scale.set(true_scale * cloudsScale, true_scale * cloudsScale, true_scale * cloudsScale);
})
.start();
}
function addMarker(lat, lng, radius) {
var marker_mesh = new THREE.Mesh(markerGeom, markerMaterial);
var marker_position = latlngPosFromLatLng(lat, lng, radius);
marker_mesh.position.x = marker_position.x;
marker_mesh.position.y = marker_position.y;
marker_mesh.position.z = marker_position.z;
marker_mesh.name = "trackmarker";
meshPlanet.add(marker_mesh);
}
function addTrackLine(spline, hue) {
var num_control_points = 32;
var i;
var colors = [];
var geometry = new THREE.Geometry();
var pos;
for (i = 0; i < num_control_points; i++) {
var index = i / num_control_points;
pos = spline.getPoint(index);
colors[i] = new THREE.Color(0xffffff);
colors[i].setHSV(hue, (1.0 - i / num_control_points), 1.0);
geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z));
}
pos = spline.getPoint(1.0);
geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z));
geometry.colors = colors;
var material = new THREE.LineBasicMaterial({
color: 0xffffff,
opacity: 1,
linewidth: 2
});
material.vertexColors = true;
var line = new THREE.Line(geometry, material);
line.name = "trackline";
meshPlanet.add(line);
}
function addTrack(start_lat, start_lng, end_lat, end_lng, radius, hue) {
var num_control_points = 8;
var max_altitude = 500 + Math.random() * 1200;
var points = [];
var i;
for (i = 0; i < num_control_points + 1; i++) {
var arc_angle = i * 180.0 / num_control_points;
var arc_radius = radius + (Math.sin(latlngDeg2rad(arc_angle))) * max_altitude;
var latlng = latlngInterPoint(start_lat, start_lng, end_lat, end_lng, i / num_control_points);
var pos = latlngPosFromLatLng(latlng.lat, latlng.lng, arc_radius);
points.push(new THREE.Vector3(pos.x, pos.y, pos.z));
}
var spline = new THREE.SplineCurve3(points);
addTrackLine(spline, hue);
}
function toggleRotation() {
if (rotationSpeed > 0) rotationSpeed = 0.0;
else rotationSpeed = 0.3;
}
function zoomCamera(zoom_param) {
var minZoom = 20;
var maxZoom = 450;
var incZoom = (maxZoom - minZoom) / 9;
var timeZoom = 400;
var startZoom = curZoom;
var endZoom;
if (zoom_param == 1) {
endZoom = curZoom + incZoom;
if (endZoom > maxZoom) endZoom = maxZoom;
} else if (zoom_param == -1) {
endZoom = curZoom - incZoom;
if (endZoom < minZoom) endZoom = minZoom;
} else {
endZoom = zoom_param;
}
if (startZoom != endZoom) {
new TWEEN.Tween({
zoom: startZoom
})
.to({
zoom: endZoom
}, timeZoom)
.easing(TWEEN.Easing.Back.InOut)
.onUpdate(function () {
curZoom = this.zoom;
var true_scale = this.zoom / 100;
meshPlanet.scale.set(true_scale, true_scale, true_scale);
meshClouds.scale.set(true_scale * cloudsScale, true_scale * cloudsScale, true_scale * cloudsScale);
})
.onComplete(function () {
curZoom = this.zoom;
})
.start();
}
}
function toggleHelp() {
displayHelp = !displayHelp;
if (displayHelp) {
document.getElementById('help')
.style.opacity = 1;
} else {
document.getElementById('help')
.style.opacity = 0;
}
}
function resetView() {
scene.remove(camera);
camera = new THREE.PerspectiveCamera(25, width / height, 50, 1e7);
camera.position.z = planetRadius * cameraZoomFactor;
scene.add(camera);
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.3;
controls.noZoom = true;
controls.noPan = true;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.4;
zoomCamera(100);
clock = new THREE.Clock();
meshPlanet.rotation.y = 0;
meshClouds.rotation.y = 0;
rotationSpeed = 0.3
}
function addNewData() {
addData(locations);
}
var deleteMe = [];
function newDataCallback(node) {
if (node instanceof THREE.Line && node.name == "trackline") {
deleteMe.push(node);
}
if (node instanceof THREE.Mesh && node.name == "trackmarker") {
deleteMe.push(node);
}
}
function remAllData() {
THREE.SceneUtils.traverseHierarchy(scene, newDataCallback);
for (var each = 0; each < deleteMe.length; ++each) {
meshPlanet.remove(deleteMe[each]);
}
}
window.onload = function () {
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
return;
}
init();
var num_new_data_adds = 5;
for (var i = 0; i < num_new_data_adds; ++i) {
addData(locations);
}
zoomToStart();
animate();
}
</script>
<body>
<div id="container" class="container"></div>
<!--<img class="cornered" src="textures/logo.png">-->
<div id="controls" class="show">
<div>
Rotation</button>
Zoom Out</button>
Zoom In</button>
Add</button>
Remove All</button>
Reset</button>
Help</button>
</div>
</div>
<div id="help" class="hide">
<h2>Instructions</h2>
<ul>
<li><font color="#da5867">Rotation</font> toggles rotation</li>
<li><font color="#0095cd">Zoom</font> view in and out</li>
<li><font color="#64991e">Add</font> random data sets</li>
<li><font color="#d81b21">Remove</font> all data</li>
<li><font color="#f895c2">Reset</font> everything</li>
<li><font color="#f78d1d">Help</font> toggle</li>
</ul>Contact me at callum#gmail.com.
<p>Many thanks to Three.js, #three.js and the authors of the wealth of example code out there I used to learn from - your generosity is appreciated.<p>
<font color="#699">Version 0.1.0</font>
</div>
</body>
</html>
Probably because detector.js is not loaded. check the paths for your javascript.
<script src="three.min.js"></script>
<script src="Detector.js"></script>
<script src="Tween.js"></script>
<script src="planet.js"></script>
<script src="latlng.js"></script>
<script src="city_locations.js"></script>
<script src="Stats.js"></script>
Related
I'm trying a panoramic viewer code which its three.js version is r68,and I update the three.js version into r121 in order to use raycaster function.
The problem happen when I revise the code:
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
into
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error happened.' );
}
);
No error pop up but the render function(included in init function) and animate function doesn't progress.
I'm not sure it's texture's problem or init function's problem.
If somebody can give me some suggestion, I'll be really grateful.
I take this as my reference:
https://threejs.org/docs/#api/en/loaders/TextureLoader
Three.TextureLoader is not loading images files
And here is my full code:
<!DOCTYPE html>
<html>
<head>
<title>Panorama1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano1</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var mouse = new THREE.Vector2();
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error happened.' );
}
);
//const loader = new THREE.TextureLoader();
//var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
//init();
//animate();
//});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), material);
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouse, camera );
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.updateProjectionMatrix();
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.updateProjectionMatrix();
}
</script>
</body>
</html>
The origin code is :
<!DOCTYPE html>
<html>
<head>
<title>Panorama2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano2</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), new THREE.MeshBasicMaterial({map: texture}));
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.projectionMatrix.makePerspective(fov, ratio, 1, 1100);
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.projectionMatrix.makePerspective(fov, ratio, 1, 1100);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Here is the link to the source code:
https://github.com/NorikDavtian/ThreeJS-360-Panorama
Thanks for your reading !
update:
after trying #prisoner849 's suggestion,the init function and animate function run properly,but the scene still in black both in Chorme or firefox
Try it this way:
var material; // as a global variable
...
loader.load(
'img/demo.jpg',
function(texture){
material = new THREE.MeshBasicMaterial({map: texture});
init();
animate();
},
undefined,
function ( err ) {
console.error( 'An error happened.' );
}
);
In your current option, you call init() and animate() in onProgress callback. Whereas you need to call them in onLoad, thus right after material = new THREE.MeshBasicMaterial({map: texture});.
i have a html script with button and onclick function script that should take me to google.com, but it doesn't seem to work. Been stuck with this for hours. Im also new to HTML.
Tried everything. Line 336 and 353 should be the needed content. And line 136 should be the button itself. I don't understand whats wrong. Anyone ever have had this issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon/text/javascript" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>SpyBanter - SpyBanter's Official WebSite</title>
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
body:before {
content: '';
background: #c4252a url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/cheap_diagonal_fabric.png);
background-blend-mode: multiply;
mix-blend-mode: multiply;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
canvas {
opacity: 0;
transition: 1s opacity cubic-bezier(0.55, 0, 0.1, 1);
}
canvas.ready {
opacity: 0.4;
}
.intro {
position: absolute;
padding: 20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
color: #fafafa;
z-index: 10;
width: 100%;
max-width: 700px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-shadow: 0px 5px 20px black;
}
.intro h1 {
font-size: 40px;
font-weight: 300;
letter-spacing: 2px;
}
.intro p {
letter-spacing: 1px;
line-height: 24px;
}
#btnclose {
background-color: indianred;
border-color: darkred;
}
}
#btnnup:hover, #btnsisu:hover, #btncmd:hover {
background-color: #3e8e41;
}
#btnnup:active, #btnsisu:active, #btncmd:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
#btnsisu {
left: 108px;
top: 105px;
}
#btncmd {
left: -311px;
top: -88px;
}
#content {
width: 100%;
height: auto;
min-height: 580px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<canvas id="canvas" data-image="http://unsplash.it/g/450/200/?random=1"></canvas>
<div class="intro">
<h1>Interactive mosaic background</h1>
<p>Had to do this effect in a recent project and wanted to share it with you :). To change the background, edit the data-image on the canvas tag. You can also change the magnet effect intensity by changing the magnet variable</p>
<button id="btncmd">Videos</button>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script type="application/javascript">
(function () {
// Variables
var Photo, addListeners, canvas, createGrid, ctx, gridItem, grids, height, img, imgInfo, imgSrc, imgs, init, magnet, mouse, populateCanvas, render, resizeCanvas, rotateAndPaintImage, updateMouse, useGrid, width;
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
imgSrc = canvas.dataset.image;
img = new Image();
useGrid = true;
imgInfo = {};
imgs = [];
grids = [];
magnet = 2000;
mouse = {
x: 1,
y: 0 };
init = function () {
addListeners();
img.onload = function (e) {
var numberToShow;
// Check for firefox.
imgInfo.width = e.path ? e.path[0].width : e.target.width;
imgInfo.height = e.path ? e.path[0].height : e.target.height;
numberToShow = Math.ceil(window.innerWidth / imgInfo.width) * Math.ceil(window.innerHeight / imgInfo.height);
if (useGrid) {
createGrid();
}
populateCanvas(numberToShow * 4);
canvas.classList.add('ready');
return render();
};
return img.src = imgSrc;
};
addListeners = function () {
window.addEventListener('resize', resizeCanvas);
window.addEventListener('mousemove', updateMouse);
return window.addEventListener('touchmove', updateMouse);
};
updateMouse = function (e) {
mouse.x = e.clientX;
return mouse.y = e.clientY;
};
resizeCanvas = function () {
width = canvas.width = window.innerWidth;
return height = canvas.height = window.innerHeight;
};
populateCanvas = function (nb) {
var i, p, results;
i = 0;
results = [];
while (i <= nb) {
p = new Photo();
imgs.push(p);
results.push(i++);
}
return results;
};
createGrid = function () {
var c, grid, i, imgScale, item, j, k, l, r, ref, ref1, ref2, results, x, y;
imgScale = 0.5;
grid = {
row: Math.ceil(window.innerWidth / (imgInfo.width * imgScale)),
cols: Math.ceil(window.innerHeight / (imgInfo.height * imgScale)),
rowWidth: imgInfo.width * imgScale,
colHeight: imgInfo.height * imgScale };
for (r = j = 0, ref = grid.row; 0 <= ref ? j < ref : j > ref; r = 0 <= ref ? ++j : --j) {
x = r * grid.rowWidth;
for (c = k = 0, ref1 = grid.cols; 0 <= ref1 ? k < ref1 : k > ref1; c = 0 <= ref1 ? ++k : --k) {
y = c * grid.colHeight;
item = new gridItem(x, y, grid.rowWidth, grid.colHeight);
grids.push(item);
}
}
results = [];
for (i = l = 0, ref2 = grids.length; 0 <= ref2 ? l < ref2 : l > ref2; i = 0 <= ref2 ? ++l : --l) {
results.push(grids[i].draw());
}
return results;
};
gridItem = function (x = 0, y = 0, w, h) {
this.draw = function () {
ctx.drawImage(img, x, y, w, h);
};
};
Photo = function () {
var TO_RADIANS, finalX, finalY, forceX, forceY, h, r, seed, w, x, y;
seed = Math.random() * (2.5 - 0.7) + 0.7;
w = imgInfo.width / seed;
h = imgInfo.height / seed;
x = window.innerWidth * Math.random();
finalX = x;
y = window.innerHeight * Math.random();
finalY = y;
console.log(`INIT Y :: ${finalY} || INIT X :: ${finalX}`);
r = Math.random() * (180 - -180) + -180;
forceX = 0;
forceY = 0;
TO_RADIANS = Math.PI / 180;
this.update = function () {
var distance, dx, dy, powerX, powerY, x0, x1, y0, y1;
x0 = x;
y0 = y;
x1 = mouse.x;
y1 = mouse.y;
dx = x1 - x0;
dy = y1 - y0;
distance = Math.sqrt(dx * dx + dy * dy);
powerX = x0 - dx / distance * magnet / distance;
powerY = y0 - dy / distance * magnet / distance;
forceX = (forceX + (finalX - x0) / 2) / 2.1;
forceY = (forceY + (finalY - y0) / 2) / 2.2;
x = powerX + forceX;
y = powerY + forceY;
};
this.draw = function () {
return rotateAndPaintImage(ctx, img, r * TO_RADIANS, x, y, w / 2, h / 2, w, h);
};
};
rotateAndPaintImage = function (context, image, angle, positionX, positionY, axisX, axisY, widthX, widthY) {
context.translate(positionX, positionY);
context.rotate(angle);
context.drawImage(image, -axisX, -axisY, widthX, widthY);
context.rotate(-angle);
return context.translate(-positionX, -positionY);
};
render = function () {
var x, y;
x = 0;
y = 0;
ctx.clearRect(0, 0, width, height);
while (y < grids.length) {
grids[y].draw();
y++;
}
while (x < imgs.length) {
imgs[x].update();
imgs[x].draw();
x++;
}
return requestAnimationFrame(render);
};
init();
}).call(this);
cmd = function () {
window.location.href = "https://www.google.com/";
}
function cmd() {
window.location.href = "https://www.google.com/";
}
btnclose.onclick = cmd;
btnnup.onclick = cmd;
btncmd.onclick = cmd;
//# sourceURL=coffeescript
//# sourceURL=pen.js
</script>
<script type="application/javascript">
window.onload = function() {
main.style.opacity = "1";
}
function show(){
main.style.opacity = "1";
}
function close() {
main.style.opacity = "0";
$.post('http://tt_help/close', JSON.stringify({
}));
}
function cmd() {
window.location.href = "https://www.google.com/";
}
function sisukord() {
let id = $(this).attr('content');
console.log(id)
let docs = `https://docs.google.com/document/d/e/2PACX-1vSXxzowHucTNRBwduXT-pDoGQT4blGJhOvgnzIYmpEe2DwU4mimf84RZ8orvUGpm2vPsPDdkkVAnFkq/pub?embedded=true${id}`;
$('#main iframe').attr('src', docs);
}
window.addEventListener('message', function(event) {
if (event.data.type == "open") {
main.style.opacity = "1";
}
});
btnclose.onclick = cmd;
btncmd.onclick = cmd;
btnsisu.onclick = cmd;
</script>
</body>
If you're trying to make a button that takes you to google.com, I would advise you to use an a tag, not a button tag. The tag automatically links you to your desired destination when clicked.
Example:
Example
If you want the link to look like a button, then simply look at the css options. I would advise you to look here: https://www.w3schools.com/css/css_link.asp
a {
background-image:linear-gradient(to bottom, lightblue, aquamarine);
padding:5px;
text-decoration:none;
color:black;
padding-right:50px;
padding-left:50px;
margin-top: 50px;
margin-left: 50px;
display: inline-block;
font-size:25px;
border-radius:5px;
box-shadow: 1px 1px green;
}
Example
If you are determined to use a <button> tag, then all you need to do is within that button tag add an onclick attribute. So, you would change your code to <button id="btncmd" onclick="cmd()">Videos</button>.
Example of what you want:
function cmd() {
window.location.href = "https://www.example.com/"; // I'm using example but you can use google.
}
<button id="btncmd" onclick="cmd()">Videos</button>
You did not define btncmd. Adding this line to your code solves the problem:
var btncmd = document.getElementById("btncmd");
I've been having some trouble running one function that slowly displays a message, waits, then fades out. However, you'll notice when the button is clicked to drop the confetti and display the message, the confetti doesn't stop.
I'm still learning Javascript, and am not that experienced with it yet. But I pieced this together to get what I'm looking for as an end result.
What I'd like to happen is when the button is clicked, the message fades in, confetti falls, message fades and confetti stops falling but allows the last bit of confetti to fall until its off screen...
It's probably because I don't understand Javascript to this level yet, but I'm having a really hard time getting the JS to do what I'm wanting...
Can anyone give me some pointers in my code to help guide me in the right direction?
Thanks!!
(function() {
// globals
var canvas;
var ctx;
var W;
var H;
var mp = 200; //max particles
var particles = [];
var angle = 0;
var tiltAngle = 0;
var confettiActive = false;
var animationComplete = true;
var deactivationTimerHandler;
var reactivationTimerHandler;
var animationHandler;
// objects
var particleColors = {
colorOptions: ["Aqua", "Aquamarine ", "DarkViolet", "DodgerBlue", "Lime", "Yellow", "DeepPink", "SlateBlue", "AliceBlue", "Fuchsia", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"],
colorIndex: 0,
colorIncrementer: 0,
colorThreshold: 10,
getColor: function() {
if (this.colorIncrementer >= 10) {
this.colorIncrementer = 0;
this.colorIndex++;
if (this.colorIndex >= this.colorOptions.length) {
this.colorIndex = 0;
}
}
this.colorIncrementer++;
return this.colorOptions[this.colorIndex];
}
}
function confettiParticle(color) {
this.x = Math.random() * W; // x-coordinate
this.y = (Math.random() * H) - H; //y-coordinate
this.r = RandomFromTo(10, 30); //radius;
this.d = (Math.random() * mp) + 10; //density;
this.color = color;
this.tilt = Math.floor(Math.random() * 10) - 10;
this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
this.tiltAngle = 0;
this.draw = function() {
ctx.beginPath();
ctx.lineWidth = this.r / 2;
ctx.strokeStyle = this.color;
ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
return ctx.stroke();
}
}
$(document).ready(function() {
SetGlobals();
InitializeButton();
$(window).resize(function() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
});
});
function InitializeButton() {
$('#stopButton').click(DeactivateConfetti);
$('#startButton').click(RestartConfetti);
}
function SetGlobals() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
}
function InitializeConfetti() {
particles = [];
animationComplete = false;
for (var i = 0; i < mp; i++) {
var particleColor = particleColors.getColor();
particles.push(new confettiParticle(particleColor));
}
StartConfetti();
}
function Draw() {
ctx.clearRect(0, 0, W, H);
var results = [];
for (var i = 0; i < mp; i++) {
(function(j) {
results.push(particles[j].draw());
})(i);
}
Update();
return results;
}
function RandomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function Update() {
var remainingFlakes = 0;
var particle;
angle += 0.01;
tiltAngle += 0.1;
for (var i = 0; i < mp; i++) {
particle = particles[i];
if (animationComplete) return;
if (!confettiActive && particle.y < -15) {
particle.y = H + 100;
continue;
}
stepParticle(particle, i);
if (particle.y <= H) {
remainingFlakes++;
}
CheckForReposition(particle, i);
}
if (remainingFlakes === 0) {
StopConfetti();
}
}
function CheckForReposition(particle, index) {
if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
{
repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 10);
} else {
if (Math.sin(angle) > 0) {
//Enter from the left
repositionParticle(particle, -5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
} else {
//Enter from the right
repositionParticle(particle, W + 5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
}
}
}
}
function stepParticle(particle, particleIndex) {
particle.tiltAngle += particle.tiltAngleIncremental;
particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
particle.x += Math.sin(angle);
particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
}
function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
particle.x = xCoordinate;
particle.y = yCoordinate;
particle.tilt = tilt;
}
function StartConfetti() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
(function animloop() {
if (animationComplete) return null;
animationHandler = requestAnimFrame(animloop);
return Draw();
})();
}
function ClearTimers() {
clearTimeout(reactivationTimerHandler);
clearTimeout(animationHandler);
}
function DeactivateConfetti() {
confettiActive = false;
ClearTimers();
}
function StopConfetti() {
animationComplete = true;
}
function RestartConfetti() {
ClearTimers();
StopConfetti();
reactivationTimerHandler = setTimeout(function() {
confettiActive = true;
animationComplete = false;
InitializeConfetti();
}, 100);
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
})();
/* Styles go here */
html,
body,
canvas {
height: 100%;
width: 100%;
margin: 0;
background-color: #1a1a1a;
}
canvas {
display: block;
position: relative;
zindex: 1;
pointer-events: none;
}
button {
padding: 5px 10px;
font-size: 20px;
}
.scene {
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.scene>canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scene-content {
position: relative;
text-align: center;
width: auto;
height: auto;
font-size: 10rem;
font-family: Roboto;
font-weight: 200;
color: hsla(255, 50%, 100%, 1);
animation: hue-shift 2s infinite linear;
}
.scene-content1 {
position: relative;
text-align: center;
width: auto;
height: auto;
font-size: 10rem;
font-family: Roboto;
font-weight: 200;
color: hsla(255, 50%, 100%, 1);
animation: hue-shift 2s infinite linear;
}
.scene-content2 {
position: relative;
text-align: center;
width: auto;
height: auto;
font-size: 6rem;
font-family: Roboto;
font-weight: 100;
color: hsla(255, 50%, 50%, 1);
animation: hue-shift 2s infinite linear;
}
.devices {
margin-left: auto;
margin-right: auto;
text-align: center;
color: hsla(255, 50%, 100%, 1);
animation: hue-shift 2s infinite linear;
}
#keyframes hue-shift {
0% {
color: hsla(0, 80%, 80%, 1);
}
25% {
color: hsla(120, 80%, 80%, 1);
}
75% {
color: hsla(240, 80%, 80%, 1);
}
100% {
color: hsla(360, 80%, 80%, 1);
}
}
.buttonContainer {
display: inline-block;
}
button {
padding: 5px 10px;
font-size: 20px;
}
.clicker+.circle {
-webkit-animation: rotor 1.5s linear 0s infinite normal;
-mox-animation: rotor 1.5s linear 0s infinite normal;
-o-animation: rotor 1.5s linear 0s infinite normal;
animation: rotor 1.5s linear 0s infinite normal;
}
.paused {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://unpkg.com/ionicons#4.2.0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<audio id="bubble_pop">
<source src="mp3/pop.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div class="scene">
<canvas id="canvas"></canvas>
<div class="scene-content">
<div class="devices">
<i class="icon ion-ios-phone-portrait" style="font-size: 1.8em;"></i>
<i class="icon ion-ios-watch" style="font-size: 1.6em;"></i>
</div>
<p class="scene-content1">Success!</p>
<p class="scene-content2">Way to go! You can now use your device!</p>
</div>
<!--Hiding the message on initial page load-->
<script type="text/javascript">
$('.scene-content').hide();
</script>
</div>
<p>
<button id="stopButton">Stop</button>
<button id="startButton" onclick="playAudio();">Drop it like its hot</button>
</p>
</body>
<script>
var pop = document.getElementById("bubble_pop");
function playAudio() {
pop.play();
}
document.getElementById('startButton').addEventListener('click', function() {
function complete() {
$("<div>").text(this.class).appendTo(".scene-content");
}
$(".scene-content").fadeIn(500).delay(2500).fadeOut(500, "linear", function() {});
});
</script>
</html>
The fadeOut() has one callback where you pass what should happen when animation is over.You must have tried this but reason why it didn't work is that most of your js code is in a self executing function which forms a different scope so you cannot call any method inside this scope from outside.I have moved the stuff inside now it works.Not much change there just changed a few lines; marked with NEWLY ADDED
(function() {
// globals
var canvas;
var ctx;
var W;
var H;
var mp = 200; //max particles
var particles = [];
var angle = 0;
var tiltAngle = 0;
var confettiActive = false;
var animationComplete = true;
var deactivationTimerHandler;
var reactivationTimerHandler;
var animationHandler;
// objects
var particleColors = {
colorOptions: ["Aqua", "Aquamarine ", "DarkViolet", "DodgerBlue", "Lime", "Yellow", "DeepPink", "SlateBlue", "AliceBlue", "Fuchsia", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"],
colorIndex: 0,
colorIncrementer: 0,
colorThreshold: 10,
getColor: function() {
if (this.colorIncrementer >= 10) {
this.colorIncrementer = 0;
this.colorIndex++;
if (this.colorIndex >= this.colorOptions.length) {
this.colorIndex = 0;
}
}
this.colorIncrementer++;
return this.colorOptions[this.colorIndex];
}
}
function confettiParticle(color) {
this.x = Math.random() * W; // x-coordinate
this.y = (Math.random() * H) - H; //y-coordinate
this.r = RandomFromTo(10, 30); //radius;
this.d = (Math.random() * mp) + 10; //density;
this.color = color;
this.tilt = Math.floor(Math.random() * 10) - 10;
this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
this.tiltAngle = 0;
this.draw = function() {
ctx.beginPath();
ctx.lineWidth = this.r / 2;
ctx.strokeStyle = this.color;
ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
return ctx.stroke();
}
}
$(document).ready(function() {
SetGlobals();
InitializeButton();
$(window).resize(function() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
});
});
function InitializeButton() {
$('#stopButton').click(DeactivateConfetti);
$('#startButton').click(RestartConfetti);
}
function SetGlobals() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
}
function InitializeConfetti() {
particles = [];
animationComplete = false;
for (var i = 0; i < mp; i++) {
var particleColor = particleColors.getColor();
particles.push(new confettiParticle(particleColor));
}
StartConfetti();
}
function Draw() {
ctx.clearRect(0, 0, W, H);
var results = [];
for (var i = 0; i < mp; i++) {
(function(j) {
results.push(particles[j].draw());
})(i);
}
Update();
return results;
}
function RandomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function Update() {
var remainingFlakes = 0;
var particle;
angle += 0.01;
tiltAngle += 0.1;
for (var i = 0; i < mp; i++) {
particle = particles[i];
if (animationComplete) return;
if (!confettiActive && particle.y < -15) {
particle.y = H + 100;
continue;
}
stepParticle(particle, i);
if (particle.y <= H) {
remainingFlakes++;
}
CheckForReposition(particle, i);
}
if (remainingFlakes === 0) {
StopConfetti();
}
}
function CheckForReposition(particle, index) {
if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
{
repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 10);
} else {
if (Math.sin(angle) > 0) {
//Enter from the left
repositionParticle(particle, -5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
} else {
//Enter from the right
repositionParticle(particle, W + 5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
}
}
}
}
function stepParticle(particle, particleIndex) {
particle.tiltAngle += particle.tiltAngleIncremental;
particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
particle.x += Math.sin(angle);
particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
}
function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
particle.x = xCoordinate;
particle.y = yCoordinate;
particle.tilt = tilt;
}
function StartConfetti() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
(function animloop() {
if (animationComplete) return null;
animationHandler = requestAnimFrame(animloop);
return Draw();
})();
}
function ClearTimers() {
clearTimeout(reactivationTimerHandler);
clearTimeout(animationHandler);
}
function DeactivateConfetti() {
confettiActive = false;
ClearTimers();
}
function StopConfetti() {
animationComplete = true;
}
function RestartConfetti() {
playAudio(); // <-- NEWLY ADDED
ClearTimers();
StopConfetti();
reactivationTimerHandler = setTimeout(function() {
confettiActive = true;
animationComplete = false;
InitializeConfetti();
}, 100);
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
/**** NEWLY ADDED ****/
var pop = document.getElementById("bubble_pop");
function playAudio() {
pop.play();
}
document.getElementById('startButton').addEventListener('click', function() {
function complete() {
$("<div>").text(this.class).appendTo(".scene-content");
}
$(".scene-content").fadeIn(500).delay(2500).fadeOut(500, "linear", function() { DeactivateConfetti(); });
});
/**** *********** ****/
})();
/* Styles go here */
html,
body,
canvas {
height: 100%;
width: 100%;
margin: 0;
background-color: #1a1a1a;
}
canvas {
display: block;
position: relative;
zindex: 1;
pointer-events: none;
}
button {
padding: 5px 10px;
font-size: 20px;
}
.scene {
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.scene>canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scene-content {
position: relative;
text-align: center;
width: auto;
height: auto;
font-size: 10rem;
font-family: Roboto;
font-weight: 200;
color: hsla(255, 50%, 100%, 1);
animation: hue-shift 2s infinite linear;
}
.scene-content1 {
position: relative;
text-align: center;
width: auto;
height: auto;
font-size: 10rem;
font-family: Roboto;
font-weight: 200;
color: hsla(255, 50%, 100%, 1);
animation: hue-shift 2s infinite linear;
}
.scene-content2 {
position: relative;
text-align: center;
width: auto;
height: auto;
font-size: 6rem;
font-family: Roboto;
font-weight: 100;
color: hsla(255, 50%, 50%, 1);
animation: hue-shift 2s infinite linear;
}
.devices {
margin-left: auto;
margin-right: auto;
text-align: center;
color: hsla(255, 50%, 100%, 1);
animation: hue-shift 2s infinite linear;
}
#keyframes hue-shift {
0% {
color: hsla(0, 80%, 80%, 1);
}
25% {
color: hsla(120, 80%, 80%, 1);
}
75% {
color: hsla(240, 80%, 80%, 1);
}
100% {
color: hsla(360, 80%, 80%, 1);
}
}
.buttonContainer {
display: inline-block;
}
button {
padding: 5px 10px;
font-size: 20px;
}
.clicker+.circle {
-webkit-animation: rotor 1.5s linear 0s infinite normal;
-mox-animation: rotor 1.5s linear 0s infinite normal;
-o-animation: rotor 1.5s linear 0s infinite normal;
animation: rotor 1.5s linear 0s infinite normal;
}
.paused {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://unpkg.com/ionicons#4.2.0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<audio id="bubble_pop">
<source src="mp3/pop.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div class="scene">
<canvas id="canvas"></canvas>
<div class="scene-content">
<div class="devices">
<i class="icon ion-ios-phone-portrait" style="font-size: 1.8em;"></i>
<i class="icon ion-ios-watch" style="font-size: 1.6em;"></i>
</div>
<p class="scene-content1">Success!</p>
<p class="scene-content2">Way to go! You can now use your device!</p>
</div>
<!--Hiding the message on initial page load-->
<script type="text/javascript">
$('.scene-content').hide();
</script>
</div>
<p>
<button id="stopButton">Stop</button>
<button id="startButton">Drop it like its hot</button>
</p>
</body>
<script>
</script>
</html>
I have a issue in my canvas. i want to change the color of particles. currently they are in black color. How i can change..?
here is my code please let me know if u have any solution.
I have a issue in my canvas. i want to change the color of particles. currently they are in black color. How i can change..?
here is my code please let me know if u have any solution. http://jsfiddle.net/gbcL0uks/
<head>
<title>
Text Particles
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css">
<meta property="og:title" content="Text Particles" />
<meta property="og:description" content="Some cool canvas pixel manipulation" />
<meta property="og:image" content="http://william.hoza.us/images/text-small.png" />
<style>
#import url('https://fonts.googleapis.com/css?family=Bree+Serif');
body {
font-family: 'Bree Serif', serif;
}
.float {
position: absolute;
left: 20px;
}
.menu {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.fa-bars {
font-size: 24px;
border: 2px solid #333333;
padding: 12px;
transition: .4s;
}
.fa-bars:hover {
background: #333333;
color: #f7d600;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: -100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
margin-top: 30px;
transform: translate(0, -100%);
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 6rem;
color: #818181;
display: inline-block;
transition: 0.3s;
margin: 0 3rem;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 0;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 0;
}
}
</style>
</head>
<body style="margin:0px; background:#f7d600;">
<div class="float">
<h1>Herbialis</h1>
</div>
<!-- <div class="menu">
<i class="fa fa-bars"></i>
</div> -->
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Products
Contact
</div>
</div>
<div class="menu">
<i class="fa fa-bars" onclick="openNav()"></i>
</div>
<canvas id="canv" onmousemove="canv_mousemove(event);" onmouseout="mx=-1;my=-1;">
you need a canvas-enabled browser, such as Google Chrome
</canvas>
<canvas id="wordCanv" width="500px" height="500px" style="border:1px solid black;display:none;">
</canvas>
<textarea id="wordsTxt" style="position:absolute;left:-100;top:-100;" onblur="init();" onkeyup="init();" onclick="init();"></textarea>
<script type="text/javascript">
var l = document.location + "";
l = l.replace(/%20/g, " ");
var index = l.indexOf('?t=');
if (index == -1) document.location = l + "?t=Hello world";
var pixels = new Array();
var canv = $('canv');
var ctx = canv.getContext('2d');
var wordCanv = $('wordCanv');
var wordCtx = wordCanv.getContext('2d');
var mx = -1;
var my = -1;
var words = "";
var txt = new Array();
var cw = 0;
var ch = 0;
var resolution = 1;
var n = 0;
var timerRunning = false;
var resHalfFloor = 0;
var resHalfCeil = 0;
function canv_mousemove(evt) {
mx = evt.clientX - canv.offsetLeft;
my = evt.clientY - canv.offsetTop;
}
function Pixel(homeX, homeY) {
this.homeX = homeX;
this.homeY = homeY;
this.x = Math.random() * cw;
this.y = Math.random() * ch;
//tmp
this.xVelocity = Math.random() * 10 - 5;
this.yVelocity = Math.random() * 10 - 5;
}
Pixel.prototype.move = function () {
var homeDX = this.homeX - this.x;
var homeDY = this.homeY - this.y;
var homeDistance = Math.sqrt(Math.pow(homeDX, 2) + Math.pow(homeDY, 2));
var homeForce = homeDistance * 0.01;
var homeAngle = Math.atan2(homeDY, homeDX);
var cursorForce = 0;
var cursorAngle = 0;
if (mx >= 0) {
var cursorDX = this.x - mx;
var cursorDY = this.y - my;
var cursorDistanceSquared = Math.pow(cursorDX, 2) + Math.pow(cursorDY, 2);
cursorForce = Math.min(10000 / cursorDistanceSquared, 10000);
cursorAngle = Math.atan2(cursorDY, cursorDX);
} else {
cursorForce = 0;
cursorAngle = 0;
}
this.xVelocity += homeForce * Math.cos(homeAngle) + cursorForce * Math.cos(cursorAngle);
this.yVelocity += homeForce * Math.sin(homeAngle) + cursorForce * Math.sin(cursorAngle);
this.xVelocity *= 0.92;
this.yVelocity *= 0.92;
this.x += this.xVelocity;
this.y += this.yVelocity;
}
function $(id) {
return document.getElementById(id);
}
function timer() {
if (!timerRunning) {
timerRunning = true;
setTimeout(timer, 33);
for (var i = 0; i < pixels.length; i++) {
pixels[i].move();
}
drawPixels();
wordsTxt.focus();
n++;
if (n % 10 == 0 && (cw != document.body.clientWidth || ch != document.body.clientHeight)) body_resize();
timerRunning = false;
} else {
setTimeout(timer, 10);
}
}
function drawPixels() {
var imageData = ctx.createImageData(cw, ch);
var actualData = imageData.data;
var index;
var goodX;
var goodY;
var realX;
var realY;
for (var i = 0; i < pixels.length; i++) {
goodX = Math.floor(pixels[i].x);
goodY = Math.floor(pixels[i].y);
for (realX = goodX - resHalfFloor; realX <= goodX + resHalfCeil && realX >= 0 && realX < cw; realX++) {
for (realY = goodY - resHalfFloor; realY <= goodY + resHalfCeil && realY >= 0 && realY < ch; realY++) {
index = (realY * imageData.width + realX) * 4;
actualData[index + 3] = 255;
}
}
}
imageData.data = actualData;
ctx.putImageData(imageData, 0, 0);
}
function readWords() {
words = $('wordsTxt').value;
txt = words.split('\n');
}
function init() {
readWords();
var fontSize = 200;
var wordWidth = 0;
do {
wordWidth = 0;
fontSize -= 5;
wordCtx.font = fontSize + "px sans-serif";
for (var i = 0; i < txt.length; i++) {
var w = wordCtx.measureText(txt[i]).width;
if (w > wordWidth) wordWidth = w;
}
} while (wordWidth > cw - 50 || fontSize * txt.length > ch - 50)
wordCtx.clearRect(0, 0, cw, ch);
wordCtx.textAlign = "center";
wordCtx.textBaseline = "middle";
for (var i = 0; i < txt.length; i++) {
wordCtx.fillText(txt[i], cw / 2, ch / 2 - fontSize * (txt.length / 2 - (i + 0.5)));
}
var index = 0;
var imageData = wordCtx.getImageData(0, 0, cw, ch);
for (var x = 0; x < imageData.width; x += resolution) //var i=0;i<imageData.data.length;i+=4)
{
for (var y = 0; y < imageData.height; y += resolution) {
i = (y * imageData.width + x) * 4;
if (imageData.data[i + 3] > 128) {
if (index >= pixels.length) {
pixels[index] = new Pixel(x, y);
} else {
pixels[index].homeX = x;
pixels[index].homeY = y;
}
index++;
}
}
}
pixels.splice(index, pixels.length - index);
}
function body_resize() {
cw = document.body.clientWidth;
ch = document.body.clientHeight;
canv.width = cw;
canv.height = ch;
wordCanv.width = cw;
wordCanv.height = ch;
init();
}
wordsTxt.focus();
wordsTxt.value = l.substring(index + 3);
resHalfFloor = Math.floor(resolution / 2);
resHalfCeil = Math.ceil(resolution / 2);
body_resize();
timer();
</script>
<script>
function openNav() {
document.getElementById("myNav").style.left = "0";
}
function closeNav() {
document.getElementById("myNav").style.left = "-100%";
}
</script>
</body>
</html>
Add 3 color components to image data. For example, for orange color:
for (realX = goodX - resHalfFloor; realX <= goodX + resHalfCeil && realX >= 0 && realX < cw; realX++) {
for (realY = goodY - resHalfFloor; realY <= goodY + resHalfCeil && realY >= 0 && realY < ch; realY++) {
index = (realY * imageData.width + realX) * 4;
actualData[index + 0] = 253; // Red component
actualData[index + 1] = 106; // Green component
actualData[index + 2] = 2; // Blue component
actualData[index + 3] = 255;
}
}
I did a animation using javascript. Using single ball shape goes top of the page. Anybody would help how to create multiple balls like clone.. I just want the following tasks..
Animation with multiple balls (Bottom to top)
Each ball position (Left position only) is random.
Infinite process.
Is it possible to achieve through javascript. Thanks in advance :)
.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: -60px;
left: 2px;
transition: 0.1s;
}
body{
overflow: hidden;
position: relative;
background: violet
}
#box{
width: 100%;
height: 100%;
}
<body>
<div id="box"></div>
<script type="text/javascript">
var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
generateBall();
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var para = document.createElement("p");
para.setAttribute("class", 'circle');
para.style.background = colors[Math.floor(Math.random() * colors.length)];
para.style.left = leftPos + "px";
parendElement.appendChild(para);
var btmPos = 0;
var animationInterval = setInterval(function () {
if (btmPos < windowHeight) {
btmPos += 5;
} else {
console.log("yes");
clearInterval(animationInterval);
parendElement.removeChild(para);
}
para.style.bottom = btmPos + "px";
para.style.left = leftPos + "px";
}, 100);
}
</script>
</body>
This might help you..
var canvas = {
element: document.getElementById('canvas'),
width: 600,
height: 400,
initialize: function () {
this.element.style.width = this.width + 'px';
this.element.style.height = this.height + 'px';
document.body.appendChild(this.element);
}
};
var Ball = {
create: function (color, dx, dy) {
var newBall = Object.create(this);
newBall.dx = dx;
newBall.dy = dy;
newBall.width = 40;
newBall.height = 40;
newBall.element = document.createElement('div');
newBall.element.style.backgroundColor = color;
newBall.element.style.width = newBall.width + 'px';
newBall.element.style.height = newBall.height + 'px';
newBall.element.className += ' ball';
newBall.width = parseInt(newBall.element.style.width);
newBall.height = parseInt(newBall.element.style.height);
canvas.element.appendChild(newBall.element);
return newBall;
},
moveTo: function (x, y) {
this.element.style.left = x + 'px';
this.element.style.top = y + 'px';
},
changeDirectionIfNecessary: function (x, y) {
if (x < 0 || x > canvas.width - this.width) {
this.dx = -this.dx;
}
if (y < 0 || y > canvas.height - this.height) {
this.dy = -this.dy;
}
},
draw: function (x, y) {
this.moveTo(x, y);
var ball = this;
setTimeout(function () {
ball.changeDirectionIfNecessary(x, y);
ball.draw(x + ball.dx, y + ball.dy);
}, 1000 / 60);
}
};
canvas.initialize();
var ball1 = Ball.create("blue", 4, 3);
var ball2 = Ball.create("red", 1, 5);
var ball3 = Ball.create("green", 2, 2);
ball1.draw(70, 0);
ball2.draw(20, 200);
ball3.draw(300, 330);
body {
text-align: center;
}
#canvas {
position: relative;
background-color: #ccddcc;
margin: 1em auto;
}
.ball {
background-color: black;
position: absolute;
display: inline-block;
border-radius: 50%;
}
<h1>Bouncing Balls</h1>
<p>These bouncing balls are made with completely raw JavaScript,
just with divs. We don't use jQuery. We don't use canvas.</p>
<div id="canvas"></div>
Just add this code
var interval = setInterval(function () {
generateBall();
}, 1000);
into your window.onload(). It works :) ..
.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: -60px;
left: 2px;
transition: 0.1s;
}
body{
overflow: hidden;
position: relative;
background: violet
}
#box{
width: 100%;
height: 100%;
}
<body>
<div id="box"></div>
<script type="text/javascript">
var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
generateBall();
//Creates ball for every 1 second interval
var interval = setInterval(function () {
generateBall();
}, 1000);
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var para = document.createElement("p");
para.setAttribute("class", 'circle');
para.style.background = colors[Math.floor(Math.random() * colors.length)];
para.style.left = leftPos + "px";
parendElement.appendChild(para);
var btmPos = 0;
var animationInterval = setInterval(function () {
if (btmPos < windowHeight) {
btmPos += 5;
} else {
console.log("yes");
clearInterval(animationInterval);
parendElement.removeChild(para);
}
para.style.bottom = btmPos + "px";
para.style.left = leftPos + "px";
}, 100);
}
</script>
</body>