p5.js dom library, Beyond the canvas
[다운로드]
http://p5js.org/download/ (p5.js, p5.min.js)
[index.html]
<!DOCTYPE html>
<html>
<head>
<script src="/javascripts/p5.js"></script>
<script src="/javascripts/p5.dom.js"></script> //dom.js 스크립트 삽입
<script src="/javascripts/htmldom.js"></script>
</head>
<body>
<div id="myContainer"></div>
</body>
</html>
[htmldom.js]
js파일을 하나 만들어 아래 코드 삽입 후 테스트
var canvas;
function setup() {
canvas = createCanvas(600, 400);
canvas.parent('myContainer');
canvas.position(10, 10);
//listener
canvas.mouseOver(hideImg);
canvas.mouseOut(showImg);
canvas.mouseMoved(incDiameter);
canvas.mouseClicked(mouseClick);
//createDiv
text = createDiv('This is an <a href="#">HTML</a> string');
text.parent('myContainer');
text.position(100,70);
text.class('lemon');
//createImg
img = createImg("http://th07.deviantart.net/fs70/PRE/i/2011/260/3/5/dash_hooray_by_rainbowcrab-d49xk0d.png");
img.parent('myContainer');
img.position(450, 50);
img.size(200, 200);
//createElement
h1 = createElement('h1','this is some heading text');
h1.parent('myContainer');
//Searching
myDiv0 = createDiv('this is div 0');
myDiv0.class('selectTest');
myDiv1 = createDiv('this is div 1');
myDiv2 = createDiv('this is div 2');
myDiv2.class('selectTest');
//Setting style
text1 = createP("This is an HTML string with style");
text1.position(100,250);
/*text1.style("font-family","monospace");
text1.style("background-color", "#FF0000");
text1.style("color", "#FFFFFF");
text1.style("font-size", "18pt");
text1.style("padding", "10px");*/
text1.style("font-family:monospace; background-color:#FF0000; color:#FFFFFF; font-size:18pt; padding:10px;");
}
function draw() {
fill(255)
ellipse(width/2, height/2, 100, 100);
fill(gray)
ellipse(width/4, height/2, diameter, diameter);
stroke(180,100,240);
for(var i=0;i<width;i+=15){
line(i,height/2,i,height);
}
}
function hideImg() {
img.hide();
}
function showImg() {
img.show();
}
//global
function mouseMoved() {
gray -= 1;
}
//canvas local
function incDiameter() {
diameter += 1;
}
function mouseClick() {
var donkeys = selectAll('.selectTest');
// We can then iterate through the array and hide all the elements.
for (var i = 0; i < donkeys.length; i++) {
donkeys[i].hide();
}
text.remove();
}
[style.css]
public - css - style.css 파일을 하나 만들어서 아래 코드 테스트
.lemon {
font-family: monospace;
background-color: #FF0000;
color: #FFFFFF;
font-size: 18pt;
padding: 10px;
}
출처: https://github.com/processing/p5.js/wiki/Beyond-the-canvas
'Development > Processing' 카테고리의 다른 글
| p5.particle.js 2d 오브젝트의 파티클 라이브러리 (0) | 2017.04.20 |
|---|---|
| p5.scribble.js 손글씨 형태의 2D Object (0) | 2017.04.12 |
| p5.collide2d.js 2D geometry에서의 충돌 감지 (0) | 2017.03.24 |
| p5.js sound library, FFT 이용한 sound visualization (2) | 2017.03.14 |
