Week 05: Midterm Initial Project – Introduction to Interactive Media

Concept :

I’ve always found the brain fascinating, especially how neurons fire and communicate. It’s like this intricate dance of connections that sparks thoughts and actions. Interestingly, voices also make our neurons fire. So, I thought, why not combine that with a game I love? I decided to merge the concept of neuron firing with the mechanics of the classic 2048 game.

Instead of numbers merging, it’s all about neurons connecting and lighting up, almost like a visual representation of a neural network in action. It’s exciting to see how each move can mimic real-life brain activity. The main goal is to keep merging neurons to reach the ultimate neuron—represented as a “Super Neuron”—while continuously creating connections to maintain an active and vibrant neural network. Players can aim for high scores, challenging themselves to beat their previous records or compete with others.

Game Design:

The main goal of the game is to keep building neuron connections. Among all the neuron like particles, there are some target particles (super neuron) that are shown as neuron spark. Player needs to click on the glowing/target particle to create a connection with sparking neuron and the neurons near the area. The neurons merges and more connections keeps building as apart of the simulation. If the player is able to make 05 connections, the player will pass the level.

Codes I’m Proud of:

Still, the code is in a beginning level and requires lots of modifications to finish the game. The first thing I liked is how the neurons look like which I created using particles as function.

// Start simulation with neurons
function startSimulation() {
  background(0);
  orbitControl();  // Allow mouse control to rotate

  // Analyze the audio amplitude and spectrum
  let spectrum = fft.analyze();
  let level = amp.getLevel();

  // Set lighting
  ambientLight(20, 20, 30);
  pointLight(255, 255, 255, 0, 0, 300);

  // Slowly rotate the scene
  rotateY(frameCount * 0.001);
  rotateX(frameCount * 0.0015);

  // Draw neurons (with sparkle effect)
  for (let i = 0; i < particles.length; i++) {
    let p = particles[i];
    p.move(level);
    p.display();
    
    // Draw lines between nearby particles (neurons)
    for (let j = i + 1; j < particles.length; j++) {
      let d = dist(p.pos.x, p.pos.y, p.pos.z, particles[j].pos.x, particles[j].pos.y, particles[j].pos.z);
      if (d < 120) {
        strokeWeight(map(d, 0, 120, 4, 0.1));
        stroke(150, 150, 255);
        line(p.pos.x, p.pos.y, p.pos.z, particles[j].pos.x, particles[j].pos.y, particles[j].pos.z);
      }
    }
  }

  // Draw the target particle (glowing neuron)
  targetParticle.move();
  targetParticle.display();
  
  // Handle interactions with the target particle
  if (mouseIsPressed) {
    let d = dist(targetParticle.pos.x, targetParticle.pos.y, targetParticle.pos.z, mouseX - width / 2, mouseY - height / 2, 0);
    if (d < 50) {
      fireNeurons();
      connectToNearestNeuron();  // Connect the glowing neuron to the nearest neuron
      score++;  // Increase score when a neuron is clicked
    }
  }

I also tried to make the particles change positions according to the audio amplitude.

fft = new p5.FFT();
amp = new p5.Amplitude();

// Analyze the audio amplitude and spectrum
let spectrum = fft.analyze();
let level = amp.getLevel();

I tried to implement another cool feature that creates dynamic connections between neurons when they come near each other. This mimics real neural networks and adds a layer of interaction. But, the code might have some flaws.

// Draw lines between nearby particles (neurons)
for (let j = i + 1; j < particles.length; j++) {
  let d = dist(p.pos.x, p.pos.y, p.pos.z, particles[j].pos.x, particles[j].pos.y, particles[j].pos.z);
  if (d < 120) {
    strokeWeight(map(d, 0, 120, 4, 0.1));
    stroke(150, 150, 255);
    line(p.pos.x, p.pos.y, p.pos.z, particles[j].pos.x, particles[j].pos.y, particles[j].pos.z);
  }
}

P5.js Sketch:

Future Works:

Need to find a proper background with the name visible for players.
Need to add descriptions on the Read part and fix the settings on the Settings Page.
Regarding the game design part, it requires to fix the game mechanics as the game flow is not implemented yet.
Need to monitor the performance and use techniques like frame rate.
Need to work on the sound. Create a sound experience that reacts dynamically to what’s happening in the game. For example, as neurons connect, the music could change in tempo or complexity

Leave a Reply Cancel reply