Category: F2024 – Nimrah

Concept:

The look I was going for was to follow this random game that keeps popping up in my ads, which is a knockoff version of Venom, I think… But yeah, this shape moving around randomly was the look I was going for.

Code:

// Defines the variables for the creature's position
let posX, posY;
let offsets = [];
// Number of points (vertices) to create the creature
let numVertices = 10;
let radius = 50;

function setup() {
  createCanvas(400, 400);
  
  // Starts the creature's position in the center of the canvas
  posX = width / 2;
  posY = height / 2;

  // Fills the offsets array with random numbers
  // These random numbers will change the shape's vertices over time
  for (let i = 0; i < numVertices; i++) {
    offsets.push(random(10)); // Adds a random number between 0 and 10
  }
}

function draw() {
  background(220);
  
  // Update the creature's position
  updatePosition();
  fill(0);
  noStroke();
  
  // Begin drawing the shape
  beginShape();
  
  // Loops through each vertex to create the creature
  for (let i = 0; i < numVertices; i++) {
    // Calculates the angle for each point (vertex) on the shape
    // This spreads the points around a circle
    let angle = map(i, 0, numVertices, 0, TWO_PI); // Spread angles evenly

    // Calculates the X and Y position of each vertex based on the angle
    // I used sine and cosine to make the points go around in a circle
    // Also, added some randomness to the position using offsets
    let x = cos(angle) * (radius + sin(frameCount * 0.05 + offsets[i]) * 20);
    let y = sin(angle) * (radius + sin(frameCount * 0.05 + offsets[i]) * 20);
    
    // Places the vertex at the calculated X and Y position
    // While also adding posX and posY to move the shape to the creature's position
    vertex(posX + x, posY + y);
  }
  
  endShape(CLOSE);

  // Draws a border around the canvas so we can see the boundary
  noFill();
  stroke(0);
  strokeWeight(2);
  rect(0, 0, width, height);
}

// Functions to update the creature's position
function updatePosition() {
  // Moves towards the mouse if it's on the canvas
  posX = posX + (mouseX - posX) * 0.05; // Moves X position closer to mouse
  posY = posY + (mouseY - posY) * 0.05; // Moves Y position closer to mouse

  // Constrains the creature's position so it doesn't leave the canvas
  // By subtract/add 'radius' to stop the creature before it goes out completely
  posX = constrain(posX, radius, width - radius);
  posY = constrain(posY, radius, height - radius);
}

 

Sketch:

The proud work from the inspirational randomness work of a weird-looking venom game.

Reflection:

While reflecting on the code, I would’ve liked to create a better-looking creature, and by that, I mean the curves and smoothness of its edges instead of the sharp edges of the creature. But overall, I am happy with the work.

Sources that helped:

https://natureofcode.com/book/chapter-3-oscillation/

The Coding Train on Youtube:

Random Walker in p5.js (Coding Challenge 52) & Drawing Shapes in p5.js for beginners (1.3)

The introduction chapter in The Computational Beauty of Nature by Gary William Flake uses principles of Computer Science to address significant biological phenomena. He starts with reductionism or more simply comprehension through dissection which can also be viewed as an altered interaction of different agents at distinct levels. We have various pieces of evidence (naturally occurring at that) that support this perspective. For example, Ant Colonies have a peculiar behavior that cannot be understood by examining each ant. It is the interaction between individuals that eventually form a colony’s complex patterns. Evolution operates with a similar mechanism. Over time, individual organisms interact via which new species might be produced. Our high level of consciousness or intelligence, also can’t be reduced to properties of individual neurons. These are some of the examples I found most interesting, and they align and deliver the main message of the author. This is to consider parallelism, iteration, feedback, adaption, and more to understand the full system of these complex pictures.

The author does truly bring many examples with this holistic approach, but I feel like it undermines the significance of reductionism. At a simple level, it is a very important scientific tool that is used by many scientists all over the world, even I used it repeatedly in school as it remained a core component in the analysis of many phenomena. Furthermore, yes while on its own it might not offer the full picture, dismissing it is not the right approach. I think the combination of reductionist and interactionist approaches is what works the best, where they make up for each other’s weaknesses. While the author acknowledges it, the overall tone still feels biased towards interactionism. The author also argues that the widespread introduction of computers has unified lots of disciplines by enabling combination of theory and experiments.Such methods include the use of fractals (modeling plant growth) and chaos (applied in physics, bio, econ, etc.) to provide a merger of those disciplines. Despite this, significant fragmentation is still relevant as scientists may use those methods but struggle to connect them to domain-specific insights. In theory, it’s possible, but how far can we extend the computation metaphor before we lose its predictive power? I think the author’s arguments are compelling but more nuance is needed in some cases.