User:Neoksaal/Projects/Interference pattern/Worknote: Interference Pattern/Customization & Rules

rules

framework

• three sets of characters, [current], [past], [anomalies]
• the brightness divided into 15 levels (0-14)

0 - 2 darkest
3 - 5 dark-ish
6 - 8 middle 
9 - 11 bright-ish
12 - 14 brightest

↳ large number, or a cluster, of bright characters(index 9 - 14) indicate absence or void or low presence
while dark characters(index 0 - 5) indicate presence or visual density

• both past and present ascii character sets must have the same number of characters. also on the same alphabet, for pixel to character modulation and convenient merging logic

merge logic

use boolean statement

if currentIndex > or => or < or <= or === [index number] && pastIndex > or => or < or <= or === [index number] {
 mergedLine += '[resulting character with span styling tag]';

 else if ------ 

 else ------
}

baseline logic

Current	Past	Result
brightest	darkest	past
brightest	dark-ish	past
brightest	middle	past
brightest	bright-ish	past
brightest	brightest	anomaly
bright-ish	darkest	past
bright-ish	dark-ish	past
bright-ish	middle	past
bright-ish	bright-ish	anomaly
bright-ish	brightest	current
middle	darkest	past
middle	dark-ish	past
middle	middle	anomaly
middle	bright-ish	current
middle	brightest	current
dark-ish	darkest	past
dark-ish	dark-ish	anomaly
dark-ish	middle	current
dark-ish	bright-ish	current
dark-ish	brightest	current
darkest	darkest	anomaly
darkest	dark-ish	current
darkest	middle	current
darkest	bright-ish	current
darkest	brightest	current

→ this is too simple. I'm little bit worried that it would end up boring

↳ but the clear logic can ensure reabability

code to work

declaration

what I need here

1. two different character set for current, past frames

const density = "ABCDEFGHIJKLMNO";

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

let finalAsciiDiv;

setup()

--same--

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

draw()

main loop

--same--

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);
    finalAsciiDiv.html(mergedAscii);
  } else {
    finalAsciiDiv.html(currentAscii);
  } //missed this one, same delay logic
}

helper function

convert to ascii

what I need here

1. i'll be using three character sets, one for current density, another for past density, lastly a set of anomalies. first i need conversion between current and past density set at some point here (make sure the both density sets--past and present--has same amount of character for modulation later)
   ↳ ahhh no need, forgot it works with the index of the density spectrum. i only need to manipulate that in css (or not even)

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;
}

• indexOf() mdn
• indexOf() w3c

merge into one stream

what I need here

1. compare two ascii frames (past and current. like we did on converToAscii function), using character by character comparison. both frames are splt into rows using the line break, and each row is procesesd one character at a time using the loop.
2. !!i for rows, j for collumns!!
   ↳ get the same index of the row first, then the column.
3. the conditional rule should outputs the resulting character
4. append(+=) the resulting character to line(a row by row) variable, add break line at the end of the loop
5. return statement

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

 let mergedOutput = "";

 for (let i = 0; i < currentLines.length; i++) {
  let currentLine = currentLines[i];
  let pastLine = pastLines[i];

  let mergedLine = "";

  for (let j = 0; j < currentLine.length; j++) {
   let currentCharacter = currentLine[j];
   let pastCharacter = pastLine[j];

   //rules//


}



   mergedOutput += mergedLine + "<br/>";
}
 return mergedOutput;
}

time stamp

juxtaposition of two timestamps showing the time of the current frame and the time of the past frame
☀︎Fred gave me this idea i quite like it☀︎

basically it should look something like:
[13:42:10]———[13:41:20]
the current frame time written on the left-top corner, and the past frame time on the right-top corner

• date mdn

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects encapsulate an integral number that represents milliseconds since the midnight at the beginning of January 1, 1970, UTC (the epoch).

• javascript date objects w3c

By default, JavaScript will use the browser's time zone and display a date as a full text string

what I need here

customization

anomalies

test with 2 different character sets