p5.js Web Editor | Category divider

xxxxxxxxxx
let bar;
let input;
let addButton;
let table;
let curves = [];
​
const NUM_CURVES = 6;
​
let t = 0
let dt = 0.005
let svg;
​
class Bar {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.categories = [];
    this.element = createDiv();
    this.element.position(x, y);
    this.element.size(w, h);
    this.element.class('main-bar');
    this.element.mousePressed(this.handleClick.bind(this));
  }
​
  handleClick(event) {
    const clickX = event.offsetX;
    if (this.categories.length === 0) {
      this.addCategory('A', 0, clickX);
      this.addCategory('B', clickX, this.w - clickX);
    } else {
      const clickedCategory = this.getCategoryAtX(clickX);
      if (clickedCategory) {
        const newWidth = clickX - clickedCategory.x;
        const remainingWidth = clickedCategory.w - newWidth;
        clickedCategory.setWidth(newWidth);
        this.addCategory(this.getNextName(), clickX, remainingWidth);
      }
    }
    this.updateTable();
  }
​
  addCategory(name, x, w) {
    const category = new Category(name, x, w, this.h, this);
    this.categories.push(category);
    this.element.child(category.element);
    this.updateCategoryPositions();
  }
​
  updateCategoryPositions() {
    let currentX = 0;
    this.categories.forEach((category, index) => {
      category.setX(currentX);
      currentX += category.w;
      category.updateDragHandle(index === this.categories.length - 1);
    });
  }
​
  getCategoryAtX(x) {
    return this.categories.find(cat => x >= cat.x && x < cat.x + cat.w);
  }
​
  getNextName() {
    if (this.categories.length === 0) return 'A';
    const lastChar = this.categories[this.categories.length - 1].name.charCodeAt(0);
    return String.fromCharCode(lastChar + 1);
  }
​
  addCategoryFromInput(name) {
    if (this.categories.length === 0) {
      this.addCategory(name, 0, this.w);
    } else {
      const newWidth = this.w / (this.categories.length + 1);
      this.categories.forEach(cat => cat.setWidth(newWidth));
      this.addCategory(name, this.w - newWidth, newWidth);
    }
    this.updateTable();
  }
​
  removeCategory(category) {
    const index = this.categories.indexOf(category);
    if (index > -1) {
      this.categories.splice(index, 1);
      category.element.remove();
      if (this.categories.length > 0) {
        const newWidth = this.w / this.categories.length;
        this.categories.forEach(cat => cat.setWidth(newWidth));
      }
      this.updateCategoryPositions();
      this.updateTable();
    }
  }
​
  updateTable() {
    table.html('');
    let headerRow = createElement('tr');
    headerRow.child(createElement('th', 'Category'));
    headerRow.child(createElement('th', 'Size'));
    table.child(headerRow);
​
    this.categories.forEach(cat => {
      let row = createElement('tr');
      row.child(createElement('td', cat.name));
      row.child(createElement('td', `${floor((cat.w / this.w) * 100)}%`));
      table.child(row);
    });
  }
}
​
class Category {
  constructor(name, x, w, h, parent) {
    this.name = name;
    this.x = x;
    this.w = w;
    this.h = h;
    this.parent = parent;
    this.element = createDiv();
    this.element.size(w, h);
    this.element.position(x, 0);
    this.element.class('category');
    this.element.style('background', this.generateGradient());
    this.label = createDiv(name);
    this.label.parent(this.element);
    this.label.class('category-label');
    this.setupDragHandle();
    this.element.mousePressed(this.handleClick.bind(this));
    this.element.doubleClicked(this.startRenaming.bind(this));
  }
​
  handleClick(event) {
    event.stopPropagation();
    if (event.button === 2) {  // Right-click
      this.parent.removeCategory(this);
    }
  }
​
  startRenaming() {
    const input = createInput(this.name);
    input.position(this.element.x + 5, this.element.y + 5);
    input.size(this.w - 10, this.h - 10);
    input.elt.focus();
    input.elt.select();
​
    const finishRenaming = () => {
      this.name = input.value();
      this.label.html(this.name);
      input.remove();
      this.parent.updateTable();
    };
​
    input.elt.addEventListener('blur', finishRenaming);
    input.elt.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') finishRenaming();
    });
  }
​
  generateGradient() {
    const color1 = `hsla(${random(360)}, 70%, 80%, 0.6)`;
    const color2 = `hsla(${random(360)}, 70%, 80%, 0.6)`;
    return `linear-gradient(to right, ${color1}, ${color2})`;
  }
​
  setupDragHandle() {
    this.dragHandle = createDiv();
    this.dragHandle.class('drag-handle');
    this.dragHandle.parent(this.element);
    this.dragHandle.mousePressed(this.startDragging.bind(this));
    this.dragHandle.touchStarted(this.startDragging.bind(this));
  }
​
  updateDragHandle(isLast) {
    if (isLast) {
      this.dragHandle.style('display', 'none');
    } else {
      this.dragHandle.style('display', 'block');
    }
  }
​
  startDragging(event) {
    event.stopPropagation();
    const initialX = event.clientX || event.touches[0].clientX;
    const initialWidth = this.w;
​
    const mouseDragged = (e) => {
      const currentX = e.clientX || e.touches[0].clientX;
      const dx = currentX - initialX;
      this.adjustWidth(initialWidth + dx);
      this.parent.updateTable();
    };
​
    const mouseReleased = () => {
      window.removeEventListener('mousemove', mouseDragged);
      window.removeEventListener('mouseup', mouseReleased);
      window.removeEventListener('touchmove', mouseDragged);
      window.removeEventListener('touchend', mouseReleased);
    };
​
    window.addEventListener('mousemove', mouseDragged);
    window.addEventListener('mouseup', mouseReleased);
    window.addEventListener('touchmove', mouseDragged);
    window.addEventListener('touchend', mouseReleased);
  }
​
  adjustWidth(newWidth) {
    const index = this.parent.categories.indexOf(this);
    if (index < this.parent.categories.length - 1) {
      const nextCategory = this.parent.categories[index + 1];
      const totalWidth = this.w + nextCategory.w;
      const minWidth = 20; // Minimum width for a category
​
      if (newWidth >= minWidth && newWidth <= totalWidth - minWidth) {
        this.setWidth(newWidth);
        nextCategory.setWidth(totalWidth - newWidth);
        nextCategory.setX(this.x + this.w);
      }
    }
  }
​
  setWidth(w) {
    this.w = w;
    this.element.size(w, this.h);
  }
​
  setX(x) {
    this.x = x;
    this.element.position(x, 0);
  }
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  randomSeed(random([1444,65,6124,65687,12341234,77674]))
  
  bar = new Bar(width * 0.1, height / 2 - 25, width * 0.8, 50);
  
  input = createInput();
  input.position(20, 20);
  input.elt.addEventListener('keydown', handleInput);
  
  addButton = createButton('Add Category');
  addButton.position(input.x + input.width, 20);
  addButton.mousePressed(addCategory);
  
  table = createElement('table');
  table.position(20, 60);
​
  createStyle();
  
  // Generate background curves
    svg = document.querySelector("svg")
   if (!svg) {
      svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttribute("width", "100%");
      svg.setAttribute("height", "100%");
      document.getElementById("curve-container").appendChild(svgElement);
    };
  for (let i = 0; i < NUM_CURVES; i++) {
    curves.push(new Curve(svg));
  }
  
  
   let curveDiv = createDiv();
  curveDiv.class('curve');
  curveDiv.style('z-index', '-1');
}
​
function handleInput(event) {
  if (event.key === 'Enter') {
    addCategory();
  }
}
​
function addCategory() {
  let categoryName = input.value();
  if (categoryName !== '') {
    bar.addCategoryFromInput(categoryName);
    input.value('');
  }
}
​
function createStyle() {
  const style = createElement('style');
  style.html(`
@keyframes move-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
    body {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #ffecd2);
  background-size: 400% 400%;
  animation: move-gradient 15s ease infinite;
}
    .main-bar {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }
    .category {
      position: absolute;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
    .category-label {
      color: white;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    }
    .drag-handle {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 100%;
      cursor: ew-resize;
      background: rgba(255, 255, 255, 0.3);
    }
    table {
      color: white;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 5px 10px;
    }
.curve {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}
​
.curve::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.1) 20px,
    rgba(255, 255, 255, 0.1) 40px
  );
  animation: move-stripes 20s linear infinite;
}
​
@keyframes move-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
​
}
#curve-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgb(32,32,32);
        }
        svg {
            width: 100%;
            height: 100%;
        }
​
  `);
}
​
​
​
// Global constants for easy tweaking
// const NUM_CURVES = 12; top of script
const CURVE_DETAIL = 0.008;  // Lower for smoother curves, but more computationally expensive
const NOISE_SCALE = 0.0;  // Adjust for smoother or more chaotic movement
const NOISE_TIME_SCALE = 0.0005;  // Adjust for slower or faster overall animation
const MIN_STROKE_WEIGHT = 50;
const MAX_STROKE_WEIGHT = 100;
const MOVEMENT_SPEED = 0.5;  // Adjust for slower or faster curve movement
​
​
class OldCurve {
  constructor() {
    this.reset();
  }
​
  reset() {
    this.points = Array(4).fill().map(() => createVector(random(width), random(height)));
    this.color1 = color(random(255), random(255), random(255), 50);
    this.color2 = color(random(255), random(255), random(255), 50);
    this.offset = random(1000);  // Unique offset for each curve
  }
​
  display() {
    noFill();
    for (let i = 0; i <= 1; i += CURVE_DETAIL) {
      let x = bezierPoint(this.points[0].x, this.points[1].x, this.points[2].x, this.points[3].x, i);
      let y = bezierPoint(this.points[0].y, this.points[1].y, this.points[2].y, this.points[3].y, i);
      let inter = lerpColor(this.color1, this.color2, i);
      stroke(inter);
      let sw = map(noise(i * 10 + this.offset, t * NOISE_TIME_SCALE), 0, 1, MIN_STROKE_WEIGHT, MAX_STROKE_WEIGHT);
      strokeWeight(sw);
      point(x, y);
    }
  }
​
  update() {
    this.points.forEach((p, index) => {
      let nx = noise(t * NOISE_TIME_SCALE + p.x * NOISE_SCALE, p.y * NOISE_SCALE, this.offset + index * 1000);
      let ny = noise(t * NOISE_TIME_SCALE + p.x * NOISE_SCALE, p.y * NOISE_SCALE, this.offset + index * 1000 + 5000);
      p.x += map(nx, 0, 1, -MOVEMENT_SPEED, MOVEMENT_SPEED);
      p.y += map(ny, 0, 1, -MOVEMENT_SPEED, MOVEMENT_SPEED);
    });
  }
}
​
​
const MARGIN = 200; // Extra margin to ensure curves start/end off-screen
class Curve {
  constructor() {
    this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    svg.appendChild(this.path);
    this.reset();
  }
​
  getOffScreenPoint() {
    let x, y;
    if (random() < 0.5) {
      // Point will be off the left or right edge
      x = random() < 0.5 ? -MARGIN : width + MARGIN;
      y = random(-MARGIN, height + MARGIN);
    } else {
      // Point will be off the top or bottom edge
      x = random(-MARGIN, width + MARGIN);
      y = random() < 0.5 ? -MARGIN : height + MARGIN;
    }
    return createVector(x, y);
  }
​
  reset() {
    this.points = [
      this.getOffScreenPoint(),
      createVector(random(width), random(height)),
      createVector(random(width), random(height)),
      this.getOffScreenPoint()
    ];
    this.color1 = `hsl(${random(360)}, 70%, 50%, 0.5)`;
    this.color2 = `hsl(${random(360)}, 70%, 50%, 0.5)`;
    this.offset = random(1000);
    this.path.setAttribute("fill", "none");
    this.path.setAttribute("stroke", `url(#gradient-${this.offset})`);
    this.path.setAttribute("stroke-width", "20");
    this.path.setAttribute("stroke-linecap", "round");
    
    const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
    gradient.id = `gradient-${this.offset}`;
    gradient.innerHTML = `
      <stop offset="0%" stop-color="${this.color1}" />
      <stop offset="100%" stop-color="${this.color2}" />
    `;
    svg.appendChild(gradient);
  }
​
  update() {
    this.points.forEach((p, index) => {
      let nx = noise(t * NOISE_TIME_SCALE + p.x * NOISE_SCALE, p.y * NOISE_SCALE, this.offset + index * 1000);
      let ny = noise(t * NOISE_TIME_SCALE + p.x * NOISE_SCALE, p.y * NOISE_SCALE, this.offset + index * 1000 + 5000);
      p.x += map(nx, 0, 1, -MOVEMENT_SPEED, MOVEMENT_SPEED);
      p.y += map(ny, 0, 1, -MOVEMENT_SPEED, MOVEMENT_SPEED);
    });
​
    const [p1, p2, p3, p4] = this.points;
    this.path.setAttribute("d", `M${p1.x},${p1.y} C${p2.x},${p2.y} ${p3.x},${p3.y} ${p4.x},${p4.y}`);
  }
​
  isOnScreen(point) {
    return point.x >= -MARGIN && point.x <= width + MARGIN &&
           point.y >= -MARGIN && point.y <= height + MARGIN;
  }
}
​
​
function draw() {
  background(0);
  
  // Draw background curves
  // strokeWeight((noise(t) * 20) + 30);
​
  curves.forEach(curve => curve.update());
  t += dt;
  
  // print(noise(t))
}
​
function noise(x, y, z) {
  // Implement or import a noise function here
  // For simplicity, you could use a basic pseudo-random function
  return Math.sin(x * 12.9898 + y * 78.233 + z * 37.719) * 43758.5453 % 1;
}
​
function map(value, start1, stop1, start2, stop2) {
  return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
​
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  bar.element.size(width * 0.8, 50);
  bar.element.position(width * 0.1, height / 2 - 25);
}
Cookies

Sketch Files

Console

Preview
