Juicebox

Juicebox is a library for adding juice to CodeHS JavaScript graphics programs.
To use it, include an import statement at the top of your program with the following: 
import juice from 'https://andy.codehs.me/cdn/juicebox/0.0.3/juice.js';
Importing JuiceBox will cause some automatic changes.

Usage

Automatic Changes

There are a few changes that happen automatically when you import Juicebox.

juice.GROW

Setting juice.GROW = true; causes elements being drawn to the screen to "bloop" into place with an elastic effect.

juice.SLAM

Setting juice.SLAM = true; causes elements being drawn to the screen to "slam" into place with a dramatic effect.

juice.OOZE

Setting juice.OOZE = true; causes elements to "ooze" when they're moved with setPosition.

juice.SOUND

Setting juice.SOUND = true; causes sounds to happen! When elements bloop in or slam in you'll hear a sound.
Things will only make sound if they bloop or slam, so only if juice.GROW or juice.SLAM are true.
(Click the canvas to make the sounds happen)

juice.BLEND

Setting juice.BLEND = true; causes changes in color to be smooth.

juice.LAZY_ADD = false;

Setting juice.LAZY_ADD = false; causes elements to add immediately (no juice 😭)

juice.dust()

This makes a wisp of dust. 
            
juice.dust(
    // x position of the dust burst
    x,
    // y position of the dust burst
    y,
    // the number of dust particles (default 5)
    nParticles,
    // the initial size of each particle (default 20)
    size,
    // the rate of shrinking for each particle (default 0.9)
    dRadius
);

Noises

The right noise at the right time can make a huge difference. Juicebox has a few noises.

juice.bonk()

This makes a bonking/crunching sound.

juice.fall()

This makes a zipping/falling sound.

Effects

Calling these functions will affect every element on the screen.

juice.shake()

This shakes every element on the screen. This takes some parameters, if you'd like to give them: 
            
juice.shake({
    // magnitude of the shake in pixels
    intensity: 5,
    // duration of the shake in milliseconds
    duration: 100,
    // amount of shake in the x direction. 0 is none, 1 is full
    dx: 1,
    // amount of shake in the y direction. 0 is none, 1 is full
    dy: 1,
    // amount of rotatino shake. 0 is none, 1 is full.
    dRotate: 1,
});
Shaking feels better if there's background elements that you can see shaking.

juice.shockwave(x, y)

This makes a shockwave at the given position.