p5.particle.js 2d 오브젝트의 파티클 라이브러리
[다운로드]
http://p5js.org/download/ (p5.js, p5.min.js)
https://github.com/bobcgausa/cook-js/blob/master/p5.particle.js (p5.particle.js)
[particle.ejs]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Particle library </title>
<script src="/javascripts/lib/p5.js"></script>
<script src="/javascripts/lib/p5.dom.js"></script>
<script src="/javascripts/lib/p5.particle.js"></script>
<script src="/javascripts/particle.js"></script>
</head>
<body>
<div id="myContainer">hello</div>
</body>
</html>
[particle.js]
var defs;
var of;
var t;
var s="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var s1 = "안녕 파티클 나는 너를 사용해 볼생각이야";
function ftext(fountain, particle) {
stroke(fountain.colors[Math.floor(particle.life*fountain.colors.length)]);
noFill();
textSize(particle.partSize);
text(s1.split(' ')[particle.id%s1.split(' ').length], particle.location.x, particle.location.y);
}
function setup() {
canvas = createCanvas(400, 400);
canvas.parent('myContainer');
canvas.position(10, 10);
/* #1 json 형태의 데이터
var t =
'{ ' +
' "parts": [ ' +
' { ' +
' "name": "foo", ' +
' "color": ' +
' ["orange",[255,0,0],"yellow","white","white"], ' +
' "shape": "rect", ' +
' "gravity": 0.1, ' +
' "sizePercent": 0.99, ' +
' "angle": [190,300], ' +
' "speed": 5.5, ' +
' "limit": 250, ' +
' "lifetime": 200, ' +
' "size": [4,12], ' +
' "x": 0.5, ' +
' "y": 0.5}]}';
defs = JSON.parse(t);
of = new Fountain(defs, 'foo');
*/
/* #2 사용자 정의형태의 데이터
var t =
{
name: "test",
colors: ["blue",[0,255,127,127],[0,255,64,32]],
lifetime: 600,
angle: [330,360],
x: 0.2,
y: 0.1
};
of = new Fountain(null, t);
*/
/*#3. 텍스트 형태의 데이터*/
t =
{
name: "test",
shape: "text",
colors: [[0,255,127,127],[0,255,64,32]],
lifetime: 100,
angle: [200, 240],
size: [12, 24],
speed: 2,
speedx: 1,
limit:s1.split(' ').length,
gravity: -0.001,
dxy: [0.2, 0.2],
x: 0.5,
y: 0.5
};
Fountain_display("text", ftext); //set draw function based on shape name
of = new Fountain(null, t);
/* #4. speedx로 다양한 speed 가짐
var t =
{
name: "test",
colors: ["blue","green","red"],
lifetime: 300,
angle: [330,360],
size: [2,8],
speedx: 0.7,
x: 0.2,
y: 0.1
};
of = new Fountain(null, t); */
/* #5. rate로 패턴 만들기
var t =
{
name: "test",
colors: ["blue","green","red"],
lifetime: 300,
angle: [260,280],
size: [2,8],
speed: 2,
speedx: 0.7,
//40 at .1 probability/step
//then 200 steps at 10 particles/step
rate: [40,0.1,200,10],
x: 0.5,
y: 0.8
};
of = new Fountain(null, t);*/
}
function draw() {
background(255);
of.Draw();
of.Create();
of.Step();
noStroke();
fill(0);
textSize(16);
text(of.length, width/2, 20);
stroke(0);
if(of.length < 1){
s1="두 번째 문장입니다. 새로운 데이터가 오면 새로운 파티클이 생성됩니다.";
t.limit = s1.split(" ").length;
Fountain_display("text", ftext); //set draw function based on shape name
of = new Fountain(null, t);
}
}
/*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*/
'Development > Processing' 카테고리의 다른 글
| p5.scribble.js 손글씨 형태의 2D Object (0) | 2017.04.12 |
|---|---|
| p5.collide2d.js 2D geometry에서의 충돌 감지 (0) | 2017.03.24 |
| p5.js dom library, Beyond the canvas (0) | 2017.03.15 |
| p5.js sound library, FFT 이용한 sound visualization (2) | 2017.03.14 |
