daniel.aagentah.tech

A Visualisation Of Emotion

Gallery Data In WebGL

Tue Jul 02 2024

This project is a collaboration with the Maxi Museum in Rome, aiming to create an interactive installation that explores the emotional connections between different artworks. Utilizing a dataset of over 250,000 records, the goal was to visualize these relationships in a real-time WebGL environment, allowing visitors to engage deeply with the emotional landscape of the museum's collection.

Project Development

The primary objective was to enable visitors to interact with and isolate different artists or emotions, demonstrating the interconnectedness of various artistic expressions. The provided dataset linked each artwork to an array of emotions, scored on a standardized scale, and associated each piece with its respective artist.

emotions: {
  1: { emotions: ['happy', 'sad'], colors: ['green', 'red'] },
  2: { emotions: ['peaceful', 'angry'], colors: ['blue', 'orange'] },
  3: { emotions: ['calm', 'anxious'], colors: ['yellow', 'purple'] },
  4: { emotions: ['excited', 'bored'], colors: ['pink', 'brown'] },
  5: { emotions: ['loved', 'lonely'], colors: ['white', 'black'] },
  6: { emotions: ['confident', 'insecure'], colors: ['grey', 'gold'] },
  7: { emotions: ['energetic', 'tired'], colors: ['silver', 'yellow'] },
  8: { emotions: ['optimistic', 'pessimistic'], colors: ['teal', 'navy'] },
  9: { emotions: ['surprised', 'unsurprised'], colors: ['maroon', 'lime'] },
  10: { emotions: ['content', 'discontent'], colors: ['lavender', 'olive'] },
  11: { emotions: ['inspired', 'uninspired'], colors: ['aquamarine', 'beige'] },
  12: { emotions: ['grateful', 'ungrateful'], colors: ['skyblue', 'chocolate'] }
},

Emotions array.

Setting up the foundational WebGL environment was the first step. Initially, small portions of the dataset were integrated to test the visualization capabilities.

Artworks with contrasting emotions needed to be displayed in a manner that highlighted their differences while maintaining a cohesive visual flow.

// d2.js
export const d2 = {
  count: 250707,
  from: 1,
  to: 100000,
  answers: [
    {
      barcode: 'TEST',
      artworks_group_id: '3',
      question_option_id: '1',
      value: '75'
    },
    {
      barcode: 'TEST',
      artworks_group_id: '3',
      question_option_id: '2',
      value: '8'
    },
    {
      barcode: 'TEST',
      artworks_group_id: '3',
      question_option_id: '3',
      value: '57'
    },
    {
      barcode: 'TEST',
      artworks_group_id: '3',
      question_option_id: '4',
      value: '22'
    },
    // ... other answers
  ]
};

Artist answers.

Visualization Techniques

To effectively visualize the emotional connections, Bézier curves were employed to illustrate the relationships between emotions. Each emotion was represented as a point in space, with the curves indicating the flow and transition between them. This approach provided a clear and dynamic representation of how different emotions interplay across various artworks and artists.

createCurvedLine(start, end, strong, color, value, answer) {
  // The control point is a point in space somewhere between start and end.
  const controlPoint = new THREE.Vector3(
    (start.x + end.x) / 2 + Math.random() * 20 - 10, // random offset to vary the curve
    (start.y + end.y) / 2 + Math.random() * 20 - 10,
    (start.z + end.z) / 2 + Math.random() * 20 - 10
  );

  const curve = new THREE.QuadraticBezierCurve3(start, controlPoint, end);
  let opacity = Rome.calcQuadraticValue(value);

  if (opacity <= 0.1) {
    return;
  }

  if (color !== strong) {
    opacity = opacity / 4;
  }

  const points = curve.getPoints(10);
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({
    color,
    opacity: opacity,
    transparent: true,
    linewidth: 0.01,
    depthWrite: false
  });

  const line = new THREE.Line(geometry, material);

  line.userData = {
    type: 'curvedLine',
    barcode: answer.barcode,
    artworks_group_id: answer.artworks_group_id,
    question_option_id: answer.question_option_id,
    chosenColor: color,
    defaultOpacity: opacity
  };

  return line;
},

Handling the extensive dataset required innovative solutions to maintain performance and responsiveness. A looping function was implemented to load a few thousand records at a time, preventing the system from being overwhelmed by the sheer volume of data. As new nodes were introduced, older ones were gradually removed, ensuring steady memory usage and preserving the organic, evolving feel of the visualization.

User Interface and Interaction

The installation features a user interface designed to enhance visitor interaction. Users can toggle between different artists and emotions, such as isolating "optimistic" or "pessimistic" emotions to see how they manifest across various artists' works. This interactive element not only makes the emotional connections tangible but also allows visitors to personalize their exploration based on their interests.

Conclusion

This collaboration with the Maxi Museum underscored the project's potential to blend data visualization with artistic expression, offering visitors a unique way to engage with the museum's collection.

Thank you for reading.

[d.a]