반응형
p5.scribble.js 손글씨 형태의 2D Object
[다운로드]
http://p5js.org/download/ (p5.js, p5.min.js)
https://github.com/generative-light/p5.scribble.js (p5.scribble.js)
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scribble library Sample</title>
<script src="/javascripts/lib/p5.js"></script>
<script src="/javascripts/lib/p5.scribble.js"></script>
<script src="/javascripts/scribble.js"></script>
</head>
<body>
<div id="myContainer"></div>
</body>
</html>
[scribble.js]
var scribble = new Scribble();
var x0=100;
var y0=100;
var w=50;
var h=50;
var x1=50;
var y1=175;
var x2=100;
var y2=225;
var x3=150;
var y3=100;
var x4=190;
var y4=190;
function setup() {
canvas = createCanvas(1000, 500);
// an array with some values
var values = [ 16, 35, 78, 95, 70, 64, 32, 10, -10, -32, -64, -32 ];
// calculate a few sizes
var width = ( windowWidth * 0.4 * 0.98 ) / values.length;
var spacer = ( windowWidth * 0.2 * 0.98 ) / ( values.length + 1 );
var halfHeight = windowHeight / 4;
// create an instance of scribble and set a few parameters
scribble.bowing = 0.1;
scribble.roughness = 1.5;
// draw a horizontal line across the center of the screen
scribble.scribbleLine( 0, halfHeight, windowWidth, halfHeight );
// draw every value as a filled rect in a bar graph
for ( var i = 0; i < values.length; i++ ) {
// calculate the x and y coordinates of the center of the rect and the height
var h = halfHeight * 0.01 * values[i];
var x = ( spacer + width ) * ( i + 1 ) - ( width / 2 );
var y = halfHeight - h / 2;
// set the thikness of the rect lines
strokeWeight(5);
// set the color of the rect lines to black
stroke(0);
// draw a rect for the value
scribble.scribbleRect(x, y, width, h);
// calculate the x and y coordinates for the border points of the hachure
var xleft = x - width / 2 + 5;
var xright = x + width / 2 - 5;
var ytop = y - ( halfHeight * 0.01 * values[i] / 2 );
var ybottom = y + ( halfHeight * 0.01 * values[i] / 2 );
// reduce the sizes to fit in the rect
if (ytop > ybottom) {
ytop -= 5;
ybottom += 5;
} else {
ytop += 5;
ybottom -= 5;
}
// the x coordinates of the border points of the hachure
var xCoords = [xleft, xright, xright, xleft];
// the y coordinates of the border points of the hachure
var yCoords = [ytop, ytop, ybottom, ybottom];
// the gap between two hachure lines
var gap = 3.5;
// the angle of the hachure in degrees
var angle = 315;
// set the thikness of our hachure lines
strokeWeight(3);
//set the color of the hachure to a nice blue
stroke(0, 50, 180);
// fill the rect with a hachure
scribble.scribbleFilling(xCoords, yCoords, gap, angle);
}
stroke( 255, 0, 0 );
strokeWeight(2);
scribble.scribbleLine( x1, y1, x2, y2 );
scribble.scribbleEllipse( x0*2, y0*2, w, h );
//scribble.scribbleCurve( x1, y1, x2, y2, x3, y3, x4, y4 );
scribble.scribbleRect( x0*3, y0*2, w, h );
scribble.bowing = 5; // changes the bowing of lines 휘는정도
scribble.roughness = 1; // changes the roughness of lines 거칠기정도
scribble.maxOffset = 3; // coordinates will get an offset, here you define the max offset
scribble.numEllipseSteps = 3; // defines how much curves will be used to draw an ellipse
scribble.scribbleEllipse( x0*4, y0*2, w, h );
}
function draw() {
/*background(255);
if(scribble.roughness < 2){
scribble.roughness+=0.1;
}else if(scribble.roughness > 5){
scribble.roughness-=0.1;
}
scribble.scribbleEllipse( x*4, y*2, w, h );*/
}
[출처]
https://github.com/generative-light/p5.scribble.js
반응형
'Development > Processing' 카테고리의 다른 글
| p5.particle.js 2d 오브젝트의 파티클 라이브러리 (0) | 2017.04.20 |
|---|---|
| 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 |
