Skip to content
George edited this page May 4, 2017 · 8 revisions

Serving the webpage locally

Using Browser-sync

$ gulp "browser-sync"

or

$ npm run build

Will also build the project and serve up the page.

Using Python

If you don't want to use npm, the easiest method is to serve up the build directory locally using python.

$ python -m SimpleHTTPServer

this by default runs on localhost:8000

$ python -m SimpleHTTPServer 8080

You can pass a port number if that is already taken.

Going to a website (The easy choice)

I have a copy running here..

Controls

  • Save Button - Clicking this opens a new tab with a .png of the current canvas. This can be used for downloading.
  • Reset button - Resets the canvas to blank.
Brush:
  • Size - Adjust this to set the approximate size of the brush in pixels.
  • Color - Select color of paint being applied.
  • Alpha - Adjust this to set the paints alpha(transparency). It ranges from 0 - 1.
  • Brush - Select a shape to use as the brush.
  • Dry Brush - This switches off any new paint being applied and allows you to push the paint around with the brush.
Canvas:
  • Scale - This refers to the scale of the canvas. For example working on a canvas of size 100x100px with scale 0.5, means that we would only be simulating 5,000 values instead of 10,000, giving a major performance improvement. Changing this will reset the canvas.
  • Size - Adjust this to change the size of the paint canvas. This will reset the canvas.
  • Undo - Undoes the last brush stroke. can undo a maximum of 4 brush strokes. Key shortcuts: U and Ctrl+Z.
  • Redo - Redoes the undone brush stroke. Key shortcuts: R and Ctrl+Y.
Fluids:
  • Pressure Iterations - This is the amount of iterations the pressure solver carries out. A higher number results in a more accurate simulation.
  • Frames Per Second - This value sets the desired frames per second for the canvas to render at.
  • Brush Force - Adjusts the amount of force exerted by the brush.
  • Liquid Timeout - The is the time in seconds that the canvas will continue to simulate after the mouse button has been lifted. A timeout of 0 will result in the fluid simulating indefinitely.
  • Dissipation - The dissipation value affects the advection of the simulation. The lower the value the quicker the fluid will slow. A value of 1 will mean that the fluid will not slow.
Clone this wiki locally