Neoksaal: Created page with "=rules= ==framework==
: ↳ large number, or a cluster, of bright characters(index 9 - 14) indicate absence or void or low presenc..."

2026-07-22T17:33:02Z

Created page with "=<span style="font-family: monospace;">rules</span>= ==<span style="font-family: monospace;">framework</span>== <div style="font-size:16px;> * three sets of characters, [current], [past], [anomalies] * the brightness divided into 15 levels (0-14) </div> 0 - 2 darkest 3 - 5 dark-ish 6 - 8 middle 9 - 11 bright-ish 12 - 14 brightest <div style="font-size:16px;> : ↳ large number, or a cluster, of bright characters(index 9 - 14) indicate absence or void or low presenc..."

New page

=<span style="font-family: monospace;">rules</span>=
==<span style="font-family: monospace;">framework</span>==
<div style="font-size:16px;>
* three sets of characters, [current], [past], [anomalies]
* the brightness divided into 15 levels (0-14)
</div>
0 - 2 darkest
3 - 5 dark-ish
6 - 8 middle
9 - 11 bright-ish
12 - 14 brightest
<div style="font-size:16px;>
: ↳ large number, or a cluster, of bright characters(index 9 - 14) indicate absence or void or low presence<br>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
<br>
</div>
==<span style="font-family: monospace;">merge logic</span>==
<div style="font-size:16px;>
use boolean statement
</div>
'''if''' currentIndex '''>''' or '''=>''' or '''<''' or '''<=''' or '''===''' [index number] '''&&''' pastIndex '''>''' or '''=>''' or '''<''' or '''<=''' or '''===''' [index number] '''{<br> mergedLine += '[resulting character with span styling tag]';<br><br> else if ------ <br><br> else ------<br>}'''
<br>
===<span style="font-family: monospace; font-size:19px;">baseline logic<span>===
{| class="wikitable"
|-
! 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
|}
<div style="font-size:16px;>
→ this is too simple. I'm little bit worried that it would end up boring<br>
: ↳ but the clear logic can ensure reabability<br>
<br>
<br>
<br>
</div>
<br>
<br>
<br>

==<span style="font-family: monospace;">output rendering</span>==
<div style="font-size:16px;>
<br>
<br>
<br>
</div>
<br>
<br>
<br>
=<span style="font-family: monospace;">code to work</span>=
==<span style="font-family: monospace;">declaration</span>==
<div style="font-size:16px;>
'''what I need here'''
# two different character set for current, past frames
</div>
<syntaxhighlight lang="javascript">
const density = "ABCDEFGHIJKLMNO";

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

let finalAsciiDiv;
</syntaxhighlight>
<br>

==<span style="font-family: monospace;">setup()</span>==
<div style="font-size:16px;>
'''--same--'''
</div>
<syntaxhighlight lang="javascript">
function setup() {
noCanvas();
frameRate(FRAME_RATE);
finalAsciiDiv = createDiv();
video = createCapture(VIDEO);
video.size(64, 48);
video.hide();
}
</syntaxhighlight>
<br>
<br>
<br>
==<span style="font-family: monospace;">draw()</span>==
===<span style="font-family: monospace; font-size:19px;">main loop<span>===
<div style="font-size:16px;>
'''--same--'''
</div>
<br>
<syntaxhighlight lang="javascript">
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
}
</syntaxhighlight>
<br>
<br>
<br>

===<span style="font-family: monospace; font-size:19px;">helper function<span>===
====<span style="font-family: monospace; font-size:17px;">convert to ascii<span>====
<div style="font-size:16px;>
'''what I need here'''
# <s>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)</s><br> ↳ ahhh no need, forgot it works with the index of the density spectrum. i only need to manipulate that in css (or not even)
</div>
<syntaxhighlight lang="javascript">
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 += " ";
else asciiString += c;
}
asciiString += "<br/>";
}
return asciiString;
}
</syntaxhighlight>
<br>
<div style="font-size:16px;>
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf indexOf() mdn]
* [https://www.w3schools.com/jsref/jsref_indexof.asp indexOf() w3c]
</div>
<br>
<br>
====<span style="font-family: monospace; font-size:17px;">merge into one stream<span>====
<div style="font-size:16px;>
'''what I need here'''
# 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.
# !!i for rows, j for collumns!!<br> ↳ get the same index of the row first, then the column.
# the conditional rule should outputs the resulting character
# append(+=) the resulting character to line(a row by row) variable, add break line at the end of the loop
# return statement
<br>
<br>
</div>
<syntaxhighlight lang="javascript">
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;
}
</syntaxhighlight>
<div style="font-size:16px;>

<br>
<br>

</div>

==<span style="font-family: monospace;">time stamp</span>==
<div style="font-size:16px;>
juxtaposition of two timestamps showing the time of the current frame and the time of the past frame<br>
☀︎Fred gave me this idea i quite like it☀︎<br>
</div>
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
<div style="font-size:16px;>
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date date mdn]
<blockquote>
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).
</blockquote>
* [https://www.w3schools.com/js/js_dates.asp javascript date objects w3c]
<blockquote>
By default, JavaScript will '''use the browser's time zone and display a date as a full text string'''
</blockquote>
<br>
<br>
<br>
'''what I need here'''
<br>
<br>

</div>
<br>
<br>
<br>

=<span style="font-family: monospace;">customization</span>=

==<span style="font-family: monospace; font-size:19px;">current density<span>==
<br>
<br>
<br>
==<span style="font-family: monospace; font-size:19px;">past density<span>==
<br>
<br>
<br>
==<span style="font-family: monospace; font-size:19px;">anomalies<span>==
<div style="font-size:16px;>
<br>
<br>
<br>
</div>
[[File:Custom test1.png|thumb|400px|test with 2 different character sets]]

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

Neoksaal: Created page with "=rules= ==framework== : ↳ large number, or a cluster, of bright characters(index 9 - 14) indicate absence or void or low presenc..."

Neoksaal: Created page with "=rules= ==framework==
: ↳ large number, or a cluster, of bright characters(index 9 - 14) indicate absence or void or low presenc..."