HTML5/Canvas Background?

Resolved Kemerd
(@kemerd)

8 years, 7 months ago

Sort of confused on how I should go about this. I’ve been trying to get this:
http://codepen.io/acauamontiel/pen/mJdnw

To be my effective wordpress background, but I can’t find a way to implement HTML5/Canvas/Javascript into wordpress itself– not sure if I would make a plugin– implement it into my current theme? I’m honestly quite confused. Does anyone know how I could go about doing this? Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)

(@soumendra)

Hello,

You can also do that manually by adding that code mentioned there for achieving that.

go to Appearance > Editor > header.php and add the html under <body> tag.
Then at the very end of the file look for this code ?>.

Just above that add the js inside this code:

<script type="text/javascript">
your js code here
</script>

Then the rest css, you can add t inside your theme’s style.css file.

But make sure you are editing the core files for adding the codes. So the changes will be lost on update. To overcome this. you can use a Child Theme.

Let me know if you need any other help.

Thank you.

This reply was modified 7 years, 5 months ago by Jan Dembowski.

Thread Starter

Kemerd

(@kemerd)

8 years, 7 months ago

Sorry, it’s not working at all for me (at least).

Under:
<body <?php body_class(); ?>>

I put my:
<canvas></canvas>
<script type=”text/javascript”>
— insert js code
</script>

But it’s not doing anything different.

Thread Starter

Kemerd

(@kemerd)

8 years, 7 months ago

My header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>" />
	<title><?php wp_title( '|', true, 'right' ); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
	<header>
		<a id="blog-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
		<p id="description"><?php bloginfo('description'); ?></p>
		<nav role="navigation">
			<?php wp_nav_menu(array('theme_location' => 'primary','depth' => 2,'container' => 'false','fallback_cb' => 'false')); ?>
		</nav>
	</header>

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

8 years, 7 months ago

Can you put the real code, where you said “– insert js code”, in this thread? Wrap it in backticks please.

Thread Starter

Kemerd

(@kemerd)

8 years, 7 months ago

The JS is here:
http://codepen.io/acauamontiel/pen/mJdnw/

I have no problem using that JS itself– as I used it on the title page on a website before.

Sam

(@soumendra)

8 years, 7 months ago

Hello,

You have add this <canvas></canvas> , Please replace that with canvas .

Hope that helps you, feel free to ask if there is any other problem.

Thank you.

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

8 years, 7 months ago

The dollar will always be undefined in WordPress unless you pass jQuery to it. So first you need to write:

$ = jQuery;

If still that doesn’t work then please show us the page with the problem.

Thread Starter

Kemerd

(@kemerd)

8 years, 7 months ago

Alright, so I got it to work– it appears on the page, but the issue is that the canvas appears ABOVE the wordpress page– and when you scroll down you can see the page.

How can I make it so it appears BEHIND the page– not on top of it?

Thread Starter

Kemerd

(@kemerd)

8 years, 7 months ago

Fixed it with CSS– nevermind.

invadertim3

(@invadertim3)

8 years, 7 months ago

Where did you end up putting the js and canvas?

WebSEOGuru

(@webseoguru)

8 years ago

Curious about a bigger version of this kind of canvas animation:
http://codepen.io/flashpremium/pen/kJvGo

But over the top a splash page I’m making:
http://tastytreatmusic.com/

Do I Just upload the .js file and insert this script into my page-templates/full-width.php page?

theripoffartist

(@theripoffartist)

7 years, 10 months ago

I was hoping you guys could help me too… I’m kind of at a total loss here and this forum is the closest thing I’ve been able to find.

I’m redesigning the website for a restaurant I art direct

http://theripoffartist.net/blackbird/

Really trying to overlay this over the top of it.

http://threejs.org/examples/canvas_geometry_birds.html

I found it HERE on github. And it’s beautiful. I am in Sacramento so things like this blow people away and I am attempting to elevate the social consciousness in the area

<script src="../build/three.js"></script>

		<script src="js/renderers/Projector.js"></script>
		<script src="js/renderers/CanvasRenderer.js"></script>

		<script src="js/libs/stats.min.js"></script>

		<script src="obj/Bird.js"></script>

		<script>
			// Based on http://www.openprocessing.org/visuals/?visualID=6910
			var Boid = function() {
				var vector = new THREE.Vector3(),
				_acceleration, _width = 500, _height = 500, _depth = 200, _goal, _neighborhoodRadius = 100,
				_maxSpeed = 4, _maxSteerForce = 0.1, _avoidWalls = false;
				this.position = new THREE.Vector3();
				this.velocity = new THREE.Vector3();
				_acceleration = new THREE.Vector3();
				this.setGoal = function ( target ) {
					_goal = target;
				};
				this.setAvoidWalls = function ( value ) {
					_avoidWalls = value;
				};
				this.setWorldSize = function ( width, height, depth ) {
					_width = width;
					_height = height;
					_depth = depth;
				};
				this.run = function ( boids ) {
					if ( _avoidWalls ) {
						vector.set( - _width, this.position.y, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );
						vector.set( _width, this.position.y, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );
						vector.set( this.position.x, - _height, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );
						vector.set( this.position.x, _height, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );
						vector.set( this.position.x, this.position.y, - _depth );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );
						vector.set( this.position.x, this.position.y, _depth );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );
					}/* else {
						this.checkBounds();
					}
					*/
					if ( Math.random() > 0.5 ) {
						this.flock( boids );
					}
					this.move();
				};
				this.flock = function ( boids ) {
					if ( _goal ) {
						_acceleration.add( this.reach( _goal, 0.005 ) );
					}
					_acceleration.add( this.alignment( boids ) );
					_acceleration.add( this.cohesion( boids ) );
					_acceleration.add( this.separation( boids ) );
				};
				this.move = function () {
					this.velocity.add( _acceleration );
					var l = this.velocity.length();
					if ( l > _maxSpeed ) {
						this.velocity.divideScalar( l / _maxSpeed );
					}
					this.position.add( this.velocity );
					_acceleration.set( 0, 0, 0 );
				};
				this.checkBounds = function () {
					if ( this.position.x >   _width ) this.position.x = - _width;
					if ( this.position.x < - _width ) this.position.x =   _width;
					if ( this.position.y >   _height ) this.position.y = - _height;
					if ( this.position.y < - _height ) this.position.y =  _height;
					if ( this.position.z >  _depth ) this.position.z = - _depth;
					if ( this.position.z < - _depth ) this.position.z =  _depth;
				};
				//
				this.avoid = function ( target ) {
					var steer = new THREE.Vector3();
					steer.copy( this.position );
					steer.sub( target );
					steer.multiplyScalar( 1 / this.position.distanceToSquared( target ) );
					return steer;
				};
				this.repulse = function ( target ) {
					var distance = this.position.distanceTo( target );
					if ( distance < 150 ) {
						var steer = new THREE.Vector3();
						steer.subVectors( this.position, target );
						steer.multiplyScalar( 0.5 / distance );
						_acceleration.add( steer );
					}
				};
				this.reach = function ( target, amount ) {
					var steer = new THREE.Vector3();
					steer.subVectors( target, this.position );
					steer.multiplyScalar( amount );
					return steer;
				};
				this.alignment = function ( boids ) {
					var boid, velSum = new THREE.Vector3(),
					count = 0;
					for ( var i = 0, il = boids.length; i < il; i++ ) {
						if ( Math.random() > 0.6 ) continue;
						boid = boids[ i ];
						distance = boid.position.distanceTo( this.position );
						if ( distance > 0 && distance <= _neighborhoodRadius ) {
							velSum.add( boid.velocity );
							count++;
						}
					}
					if ( count > 0 ) {
						velSum.divideScalar( count );
						var l = velSum.length();
						if ( l > _maxSteerForce ) {
							velSum.divideScalar( l / _maxSteerForce );
						}
					}
					return velSum;
				};
				this.cohesion = function ( boids ) {
					var boid, distance,
					posSum = new THREE.Vector3(),
					steer = new THREE.Vector3(),
					count = 0;
					for ( var i = 0, il = boids.length; i < il; i ++ ) {
						if ( Math.random() > 0.6 ) continue;
						boid = boids[ i ];
						distance = boid.position.distanceTo( this.position );
						if ( distance > 0 && distance <= _neighborhoodRadius ) {
							posSum.add( boid.position );
							count++;
						}
					}
					if ( count > 0 ) {
						posSum.divideScalar( count );
					}
					steer.subVectors( posSum, this.position );
					var l = steer.length();
					if ( l > _maxSteerForce ) {
						steer.divideScalar( l / _maxSteerForce );
					}
					return steer;
				};
				this.separation = function ( boids ) {
					var boid, distance,
					posSum = new THREE.Vector3(),
					repulse = new THREE.Vector3();
					for ( var i = 0, il = boids.length; i < il; i ++ ) {
						if ( Math.random() > 0.6 ) continue;
						boid = boids[ i ];
						distance = boid.position.distanceTo( this.position );
						if ( distance > 0 && distance <= _neighborhoodRadius ) {
							repulse.subVectors( this.position, boid.position );
							repulse.normalize();
							repulse.divideScalar( distance );
							posSum.add( repulse );
						}
					}
					return posSum;
				}
			}
		</script>

		<script>
			var SCREEN_WIDTH = window.innerWidth,
			SCREEN_HEIGHT = window.innerHeight,
			SCREEN_WIDTH_HALF = SCREEN_WIDTH  / 2,
			SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;
			var camera, scene, renderer,
			birds, bird;
			var boid, boids;
			var stats;
			init();
			animate();
			function init() {
				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.z = 450;
				scene = new THREE.Scene();
				birds = [];
				boids = [];
				for ( var i = 0; i < 200; i ++ ) {
					boid = boids[ i ] = new Boid();
					boid.position.x = Math.random() * 400 - 200;
					boid.position.y = Math.random() * 400 - 200;
					boid.position.z = Math.random() * 400 - 200;
					boid.velocity.x = Math.random() * 2 - 1;
					boid.velocity.y = Math.random() * 2 - 1;
					boid.velocity.z = Math.random() * 2 - 1;
					boid.setAvoidWalls( true );
					boid.setWorldSize( 500, 500, 400 );
					bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
					bird.phase = Math.floor( Math.random() * 62.83 );
					scene.add( bird );
				}
				renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( 0xffffff );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.body.appendChild( renderer.domElement );
				stats = new Stats();
				document.getElementById( 'container' ).appendChild(stats.dom);
				//
				window.addEventListener( 'resize', onWindowResize, false );
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			function onDocumentMouseMove( event ) {
				var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );
				for ( var i = 0, il = boids.length; i < il; i++ ) {
					boid = boids[ i ];
					vector.z = boid.position.z;
					boid.repulse( vector );
				}
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				stats.begin();
				render();
				stats.end();
			}
			function render() {
				for ( var i = 0, il = birds.length; i < il; i++ ) {
					boid = boids[ i ];
					boid.run( boids );
					bird = birds[ i ];
					bird.position.copy( boids[ i ].position );
					color = bird.material.color;
					color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
					bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
					bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );
					bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 )  ) % 62.83;
					bird.geometry.vertices[ 5 ].y = bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;
				}
				renderer.render( scene, camera );
			}
		</script>

please help! I’ve tried pasting it everywhere. with no results what so ever. in the header file and everything.

<script type="text/javascript" <canvas>
<script src="http://www.theripoffartist.net/blackbird/wp-content/themes/kalium/assets/js/build"></script>

		<script src="http://www.theripoffartist.net/blackbird/wp-content/themes/kalium/assets/js/examples/js/renderers/Projector.js"></script>
		<script src="http://www.theripoffartist.net/blackbird/wp-content/themes/kalium/assets/js/examples/js/renderers/CanvasRenderer.js"></script>

		<script src="http://www.theripoffartist.net/blackbird/wp-content/themes/kalium/assets/js/examples/js/libs/stats.min.js"></script>

		<script src="http://www.theripoffartist.net/blackbird/wp-content/themes/kalium/assets/js/examples/obj/Bird.js"></script>

		<script>

			// Based on http://www.openprocessing.org/visuals/?visualID=6910

			var Boid = function() {

				var vector = new THREE.Vector3(),
				_acceleration, _width = 500, _height = 500, _depth = 200, _goal, _neighborhoodRadius = 100,
				_maxSpeed = 4, _maxSteerForce = 0.1, _avoidWalls = false;

				this.position = new THREE.Vector3();
				this.velocity = new THREE.Vector3();
				_acceleration = new THREE.Vector3();

				this.setGoal = function ( target ) {

					_goal = target;

				};

				this.setAvoidWalls = function ( value ) {

					_avoidWalls = value;

				};

				this.setWorldSize = function ( width, height, depth ) {

					_width = width;
					_height = height;
					_depth = depth;

				};

				this.run = function ( boids ) {

					if ( _avoidWalls ) {

						vector.set( - _width, this.position.y, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );

						vector.set( _width, this.position.y, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );

						vector.set( this.position.x, - _height, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );

						vector.set( this.position.x, _height, this.position.z );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );

						vector.set( this.position.x, this.position.y, - _depth );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );

						vector.set( this.position.x, this.position.y, _depth );
						vector = this.avoid( vector );
						vector.multiplyScalar( 5 );
						_acceleration.add( vector );

					}/* else {

						this.checkBounds();

					}
					*/

					if ( Math.random() > 0.5 ) {

						this.flock( boids );

					}

					this.move();

				};

				this.flock = function ( boids ) {

					if ( _goal ) {

						_acceleration.add( this.reach( _goal, 0.005 ) );

					}

					_acceleration.add( this.alignment( boids ) );
					_acceleration.add( this.cohesion( boids ) );
					_acceleration.add( this.separation( boids ) );

				};

				this.move = function () {

					this.velocity.add( _acceleration );

					var l = this.velocity.length();

					if ( l > _maxSpeed ) {

						this.velocity.divideScalar( l / _maxSpeed );

					}

					this.position.add( this.velocity );
					_acceleration.set( 0, 0, 0 );

				};

				this.checkBounds = function () {

					if ( this.position.x >   _width ) this.position.x = - _width;
					if ( this.position.x < - _width ) this.position.x =   _width;
					if ( this.position.y >   _height ) this.position.y = - _height;
					if ( this.position.y < - _height ) this.position.y =  _height;
					if ( this.position.z >  _depth ) this.position.z = - _depth;
					if ( this.position.z < - _depth ) this.position.z =  _depth;

				};

				//

				this.avoid = function ( target ) {

					var steer = new THREE.Vector3();

					steer.copy( this.position );
					steer.sub( target );

					steer.multiplyScalar( 1 / this.position.distanceToSquared( target ) );

					return steer;

				};

				this.repulse = function ( target ) {

					var distance = this.position.distanceTo( target );

					if ( distance < 150 ) {

						var steer = new THREE.Vector3();

						steer.subVectors( this.position, target );
						steer.multiplyScalar( 0.5 / distance );

						_acceleration.add( steer );

					}

				};

				this.reach = function ( target, amount ) {

					var steer = new THREE.Vector3();

					steer.subVectors( target, this.position );
					steer.multiplyScalar( amount );

					return steer;

				};

				this.alignment = function ( boids ) {

					var boid, velSum = new THREE.Vector3(),
					count = 0;

					for ( var i = 0, il = boids.length; i < il; i++ ) {

						if ( Math.random() > 0.6 ) continue;

						boid = boids[ i ];

						distance = boid.position.distanceTo( this.position );

						if ( distance > 0 && distance <= _neighborhoodRadius ) {

							velSum.add( boid.velocity );
							count++;

						}

					}

					if ( count > 0 ) {

						velSum.divideScalar( count );

						var l = velSum.length();

						if ( l > _maxSteerForce ) {

							velSum.divideScalar( l / _maxSteerForce );

						}

					}

					return velSum;

				};

				this.cohesion = function ( boids ) {

					var boid, distance,
					posSum = new THREE.Vector3(),
					steer = new THREE.Vector3(),
					count = 0;

					for ( var i = 0, il = boids.length; i < il; i ++ ) {

						if ( Math.random() > 0.6 ) continue;

						boid = boids[ i ];
						distance = boid.position.distanceTo( this.position );

						if ( distance > 0 && distance <= _neighborhoodRadius ) {

							posSum.add( boid.position );
							count++;

						}

					}

					if ( count > 0 ) {

						posSum.divideScalar( count );

					}

					steer.subVectors( posSum, this.position );

					var l = steer.length();

					if ( l > _maxSteerForce ) {

						steer.divideScalar( l / _maxSteerForce );

					}

					return steer;

				};

				this.separation = function ( boids ) {

					var boid, distance,
					posSum = new THREE.Vector3(),
					repulse = new THREE.Vector3();

					for ( var i = 0, il = boids.length; i < il; i ++ ) {

						if ( Math.random() > 0.6 ) continue;

						boid = boids[ i ];
						distance = boid.position.distanceTo( this.position );

						if ( distance > 0 && distance <= _neighborhoodRadius ) {

							repulse.subVectors( this.position, boid.position );
							repulse.normalize();
							repulse.divideScalar( distance );
							posSum.add( repulse );

						}

					}

					return posSum;

				}

			}

		</script>

		<script>

			var SCREEN_WIDTH = window.innerWidth,
			SCREEN_HEIGHT = window.innerHeight,
			SCREEN_WIDTH_HALF = SCREEN_WIDTH  / 2,
			SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;

			var camera, scene, renderer,
			birds, bird;

			var boid, boids;

			var stats;

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.z = 450;

				scene = new THREE.Scene();

				birds = [];
				boids = [];

				for ( var i = 0; i < 200; i ++ ) {

					boid = boids[ i ] = new Boid();
					boid.position.x = Math.random() * 400 - 200;
					boid.position.y = Math.random() * 400 - 200;
					boid.position.z = Math.random() * 400 - 200;
					boid.velocity.x = Math.random() * 2 - 1;
					boid.velocity.y = Math.random() * 2 - 1;
					boid.velocity.z = Math.random() * 2 - 1;
					boid.setAvoidWalls( true );
					boid.setWorldSize( 500, 500, 400 );

					bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
					bird.phase = Math.floor( Math.random() * 62.83 );
					scene.add( bird );

				}

				renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( 0xffffff );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.body.appendChild( renderer.domElement );

				stats = new Stats();
				document.getElementById( 'container' ).appendChild(stats.dom);

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function onDocumentMouseMove( event ) {

				var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );

				for ( var i = 0, il = boids.length; i < il; i++ ) {

					boid = boids[ i ];

					vector.z = boid.position.z;

					boid.repulse( vector );

				}

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				stats.begin();
				render();
				stats.end();

			}

			function render() {

				for ( var i = 0, il = birds.length; i < il; i++ ) {

					boid = boids[ i ];
					boid.run( boids );

					bird = birds[ i ];
					bird.position.copy( boids[ i ].position );

					color = bird.material.color;
					color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

					bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
					bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );

					bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 )  ) % 62.83;
					bird.geometry.vertices[ 5 ].y = bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;

				}

				renderer.render( scene, camera );

			}
</canvas></script>

This is the code i’ve been using now. I am not sure what I am doing wrong because I don’t know what to look for…

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘HTML5/Canvas Background?’ is closed to new replies.

HTML5/Canvas Background?

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics