p5asciifyHydraP5Live.js

let libs = ['https://unpkg.com/hydra-synth', 'includes/libs/hydra-synth.js,',"https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.asciify.umd.js"]

let font;

function preload() {
//p5asciify.loadFont(font); // Load a custom font for the ASCII conversion
font = loadFont("https://cdn.glitch.global/8e28a2b8-654f-4e33-95ad-1c5f09651e26/CHUNKY.ttf?v=1743117722728");
p5asciify.loadFont(font); 
}

// hydra canvas + init
let hc = document.createElement('canvas') // hydra canvas + custom size
hc.width = 640 // window.innerWidth // for full res
hc.height = 360 // window.innerHeight // for full res
let hydra = new Hydra({detectAudio: false,canvas: hc})
noize = noise // use noize() since noise() is taken by p5js

let pg // store hydra texture


// sandbox - start
osc([5,10], .1, 10).out()
// sandbox - stop

function setup() {
	createCanvas(windowWidth, windowHeight, WEBGL)
	//background(0)
	pixelDensity(1);
	angleMode(DEGREES);
	pg = createGraphics(hc.width, hc.height)
	noStroke()
	pg2 = createGraphics(width, height);
  pg2.pixelDensity(1);

}

function setupAsciify() {
  p5asciify.fontSize(20); 
  p5asciify.background("#000000"); // Set the background color to black
  p5asciify.renderers().get("brightness").update({
    characters: "o╧▓┼╔╚╞╟╩▄█▌▐",
    invert: false,
  });
  /*
    // Enable the edge renderer and update additional options.
  p5asciify.renderers().get("edge").update({
    enabled: true,
    characterColorMode: "fixed",
    backgroundColorMode: "fixed",
    sobelThreshold: 0.1,
    sampleThreshold: 16,
  });*/
}

function draw() {
	background(255,255,0,sin(frameCount/2)*255)
	// grab + apply hydra texture
	pg.clear()
	pg.drawingContext.drawImage(hc, 0, 0, pg.width, pg.height)
//	texture(pg)
push();
texture(pg)
//rotateX(frameCount)
plane(width, height) // fill screen w/ texture
//image(pg,-width / 2, -height / 2, width, height);
pop();
}