p5.js와 reveal.js로 브라우저에서 움직이는 대화식 프레젠테이션 만들기
어제의 기사는 @reona396의 p5.js 및 p5.speech에서 음성 합성 및 음성 인식이었습니다.
소개
p5.js는 브라우저에서 대화 형 표현을 할 수 있습니다.
reveal.js는 손쉽게 프리젠 테이션을 만들 수있는 프레임 워크입니다.
둘 다 js에서 작동한다는 점에서이 두 가지를 결합하면 브라우저에서 작동하는 대화 형 프리젠 테이션을 만들 수 있어야합니다.
그래서 이번에는 reveal.js, 특히 markdown에서 슬라이드를 쓰기 쉽게 한 vscode의 확장 기능 vscode-reveal에서 p5.js를 병용하는 방법을 소개합니다.
vscode-reveal로 프레젠테이션 만들기
slide.md
# Processing Advent Calander 2019
---
- reveal.js を使うと
--
- こんなスライドを作ることができます
VSCode에서 명령 팔레트를 열고
Revealjs: Open presentation in browser를 선택하면 브라우저에서 볼 수 있습니다.
p5.js 포함
HTML의 iframe 기능을 사용하여 reveal 슬라이드에 p5 캔버스를 포함합니다.
slide.md---
## p5.js を使う
---
- このようにスライドの中に p5 を埋め込むこともできます
<iframe src="1.html" class="canvas"></iframe>
1.html<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="./p5style.css" />
<script src="p5.min.js"></script>
<script src="main.js"></script>
</head>
</html>
p5style.css* {
padding: 0;
margin: 0;
background: transparent;
}
canvas {
display: block;
}
p5.js의 코드는 생략
(Adkare 9 일째 기사에서 만든 탄막 코드를 사용합니다.)
실행 결과는 다음과 같습니다.
캔버스 크기를 크게
지금은 p5의 캔버스 크기가 작고 취급하기가 어렵 기 때문에
크기를 늘립니다.
그러나 iframe p5 측의 설정이나 p5를 움직이는 html 파일의 스타일에서는 이 문제를 해결할 수 없기 때문에, reveal에 사용되고 있는 스타일을 변경해 갑니다
css 파일 가져오기
reveal.js에서 기본적으로 사용되는 CSS 파일은 htps : // 기주 b. 이 m/하키메 l/레ゔぇ아 l. js/bぉb/마s r/css/테아메/에 있습니다.
이번에는 이 안에서 디폴트치로 되어 있다 black.css (을)를 사용합니다
css 파일을 복사하여 이름을 적절하게 변경합니다 (변경하지 않아도 사실은 괜찮습니다)
이번에는 custom.css
그리고 markdown의 시작 부분에 다음을 추가합니다.
slide.md---
customTheme: 'custom'
---
custom 부분에 CSS 파일 이름을 넣으십시오.
이제 원래 스타일을 적용 할 수 있습니다.
p5 캔버스 크기 변경
다음 스타일을 추가합니다.
(!important)를 사용하는 것은 reveal 측에 스타일을 강제적으로 다시 쓸 수 있기 때문에 다소 강인하지만 이렇게합니다.
custom.css.canvas {
max-width: 100% !important;
max-height: 100% !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
position: fixed;
background-color: transparent;
}
iframe {
border: none;
}
.reveal .slides {
height: auto !important;
width: auto !important;
}
또한 다음 부분에 height: 100%도 추가합니다.
custom.css.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
이제 다음과 같이 보입니다.
문자가 사라졌다
문자가 p5 캔버스 뒤에 숨어 버렸기 때문에 보이지 않습니다.
문자와 p5의 공존을 가능하게 하려면, p5의 draw로 배경색을 투명하게 할 필요가 있습니다 (z-index를 재작성하는 방법은 한 번 시도했지만 잘 작동하지 않았습니다)
이것을 해결하기 위해서, p5 측의 코드를 조금 Fuck
이전 코드에서는 update()에서 background(0)를 호출했지만 clear()로 변경합니다.
그러면 아래와 같이 p5와 슬라이드 문자를 모두 표시 할 수 있습니다.
그렇다고는 해도 이 방법에서는 배경이 투명하다고 전제가 되어 버리므로, 표현에 제한이 걸려 버릴 것 같습니다...
또, 문자의 높이가 바뀌었던 건에 대해서는, 원래 중앙 가지런히 해 위로부터 묘화하게 되어 있던 것을, 억지로height: 100%로 했기 때문에, 필요에 따라서 top등을 Fuck해 주세요
끝에
이번에는 브라우저에서 움직이는 프리젠 테이션을 만드는 reveal.js에서 p5를 사용하는 이야기를 썼습니다.
LT 등 발표 기회가 있다면 꼭 활용해보십시오.
Reference
이 문제에 관하여(p5.js와 reveal.js로 브라우저에서 움직이는 대화식 프레젠테이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/WGG_SH/items/770f3a520b493de9c50a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
---
## p5.js を使う
---
- このようにスライドの中に p5 を埋め込むこともできます
<iframe src="1.html" class="canvas"></iframe>
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="./p5style.css" />
<script src="p5.min.js"></script>
<script src="main.js"></script>
</head>
</html>
* {
padding: 0;
margin: 0;
background: transparent;
}
canvas {
display: block;
}
지금은 p5의 캔버스 크기가 작고 취급하기가 어렵 기 때문에
크기를 늘립니다.
그러나 iframe p5 측의 설정이나 p5를 움직이는 html 파일의 스타일에서는 이 문제를 해결할 수 없기 때문에, reveal에 사용되고 있는 스타일을 변경해 갑니다
css 파일 가져오기
reveal.js에서 기본적으로 사용되는 CSS 파일은 htps : // 기주 b. 이 m/하키메 l/레ゔぇ아 l. js/bぉb/마s r/css/테아메/에 있습니다.
이번에는 이 안에서 디폴트치로 되어 있다
black.css (을)를 사용합니다css 파일을 복사하여 이름을 적절하게 변경합니다 (변경하지 않아도 사실은 괜찮습니다)
이번에는
custom.css그리고 markdown의 시작 부분에 다음을 추가합니다.
slide.md
---
customTheme: 'custom'
---
custom 부분에 CSS 파일 이름을 넣으십시오.이제 원래 스타일을 적용 할 수 있습니다.
p5 캔버스 크기 변경
다음 스타일을 추가합니다.
(
!important)를 사용하는 것은 reveal 측에 스타일을 강제적으로 다시 쓸 수 있기 때문에 다소 강인하지만 이렇게합니다.custom.css
.canvas {
max-width: 100% !important;
max-height: 100% !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
position: fixed;
background-color: transparent;
}
iframe {
border: none;
}
.reveal .slides {
height: auto !important;
width: auto !important;
}
또한 다음 부분에
height: 100%도 추가합니다.custom.css
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
이제 다음과 같이 보입니다.
문자가 사라졌다
문자가 p5 캔버스 뒤에 숨어 버렸기 때문에 보이지 않습니다.
문자와 p5의 공존을 가능하게 하려면, p5의 draw로 배경색을 투명하게 할 필요가 있습니다 (z-index를 재작성하는 방법은 한 번 시도했지만 잘 작동하지 않았습니다)
이것을 해결하기 위해서, p5 측의 코드를 조금 Fuck
이전 코드에서는
update()에서 background(0)를 호출했지만 clear()로 변경합니다.그러면 아래와 같이 p5와 슬라이드 문자를 모두 표시 할 수 있습니다.
그렇다고는 해도 이 방법에서는 배경이 투명하다고 전제가 되어 버리므로, 표현에 제한이 걸려 버릴 것 같습니다...
또, 문자의 높이가 바뀌었던 건에 대해서는, 원래 중앙 가지런히 해 위로부터 묘화하게 되어 있던 것을, 억지로
height: 100%로 했기 때문에, 필요에 따라서 top등을 Fuck해 주세요끝에
이번에는 브라우저에서 움직이는 프리젠 테이션을 만드는 reveal.js에서 p5를 사용하는 이야기를 썼습니다.
LT 등 발표 기회가 있다면 꼭 활용해보십시오.
Reference
이 문제에 관하여(p5.js와 reveal.js로 브라우저에서 움직이는 대화식 프레젠테이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/WGG_SH/items/770f3a520b493de9c50a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(p5.js와 reveal.js로 브라우저에서 움직이는 대화식 프레젠테이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/WGG_SH/items/770f3a520b493de9c50a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
