Restart
Pause
Load Program:
Graphing Calculator
Bouncing Balls
Beating Heart
Sprite
Three.js
Another Three.js Example
friction = 0.9; gravity = 0.1; $(balls).each(function() { Ball.prototype.draw = function () { ctx.fillStyle = this.color; ctx.save(); ctx.translate(this.x, this.y); ctx.beginPath(); ctx.arc(this.r,this.r,this.r,0,Math.PI*2,false); ctx.fill(); ctx.restore(); }; this.draw(); this.dy += gravity; this.x += this.dx; this.y += this.dy; if (this.y + this.r > ctx.canvas.height) { this.dy = -this.dy * friction; this.y = ctx.canvas.height - this.r; } }); // This function is only executed once. It must be the last piece of code in your program. function init () { offset = { x: 0, y: 0}; Ball = function (x,y,r,dx,dy,color) { this.x = x; this.y = y; this.r = r; this.dx = dx; this.dy = dy; this.color = color; } balls = []; balls.push(new Ball(0,0,10,1,0,"red")); balls.push(new Ball(50,10,20,.5,0,"blue")); }
function drawHeart() { ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20 + Math.sin(s)*5,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80 + Math.sin(s)*5,40,102,75,120); ctx.bezierCurveTo(110 + Math.sin(s)*5,102,130,80,130,62.5 ); ctx.bezierCurveTo(130,62.5+ Math.sin(s)*5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } ctx.save(); ctx.translate(offset.x, offset.y); drawHeart(); ctx.restore(); offset.x += Math.sin(r); offset.y += Math.cos(r); s += .4; r += .1; function init() { offset = {x: ctx.canvas.width/2 - 100, y: ctx.canvas.height/2 - 100}; s = 0; r = 0; }
Character.prototype.draw = function(row, col) { if (row >= 0) { ctx.drawImage(this.image, this.width * col, row * this.height, this.width, this.height, Math.round(this.x), Math.round(this.y), this.width, this.height); } else { ctx.save(); ctx.scale(-1,1); row = -row; ctx.drawImage(this.image, this.width * col, row * this.height, this.width, this.height, -Math.round(this.x) - this.width, Math.round(this.y), this.width, this.height); ctx.restore(); } } Character.prototype.nextFrame = function() { this.draw(this.direction, this.frame); if (time % 10 == 0) this.frame = this.frame < 2 ? this.frame + 1 : 0; } time++; guy.y += guy.dy; guy.x += guy.dx; guy.nextFrame(); if (guy.y > 200) { guy.dy = 0; guy.dx = 1; guy.y = 200 } else if (guy.x > 300) { guy.dy = -1; guy.dx = 0; guy.x = 300; } else if (guy.y < 50) { guy.dy = 0; guy.dx = -1; guy.y = 50; } else if (guy.x < 50) { guy.dy = 1; guy.dx = 0; guy.x = 50; } if (Math.abs(guy.dx) > Math.abs(guy.dy)) { if (guy.dx > 0) guy.direction = RIGHT; else guy.direction = LEFT; } else { if (guy.dy > 0) guy.direction = DOWN; else guy.direction = UP; } function init () { time = 0; UP = 0; LEFT = -1; RIGHT = 1; DOWN = 2; Character = function (options) { this.image = new Image(); this.image.src = options.src; this.width = options.width; this.height = options.height; this.x = options.x; this.y = options.y; this.dy = 1; this.dx = 0; this.frame = 0; this.direction = DOWN; } guy = new Character({ src: "ch-guy.png", x: 50, y: 50, width: 24, height: 33 }); }
renderer.render(scene,camera); mesh.rotation.x += 0.05; mesh.rotation.y += 0.01; function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, ctx.canvas.width / ctx.canvas.height, 1, 10000 ); camera.position.z = 1000; scene.add(camera); geometry = new THREE.CubeGeometry( 300, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.CanvasRenderer({ canvas: document.getElementById("drawing") }); renderer.setSize( ctx.canvas.width, ctx.canvas.height ); }
renderer.render(scene,camera); function init() { camz = 3000; SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x111111, 0.00098 ); camera = new THREE.PerspectiveCamera( 60, ctx.canvas.width / ctx.canvas.height, 1, 10000 ); camera.position.z = camz; camera.position.y = 100; camera.lookAt(new THREE.Vector3(0,-94,0)); scene.add( camera ); // Ground var planeGeometry = new THREE.PlaneGeometry(10000,10000); var planeMaterial = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture( "Ratamahatta.jpg" ), shading:THREE.FlatShading, ambient: 0x666666, color: 0xffffff, specular: 0x666666, shininess: 1000000 } ); planeMaterial.map.repeat.x = 30; planeMaterial.map.repeat.y = 30; planeMaterial.map.wrapS = THREE.RepeatWrapping; planeMaterial.map.wrapT = THREE.RepeatWrapping; plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -Math.PI/2; plane.rotation.z = -Math.PI*0.75; plane.position.y = -94; plane.castShadow = false; plane.receiveShadow = true; scene.add( plane ); // Lights ambient = new THREE.AmbientLight( 0x333333 ); scene.add( ambient ); light = new THREE.SpotLight( 0xffffff ); light.position.set( 100, 350, 140 ); light.target.position.set( 0, -94, 0 ); light.castShadow = true; light.shadowCameraNear = 1; light.shadowCameraFar = camera.far; light.shadowCameraFov = 50; light.shadowBias = 0.000001; light.shadowDarkness = 0.15; light.shadowMapWidth = SHADOW_MAP_WIDTH; light.shadowMapHeight = SHADOW_MAP_HEIGHT; scene.add( light ); // Model loader = new THREE.JSONLoader(); material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture( "Ratamahatta.jpg" ), ambient: 0x999999, color: 0xffffff, specular: 0xffffff, shininess: 25, morphTargets: true } ); loader.load( "testmodel.js", function( geometry ) { mesh = new THREE.MorphAnimMesh( geometry, material ); mesh.rotation.y = -Math.PI/2; mesh.scale.set(4,4,4); mesh.duration = 1000*20; mesh.castShadow = true; mesh.receiveShadow = false; scene.add( mesh ); } ); // renderer renderer = new THREE.CanvasRenderer({ canvas: document.getElementById("drawing"), antialias: false }); renderer.setClearColorHex( 0x111111, 1 ); renderer.setSize( ctx.canvas.width, ctx.canvas.height ); renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; has_gl = true; }
/* You can fiddle with this code and see the results live! Try selecting the amplitude (50) and moving the slider to change its value. */ amplitude = 50; function f(x) { return Math.sin((x + dx)/32) * Math.sin(dx/50) * amplitude; } ctx.fillStyle = "#ccc"; ctx.font = "10pt Helvetica"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.save(); ctx.translate(15, -20); ctx.beginPath(); for (var x = 0; x <= ctx.canvas.width; x++) { ctx.lineTo(x,ctx.canvas.height/2 - f(x)); if (x % 50 == 0) ctx.fillText(x, x , ctx.canvas.height); } for (var y = 0; y <= ctx.canvas.height; y++) { if (y % 50 == 0) ctx.fillText(y, 0 , ctx.canvas.height - y); } ctx.stroke(); ctx.restore(); dx += 0.5; function init(){ dx = 1; }
