Week 1 – Khalifa Alshamsi

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)