Fixes and Features

* Fixes ENTER button doesn't close the intro modal
* Implements glitch effect for Terminal
* Pressing ENTER button on intro modal will now close the modal

HYDRA_EFFECTS_GUIDE.md

@@ -0,0 +1,329 @@
+# 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? 🐑⚡*

dvd.js

@@ -1,75 +0,0 @@
-(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);
-    }
-})();

index.html

@@ -1,58 +1,140 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <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 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>
-    <link rel="stylesheet" href="hg.css">
+    <script src="https://unpkg.com/hydra-synth"></script>
-    <link rel="icon" href="/favicon.ico">
+    <link rel="stylesheet" href="hg.css" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="icon" href="/favicon.ico" />
-</head>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </head>
 
-<body>
+  <body>
     <div class="modal" id="intro-modal">
-        <div class="modal-bg modal-exit"></div>
+      <div class="modal-bg modal-exit"></div>
-        <div class="modal-container">
+      <div class="modal-container">
-            <h3 class="text-center">Welcome to Retrowave Player</h3>
+        <h3 class="text-center">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>
+        <div id="warning">⚠️ CONTAINS STROBING LIGHTS</div>
-            <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>
+        <div class="compact-controls">
-            <p class="mt-5">(You can download the music history of your current browser by clicking the history link on
+          <div class="controls-section">
-                the player)</p>
+            <h4 class="section-title">KEYBOARD</h4>
-                <p class="mt-5">All the music is fetched from retrowave.ru</p>
+            <div class="control-grid">
-            <button class="modal-close modal-exit" id="initButton">X</button>
+              <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>
+      </div>
     </div>
     <div id="app">
-        <div class="music-player">
+      <div class="music-player">
-            <div class="title-content">
+        <div class="player-controls toggleable">
-                <div class="intro">Now Playing</div>
+          <div class="control-group">
-                <hr>
+            <div title="FULLSCREEN" class="no-pause buttons fullscreen">
-                <h3 id="track-name">Retrowave Player</h3>
+              <span class="retro-icon no-pause">⛶</span>
             </div>
-            <div class="gradient-overlay"></div>
+          </div>
-            <div class="color-overlay"></div>
+          <div class="control-group no-pause">
-            <div class="footer">
+            <div class="no-pause buttons terminal-btn" title="OPEN TERMINAL">
-                <div id="history" class="no-pause footer-items">history</div>
+              <span class="retro-icon no-pause">&gt;_</span>
-                <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 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>
+        <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>
+        <!-- <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" />
-    <canvas id="dvd-render"></canvas>
+    <!-- <script src="libs/codef_core.js"></script>
-    <div id="assets">
+    <script src="libs/codef_starfield.js"></script>
-        <img src="images/dvd.png" id="dvd" alt="">
+    <script src="libs/codef_3d.js"></script> -->
-    </div>
     <script src="player.js"></script>
-    <script src="dvd.js"></script>
+  </body>
-</body>
+</html>
-
-</html>

libs/codef_core.js

@@ -0,0 +1,319 @@
+/*------------------------------------------------------------------------------
+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;
+}

libs/codef_starfield.js

@@ -0,0 +1,150 @@
+/*------------------------------------------------------------------------------
+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;
+		}
+	}
+
+}