Creative Coding

Coding / Video Editing

Applications Used:

The Goal:

The goal of this project was to broker a use of computer code with a community of practice and then present it in a documentation.

Community of Practice(CoP):

Communities of practice are groups of people who share a concern or passion for something they do and learn how to do it better as they interact regularly.

CoP's can be defined into 3 areas:

Domain (Main context)
Shared repetoire (Behaviours)
Shared values (Attitudes)

My chosen CoP was my group of friends.

The domain was the game Valorant.

The repetoire was the gamemode Deathmatch.

The value was competition.

Stage 1:

After brainstorming ideas, I decided to create a visual code showcasing circles moving across the screen as if it were a race. Which displays a form of competition as stated by my CoP's values.

To begin with, I implemented moving circles in my p5.js editor.

By using a constructor, I was able to create the circles based on the players indivdual statistics. For example, the combat score represented the size of the circle while the amount of kills represented the speed.

let img1
let img2
let img3
let img4
let img5

class player {
  constructor (p, n, s, k, d, a) {
    this.player     = p
    this.name       = n
    this.cs         = s
    this.kills      = k
    this.deaths     = d
    this.assists    = a
    this.pos = {
      x: 0,
      y: height / 6
    }
  }
  
  draw () {
    
    ellipse(this.pos.x, this.pos.y * this.player, this.kills * 1.5)
  }
  
  move () {
    this.pos.x = this.pos.x + (this.cs / 2000)
    
    if (this.pos.x > width + this.kills) {
        this.pos.x = this.kills * -1
    }
  }
}

const players = []

function setup() {
  createCanvas(800, 400);

  players.push (new player (1, 'NATHAN', 7000,  25, 30, 8))
  players.push (new player (2, 'JOHNNY', 10000, 37, 23, 6))
  players.push (new player (3, 'CECE',   6000,  20, 30, 9))
  players.push (new player (4, 'RUBEN',  12000, 40, 29, 10))
  players.push (new player (5, 'LUCAS',  5000,  17, 27, 8))
  
  console.log (players)
  
}

function draw() {
  background("black")

  players.forEach ((p, i) => {
    p.draw ()
    p.move ()
  })
}

Stage 2:

In order to make the circles more visually appealing, I implemented a trail effect to my code elevating the visual aspect of the circles moving tremendously. To further increase the visual appeal I added different colors to the circles.

  // helps create the trail effect
  fill (0, 12)
  rect (0, 0, 1600, 800)
  fill(255)
  noStroke()

Images were also incorporated to further personalise the circles with each player.

Final Stage:

With my code, I still needed to somehow incorporate the deaths and assist of each player into my code. Funnily enough I was inspired by the board game Snakes and Ladders. When playing Snakes and Ladders, if you land on a snake your piece will move down the board, whereas if you land on a ladder your piece will move up.

In the case of my code, the player icons will be jumping forward or backwards depending on the amount of deaths and assist they have. (This was done by changing the numbers into percentages).

let img1;
let img2;
let img3;
let img4;
let img5;

// creates a constructor to make use of the stat numbers
class player {
  constructor(p, n, s, k, d, a, i, c) {
    this.player  = p;
    this.name    = n;
    this.cs      = s;
    this.kills   = k;
    this.deaths  = d;
    this.assists = a;
    this.icon    = i;
    this.colour  = c;
    this.pos = {
      x: 0,
      y: height / 6,
    };
  }

  // draws the ellipse
  draw() {
    
    // this.colour was chosen based on individuals favourite colour
    fill(this.colour);

    // image size was based on the players amount of kills (multiplied by 1.5 to make the difference easier to see)
    fill(this.colour);
    ellipse(this.pos.x, this.pos.y * this.player, this.kills * 1.5);

    // images of individuals discord items were added into the folder "image," +10 was given to the image position so it is not blocked by the ellipse made above
    imageMode(CENTER);
    image(this.icon, this.pos.x + 10, this.pos.y * this.player, this.kills * 1.5, this.kills * 1.5);
  }

  // moves image forward
  move() {
    
    // movement is based on the players combat score (divided by to make the difference easier to see)
    this.pos.x = this.pos.x + (this.cs / 2000);

    // if image exits the canvas it will return to the start
    if (this.pos.x > width + this.kills) {
       this.pos.x = this.kills * -1;
    }
  }

  // moves images back 100 pixels
  death() {
    
    // percentage will return a random number between 0 and 1
    var percentage = random(0, 1);

    // image moves back 100 pixels based on the players amount of deaths (the deaths were divided by 5000 in order to see more of an effect)
    if (percentage < this.deaths / 5000) {
       this.pos.x = this.pos.x - 100;
    }
  }

  // moves images forwards 100 pixels
  assist() {

    // a random number between 0 and 1 is given
    var percentage = random(0, 1);
  
    // image moves forward 100 pixels based on the players amount of assist (the assist were divided by 5000 in order to see more of an effect)
    if (percentage < this.assists / 5000) {
       this.pos.x = this.pos.x + 100;
    }
  }
}

// array is created to load player stats
const players = [];

function setup() {
  createCanvas(800, 400);

  // load the different icon images
  icon1 = loadImage("images/iconNathan.png");
  icon2 = loadImage("images/iconJohnny.png");
  icon3 = loadImage("images/iconCece.png");
  icon4 = loadImage("images/iconRuben.png");
  icon5 = loadImage("images/iconLucas.png");

  // individual player scoreboards was added to the "players" array
  // game 1
  players.push(new player(1, "NATHAN", 7000,  25, 30, 8,  icon1, "#AEF359"));
  players.push(new player(2, "JOHNNY", 10000, 37, 23, 6,  icon2, "#FFFF00")); 
  players.push(new player(3, "CECE",   6000,  20, 30, 9,  icon3, "#89CFF0"));
  players.push(new player(4, "RUBEN",  12000, 40, 29, 10, icon4, "#E39FF6"));
  players.push(new player(5, "LUCAS",  5000,  17, 27, 8,  icon5, "#FFFFFF"));
  
    // game 2
//   players.push(new player(1, "NATHAN", 7000, 25, 27, 4,  icon1, "#AEF359"));
//   players.push(new player(2, "JOHNNY", 9000, 33, 21, 6,  icon2, "#FFFF00")); 
//   players.push(new player(3, "CECE",   7000, 24, 30, 4,  icon3, "#89CFF0"));
//   players.push(new player(4, "RUBEN",  8000, 29, 18, 7,  icon4, "#E39FF6"));
//   players.push(new player(5, "LUCAS",  4000, 13, 28, 12, icon5, "#FFFFFF"));
  
    // game 3
  // players.push(new player(1, "NATHAN", 6000,  20, 35, 6, icon1, "#AEF359"));
  // players.push(new player(2, "JOHNNY", 11000, 40, 22, 1, icon2, "#FFFF00"));
  // players.push(new player(3, "CECE",   6000,  20, 19, 4, icon3, "#89CFF0"));
  // players.push(new player(4, "RUBEN",  6000,  22, 22, 4, icon4, "#E39FF6"));
  // players.push(new player(5, "LUCAS",  4000,  13, 27, 3, icon5, "#FFFFFF"));

  console.log(players);
}

function draw() {
  
  // helps create the trail effect
  fill(0, 12);
  rect(0, 0, 1600, 800);
  fill(255);
  noStroke();

  // completes each function within the constructor on each player included in the array
  players.forEach((p, i) => {
    p.draw();
    p.move();
    p.death();
    p.assist();
  });
}

Video Documentation:

The video was created in a documentary styled format using Premier Pro