Answer table

Comment on this blog post to submit your hacks.

Fill out the table with your full name and the LETTER of each answer for every question. In order to receive any credit you must fill out the answer table according to the directions! Each question is worth .1 points. To get >0.9/1 you can show your understanding in the area labeled extra.

Extra

Show your understanding. You could make a simple simulation, define vocab, etc.

Boyle's law Visualization (P1V1=P2V2)

• The javascript code simulates 10 gas particles colliding with the border of its container with altering pressures and values according to Boyle's law

  P

  V

  # of Border Collisions:

  </li> </ul>

  </body>

  • let container = document.getElementById("container")
     let pressure = document.getElementById("pressure")
     let volume = document.getElementById("volume")
     let collisions = document.getElementById("volume")
     let context = container.getContext("2d")
    
     let borderCollisions = 0
    
     let scaling = 200
    
     let particles = [],
       radius = 5,
       boundaryX = 200,
       boundaryY = 200,
       numberOfParticles = 10
    
     init()
    
     volume.oninput = () => { calculatePressure() }
     pressure.oninput = () => { calculateVolume() }
    
     // calculate the new volume & scale
     function calculateVolume() {
       let newVolume = (50 * 50) / pressure.value
       volume.value = newVolume
    
       scale()
     }
    
     // calculate the new pressure & scale
     function calculatePressure() {
       let newPressure = (50 * 50) / volume.value
       pressure.value = newPressure
    
       scale()
     }
    
     // find the scale factor & set the values
     function scale() {
       scaling = 200*volume.value/50
    
       context.clearRect(0, 0, 200, 200)
    
       container.width = scaling
       container.height = scaling
    
       boundaryX = scaling
       boundaryY = scaling
     }
    
     function init() {
       for (let i = 0; i < numberOfParticles; i++) {
         createParticle()
       }
    
       animate()
     }
    
     function createParticle() {
       let particle = {}, vx2, vy2
       particle.x = Math.random() * boundaryX
       particle.y = Math.random() * boundaryY
    
       particle.vx = 4 * Math.random()
    
       particle.vy = 4 * Math.random()
    
       particles.push(particle)
     }
    
     function drawParticle(x, y) {
       context.beginPath()
       context.arc(x, y, radius, 0, 2 * Math.PI, false)
       context.fillStyle = 'red'
       context.fill()
     }
    
     function resetVelocity(particle, axis) {
       // invert x or y velocity
       if (axis == 'x') {
         particle.vx = -1 * particle.vx
       } else {
         particle.vy = -1 * particle.vy
       }
    
       borderCollisions++
     }
    
     function draw() {
       for (let i = 0, l = particles.length; i < l; i++) {
    
         let particle = particles[i]
    
         // change particle position
         particle.x += particle.vx
         particle.y += particle.vy
    
         drawParticle(particle.x, particle.y)
    
         // reset velocity in the instance of a boundary contact
         if (particle.x < 0 + radius) {
           resetVelocity(particle, 'x')
         } else if (particle.x > boundaryX - radius) {
           resetVelocity(particle, 'x')
         } else if (particle.y < 0 + radius) {
           resetVelocity(particle, 'y')
         } else if (particle.y > boundaryY - radius) {
           resetVelocity(particle, 'y')
         }
       }
     }
    
     function animate() {
       context.clearRect(0, 0, scaling, scaling)
       draw()
       requestAnimationFrame(animate)
     }
    
     function update() {
       document.getElementById("pressure-header").innerHTML = "P1=50 | P2=" + pressure.value
       document.getElementById("volume-header").innerHTML = "V1=50 | V2=" + volume.value
       document.getElementById("collisions").innerHTML = "# of Border Collisions: " + borderCollisions
     }
    
     setInterval(update, 500)
    

  </div> </div> </div> </div>