p5.js를 웹 페이지 배경으로 설정하는 방법

16544 단어 HTMLCSS자바스크립트p5.js

p5.js란?



p5.js란 디지털 아트 등을 만들 수 있는 Processing이라는 프로그래밍 언어의 javascript판 라이브러리입니다.
자바 스크립트에서 사용할 수 있으므로 웹 페이지에 통합 할 수 있습니다.

공식 사이트
htps // p5js. rg/

OpenProcessing(가득 작례가 실려 있는 사이트)
htps //w w. 오페로세신 g. 오 rg / b w

p5.js를 웹 페이지 배경으로 설정하는 방법



다운로드



먼저 p5.js의 다운로드 (h tp : // p5js. 오 rg / 도w 응아 d /)에서 p5.js complete를 다운로드하십시오. 이번에는 그 안의 p5.min.js와 p5.dom.min.js를 사용합니다.

준비



이하의 설명에서는 폴더, 파일의 구성은 이하와 같이 되어 있는 것으로 합니다.
projectFolder/
├ index.html
├ css/
| 　└style.css
├ js/
|　└ sketch.js
└ library/
├ p5.min.js
　└ p5.dom.min.js

이번에 sketch.js의 샘플로서 OpenProcessing에 업 되고 있는 이쪽의 작품 를 사용하겠습니다.

페이지 상단 중앙의 </>를 클릭하면 코드를 볼 수 있으므로 sketch.js에 복사하십시오.

HTML



HTML에서 p5.js를 사용하려면 <head>에 다음과 같이 작성하십시오.
<head>
　<link rel="stylesheet" href="css/style.css">

  <!-- ここからp5.jsのための記述 -->
  <script src="library/p5.min.js"></script>
  <script src="library/p5.dom.min.js"></script>
  <script src="js/sketch.js"></script>
</head>

테스트를 위해 HTML 파일 전체는 다음과 같이 둡니다.

index.html
<!doctype html>
<head>

  <link rel="stylesheet" href="css/style.css">

  <script src="library/p5.min.js"></script>
  <script src="library/p5.dom.min.js"></script>
  <script src="js/sketch.js"></script>

  <title>Hello, world!</title>
</head>
<body style="color: #FFF">
  <br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A
</body>
</html>



현시점에서는 스크롤하면 아래쪽에 이런 느낌의 것이 움직이고 있다고 생각합니다.

CSS, javascript



여기에서 CSS와 javascript를 기술해 갑니다만, 페이지를 스크롤해도 배경을 고정하고 싶은 경우와, 배경마다 스크롤하고 싶은 경우로 기술이 바뀝니다.

배경을 고정하려는 경우




위의 gif처럼 스크롤해도 배경을 고정해 두고 싶은 경우는 CSS를 아래와 같이 기술합니다.

style.css
#defaultCanvas0{
  position: fixed; /*canvasを固定*/
  top: 0; /*canvasを上に固定*/
}

sketch.js는 다음과 같이 변경하십시오.

sketch.js
//省略
var noiseScale = 800;

var canvas;

/*
 * ウィンドウの大きさが変更されたときに背景が再度描画されるように
 * 元々setup()にあった処理をここに移動した
 */
function canvasSetup(){
    background(21, 8, 50);
    for(var i = 0; i < nums; i++){
        particles_a[i] = new Particle(random(0, width),random(0,height));
        particles_b[i] = new Particle(random(0, width),random(0,height));
        particles_c[i] = new Particle(random(0, width),random(0,height));
    }
}

function windowResized(){
    resizeCanvas(windowWidth, windowHeight);
    canvasSetup();
}

function setup() {
    canvas = createCanvas(windowWidth, windowHeight);//ブラウザのウィンドウサイズに合わせてcanvas作成
    canvas.style('z-index','-1');//canvasを後ろに移動する。

    canvasSetup();
}

function draw(){
    //省略
}

배경도 스크롤하고 싶다면




위의 gif처럼 배경도 스크롤하는 경우 CSS는 설명이 필요하지 않습니다.

sketch.js는 다음과 같이 변경하십시오.

sketch.js
//省略
var noiseScale = 800;

var canvas;

/*
 * ウィンドウの大きさが変更されたときに背景が再度描画されるように
 * 元々setup()にあった処理をここに移動した
 */
function canvasSetup(){
    background(21, 8, 50);
    for(var i = 0; i < nums; i++){
        particles_a[i] = new Particle(random(0, width),random(0,height));
        particles_b[i] = new Particle(random(0, width),random(0,height));
        particles_c[i] = new Particle(random(0, width),random(0,height));
    }
}

function windowResized(){
    resizeCanvas(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
    canvasSetup();
}

function setup() {
    //ページのサイズに合わせてcanvasを作成
    canvas = createCanvas(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
    canvas.position(0,0);//canvasをページの原点に固定
    canvas.style('z-index','-1');//canvasを後ろに移動する。

    canvasSetup();
}

function draw(){
    //省略
}

이제 p5.js를 배경으로 설정할 수있었습니다.

세련된 웹 페이지를 만드십시오!

참고



[동영상]Q&A #6: p5.js Sketch as Background
htps //w w. 요츠베. 이 m/와 tch? v=오이후 HD3KqCg
p5.js 공부용 자료 ~환경 구축편~
p5.js로 이미지를 읽어 로컬 실행했을 때의 CORS 에러의 대책

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage