Compare commits
1 Commits
master
...
feature/pa
| Author | SHA1 | Date | |
|---|---|---|---|
|
22c9e30317 |
@@ -1,329 +0,0 @@
|
||||
# Retrowave Player - Hydra Effects Guide
|
||||
|
||||
A comprehensive guide to all the visual effects and features implemented in the synthwave/retrowave music player.
|
||||
|
||||
## Overview
|
||||
|
||||
This project is a synthwave/retrowave-themed web music player featuring:
|
||||
- 3D UI with floating animations and glowing effects
|
||||
- Terminal overlay for command-line interaction
|
||||
- 14 unique Hydra-based visual effects
|
||||
- Mobile-friendly responsive design
|
||||
- Clean, AI-comment-free codebase
|
||||
|
||||
## Visual Effects Library
|
||||
|
||||
### 🎵 Core Synthwave Effects
|
||||
|
||||
#### 1. **Vernoi** (`effect vernoi`)
|
||||
- **Description**: Synthwave Voronoi patterns
|
||||
- **Features**:
|
||||
- Neon pink, cyan, and purple Voronoi cells
|
||||
- Animated scaling and rotation
|
||||
- High contrast synthwave aesthetic
|
||||
|
||||
#### 2. **Waveyzz** (`effect waveyzz`)
|
||||
- **Description**: Neon wave synthesis
|
||||
- **Features**:
|
||||
- Flowing neon pink and cyan waves
|
||||
- Complex modulation and feedback loops
|
||||
- Purple accents with breathing effects
|
||||
|
||||
#### 3. **OscRotate** (`effect oscrotate`)
|
||||
- **Description**: Oscillating neon shapes
|
||||
- **Features**:
|
||||
- Rotating neon pink and cyan oscillators
|
||||
- Hexagonal grid overlays
|
||||
- Dynamic contrast and brightness
|
||||
|
||||
#### 4. **RetroSun** (`effect retrosun`)
|
||||
- **Description**: Classic synthwave sunset with grid
|
||||
- **Features**:
|
||||
- Golden circular sun with glow effect
|
||||
- Horizontal and vertical perspective grid
|
||||
- Pink horizon line and mountain silhouettes
|
||||
- Proper 3D grid perspective
|
||||
|
||||
#### 5. **SynthWave** (`effect synthwave`)
|
||||
- **Description**: Basic synthwave pattern with moving elements
|
||||
- **Features**:
|
||||
- Animated cyan grid lines
|
||||
- Pink to black gradients
|
||||
- Orange pulsing geometric shapes
|
||||
- Counter-moving line effects
|
||||
|
||||
### 🌌 Space & Cosmic Effects
|
||||
|
||||
#### 6. **Galaxy** (`effect galaxy`)
|
||||
- **Description**: Deep space galaxy with swirling arms and stars
|
||||
- **Features**:
|
||||
- Rotating spiral arms with cosmic dust
|
||||
- Pulsing golden galactic core
|
||||
- Twinkling star fields of various sizes
|
||||
- Pink nebula regions and cyan gas clouds
|
||||
|
||||
### 🤖 Cyberpunk & AI Effects
|
||||
|
||||
#### 7. **Electric Sheep** (`effect electricsheep`)
|
||||
- **Description**: Digital dreams & synthetic memories (Philip K. Dick inspired)
|
||||
- **Features**:
|
||||
- Electric blue digital static base
|
||||
- Pink neural pattern networks
|
||||
- Yellow memory fragment shapes
|
||||
- Matrix-style green digital rain
|
||||
- Glitch pixelation effects
|
||||
|
||||
#### 8. **Cyberpunk City** (`effect cyberpunk`)
|
||||
- **Description**: Neon-soaked cityscape
|
||||
- **Features**:
|
||||
- Hot pink and cyan neon advertising signs
|
||||
- Green holographic displays
|
||||
- Atmospheric blue rain effects
|
||||
- Orange street light glows
|
||||
|
||||
#### 9. **Digital Dreams** (`effect digitaldreams`)
|
||||
- **Description**: Abstract consciousness patterns
|
||||
- **Features**:
|
||||
- Purple neural network base
|
||||
- Cyan synaptic connections
|
||||
- Golden memory bubbles
|
||||
- Pink thought streams
|
||||
|
||||
#### 10. **Quantum Static** (`effect quantumstatic`)
|
||||
- **Description**: Quantum interference & particles
|
||||
- **Features**:
|
||||
- Deep purple quantum field fluctuations
|
||||
- Teal and pink interference patterns
|
||||
- Bright yellow probability waves
|
||||
- White particle traces
|
||||
|
||||
### 🎬 Movie-Inspired Effects
|
||||
|
||||
#### 11. **Johnny Mnemonic** (`effect johnny`)
|
||||
- **Description**: Data highways and ice breaking
|
||||
- **Features**:
|
||||
- Matrix green data streams
|
||||
- Ice blue crystalline barriers
|
||||
- Yellow flowing data packets
|
||||
- Pink neural pathways
|
||||
- Red glitch corruption with pixelation
|
||||
|
||||
#### 12. **Bill & Ted's Excellent Adventure** (`effect billted`)
|
||||
- **Description**: Psychedelic time travel vortex
|
||||
- **Features**:
|
||||
- Orange 80s glow with spiral vortex
|
||||
- Purple time ripples with kaleidoscope effects
|
||||
- Golden "excellent" sparkles
|
||||
- Cyan phone booth trails
|
||||
- Pink "bogus" interference static
|
||||
|
||||
#### 13. **Tron Legacy** (`effect tron`)
|
||||
- **Description**: Digital grid world with light cycles
|
||||
- **Features**:
|
||||
- Dark blue-black base with cyan grid lines
|
||||
- Orange and cyan light cycle trails
|
||||
- Spinning identity discs
|
||||
- Digital de-resolution pixel effects
|
||||
- Golden recognition sequences
|
||||
|
||||
#### 14. **Hitchhiker's Guide to the Galaxy** (`effect hitchhiker`)
|
||||
- **Description**: Infinite improbability and babel fish
|
||||
- **Features**:
|
||||
- Golden improbability field (rotating at 0.042 speed for "42" reference)
|
||||
- Yellow babel fish swimming patterns
|
||||
- Green paradox loops with kaleidoscope effects
|
||||
- Blue Deep Thought computational patterns
|
||||
- Gray pan-dimensional mice dots
|
||||
- Pink "42" squares repeated 42 times horizontally
|
||||
- All effects modulated at 0.42 frequency for maximum "42" references
|
||||
|
||||
## UI Enhancements
|
||||
|
||||
### 3D Effects
|
||||
- **Player Container**: Floating animation with perspective transforms
|
||||
- **Buttons**: Pulsing glow effects and 3D shadows
|
||||
- **Terminal**: 3D floating overlay with neon borders
|
||||
- **Modal**: Glowing intro screen with floating animation
|
||||
- **Footer**: Animated glow effects
|
||||
|
||||
### Animations
|
||||
- `playerFloat`: Gentle floating motion for the main player
|
||||
- `playerPulse`: Subtle pulsing effect
|
||||
- `trackNameFloat`: Floating track name display
|
||||
- `trackNameGlow`: Glowing text effects
|
||||
- `buttonPulse`: Interactive button animations
|
||||
- `hrPulse` & `hrRotate`: Animated divider elements
|
||||
- `introFloat`: Modal introduction animations
|
||||
- `footerGlow`: Footer highlight effects
|
||||
|
||||
## Controls & Commands
|
||||
|
||||
### Keyboard Shortcuts
|
||||
- **Space**: Toggle play/pause
|
||||
- **W**: Volume up
|
||||
- **S**: Volume down
|
||||
- **N**: Next track
|
||||
- **F**: Toggle fullscreen
|
||||
- **H**: Toggle controls visibility
|
||||
- **X**: Toggle everything (player + overlay)
|
||||
- **E**: Cycle through visual effects
|
||||
- **T**: Toggle terminal overlay
|
||||
|
||||
### Terminal Commands
|
||||
|
||||
#### Media Controls
|
||||
```bash
|
||||
play # Start/resume playback
|
||||
pause # Pause playback
|
||||
next # Skip to next track
|
||||
volume [0-10] # Set volume (0-10)
|
||||
status # Show current track info
|
||||
history # Download playlist history
|
||||
```
|
||||
|
||||
#### Visual Effects
|
||||
```bash
|
||||
effect list # Show all available effects
|
||||
effect <effect_name> # Switch to specific effect
|
||||
effect vernoi # Synthwave Voronoi patterns
|
||||
effect waveyzz # Neon wave synthesis
|
||||
effect oscrotate # Oscillating neon shapes
|
||||
effect retrosun # Retro sunset with grid
|
||||
effect synthwave # Basic synthwave pattern
|
||||
effect galaxy # Deep space galaxy
|
||||
effect electricsheep # Digital dreams (PKD inspired)
|
||||
effect cyberpunk # Neon cityscape
|
||||
effect digitaldreams # Consciousness patterns
|
||||
effect quantumstatic # Quantum interference
|
||||
effect johnny # Johnny Mnemonic data highways
|
||||
effect billted # Bill & Ted time vortex
|
||||
effect tron # Tron Legacy grid world
|
||||
effect hitchhiker # Hitchhiker's Guide improbability
|
||||
```
|
||||
|
||||
#### System Commands
|
||||
```bash
|
||||
help # Show help message
|
||||
fullscreen # Toggle fullscreen mode
|
||||
clear # Clear terminal
|
||||
exit # Close terminal
|
||||
```
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### Hydra.js Integration
|
||||
- All effects use valid Hydra.js syntax
|
||||
- Proper error handling for browser compatibility
|
||||
- Effects are loaded with 100ms timeout for stability
|
||||
- Background processing doesn't block UI
|
||||
|
||||
### Mobile Support
|
||||
- Touch gestures for volume control (swipe up/down)
|
||||
- Responsive design for all screen sizes
|
||||
- Mobile-friendly terminal interface
|
||||
|
||||
### Performance
|
||||
- Clean, optimized code without verbose comments
|
||||
- Efficient Hydra rendering
|
||||
- Proper memory management for audio instances
|
||||
|
||||
## Code Quality
|
||||
|
||||
### Clean Implementation
|
||||
- ❌ Removed all AI-generated comments
|
||||
- ❌ Removed verbose explanatory comments
|
||||
- ✅ Clean, production-ready code
|
||||
- ✅ Proper error handling
|
||||
- ✅ Robust mobile support
|
||||
|
||||
### Browser Compatibility
|
||||
- Modern browsers with WebGL support
|
||||
- Hydra.js requirements met
|
||||
- Fallback error messages for unsupported features
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
retrowave-player/
|
||||
├── index.html # Main HTML structure
|
||||
├── hg.css # All styling and 3D animations
|
||||
├── player.js # Core functionality and Hydra effects
|
||||
├── favicon.ico # Site icon
|
||||
├── favicon.svg # Vector site icon
|
||||
├── fonts/
|
||||
│ └── Streamster.ttf # Custom synthwave font
|
||||
├── images/
|
||||
│ ├── comp009.jpg # Background image
|
||||
│ └── rainbowprism.gif # Additional assets
|
||||
└── libs/
|
||||
├── codef_3d.js # 3D rendering library
|
||||
├── codef_core.js # Core graphics library
|
||||
└── codef_starfield.js # Starfield effects
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Quick Start
|
||||
1. Open `index.html` in a modern browser
|
||||
2. Click "ENTER THE GRID" to initialize
|
||||
3. Use keyboard shortcuts or terminal for control
|
||||
4. Press 'E' to cycle through visual effects
|
||||
|
||||
### Terminal Usage
|
||||
```bash
|
||||
# Open terminal
|
||||
Press 'T'
|
||||
|
||||
# Switch to a specific effect
|
||||
effect tron
|
||||
|
||||
# Adjust volume
|
||||
volume 7
|
||||
|
||||
# Check what's playing
|
||||
status
|
||||
|
||||
# Get help
|
||||
help
|
||||
```
|
||||
|
||||
## Development Notes
|
||||
|
||||
### Adding New Effects
|
||||
1. Create new effect function following the pattern:
|
||||
```javascript
|
||||
const newEffect = () => {
|
||||
setTimeout(() => {
|
||||
// Hydra effect code here
|
||||
.out();
|
||||
}, 100);
|
||||
};
|
||||
```
|
||||
|
||||
2. Add to `hydraEffects` array
|
||||
3. Update terminal command switch statement
|
||||
4. Add to help text
|
||||
|
||||
### Hydra Syntax Tips
|
||||
- Use `scrollX()` and `scrollY()` for positioning (not `translate()`)
|
||||
- Use `shape(32, ...)` for smooth circles (not `shape(4, ...)`)
|
||||
- Always end effect chains with `.out()`
|
||||
- Use `setTimeout()` wrapper for stability
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
1. **Effects not loading**: Check browser WebGL support
|
||||
2. **Audio not playing**: Check CORS and network connectivity
|
||||
3. **Mobile controls not working**: Ensure touch events are enabled
|
||||
4. **Terminal not responding**: Check for JavaScript errors in console
|
||||
|
||||
### Browser Requirements
|
||||
- WebGL support for Hydra effects
|
||||
- Modern ES6+ JavaScript support
|
||||
- Audio API support for music playback
|
||||
- Local storage for playlist history
|
||||
|
||||
---
|
||||
|
||||
*Created for the ultimate synthwave/retrowave music experience. Do you dream of electric sheep? 🐑⚡*
|
||||
75
dvd.js
Normal file
75
dvd.js
Normal file
@@ -0,0 +1,75 @@
|
||||
(function () {
|
||||
const dvdCanvas = document.getElementById("dvd-render");
|
||||
const ctx = dvdCanvas.getContext("2d");
|
||||
const dvd = document.getElementById("dvd");
|
||||
const particleLength = 500;
|
||||
let dvdParticles = (new Array(particleLength)).fill(0);
|
||||
const maxDimension = 16;
|
||||
const minDimension = 2;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let dx = 0.8;
|
||||
let dy = -0.8;
|
||||
resizeWindow();
|
||||
|
||||
dvd.addEventListener("load", () => {
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
const { width, height } = document.body.getBoundingClientRect();
|
||||
dvdParticles = dvdParticles.map((particle) => {
|
||||
const particleImage = dvd;
|
||||
particleImage.width = Math.floor(Math.random()* (maxDimension - minDimension) + minDimension);
|
||||
particleImage.height = particleImage.width;
|
||||
return {
|
||||
img: particleImage,
|
||||
x: Math.floor(Math.random() * width),
|
||||
y: Math.floor(Math.random() * height),
|
||||
dx: Math.floor(Math.random() * 2),
|
||||
dy: -Math.floor(Math.random() * 2),
|
||||
};
|
||||
});
|
||||
requestAnimationFrame(update);
|
||||
});
|
||||
|
||||
addEventListener("resize", () => {
|
||||
resizeWindow();
|
||||
});
|
||||
|
||||
function resizeWindow() {
|
||||
const { width, height } = document.body.getBoundingClientRect();
|
||||
x = Math.floor(Math.random() * width);
|
||||
y = Math.floor(Math.random() * height);
|
||||
dvdCanvas.width = width;
|
||||
dvdCanvas.height = height;
|
||||
}
|
||||
|
||||
function update() {
|
||||
ctx.clearRect(0, 0, dvdCanvas.width, dvdCanvas.height);
|
||||
for(let particle of dvdParticles) {
|
||||
let {x, y, img, dx, dy} = particle;
|
||||
ctx.drawImage(img, x, y, img.width, img.height);
|
||||
|
||||
particle.x = x + dx;
|
||||
particle.y = y + dy;
|
||||
if (x+img.width > dvdCanvas.width) {
|
||||
particle.x = dvdCanvas.width-img.width;
|
||||
particle.dx = -dx;
|
||||
}
|
||||
|
||||
if (y+img.height > dvdCanvas.height) {
|
||||
particle.y = dvdCanvas.height-img.height;
|
||||
particle.dy = -dy;
|
||||
}
|
||||
|
||||
if (x < 0) {
|
||||
particle.x = 0;
|
||||
particle.dx = -dx;
|
||||
}
|
||||
|
||||
if (y < 0) {
|
||||
particle.y = 0;
|
||||
particle.dy = -dy;
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
BIN
images/dvd.png
Normal file
BIN
images/dvd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
144
index.html
144
index.html
@@ -1,140 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Retrowave Player</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
|
||||
<script src="https://unpkg.com/hydra-synth"></script>
|
||||
<link rel="stylesheet" href="hg.css" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="stylesheet" href="hg.css">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="modal" id="intro-modal">
|
||||
<div class="modal-bg modal-exit"></div>
|
||||
<div class="modal-container">
|
||||
<h3 class="text-center">RETROWAVE PLAYER</h3>
|
||||
|
||||
<div id="warning">⚠️ CONTAINS STROBING LIGHTS</div>
|
||||
|
||||
<div class="compact-controls">
|
||||
<div class="controls-section">
|
||||
<h4 class="section-title">KEYBOARD</h4>
|
||||
<div class="control-grid">
|
||||
<span class="control-item">SPACE<small>Play</small></span>
|
||||
<span class="control-item">W/S<small>Volume</small></span>
|
||||
<span class="control-item">N<small>Next</small></span>
|
||||
<span class="control-item">H<small>Hide</small></span>
|
||||
<span class="control-item">T<small>Terminal</small></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="enter-button modal-exit" id="enterButton">ENTER</button>
|
||||
|
||||
<div class="credit-compact">
|
||||
<small>Music from RETROWAVE.RU</small>
|
||||
</div>
|
||||
|
||||
<button class="modal-close modal-exit" id="initButton">✕</button>
|
||||
<h3 class="text-center">Welcome to Retrowave Player</h3>
|
||||
<p class="mt-5">Here are the controls:</p>
|
||||
<h4 class="mt-5">Play/Pause <span class="controls">x or Click or Touch</span></h4>
|
||||
<h4 class="mt-5">Volume Up <span class="controls">w or Swipe Up</span></h4>
|
||||
<h4 class="mt-5">Volume Down <span class="controls">s or Swipe Down</span></h4>
|
||||
<p class="mt-5">(You can download the music history of your current browser by clicking the history link on
|
||||
the player)</p>
|
||||
<p class="mt-5">All the music is fetched from retrowave.ru</p>
|
||||
<button class="modal-close modal-exit" id="initButton">X</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="music-player">
|
||||
<div class="player-controls toggleable">
|
||||
<div class="control-group">
|
||||
<div title="FULLSCREEN" class="no-pause buttons fullscreen">
|
||||
<span class="retro-icon no-pause">⛶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group no-pause">
|
||||
<div class="no-pause buttons terminal-btn" title="OPEN TERMINAL">
|
||||
<span class="retro-icon no-pause">>_</span>
|
||||
</div>
|
||||
<div class="no-pause buttons refresh" title="NEXT TRACK">
|
||||
<span class="retro-icon no-pause">▶▶</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-content">
|
||||
<div class="intro">NOW PLAYING</div>
|
||||
<hr />
|
||||
<h3 id="track-name">RETROWAVE PLAYER</h3>
|
||||
<div class="intro">Now Playing</div>
|
||||
<hr>
|
||||
<h3 id="track-name">Retrowave Player</h3>
|
||||
</div>
|
||||
<div class="gradient-overlay"></div>
|
||||
<div class="color-overlay"></div>
|
||||
<div class="footer toggleable">
|
||||
<div title="DOWNLOAD YOUR PLAYLIST HISTORY" id="history" class="no-pause footer-items">HISTORY</div>
|
||||
<div id="source">
|
||||
<a
|
||||
title="SOURCE CODE"
|
||||
class="no-pause footer-items"
|
||||
href="https://git.indrajith.dev/retrowave-player/"
|
||||
target="_blank"
|
||||
>SOURCE CODE</a
|
||||
>
|
||||
</div>
|
||||
<div id="retrowaveru" class="no-pause">
|
||||
<a
|
||||
title="RETROWAVE.RU"
|
||||
class="no-pause footer-items"
|
||||
href="http://retrowave.ru/"
|
||||
target="_blank"
|
||||
>RETROWAVE.RU</a
|
||||
>
|
||||
</div>
|
||||
<div id="guestbook" class="no-pause">
|
||||
<a
|
||||
title="SIGN MY GUESTBOOK"
|
||||
class="no-pause footer-items"
|
||||
href="https://indrajith.atabook.org/"
|
||||
target="_blank"
|
||||
>GUESTBOOK</a
|
||||
>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div id="history" class="no-pause footer-items">history</div>
|
||||
<div id="source"><a class="no-pause footer-items" href="https://git.indrajith.dev/retrowave-player/"
|
||||
target="_blank">source code</a></div>
|
||||
<div id="retrowaveru" class="no-pause"><a class="no-pause footer-items" href="http://retrowave.ru/"
|
||||
target="_blank">retrowave.ru</a></div>
|
||||
</div>
|
||||
<!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="terminal-overlay" class="terminal-overlay hidden">
|
||||
<div class="terminal-window">
|
||||
<div class="terminal-header">
|
||||
<span class="terminal-title">Retrowave Terminal</span>
|
||||
<span class="terminal-close">□</span>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<div id="terminal-output">
|
||||
<div class="terminal-line">Welcome to Retrowave Terminal</div>
|
||||
<div class="terminal-line">Type 'help' for available commands</div>
|
||||
<div class="terminal-line"></div>
|
||||
</div>
|
||||
<div class="terminal-input-line">
|
||||
<span class="terminal-prompt">indrajith@retrowave:$ </span>
|
||||
<input type="text" id="terminal-input" class="terminal-input" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="progress-bar-container" class="progress-bar-container">
|
||||
<div class="progress-info">
|
||||
<span id="current-time">00:00</span>
|
||||
<span id="total-time">00:00</span>
|
||||
</div>
|
||||
<div id="progress-bar" class="progress-bar">
|
||||
<div id="progress-fill" class="progress-fill"></div>
|
||||
<div id="progress-handle" class="progress-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="codef-canvas"></div>
|
||||
<div class="OVR hidden"></div>
|
||||
<div class="ERRORS hidden"></div>
|
||||
<input id="file-upload" type="file" accept="application/json" />
|
||||
<!-- <script src="libs/codef_core.js"></script>
|
||||
<script src="libs/codef_starfield.js"></script>
|
||||
<script src="libs/codef_3d.js"></script> -->
|
||||
<canvas id="dvd-render"></canvas>
|
||||
<div id="assets">
|
||||
<img src="images/dvd.png" id="dvd" alt="">
|
||||
</div>
|
||||
<script src="player.js"></script>
|
||||
<script src="dvd.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
929
libs/codef_3d.js
929
libs/codef_3d.js
File diff suppressed because one or more lines are too long
@@ -1,319 +0,0 @@
|
||||
/*------------------------------------------------------------------------------
|
||||
Copyright (c) 2011 Antoine Santo Aka NoNameNo
|
||||
|
||||
This File is part of the CODEF project. (https://github.com/N0NameN0/CODEF)
|
||||
|
||||
More info : http://codef.santo.fr
|
||||
Demo gallery http://www.wab.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
------------------------------------------------------------------------------*/
|
||||
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(/* function */ callback, /* DOMElement */ element){
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
function canvas(w, h, divname){
|
||||
this.width=w;
|
||||
this.height=h;
|
||||
this.canvas;
|
||||
this.contex;
|
||||
this.canvas = document.createElement("canvas");
|
||||
if(divname) document.getElementById(divname).appendChild(this.canvas);
|
||||
this.canvas.setAttribute('width', w);
|
||||
this.canvas.setAttribute('height', h);
|
||||
this.contex = this.canvas.getContext('2d');
|
||||
|
||||
this.handlex=0;
|
||||
this.handley=0;
|
||||
this.midhandled=false;
|
||||
this.tilew=0;
|
||||
this.tileh=0;
|
||||
this.tilestart=0;
|
||||
|
||||
this.fill = function(color){
|
||||
var tmp = this.contex.fillStyle;
|
||||
var tmp2= this.contex.globalAlpha;
|
||||
this.contex.globalAlpha=1;
|
||||
this.contex.fillStyle = color;
|
||||
this.contex.fillRect (0, 0, this.canvas.width, this.canvas.height);
|
||||
this.contex.fillStyle = tmp
|
||||
this.contex.globalAlpha=tmp2;
|
||||
}
|
||||
|
||||
this.clear = function(){
|
||||
this.contex.clearRect (0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
|
||||
this.plot = function(x,y,width,color){
|
||||
this.quad(x,y,x+width,y,x+width,y+width,x,y+width,color);
|
||||
}
|
||||
|
||||
this.line = function(x1,y1,x2,y2,width,color){
|
||||
var tmp=this.contex.strokeStyle;
|
||||
this.contex.strokeStyle=color;
|
||||
this.contex.lineWidth=width;
|
||||
this.contex.beginPath();
|
||||
this.contex.moveTo(x1,y1);
|
||||
this.contex.lineTo(x2,y2);
|
||||
this.contex.stroke();
|
||||
this.contex.closePath();
|
||||
this.contex.strokeStyle=tmp;
|
||||
}
|
||||
|
||||
this.triangle = function(x1,y1,x2,y2,x3,y3,color){
|
||||
this.contex.beginPath();
|
||||
this.contex.moveTo(x1,y1);
|
||||
this.contex.lineTo(x2,y2);
|
||||
this.contex.lineTo(x3,y3);
|
||||
this.contex.closePath();
|
||||
this.contex.fillStyle=color;
|
||||
this.contex.fill();
|
||||
}
|
||||
|
||||
this.quad = function(x1,y1,x2,y2,x3,y3,x4,y4,color){
|
||||
this.contex.beginPath();
|
||||
|
||||
if(arguments.length==5){
|
||||
this.contex.moveTo(x1,y1);
|
||||
this.contex.lineTo(x1+x2,y1);
|
||||
this.contex.lineTo(x1+x2,y1+y2);
|
||||
this.contex.lineTo(x1,y1+y2);
|
||||
this.contex.closePath();
|
||||
this.contex.fillStyle=x3;
|
||||
|
||||
}
|
||||
else{
|
||||
this.contex.moveTo(x1,y1);
|
||||
this.contex.lineTo(x2,y2);
|
||||
this.contex.lineTo(x3,y3);
|
||||
this.contex.lineTo(x4,y4);
|
||||
this.contex.closePath();
|
||||
this.contex.fillStyle=color;
|
||||
|
||||
}
|
||||
this.contex.fill();
|
||||
}
|
||||
|
||||
this.initTile=function(tilew,tileh, tilestart){
|
||||
this.tileh=tileh;
|
||||
this.tilew=tilew;
|
||||
if(typeof(tilestart)!='undefined')
|
||||
this.tilestart=tilestart;
|
||||
}
|
||||
|
||||
this.draw = function(dst,x,y,alpha, rot,w,h){
|
||||
var tmp=dst.contex.globalAlpha;
|
||||
if(typeof(alpha)=='undefined') alpha=1;
|
||||
dst.contex.globalAlpha=alpha;
|
||||
if(arguments.length==3 || arguments.length==4)
|
||||
dst.contex.drawImage(this.canvas, x-this.handlex,y-this.handley);
|
||||
else if(arguments.length==5){
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.canvas, 0,0);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
else{
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
dst.contex.scale(w,h);
|
||||
dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.canvas, 0,0);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
dst.contex.globalAlpha=tmp;
|
||||
}
|
||||
|
||||
this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){
|
||||
var tmp=dst.contex.globalAlpha;
|
||||
if(typeof(alpha)=='undefined') alpha=1;
|
||||
dst.contex.globalAlpha=alpha;
|
||||
this.drawPart(dst,x,y,Math.floor((nb%(this.canvas.width/this.tilew)))*this.tilew,Math.floor(nb/(this.canvas.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h);
|
||||
dst.contex.globalAlpha=tmp;
|
||||
|
||||
}
|
||||
|
||||
this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){
|
||||
var tmp=dst.contex.globalAlpha;
|
||||
if(typeof(alpha)=='undefined') alpha=1;
|
||||
dst.contex.globalAlpha=alpha;
|
||||
if(arguments.length==7 || arguments.length==8){
|
||||
dst.contex.translate(x,y);
|
||||
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.canvas,partx,party,partw,parth,null,null,partw,parth);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
else if(arguments.length==9){
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.canvas,partx,party,partw,parth,null,null,partw,parth);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
else{
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
dst.contex.scale(zx,zy);
|
||||
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.canvas,partx,party,partw,parth,null,null,partw,parth);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
dst.contex.globalAlpha=tmp;
|
||||
}
|
||||
|
||||
this.setmidhandle=function(){
|
||||
this.handlex=parseInt(this.canvas.width/2);
|
||||
this.handley=parseInt(this.canvas.height/2);
|
||||
this.midhandled=true;
|
||||
}
|
||||
|
||||
this.sethandle=function(x,y){
|
||||
this.handlex=x;
|
||||
this.handley=y;
|
||||
this.midhandled=false;
|
||||
}
|
||||
|
||||
this.print=function(dst, str, x, y, alpha, rot, w, h){
|
||||
for(var i=0; i<str.length; i++){
|
||||
if(typeof(w)!='undefined')
|
||||
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
|
||||
else
|
||||
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
function image(img){
|
||||
this.img = new Image();
|
||||
this.img.src=img;
|
||||
this.handlex=0;
|
||||
this.handley=0;
|
||||
this.midhandled=false;
|
||||
this.tilew=0;
|
||||
this.tileh=0;
|
||||
this.tilestart=0;
|
||||
|
||||
this.initTile=function(tilew,tileh,tilestart){
|
||||
this.tileh=tileh;
|
||||
this.tilew=tilew;
|
||||
if(typeof(tilestart)!='undefined')
|
||||
this.tilestart=tilestart;
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.draw = function(dst,x,y,alpha, rot,w,h){
|
||||
var tmp=dst.contex.globalAlpha;
|
||||
if(typeof(alpha)=='undefined') alpha=1;
|
||||
dst.contex.globalAlpha=alpha;
|
||||
if(arguments.length==3 || arguments.length==4)
|
||||
dst.contex.drawImage(this.img, x-this.handlex,y-this.handley);
|
||||
else if(arguments.length==5){
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.img, 0,0);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
else{
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
dst.contex.scale(w,h);
|
||||
dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.img, 0,0);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
dst.contex.globalAlpha=tmp;
|
||||
}
|
||||
|
||||
this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){
|
||||
var tmp=dst.contex.globalAlpha;
|
||||
if(typeof(alpha)=='undefined') alpha=1;
|
||||
dst.contex.globalAlpha=alpha;
|
||||
this.drawPart(dst,x,y,Math.floor((nb%(this.img.width/this.tilew)))*this.tilew,Math.floor(nb/(this.img.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h);
|
||||
dst.contex.globalAlpha=tmp;
|
||||
|
||||
}
|
||||
|
||||
this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){
|
||||
var tmp=dst.contex.globalAlpha;
|
||||
if(typeof(alpha)=='undefined') alpha=1;
|
||||
dst.contex.globalAlpha=alpha;
|
||||
if(arguments.length==7 || arguments.length==8){
|
||||
dst.contex.translate(x,y);
|
||||
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
else if(arguments.length==9){
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
else{
|
||||
dst.contex.translate(x,y);
|
||||
dst.contex.rotate(rot*Math.PI/180);
|
||||
dst.contex.scale(zx,zy);
|
||||
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||
dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
|
||||
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
dst.contex.globalAlpha=tmp;
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.setmidhandle=function(){
|
||||
this.handlex=parseInt(this.img.width/2);
|
||||
this.handley=parseInt(this.img.height/2);
|
||||
this.midhandled=true;
|
||||
}
|
||||
|
||||
this.sethandle=function(x,y){
|
||||
this.handlex=x;
|
||||
this.handley=y;
|
||||
this.midhandled=false;
|
||||
}
|
||||
|
||||
this.print=function(dst, str, x, y, alpha, rot, w, h){
|
||||
for(var i=0; i<str.length; i++){
|
||||
if(typeof(w)!='undefined')
|
||||
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
|
||||
else
|
||||
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
/*------------------------------------------------------------------------------
|
||||
Copyright (c) 2011 Antoine Santo Aka NoNameNo
|
||||
|
||||
This File is part of the CODEF project. (https://github.com/N0NameN0/CODEF)
|
||||
|
||||
More info : http://codef.santo.fr
|
||||
Demo gallery http://www.wab.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
------------------------------------------------------------------------------*/
|
||||
|
||||
function starfield3D(dest, nb, speed, w, h, centx, centy, color, ratio, offsetx, offsety){
|
||||
this.dest=dest;
|
||||
this.test=true;
|
||||
this.n=nb;
|
||||
this.star=new Array(this.n);
|
||||
this.w=w;
|
||||
this.h=h;
|
||||
this.x=0;
|
||||
this.y=0;
|
||||
this.z=0;
|
||||
this.offsetx=0;
|
||||
this.offsety=0;
|
||||
if(offsetx) this.offsetx=offsetx;
|
||||
if(offsety) this.offsety=offsety;
|
||||
this.centx=centx;
|
||||
this.centy=centy;
|
||||
this.color=color;
|
||||
this.star_x_save,this.star_y_save;
|
||||
this.star_speed=speed;
|
||||
this.star_ratio=ratio;
|
||||
this.star_color_ratio=0;
|
||||
this.x=Math.round(this.w/2);
|
||||
this.y=Math.round(this.h/2);
|
||||
this.z=(this.w+this.h)/2;
|
||||
this.star_color_ratio=1/this.z;
|
||||
this.cursor_x=this.x;
|
||||
this.cursor_y=this.y;
|
||||
|
||||
for(var i=0;i<this.n;i++){
|
||||
this.star[i]=new Array(5);
|
||||
this.star[i][0]=Math.random()*this.w*2-this.x*2;
|
||||
this.star[i][1]=Math.random()*this.h*2-this.y*2;
|
||||
this.star[i][2]=Math.round(Math.random()*this.z);
|
||||
this.star[i][3]=0;
|
||||
this.star[i][4]=0;
|
||||
}
|
||||
|
||||
this.draw = function(){
|
||||
var tmp=this.dest.contex.strokeStyle;
|
||||
var tmp2 = this.dest.contex.globalAlpha;
|
||||
var tmp3 = this.dest.contex.lineWidth;
|
||||
this.dest.contex.globalAlpha=1;
|
||||
this.dest.contex.strokeStyle=this.color;
|
||||
|
||||
for(var i=0;i<this.n;i++){
|
||||
this.test=true;
|
||||
this.star_x_save=this.star[i][3];
|
||||
this.star_y_save=this.star[i][4];
|
||||
this.star[i][0]+=(this.centx-this.x)>>4; if(this.star[i][0]>this.x<<1) { this.star[i][0]-=this.w<<1; this.test=false; } if(this.star[i][0]<-this.x<<1) { this.star[i][0]+=this.w<<1; this.test=false; }
|
||||
this.star[i][1]+=(this.centy-this.y)>>4; if(this.star[i][1]>this.y<<1) { this.star[i][1]-=this.h<<1; this.test=false; } if(this.star[i][1]<-this.y<<1) { this.star[i][1]+=this.h<<1; this.test=false; }
|
||||
this.star[i][2]-=this.star_speed; if(this.star[i][2]>this.z) { this.star[i][2]-=this.z; this.test=false; } if(this.star[i][2]<0) { this.star[i][2]+=this.z; this.test=false; }
|
||||
this.star[i][3]=this.x+(this.star[i][0]/this.star[i][2])*this.star_ratio;
|
||||
this.star[i][4]=this.y+(this.star[i][1]/this.star[i][2])*this.star_ratio;
|
||||
if(this.star_x_save>0&&this.star_x_save<this.w&&this.star_y_save>0&&this.star_y_save<this.h&&this.test){
|
||||
this.dest.contex.lineWidth=(1-this.star_color_ratio*this.star[i][2])*2;
|
||||
this.dest.contex.beginPath();
|
||||
this.dest.contex.moveTo(this.star_x_save+this.offsetx,this.star_y_save+this.offsety);
|
||||
this.dest.contex.lineTo(this.star[i][3]+this.offsetx,this.star[i][4]+this.offsety);
|
||||
this.dest.contex.stroke();
|
||||
this.dest.contex.closePath();
|
||||
}
|
||||
}
|
||||
this.dest.contex.strokeStyle=tmp;
|
||||
this.dest.contex.globalAlpha=tmp2;
|
||||
this.dest.contex.lineWidth=tmp3;
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
function starfield2D_dot(dst,params){
|
||||
this.dst=dst;
|
||||
this.stars=new Array();
|
||||
var t=0;
|
||||
|
||||
for(var i=0; i<params.length; i++){
|
||||
for(var j=0; j<params[i].nb; j++){
|
||||
this.stars[t]={x:Math.random()*this.dst.canvas.width, y:Math.random()*this.dst.canvas.height, speedx:params[i].speedx, speedy:params[i].speedy, color:params[i].color, size:params[i].size};
|
||||
t++;
|
||||
}
|
||||
}
|
||||
|
||||
this.draw=function(){
|
||||
for(var i=0; i<this.stars.length; i++){
|
||||
this.dst.plot(this.stars[i].x,this.stars[i].y,this.stars[i].size,this.stars[i].color);
|
||||
this.stars[i].x+=this.stars[i].speedx;
|
||||
this.stars[i].y+=this.stars[i].speedy;
|
||||
if(this.stars[i].x>this.dst.canvas.width) this.stars[i].x=0;
|
||||
if(this.stars[i].x<0) this.stars[i].x=this.dst.canvas.width;
|
||||
if(this.stars[i].y>this.dst.canvas.height) this.stars[i].y=0;
|
||||
if(this.stars[i].y<0) this.stars[i].y=this.dst.canvas.height;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function starfield2D_img(dst,img,params){
|
||||
this.dst=dst;
|
||||
this.stars=new Array();
|
||||
this.img=img;
|
||||
var t=0;
|
||||
|
||||
for(var i=0; i<params.length; i++){
|
||||
for(var j=0; j<params[i].nb; j++){
|
||||
this.stars[t]={x:Math.random()*this.dst.canvas.width, y:Math.random()*this.dst.canvas.height, speedx:params[i].speedx, speedy:params[i].speedy, params:params[i].params};
|
||||
t++;
|
||||
}
|
||||
}
|
||||
|
||||
this.draw=function(){
|
||||
for(var i=0; i<this.stars.length; i++){
|
||||
this.dst.contex.drawImage(this.img[this.stars[i].params].img,this.stars[i].x,this.stars[i].y);
|
||||
this.stars[i].x+=this.stars[i].speedx;
|
||||
this.stars[i].y+=this.stars[i].speedy;
|
||||
if(this.stars[i].x>this.dst.canvas.width) this.stars[i].x=0-this.img[this.stars[i].params].img.width;
|
||||
if(this.stars[i].x<0-this.img[this.stars[i].params].img.width) this.stars[i].x=this.dst.canvas.width;
|
||||
if(this.stars[i].y>this.dst.canvas.height) this.stars[i].y=0-this.img[this.stars[i].params].img.height;
|
||||
if(this.stars[i].y<0-this.img[this.stars[i].params].img.height) this.stars[i].y=this.dst.canvas.height;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user