User:Neoksaal/Projects/Interference pattern/Worknote: Interference Pattern/Code to work 2

declaration

what I need here

1. variable for density--might make two for later variation
2. variable for live video input
3. array to store ascii-converted string from the past
4. frame rate and delay seconds to define time gap, calculated into delayframes variable--example: delay
5. variable for final display--it will be a html div container

const density = "Ñ@#W$9876543210?!abc;:+=-,._ ";

let video;
let pastStrings = [];
const FRAME_RATE = 10;
const DELAY_SECONDS = 60;
let delayFrames = DELAY_SECONDS * FRAME_RATE;

let finalAsciiDiv;

setup()

what I need here

1. no need for default canvas
2. no need for default <video> output
3. define frame rate so i dont have to use the default frame rate--60 per second
4. create div for the final output
5. createCapture(VIDEO) function
6. size for the video //might up the video resolution for bigger screen idk

function setup() {
  noCanvas();
  frameRate(FRAME_RATE);
  finalAsciiDiv = createDiv();
  video = createCapture(VIDEO);
  video.size(64, 48);
  video.hide();
}

draw()

main loop

now that what i'm trying to make requires more than only converting frames to ascii function. make this main loop function as a kind of higher level control system that manages the overall flow by calling various helper functions when needed.

what I need here

1. capture frame(p5Image) from the live camera feed → for storing: no need, raw image eats up too much memory, i only need a ascii character string to be stored
   and loadPixels → which prepares pixel data so that frame-to-ascii conversion function can access it
2. call the frame-to-ascii conversion function that processes video and stores it into currentascii variable
3. save the converted ascii string into paststrings array--example: delay
4. outputs the final result as a single ascii stream to the screen--example: two channel delay display
5. ↑ while at it, call the merging function to combine current and past ascii frames based on whatever interaction rules that i haven't made yet

function draw() {
 video.loadPixels();
 
 let currentAscii = convertToAscii(video);
 pastStrings.push(currentAscii);

 if (pastStrings.length > delayFrames) {
 pastStrings.shift();
}
 if (pastStrings.length===delayFrames) {
 let pastAscii = pastStrings[0];
 let mergedAscii = mergeAscii(currentAscii, pastAscii);
 finalAsciiDive.html(mergedAscii);
}
}

helper function

convert to ascii

what I need here

1. almost exactly the same as example: convert to ascii. just don't format it as html yet because main loop should do it with mergeAscii function
2. return statement so that the output can be used outside of this function

function convertToAscii(img) { // video, img, the name doesn;t matter here
  let asciiString = "";
  for (let j = 0; j < img.height; j++) { 
    for (let i = 0; i < img.width; i++) { 
      const pixelIndex = (i + j * img.width) * 4;
      const r = img.pixels[pixelIndex + 0];
      const g = img.pixels[pixelIndex + 1];
      const b = img.pixels[pixelIndex + 2];
      const avg = (r + g + b) / 3;
      const len = density.length;
      const charIndex = floor(map(avg, 0, 255, 0, len));
      const c = density.charAt(charIndex);
      if (c == " ") asciiString += "&nbsp;";
      else asciiString += c;
    }
    asciiString += "<br/>";
  }
  return asciiString;
}

then it outputs as strings that has each line of horizontal row(x axis) and breaks line vertically :

"abcd<br/>efgh<br/>ijkl<br/>"

which then appears in html as:

a b c d
e f g h
i j k l

merge into one stream

i need help with this one
what I need here

1. here should be able to take two ascii strings(past, current) and compare them. (Leo recommend to do it line by line)
   ↳ use split(), separate them by line breaks br/ and make them into each elements on a string
2. go over the grid of current and past ascii(like we did on converToAscii function), use if and else if for comparing mechanism
3. append(+=) the corresponding character to output line variable, break line at the end of the loop
4. return statement

function mergeAscii(currentAscii, pastAscii) {
 let currentLines = currentAscii.split("<br/>");
 let pastLines = pastAscii.split("<br/");

 let mergedLine = "";










 return mergedLine;
}

• difference between slice(), splice(), split() methods