first

ikeryou · Jul 5, 2022 · f28c76c · f28c76c
commit f28c76c
Show file tree

Hide file tree

Showing 35 changed files with 2,045 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,17 @@
+# top-most EditorConfig file
+root = true
+
+# Base rules
+[*]
+#改行コード
+end_of_line = lf
+#ファイルの末尾が改行文字ではない場合に補完
+insert_final_newline = false
+indent_style = space
+indent_size = 2
+charset = utf-8
+#行末の空白文字を削除
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+_data
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>sketch 265</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <canvas class="l-main"></canvas>
+    <div class="l-text"></div>
+    <a class="link" href="https://github.com/ikeryou/sketch265" target="_blank">Github</a>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "sketch265",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/matter-js": "^0.17.7",
+    "@types/node": "^17.0.21",
+    "@types/three": "^0.141.0",
+    "autoprefixer": "^10.4.2",
+    "matter-js": "^0.18.0",
+    "postcss": "^8.4.6",
+    "snd-lib": "^1.0.1",
+    "three": "^0.141.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0",
+    "vite-plugin-glsl": "^0.0.8"
+  },
+  "dependencies": {
+    "current-device": "^0.10.2",
+    "gsap": "^3.9.1",
+    "lil-gui": "^0.16.0",
+    "stats.js": "^0.17.0"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}
diff --git a/src/core/conf.ts b/src/core/conf.ts
@@ -0,0 +1,53 @@
+import { Util } from '../libs/util';
+
+export class Conf {
+  private static _instance: Conf;
+
+  // パラメータ
+  public FLG_PARAM: boolean = location.href.includes('p=yes');
+
+  // Stats
+  public FLG_STATS: boolean = location.href.includes('p=yes');
+
+  // パス
+  public PATH_IMG: string = './assets/img/';
+
+  // タッチデバイス
+  public USE_TOUCH: boolean = Util.instance.isTouchDevice();
+
+  // ブレイクポイント
+  public BREAKPOINT: number = 768;
+
+  // PSDサイズ
+  public LG_PSD_WIDTH: number = 1600;
+  public XS_PSD_WIDTH: number = 750;
+
+  // 簡易版
+  public IS_SIMPLE: boolean = Util.instance.isPc() && Util.instance.isSafari();
+
+  // スマホ
+  public IS_PC: boolean = Util.instance.isPc();
+  public IS_SP: boolean = Util.instance.isSp();
+  public IS_AND: boolean = Util.instance.isAod();
+  public IS_TAB: boolean = Util.instance.isIPad();
+  public USE_ROLLOVER:boolean = Util.instance.isPc() && !Util.instance.isIPad()
+
+  public ITEM_NUM:number = 20;
+  public STACK_NUM:number = 1;
+  public ITEM_SIZE:number = 2;
+  public COLOR_LIST:Array<number> = [
+    0x051181,
+    0xfb3c3c,
+    0xfeb64a,
+    0x128b8e
+  ];
+
+
+  constructor() {}
+  public static get instance(): Conf {
+    if (!this._instance) {
+      this._instance = new Conf();
+    }
+    return this._instance;
+  }
+}
diff --git a/src/core/fps.ts b/src/core/fps.ts
@@ -0,0 +1,7 @@
+export class FPS {
+  static HIGH: number = 0;
+  static MIDDLE: number = 1;
+  static LOW: number = 2;
+
+  constructor() {}
+}
diff --git a/src/core/func.ts b/src/core/func.ts
@@ -0,0 +1,86 @@
+import { ScreenType } from './screenType';
+import { Conf } from './conf';
+
+export class Func {
+  private static _instance: Func;
+  private _useFullScreen: boolean = false;
+
+  constructor() {}
+
+  public static get instance(): Func {
+    if (!this._instance) {
+      this._instance = new Func();
+    }
+    return this._instance;
+  }
+
+  public ratio(): number {
+    return window.devicePixelRatio || 1;
+  }
+
+  public px(num: number): string {
+    return num + 'px';
+  }
+
+  public useScreen(): boolean {
+    return screen != undefined;
+  }
+
+  public sw(): number {
+    return window.innerWidth;
+  }
+
+  public sh(): number {
+    if (this._useFullScreen) {
+      return screen.height;
+    } else {
+      return window.innerHeight;
+    }
+  }
+
+  public screenOffsetY(): number {
+    return (window.innerHeight - this.sh()) * 0.5;
+  }
+
+  public screen(): number {
+    if (window.innerWidth <= Conf.instance.BREAKPOINT) {
+      return ScreenType.XS;
+    } else {
+      return ScreenType.LG;
+    }
+  }
+
+  public isXS(): boolean {
+    return this.screen() == ScreenType.XS;
+  }
+
+  public isLG(): boolean {
+    return this.screen() == ScreenType.LG;
+  }
+
+  public val(xs: any, lg: any): any {
+    if (this.isXS()) {
+      return xs;
+    } else {
+      return lg;
+    }
+  }
+
+  public r(val: number): number {
+    const base = this.val(Conf.instance.XS_PSD_WIDTH, Conf.instance.LG_PSD_WIDTH);
+    return (val / base) * this.sw();
+  }
+
+  public sin1(radian:number):number {
+    return Math.sin(radian) + Math.sin(2 * radian)
+  }
+
+  public sin2(radian:number):number {
+      return (
+          Math.sin(radian) +
+          Math.sin(2.2 * radian + 5.52) +
+          Math.sin(2.9 * radian + 0.93) +
+          Math.sin(4.6 * radian + 8.94)
+        ) / 4
+  }
+}