In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
p5(sketch => {
let font, root, teText
let w = width
let h = w/2
let fvss = "" // font variable style sheet
let letter = [] // array of divs that contain the letters
let x = 0
let y = 0
let z = 0
/* the standard font style names, fvar "font variation" table
"wght" font-weight
"wdth" font-stretch
"opsz" font-optical-sizing
the rest are custom to this font
*/
let fvar =[
{"tag":"wght","minValue":100,"defaultValue":400,"maxValue":900,"name":{"en":"wght"}},
{"tag":"wdth","minValue":50,"defaultValue":100,"maxValue":125,"name":{"en":"wdth"}},
{"tag":"opsz","minValue":8,"defaultValue":14,"maxValue":144,"name":{"en":"opsz"}},
{"tag":"GRAD","minValue":-1,"defaultValue":0,"maxValue":1,"name":{"en":"GRAD"}},
{"tag":"XTRA","minValue":324,"defaultValue":562,"maxValue":640,"name":{"en":"XTRA"}},
{"tag":"XOPQ","minValue":18,"defaultValue":176,"maxValue":263,"name":{"en":"XOPQ"}},
{"tag":"YOPQ","minValue":15,"defaultValue":124,"maxValue":132,"name":{"en":"YOPQ"}},
{"tag":"YTLC","minValue":420,"defaultValue":500,"maxValue":570,"name":{"en":"YTLC"}},
{"tag":"YTUC","minValue":500,"defaultValue":750,"maxValue":1000,"name":{"en":"YTUC"}},
{"tag":"YTAS","minValue":500,"defaultValue":767,"maxValue":983,"name":{"en":"YTAS"}},
{"tag":"YTDE","minValue":-500,"defaultValue":-240,"maxValue":-138,"name":{"en":"YTDE"}},
{"tag":"YTFI","minValue":425,"defaultValue":760,"maxValue":1000,"name":{"en":"YTFI"}}
]
sketch.setup = function() {
root = sketch.createDiv("")
root.style('margin','0 auto')
root.style('width','60%')
root.id('root')
teText = 'HellosWoQlj3'
// create a Div for each letter
for (let i = 0; i < teText.length; i++){
letter[i] = sketch.createDiv(teText[i]) // create a DIV with one character from teText.
letter[i].parent('root') // connect it to the root div using ID
letter[i].class(`letters`) // set the class to use to great some styling from the css
letter[i].style('font-size', `80px`) // set default font size to 100px
letter[i].style('float','left')
}
sketch.createCanvas(w , h )
sketch.noStroke()
sketch.fill('#F9F871')
sketch.textSize(14)
};
sketch.draw = function() {
sketch.background('#524D85')
sketch.push()
sketch.translate(w / 2, h / 2)
sketch.ellipse(sketch.sin(x)*(w/3), sketch.cos(y)*(h/3), sketch.cos(z)*50)
x += 0.05
y += 0.1
z += 0.05
sketch.pop()
for (const character in letter) {
let fw= sketch.map(sketch.sin(x), -1,1, fvar[character].minValue, fvar[character].maxValue) // minValue -- defaultValue
fvss = `"${fvar[character].tag}" ${fw}`
letter[character].style('font-variation-settings', fvss)
console.log( character, fvar[character].minValue , fvar[character].maxValue, )
}
}
})
<link href=${localfont + ":wght@900&display=swap"} rel="stylesheet">
<style>
body,svg {
font-family: 'AmstelvarAlpha';
}
@font-face {
font-family: 'AmstelvarAlpha';
src: url(${localfont}) format("truetype-variations");
}
.letters {
overflow: hidden;
text-align: left;
padding: 1%;
color: rgb(61, 174, 164);
font-size: 4vw;
</style>
localfont = FileAttachment("Amstelvar-Roman.ttf").url()
import {p5, ParticleSystem} from "@tmcw/p5"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
