using Processing.js Yaroslava MALASH Tartu, Estonia 2015 Outline - - PowerPoint PPT Presentation

MTAT.03.305 Computer Graphics Seminar

Natural simulation with JavaScript using Processing.js

Yaroslava MALASH

Tartu, Estonia 2015

Outline

Introduction Randomness Noise Vectors Oscillation Angular movements Particle systems References and Links

Yaroslava Malash

Introduction

Simulation is the imitation of the operation of a real-world process or system over time. Natural simulation ?

Yaroslava Malash

Where is used for?

• Science
• Medicine
• Computer games
• Browser games
• Data Visualization
• Music industry

Yaroslava Malash

Some video examples

Smoothed-particle hydrodynamics (SPH) Fluid Simulation Computational method used for simulating fluid flows. https://www.youtube.com/watch?v=1GgWLdxfI-o in JavaScript http://mattbierbaum.github.io/moshpits.js/ - Moshpits Simulation JavaScript Physics Simulation - Stacked circles with equal mass https://www.youtube.com/watch?v=GPVOIAuMkXg

Yaroslava Malash

Processing.js

Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games,

• etc. work using web standards and without any plug-ins.

Supports: Chrome, FF, Opera, IE+8, iPhone, iPad License: Open-source Built on: JavaScript and HTML5

http://processingjs.org/articles/jsQuickStart.html#whatisprocessing Yaroslava Malash

Randomness

Randomness means lack of pattern or predictability in events.

“Random events are individually unpredictable, but the frequency of different outcomes over a large number of events (or "trials") are frequently predictable” Randomness has many uses in art, statistics, cryptography, gambling, etc.

More http://en.wikipedia.org/wiki/Applications_of_randomness

Yaroslava Malash

Randomness - Random Walks

• 1. Define an object - Walker with x-location and y-location,

We’ll set those data into construction function, setting them to the center of canvas

• 2. Define a method that allows the object to display itself.

We add a methods in JavaScript by attaching them to the object prototype

Yaroslava Malash

Randomness - Random Walks

• 3. The second method directs the Walker object to take steps:
• A step to the right x(x++)
• A step to the left x(x--)
• Forward by going down pixel y(y++)
• Backward by going pixel y(y--)

When we want to choose randomly from a list of options we can pick a random number, using random() The above lines of code picks a random floating points between 0 and 4 converts it to a whole number by using floor()

http://processingjs.org/reference/floor_/ Yaroslava Malash

Randomness - Random Walks

• 4. Next, we take the appropriate step (left, right, up, or down)

depending on which random number was picked.

• 5. Writing a class, time to make an actual Walker object

Yaroslava Malash

Randomness - Random Walks

• 6. We define the draw() function and tell the Walker to take

steps and draw itself each time it’s called Live Example: https://www.khanacademy.org/computer- programming/random-walker-basic/4991961219989504

Yaroslava Malash

Noise

Noise is a texturing primitive you can use to create a very wide variety of natural looking textures.

• A texturing primitive
• Use it to create "natural" looking textures
• No memory/bandwidth requirements
• No mapping problem (no source image)
• Very wide variety of effects

Yaroslava Malash

Noise – Perlin Noise

“Perlin noise” – an algorithm named for its inventor Ken Perlin

Perlin noise can be used to generate various effects with natural qualities, such as clouds, landscapes, and patterned textures like marble Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function.

Yaroslava Malash

Noise - Perlin Noise

ProcessingJS has a built-in implementation of the Perlin noise algorithm: the function noise(). Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program). Processing can compute 1D, 2D and 3D noise, depending on the number of coordinates given.

http://processingjs.org/reference/noise_/ Yaroslava Malash

Noise - Perlin Noise

ProcessingJS implementation: IMPORTANT!

A noise() expects to pass in an argument that signifies a "moment in time," and always returns a value between 0 and 1 will return 0.490 at time equals 0.03

Yaroslava Malash

Noise - Perlin Noise

If we increment the time variable t, we’ll get a different result  How quickly we increment t also affects the smoothness of the

• noise. If we make large jumps in time, then we are skipping

ahead and the values will be more random.

Yaroslava Malash

Noise - Perlin Noise

Mapping Noise

The map() function takes five arguments:

• 1. First up is the value we want to map – n
• 2. The value’s current range (minimum and maximum)
• 3. We know that noise has a range between 0 and 1, but we’d like to

draw a rectangle with a width between 0 and the current width.

Live Example: https://www.khanacademy.org/computer-programming/noisy- rectangle/6454127177498624

Yaroslava Malash

Vector

Vector - defined as an entity that has both magnitude and direction by Euclidean

A vector is typically drawn as a arrow; the direction is indicated by where the arrow is pointing, and the magnitude by the length of the arrow itself.

Yaroslava Malash

Vector

Why use vector? Case study: bouncing ball

Yaroslava Malash

Vector

In a more advanced program, we could imagine having many more variables:

For every concept in this world (wind, location, acceleration) we’ll need two

• variables. And only for 2D world, in 3D we’ll need x, y, z, xspeed, yspeed,

zspeed, etc. Wouldn’t it be nice if we could simplify our code and use fewer variables?

Yaroslava Malash

Vector

We could simply have two variables, where each variable is a vector-like object with two dimensions of information: It will simplify your code and provide a set of functions for common mathematical operations that happen over and over and over again while programming motion.

Yaroslava Malash

Programming with PVector

For every frame of animation (i.e. a single cycle through ProcessingJS’s draw() loop), instruct each object on the screen to move a certain number of pixels horizontally and a certain number of pixels vertically. new location = velocity applied to current location What’s location?

Yaroslava Malash

Programming with PVector

Hence, a location can be the vector representing the difference between location and origin.

Yaroslava Malash

Programming with PVector

Writing a vector class: PVector is just a convenient way to store two values

• >

Now that we have two vector objects (location and velocity), we’re ready to implement the algorithm for motion—location = location + velocity

Yaroslava Malash

Programming with PVector

adding vectors

A bit math:

Yaroslava Malash

Each vector has two components, an x and a y. To add two vectors together, we simply add both x’s and both y’s.

Programming with PVector

adding vectors

PVector include add() method, for adding vectors.

Live Example: https://www.khanacademy.org/computer-programming/bouncing-ball- with-pvector/6734144616792064

Yaroslava Malash

1.A method called add() that takes another PVector object as its argument.

• 2. Adds the x and y components together.

Force

Newton’s First Law

“An object at rest stays at rest and an object in motion stays in motion at a constant speed and direction unless acted upon by an unbalanced force”.

Yaroslava Malash

Force

Newton’s Second Law

“Force equals mass times acceleration”

The bigger you are, the slower you’ll move

Yaroslava Malash

Force

Newton’s Third Law

“For every action there is an equal and opposite reaction”

Yaroslava Malash

Force

The mass of an object is a measure of the amount of matter in the object. Weight, though often mistaken for mass, is technically the force of gravity on an object. Density is defined as the amount of mass per unit of volume (grams per cubic centimeter, for example).

Yaroslava Malash

Force

Using Processing.JS we will implement Newton’s Second Law

“Force equals mass times acceleration” 1.Create an object Mover, which has location, velocity, and acceleration

• 2. Need to add Force to the object

Where Wind and Gravity are PVectors

Yaroslava Malash

Force

What can be a problem? What is the value of acceleration when it is added to velocity? How are we going to handle more than one force?

Yaroslava Malash

Force

Net Force equals mass times acceleration. Our implementation of this is through a process known as force accumulation. At any given moment, there might be 1, 2, 6, 12, or 303 forces. Modify a bit the applyForce() Next step, we have to make sure that we clear acceleration acceleration (i.e. set it to zero) before each time update() is called.

Yaroslava Malash

Force

Acceleration, in our simulation, has no memory; it is simply calculated based

• n the environmental forces present at a moment in time.

The easiest way to implement clearing the acceleration for each frame is to multiply the PVector by 0 at the end of update().

Yaroslava Malash

Force

Dealing with Mass Mass is a scalar (float), not a vector, as it’s just one number describing the amount of matter in an object. Let’s add a mass with “1” to the Mover object. Where does mass come in? We use it while applying Newton’s second law to

• ur object.

div() - divides a vector by a scalar or divides one vector by another.

Yaroslava Malash

Force

Creating the Force Let’s start with the idea of simulating wind. Live example: https://www.khanacademy.org/computer- programming/mover-with-force-accumulation/4525763346825216

Yaroslava Malash

Angular movements

Angels and units

A radian is a unit of measurement for angles defined by the ratio of the length

• f the arc of a circle to the radius of that circle.

Radians=2*PI*(degrees/360)

180 degrees = PI radians, 360 degrees = 2*PI radians, 90 degrees = PI/2 radians, etc.

Yaroslava Malash

Angular movements

Angels and units

Processing.JS implementation for radians: Example of rotation the shape by 60 degree

Yaroslava Malash

Angular movements

Angular velocity

angel= angel+angular velocity angular velocity=angular velocity + angular acceleration An angle is a scalar quantity—a single number, not a vector!

Live example: https://www.khanacademy.org/computer-programming/spinning- baton/5179782058737664

Yaroslava Malash

Oscillations

Yaroslava Malash

Oscillations

Let’s consider y = sine(x)

This type of a behavior is known as oscillation, a periodic movement between two points.

Yaroslava Malash

Oscillating motion

• Plucking a guitar string
• Swinging a pendulum
• Bouncing on a pogo stick
• Swinging

Yaroslava Malash

Oscillations

A bit terminology: Amplitude: The distance from the center of motion to either extreme Period: The amount of time it takes for one complete cycle of motion

Yaroslava Malash

Oscillations

Let’s simulate “simple harmonic motion” For amplitude: Period is the amount of time it takes for one cycle but what is time in ProcessingJS? ProcessingJS gives us the frameCount variable to find out what frame we're currently on, and the frameRate() function to change the preferred frames per second.

Yaroslava Malash

Oscillations

Once we have the amplitude and period, it’s time to write a formula to calculate x as a function of time, which we will substitute the current frame count for.

Whatever comes out of the sine function we multiply by amplitude. We know that sine will oscillate between -1 and 1. If we take that value and multiply it by amplitude then we’ll get the desired result: a value oscillating between -amplitude and amplitude.

Yaroslava Malash

Oscillations

TWO_PI*frameCount / Period

We know that sine will repeat every 2*PI radian 1. frameCount/Period – amount of cycle we’ve completed 2. Multiplying by TWO_PI – the result 3. TWO_PI – is the number of radians required for one sine to complete the cycle Live example: https://www.khanacademy.org/computer-programming/simple-harmonic- motion/4920589909229568

Yaroslava Malash

More examples

• 1. My Life Aquatic by David Leibovic, Sunah Suh

http://mylifeaquatic.herokuapp.com/

• 2. Implementation of Incremental Delaunay Triangulation by

Jeonggyu Lee http://www.whyi.net/geometry/Delaunay/

• 3. Facebook linked data by http://mattryall.net/demo/atlassian-

vis/contributors/

• 4. Bit Torrent http://mg8.org/processing/bt.html

More examples: http://processingjs.org/exhibition/

Yaroslava Malash

Books

Yaroslava Malash

Reference

Daniel Shiffman

http://natureofcode.com/ Videos http://vimeo.com/channels/natureofcode

Yaroslava Malash

Questions?

Yaroslava Malash