Skip to content

Commit

Permalink
Clean up README.md formatting
Browse files Browse the repository at this point in the history 
* Add  code styling
* Remove `<br>`
  • Loading branch information
@taktran
taktran committed Apr 17, 2016
1 parent 411da37 commit 62372ec
Showing 1 changed file with 90 additions and 73 deletions.
163 changes: 90 additions & 73 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,112 +24,129 @@ per-particle properties.
A Particle terminates and is deallocated when 1) its "life" is greater than or equal one, 2) its "partSize" is less than 0.1,
or 3) its "location" is greater than the canvas height.

function Particle() {<br>
this.velocity = createVector(); // applied to location every Step<br>
this.partSize = 0; // typically width and height, scale factor for images ( 1 means no scaling)<br>
this.location = createVector(); // center of all shapes and images<br>
this.life = 0; // 0 to 1<br>
this.rotation = 0; // in degrees<br>
this.id = 0; // unique id counter per Fountain<br>
```
function Particle() {
this.velocity = createVector(); // applied to location every Step
this.partSize = 0; // typically width and height, scale factor for images ( 1 means no scaling)
this.location = createVector(); // center of all shapes and images
this.life = 0; // 0 to 1
this.rotation = 0; // in degrees
this.id = 0; // unique id counter per Fountain
}
```

## Fountain

A Fountain object encapsulates all the properties needed for Particle creation.
A Fountain definition is data driven.
The input can come from a user-created object, or a JSON file or string.

Fountain(defs, nameOrF [ , x, y]) // xy, if present, override the data input location<br>
(JSON object, name of a particle definition) OR<br>
(null, user-created particle definition)
```
// xy, if present, overrides the data input location
// (JSON object, name of a particle definition) OR
// (null, user-created particle definition)
Fountain(defs, nameOrF [ , x, y]);
var x = new Fountain(null, objectDef);
x.length // number of active particles<br>
x.left // number of particles left to create<br>
x.length // number of active particles
x.left // number of particles left to create
x.done // Fountain has generated all particles and they have all terminated
x.Draw(); // Draw all particles<br>
x.Step(); // Step all particles, e.g. location.add(velocity)<br>
x.Stop(); // Set left=0 and clear all active particles<br>
x.Create( [ x, y [, angle]]); // Create one particle, returns a Particle object or null if left==0<br>
x.Draw(); // Draw all particles
x.Step(); // Step all particles, e.g. location.add(velocity)
x.Stop(); // Set left=0 and clear all active particles
x.Create( [ x, y [, angle]]); // Create one particle, returns a Particle object or null if left==0
x.CreateN( [ x, y [, angle]]); // Uses a Fountain's "rate" property to create bursts of particles
```

Particle drawing is totally up to the user.
The following function can be called to extend the set of default drawing routines.

function Fountain_display(name, proc) {<br>
fdisplay[name] = proc;<br>
```
function Fountain_display(name, proc) {
fdisplay[name] = proc;
}
```

Here is an example of one of the default drawing routines (shape name "point").
Note that the choice of color changes as the "life" property progresses from 0 to 1.

function fpoint(fountain, particle) {<br>
stroke(fountain.colors[Math.floor(particle.life*fountain.colors.length)]);<br>
noFill(); <br>
point(particle.location.x, particle.location.y);<br>
```
function fpoint(fountain, particle) {
stroke(fountain.colors[Math.floor(particle.life*fountain.colors.length)]);
noFill();
point(particle.location.x, particle.location.y);
}
```

The default shape options for drawing are listed next:

The default shape options for drawing are listed next:<br>
"ellipse"_____filled ellipse partSize x partSize, color based on life<br>
"ellipse2"____filled ellipse partSize x partSize, color based on id<br>
"image"_____tinted image, color based on life, rotated by angle, and scaled by partSize<br>
"point"_______point, color based on life<br>
"rect"________filled rectangle partSize x partSize, color based on life, no rotation<br>
* `ellipse`: filled ellipse partSize x partSize, color based on life
* `ellipse2`: filled ellipse partSize x partSize, color based on id
* `image`: tinted image, color based on life, rotated by angle, and scaled by partSize
* `point: point, color based on life
* `rect`: filled rectangle partSize x partSize, color based on life, no rotation

Examples can be found at [jsfiddle.net](http://jsfiddle.net/bobcook/cr1t6fzg/):

Examples can be found at [jsfiddle.net](http://jsfiddle.net/bobcook/cr1t6fzg/).<br>
[Particle #1 JSON Example](http://jsfiddle.net/bobcook/cr1t6fzg/)<br>
[Particle #2 User Structure](http://jsfiddle.net/bobcook/53h2uss8/)<br>
[Particle #3 User Drawing Function](http://jsfiddle.net/bobcook/mph714p8/)<br>
[Particle #4 Vary speed with speedx](http://jsfiddle.net/bobcook/en4he5vt/)<br>
[Particle #5 Generation patterns with rate](http://jsfiddle.net/bobcook/rLvhc8h2/)
* [Particle #1 JSON Example](http://jsfiddle.net/bobcook/cr1t6fzg/)
* [Particle #2 User Structure](http://jsfiddle.net/bobcook/53h2uss8/)
* [Particle #3 User Drawing Function](http://jsfiddle.net/bobcook/mph714p8/)
* [Particle #4 Vary speed with speedx](http://jsfiddle.net/bobcook/en4he5vt/)
* [Particle #5 Generation patterns with rate](http://jsfiddle.net/bobcook/rLvhc8h2/)

TESTING: Tested on Internet Explorer, Firefox, Chrome, ChromeBook, Edge

## Fountain/Particle Definition Properties
The object definition passed to the Fountain constructor can be user-defined or JSON as follows:<br>

var t =<br>
'{ ' +<br>
' "parts": [ ' +<br>
' { ' +<br>
' "name": "foo", ' +<br>
' "color": ' +<br>
' ["yellow"] ' +<br>
'}]}';<br>

var u = <br>
{name: "test",<br>
size: [2,8],<br>
angle: [250, 290],<br>
color: ["blue"],<br>
rate: [200,10,200,0]<br>
};<br>
defs = JSON.parse(t);<br>
of = new Fountain(defs, 'foo');<br>
of2 = new Fountain(null, u);

acceleration_added to velocity on every step, default 0, omitted if gravity is specified<br>
angle[a,b]___random directional angle in degrees, default [0,0], initial velocity = angle*speed<br>
colors[a...]_array of color names or [r,g,b,a], sets this.colors, indexed by "life" fraction when drawing<br>
dxy[a,b]_____fraction of screen width/height, centered at xy, [-a:a,-b:b] defines generation box, default [0,0]<br>
file_________path string for an image file, sets this.image and this.f.image equal to loadImage<br>
gravity______applied to velocity.y at every Step, default 0.01, omitted if acceleration is specified<br>
lifetime_____number of steps for each particle to live, default 99999999<br>
limit________number of particles to generate, default 99999999<br>
rate[a,b...]_array of pairs [count, particles-to-generate-per-CreateN], default [0,1], cycles<br>
rotation_____angular velocity in degrees, default 0<br>
shape________string name of a "Draw" routine set by Fountain_display, default "ellipse"<br>
size[a,b]____randomly sets partSize, default [2,2]<br>
sizePercent__grow or shrink partSize on every Step, default 1<br>
speed________determines initial velocity, default 1<br>
speedx_______random add-on to speed at particle creation [-speedx,speedx], default 0<br>
x____________fraction of screen width<br>
y____________fraction of screen height

The object definition passed to the Fountain constructor can be user-defined or JSON as follows:

```
var t = '{' +
' "parts": [' +
' {' +
' "name": "foo",' +
' "color": ["yellow"]' +
' }' +
' ]
'}';
var u = {
name: "test",
size: [2,8],
angle: [250, 290],
color: ["blue"],
rate: [200,10,200,0]
};
defs = JSON.parse(t);
of = new Fountain(defs, 'foo');
of2 = new Fountain(null, u);
```

* `acceleration`: added to velocity on every step, default 0, omitted if gravity is specified
* `angle[a,b]`: random directional angle in degrees, default [0,0], initial velocity = angle*speed
* `colors[a...]`: array of color names or [r,g,b,a], sets this.colors, indexed by "life" fraction when drawing
* `dxy[a,b]`: fraction of screen width/height, centered at xy, [-a:a,-b:b] defines generation box, default [0,0]
* `file`: path string for an image file, sets this.image and this.f.image equal to loadImage
* `gravity`: applied to velocity.y at every Step, default 0.01, omitted if acceleration is specified
* `lifetime`: number of steps for each particle to live, default 99999999
* `limit`: number of particles to generate, default 99999999
* `rate[a,b...]`: array of pairs [count, particles-to-generate-per-CreateN], default [0,1], cycles
* `rotation`: angular velocity in degrees, default 0
* `shape`: string name of a "Draw" routine set by Fountain_display, default "ellipse"
* `size[a,b]`: randomly sets partSize, default [2,2]
* `sizePercent`: grow or shrink partSize on every Step, default 1
* `speed`: determines initial velocity, default 1
* `speedx`: random add-on to speed at particle creation [-speedx,speedx], default 0
* `x`: fraction of screen width
* `y`: fraction of screen height

## Issues

Report issues in this repo to kindlecbook at gmail.com

## License

There is no license. Use as you wish.

0 comments on commit 62372ec

Please sign in to comment.