자바스크립트를 이용한 개인 프로젝트 - 3(업up 화면)

2021/04/01(목)

 

 

 

 

자바스크립트를 활용하여 영상처리 프로젝트 : 두번째 메인 화면 구현(두번째 슬라이드)

 

 

 

 

메인화면의 구성같은 경우 그 전에 첫번째 메인화면 구성과 같다

https://cordingdoah.tistory.com/85

자바스크립트를 이용한 개인 프로젝트 - 2(인어 공주 화면)

 

 

 

 

<코드 구현>

<app2.js>

import { GlowParticle } from "./glowparticle.js";

const COLORS = [
    {r:41, g:72, b:152, a:0.4},   //blue
    {r:242, g:188, b:82, a:0.6},   //yellow
    {r:239, g:158, b:187, a:1},  //pupple
    {r:190, g:224, b:252, a:0.6},  //skyblue
    {r:178, g:204, b:103, a:0.5},   //green
    {r:210, g:53, b:46, a:0.3},   //red
    {r:235, g:101, b:48, a:0.8},   //주황
];

class App2{
    constructor() {
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        document.body.appendChild(this.canvas);

        this.pixelRatio = (window.devicePixelRatio > 1) ? 2:1;

        this.totalParticles = 20;
        this.particles = [];
        this.maxRadius = 90;
        this.minRadius = 40;

        window.addEventListener('resize', this.resize.bind(this), false);
        this.resize();

        window.requestAnimationFrame(this.animate.bind(this));
    }

    resize(){
        this.stageWidth = document.body.clientWidth;
        this.stageHeight = document.body.clientHeight;

        this.canvas.width = this.stageWidth * this.pixelRatio;
        this.canvas.height = this.stageHeight * this.pixelRatio;
        this.ctx.scale(this.pixelRatio, this.pixelRatio);

        this.createParticles();
    }

    createParticles(){
        let curColor = 0;
        this.particles = [];

        for(let i =0; i<this.totalParticles; i++){
            const item = new GlowParticle(
                Math.random() * this.stageWidth,
                Math.random() & this.stageHeight,
                Math.random() * 
                (this.maxRadius - this.minRadius) + this.minRadius,
                COLORS[curColor]

            );

            if(++curColor >= COLORS.length){
                curColor = 0;
            }

            this.particles[i] = item;
        }
    }

    animate(){
        window.requestAnimationFrame(this.animate.bind(this));

        this.ctx.clearRect(0,0, this.stageWidth, this.stageHeight);

        for(let i=0; i< this.totalParticles; i++){
            const item = this.particles[i];
            item.animate(this.ctx, this.stageWidth, this.stageHeight);
        }
    }
}

window.onload = () => {
    new App2();
}

 

 

 

 

<glowparticle.js>

const PI2 = Math.PI *2;

export class GlowParticle{
    constructor(x, y, radius, rgb){
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.rgb = rgb;

        this.vx = Math.random() *4;
        this.vy = Math.random() *4;

        this.sinValue = Math.random();

    }

    animate(ctx, stageWidth, stageHeight){
        this.sinValue +=0.01;
        this.radius += Math.sin(this.sinValue);

        this.x += this.vx;
        this.y += this.vy;

        if(this.x < 0){
            this.vx *= -1;
            this.x +=10;
        }else if( this.x > stageWidth){
            this.vx *=-1;
            this.x -=10;
        }

        if(this.y < 0){
            this.vy *= -1;
            this.y +=10;
        }else if( this.y > stageHeight){
            this.vy *=-1;
            this.y -=10;
        }

        ctx.beginPath();

        const g = ctx.createRadialGradient(
            this.x, 
            this.y,
            this.radius *0.01,
            this.x,
            this.y,
            this.radius
        );

       
        g.addColorStop(0,`rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${this.rgb.a})`);
        g.addColorStop(1,`rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b},${this.rgb.a})`);
        ctx.fillStyle = g;
        ctx.arc(this.x, this.y, this.radius, 0, PI2 , false);
        ctx.fill();
        

    }
}

 

간략한 설명

20개의 공을 선언하고 공이 90까지 커지면 줄어들고 40까지 작아지면 다시 커지게 하는 js 구현

particle의 경우 공이 움직이다가 캔버스의 테두리까지 올 경우 위치를 줄여주도록 if-else문 구현

 

 

 

 

참고 : 인터렉티브 디벨로퍼

https://www.youtube.com/user/cmiscm

Interactive Developer