A Chat with GPT: Write in Waves
Can writing be visualized in more than one dimension?
---
system_commands: ['I create small self contained app ideas that could fit in a CodePen or a Replit']
temperature: 0.9
top_p: 1
max_tokens: 512
presence_penalty: 1
frequency_penalty: 1
stream: true
stop: null
n: 1
model: gpt-3.5-turbo
----
write js script ideas for the following idea:
In this first observation of writing, it is the rows, the linear flow of written signs, that make the strongest impression. They make writing seem to express a one-dimensional thinking and so, too, a one-dimensional feeling—desire, judgment, and conduct—a consciousness that was able, through writing, to emerge from the dizzying circles of preliterate consciousness. (Location 421)
id like to use visualization to show what writing would look like in other dimensions
GPT:
Here are three potential JavaScript script ideas that could help visualize what writing might look like in other dimensions:
- 3D Writing: This script would use a 3D graphics library, such as Three.js, to create an interface where the user can enter text and see it rendered in 3D space. The position of each character would represent its place in a virtual third dimension, allowing the user to view their message from different angles and get a sense of how writing might look if it existed on more than just two planes.
- Waveform Writing: In this visualization, individual characters would be represented by points along a continuous waveform that extends across the screen or canvas. As words are typed into an input field or displayed from pre-written text data, they appear as peaks and dips along the waveform's path—similar to how sound waves move through time—and users can manipulate this wave's characteristics (amplitude, frequency) using sliders or buttons.
- Fractal Text: Using fractal geometry techniques for animation with libraries like p5.js or PixiJS, this script visualizes different levels of complexity within written language itself rather than altering its spatial properties directly. For example: by zooming in on individual letters until they reveal new patterns at smaller scales; by animating groups of letters around one another as self-similar shapes emerge and change over time; or even generating entire texts made up entirely out of recursive fractals created according to grammatical rulesets from natural languages worldwide!
Bram:
can you write a script for 2
GPT:
Certainly, here is a JavaScript script for the Waveform Writing visualization:
<!DOCTYPE html>
<html>
<head>
<title>Waveform Writing</title>
</head>
<body>
<h1>Waveform Writing Visualizer</h1>
<label for="input-text">Enter Your Text Here:</label><br />
<textarea id="input-text" rows="4" cols="30"></textarea><br /><br />
<!-- Sliders to adjust waveform properties -->
Amplitude:
<input type="range" id="amplitude-slider" min="-100" max="100"><br/><br/>
Frequency:
<input type= "range"id = "frequency-slider" min= "-20", max ="20"><br/>
<!-- Canvas element to draw waveform -->
<canvas width='800' height ='300' style='border:2px solid black;'></canvas>
<!-- Loading p5.js library -->
<!--<script src= 'https://cdn.jsdelivr.net/npm/p5@1.3.0'><script>-->
<!-- Adding custom JS -->
const inputText = document.getElementById('input-text'); // get input text element
const canvasElement = document.querySelector('canvas');
// Get context of the canvas Element
const ctx = canvasElement.getContext("2d");
function draw() {
ctx.clearRect(0, 0, window.innerWidth , window.innerHeight-50);
let amplitudeValue= document.getElementById("amplitude-slider").value;
let frequncyValue= document.getElementById("frequency-slider").value;
let xSpacing = Math.PI / frequencySlider.value ;
let yCenterPos = (window.innerHeight -50)/2; // Centering Position of Graph Vertically
// Variables that represent the phase and vertical position of the wave
let phase = 0;
let yPosition = amplitudeSlider.value * Math.sin(phase);
ctx.beginPath();
ctx.moveTo(0, yCenterPos);//Starting Point
// Loop through each character in input text and plot on graph
for (let i = 0; i < inputText.value.length; i++) {
// Get the width of this character in pixels so we can space out characters evenly along x-axis
const charWidth = ctx.measureText(inputText.value.charAt(i)).width;
// Plot current letter at next position indicated by its pixel length plus
Bram:
keep gong from // Plot current letter at next position indicated by its pixel length plus
bramadams.dev is a reader-supported published Zettelkasten. Both free and paid subscriptions are available. If you want to support my work, the best way is by taking out a paid subscription.
GPT:
Sure, here's the rest of the code:
// a little extra spacing to separate it from the previous letter.
ctx.fillText(inputText.value.charAt(i), i * (charWidth + 10) + charWidth / 2,yCenterPos + yPosition);
// Increment phase so that subsequent letters continue wave pattern
phase += xSpacing;
// Calculate new vertical position using formula for sine wave
yPosition = amplitudeSlider.value * Math.sin(phase);
}
ctx.stroke(); // Drawing done
}
inputText.addEventListener("input", draw); // Update waveform on input text change
const amplitudeSlider = document.getElementById("amplitude-slider");
const frequencySlider= document.getElementById('frequency-slider');
// Event listeners to redraw wave form whenever slider values change
amplitudeSlider.addEventListener("change", draw);
frequencySlider.addEventListener( "change" ,draw);
</script>
</body>
</html>
In this script, we create an HTML page with a textarea input for text and two range sliders - one each for controlling the amplitude and frequency of our waveform. We add an event listener to trigger a 'draw()' function when any value changes.
The draw() function initializes some variables like canvas context, gets current values from sliders, sets step size between waves according to user selection(using PI/Frequency).
It then loops through each character in entered text by measuring its horizontal width with respect its font-size.
Here I'm also drawing on canvas using filltext method provided by JavaScript drawing API.
Finally we ensure that re-drawing occurs every time there is an update either in input-text or Sliders' value.
With these controls users can visualize what writing might look like if it existed as waves moving across space and data visualization will mimic sound/waveform behaviors where connected characters appear either as peaks or dips along the waveform's path.
Bram:
whats a good title for this app
GPT:
Here are a few options for titles that could fit this Waveform Writing app:
- "Write in Waves"
- "The Sound of Language"
- "Seeing Words as Sounds"
- "Waveform Writer"
- "Visualizing Written Music"