@onemorestudio/dragdrop-texture

A creative module for drag and drop media handling with texture capabilities for HTML5 canvas and creative coding applications.

Features

• 🎯 Easy Drag & Drop: Simple drag and drop interface for images and videos
• 🎨 Texture Processing: Hidden canvas system for pixel manipulation and texture access
• 🎬 Video Support: Automatic video playback with loop, muted, and fullscreen capabilities
• 📊 Pixel Access: Read pixel data at any coordinate or get average colors
• 🖼️ Fullscreen Display: Built-in fullscreen overlay for media display
• 🔧 Extensible: Designed to extend vanilla JavaScript classes for creative coding
• 📱 Modern: ES6+ modules with TypeScript definitions

Installation

npm install @onemorestudio/dragdrop-texture

Quick Start

import { DragDropTexture } from "@onemorestudio/dragdrop-texture";

// Basic usage
const dragDrop = new DragDropTexture({
  dropZone: document.body,
  onDrop: (file, media) => {
    console.log("Media loaded:", file.name);
  },
  onTextureUpdate: (textureCanvas) => {
    // Access texture data
    const imageData = textureCanvas.getImageData();
    console.log("Texture updated:", imageData);
  },
});

API Reference

DragDropTexture

Main class that handles drag and drop functionality with texture processing.

Constructor Options

const options = {
  dropZone: HTMLElement,        // Drop zone element (default: document.body)
  acceptedTypes: string[],      // Accepted MIME types (default: ['image/*', 'video/*'])
  autoPlay: boolean,           // Auto-play videos (default: true)
  muted: boolean,              // Mute videos (default: true)
  loop: boolean,               // Loop videos (default: true)
  onDrop: function,            // Callback when media is dropped
  onTextureUpdate: function,   // Callback when texture updates
  onError: function            // Error callback
};

Methods

// Load media programmatically
await dragDrop.loadMedia(file);

// Get texture data
const imageData = dragDrop.getTextureData();
const dataURL = dragDrop.getTextureDataURL("image/png", 1.0);

// Get pixel information
const pixel = dragDrop.getPixelAt(100, 100);
console.log(pixel); // { r: 255, g: 0, b: 0, a: 255, rgba: "rgba(255, 0, 0, 1)" }

// Access canvas and media elements
const canvas = dragDrop.getCanvas();
const media = dragDrop.getMedia();

// Fullscreen controls
dragDrop.showFullscreen();
dragDrop.hideFullscreen();
dragDrop.toggleFullscreen();

// Cleanup
dragDrop.destroy();

TextureCanvas

Handles canvas operations for texture processing.

import { TextureCanvas } from "@onemorestudio/dragdrop-texture";

const textureCanvas = new TextureCanvas();
await textureCanvas.setMedia(mediaElement);

// Get texture information
const dimensions = textureCanvas.getDimensions();
const averageColor = textureCanvas.getAverageColor();

// Apply filters
textureCanvas.applyFilter("blur(5px)");
textureCanvas.applyFilter("brightness(150%)");

MediaHandler

Handles loading and processing of media files.

import { MediaHandler } from "@onemorestudio/dragdrop-texture";

const mediaHandler = new MediaHandler();
const mediaElement = await mediaHandler.loadFile(file);

// Get media information
const info = mediaHandler.getMediaInfo(mediaElement);

// Video controls
await mediaHandler.playVideo(videoElement);
mediaHandler.pauseVideo(videoElement);
mediaHandler.setVideoTime(videoElement, 10); // Seek to 10 seconds

Examples

Basic Creative Coding Integration

import { DragDropTexture } from "@onemorestudio/dragdrop-texture";

class CreativeSketch extends DragDropTexture {
  constructor() {
    super({
      onTextureUpdate: (textureCanvas) => {
        this.processTexture(textureCanvas);
      },
    });

    this.setupCanvas();
  }

  setupCanvas() {
    this.displayCanvas = document.createElement("canvas");
    this.displayCtx = this.displayCanvas.getContext("2d");
    document.body.appendChild(this.displayCanvas);
  }

  processTexture(textureCanvas) {
    const imageData = textureCanvas.getImageData();
    if (!imageData) return;

    // Process pixels for creative effects
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      // Apply creative transformations
      data[i] = 255 - data[i]; // Invert red
      data[i + 1] = 255 - data[i + 1]; // Invert green
      data[i + 2] = 255 - data[i + 2]; // Invert blue
    }

    // Draw processed texture
    this.displayCtx.putImageData(imageData, 0, 0);
  }
}

const sketch = new CreativeSketch();

WebGL Integration

import { DragDropTexture } from "@onemorestudio/dragdrop-texture";

class WebGLTexture extends DragDropTexture {
  constructor(gl) {
    super({
      onTextureUpdate: (textureCanvas) => {
        this.updateWebGLTexture(textureCanvas.canvas);
      },
    });

    this.gl = gl;
    this.texture = gl.createTexture();
  }

  updateWebGLTexture(canvas) {
    const gl = this.gl;

    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  }
}

Pixel Analysis

import { DragDropTexture } from "@onemorestudio/dragdrop-texture";

const analyzer = new DragDropTexture({
  onDrop: (file, media) => {
    // Analyze dominant colors
    setTimeout(() => {
      const averageColor = analyzer.textureCanvas.getAverageColor();
      console.log("Average color:", averageColor.rgba);

      // Sample pixels across the image
      const canvas = analyzer.getCanvas();
      const samples = [];
      for (let x = 0; x < canvas.width; x += 50) {
        for (let y = 0; y < canvas.height; y += 50) {
          const pixel = analyzer.getPixelAt(x, y);
          if (pixel) samples.push(pixel);
        }
      }

      console.log("Color samples:", samples);
    }, 100);
  },
});

CSS Styling

The module adds CSS classes that you can style:

/* Style the drag highlight effect */
.dragdrop-highlight {
  border: 2px dashed #007bff;
  background-color: rgba(0, 123, 255, 0.1);
}

/* Customize the fullscreen overlay */
.dragdrop-fullscreen-overlay {
  background: rgba(0, 0, 0, 0.95) !important;
}