Dooo Weee Rooock?! for CodePen Long Text Challenge with ZIM

dooo-weee-rooock-for-codepen-long-text-challenge-with-zim.markdown

Dooo Weee Rooock?! for CodePen Long Text Challenge with ZIM

Here we feature LabelOnArc() - there is also Label, LabelLetters and LabelOnPath in ZIM - see https://zimjs.com/docs.html. We use a Dial to set the number of repeats on the vowels which was the fun challenge - solved with Regular Expressions!

ZIM provides JavaScript conveniences, components and controls for the Canvas. Code Creativity with ZIM! See the CodePen Topic page for ZIM at https://codepen.io/topic/zim

A Pen by ZIM on CodePen.

License.

script.babel

import zim from "https://zimjs.org/cdn/00/zim";

// see https://zimjs.com
// and https://zimjs.com/learn
// and https://zimjs.com/docs

const frame = new Frame(FIT, 1024, 768, darker, dark, {font:"showcard", src:"https://assets.codepen.io/2104200/SHOWG.TTF"});
frame.on("ready", () => {
    const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;
   
    // put your code here
	
	const record = new Circle(350,black,yellow.darken(.7),5)
		.center()
		.reg(5,3) // make the record a little off-center
		.animate({
			props:{rotation:360}, // or maybe -360 to read better?
			time:10,
			ease:"linear",
			loop:true
		});
	
	const text = "DO WE ROCK?!";
	const vowels = ["A","E","I","O","U"];
	const dial = new Dial({backgroundColor:yellow.darken(.3)}).sca(2).center();
	const label = new LabelOnArc(text, 50, "showcard", [red,pink,green,yellow], dial.width)
		.center(record);
	
	dial.on("change", ()=>{
		let t = text;
		loop(vowels, v=>{
			let insert = v;
			loop(dial.currentValue, ()=>{insert+=v;});
			let reg = new RegExp(v,"g");
			t=t.replace(reg,insert);
		})
		label.radius = dial.width + 5*dial.currentValue;
		label.text = t;
	});
	
	// docs for items used:
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=LabelOnArc
	// https://zimjs.com/docs.html?item=Dial
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=darken
		
	frame.madeWith().pos(40,40,RIGHT,BOTTOM);
	createGreet(50,50);
	
	        
    stage.update(); // needed to view changes
});

scripts

<script src="https://zimjs.org/cdn/icon6.js"></script>