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 : 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. Yaroslava Malash

Programming with PVector adding vectors PVector include add() method, for adding vectors. 1.A method called add() that takes another PVector object as its argument. 2. Adds the x and y components together . Live Example: https://www.khanacademy.org/computer-programming/bouncing-ball- with-pvector/6734144616792064 Yaroslava Malash

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 on 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