Hello everyone,
I developed a sketch on interactive typography. I wanted to create a keyboard-sensitive interaction with PressDo in the work whose codes I share with you below. However, “ArrowUp” and “ArrowDown” do not work and all commands work with “ArrowRight” and “ArrowLeft”.
What I want to do:
ArrowUp to increase the number of circles, ArrowDown to decrease the number of circles.
ArrowRight to increase the circle size and ArrowDown to decrease the circle size.
Can you help me with this?
<
import { createNoise4D } from ‘https://cdn.skypack.dev/simplex-noise@4.0.0’
import { mountFlex } from “https://cdn.jsdelivr.net/npm/p5.flex@0.0.0/src/p5.flex.mjs”
import { PressDo } from “./Control.js”
mountFlex(p5)
let font;
let points = ;
const speed = 0.02;
const CIRCLE_RADIUS = 200;
let amount = 200;
let circleSize = 2;
let circleCount = 10;
let isCurve = true;
let isShowCircle = true;
let angleOffset;
new p5((p) => {
const simplexNoiseSeed = p.random()
const noise4D = createNoise4D(()=>simplexNoiseSeed)
p.preload = () => {
font = p.loadFont('NotoSansThin.ttf');
}
p.setup = () => {
p.createCanvas(600, 600)
p.pixelDensity(4)
p.stroke(255)
p.noFill()
let fontSize = 500;
p.textFont(font);
p.textSize(fontSize);
let message = "A";
let txtPoints = font.textToPoints(message, p.width / 4, p.height / 1.5, fontSize, {
sampleFactor: 0.1
});
let averageX = 0;
let averageY = 0;
for (let i = 0; i < txtPoints.length; i++) {
averageX += txtPoints[i].x;
averageY += txtPoints[i].y;
}
averageX /= txtPoints.length;
averageY /= txtPoints.length;
for (let i = 0; i < txtPoints.length; i++) {
points.push(p.createVector(txtPoints[i].x - averageX, txtPoints[i].y - averageY));
}
angleOffset = p.PI / 1.5;
PressDo("c", () => { isCurve = !isCurve })
PressDo("s", () => { isShowCircle = !isShowCircle })
PressDo("ArrowUp", () => { circleSize = p.max(1, circleSize + 1) });
PressDo("ArrowDown", () => { circleSize = p.max(1, circleSize - 1) });
PressDo("ArrowRight", () => { circleCount += 1 });
PressDo("ArrowLeft", () => { circleCount = p.max(1, circleCount - 1) });
p.flex()
}
p.draw = () => {
const t = p.frameCount * speed;
p.background(0);
const noiseWeight = p.map(p.mouseX, 0, p.width, -100, 100, true);
const angle = p.map(p.mouseY, 0, p.height, -p.PI, p.PI, true) + angleOffset;
p.push();
p.translate(p.width / 2, p.height / 2);
//p.rotate(angle);
drawNoboFromPoints(points, CIRCLE_RADIUS, noiseWeight, amount, circleSize, circleCount, t);
p.pop();
}
const drawNoboFromPoints = (points, radius, noiseWeight, amount, circleSize, t) => {
p.push();
p.beginShape();
for (let i = 0; i < points.length; i++) {
const x = points[i].x;
const y = points[i].y;
const nx = noise4D(x + 100, y + 200, p.cos(t), p.sin(t)) * noiseWeight;
const ny = noise4D(x + 300, y + 400, p.cos(t), p.sin(t)) * noiseWeight;
if (isCurve) p.curveVertex(x + nx, y + ny);
else p.vertex(x + nx, y + ny);
if (isShowCircle) p.ellipse(x + nx, y + ny, circleSize, circleSize);
}
p.endShape();
p.pop();
}
});
I’ve omitted them for simplicity & b/c browsers do well w/o them.