const frame = new Frame("fit", 1024, 768, darker, darker);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    // often need below - so consider it part of the template
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;
	
	// CodePen Challenge for Triadic colors 
	// ALSO - this is a real invite message 
	// please come by https://zimjs.com/discord and find the Q&A channel 
	// on Wednesdays between 7 and 8 Easter Time (EST) 
	// to ask any questions about Creative Coding and ZIM!

    // REFERENCES for ZIM at http://zimjs.com
    // see http://zimjs.com/learn.html for video and code tutorials
    // see http://zimjs.com/docs.html for documentation
    // see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
    // see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

    // CODE HERE
	
	// ZIM Label() lets you make text on the canvas 
	// ZIM LabelLetters() breaks up each letter into an individual object that can be controlled
	// We use LabelLetters to individually animate the letters
	
	// Here is the docs entry on the label property - recently we added HTML-like properties:
	
	// label - (default "Label Letters") a String or a ZIM Label
	// can set any label properties such as color, size, font, etc. on the label passed in
	// can pass in a string with basic "old fashioned" HTML tags as follows:
	// <b>bold</b> - or <strong>bold</strong>
	// <i>italic</i> - or <em>italic</em>
	// <u>underline</i> - can use this with <a> to make a classic underlined link
	// <a href=url target=_blank>link</a>
	// <font color=zimColor backgroundColor='htmlColor' rollBackgroundColor=#hexColor size=20 family=verdana group=groupStyle>font</font>
	// note: use NO QUOTES except for single quote with colors if want HTML blue for instance rather than ZIM blue
	
	// there are also all the parameters of Label (that can also be set with STYLE):
	// text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, 
	// outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, 
	// padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, style, group, inherit
	
	// and all the parameters of LabelLetters:
	// label, align, valign, letterSpacing, letterSpacings, lineSpacing, lineSpacings, lineHeight, lineAlign, lineValign, cache, rtl, style, group, inherit
	
	// WE KNOW <b> and <font> ARE DEPRICATED, etc. 
	// but here it made sense for ZIM to use to target certain letters in the LabelLetters
	// this is NOT HTML - we are using a subset of HTML tag format to parse letters for the canvas 
	// the normal ZIM Label() can use ZIM STYLE to set the styles for a regular canvas text
	const text = `CREATIVE CODING
<b><font size=180>Q&A</font></b> 
EVERY WED AT 

<a href=https://zimjs.com/discord target=_blank><font color=#00FFFC>zimjs.com/discord</font></a>

<font size=20>WITH</font> DR ABSTRACT!

<font size=20>FOR REAL!   DROP BY!</font>`;
	
	// Given colors for challenge!
	// turquoise (#00FFFC)
	// hot pink (#FC00FF)
	// lemon yellow (#fffc00)
	
	// ZIM has STYLE on the canvas
	// if we set color to series then the first object made would get the first color, etc.
	// that means the first LabelLetters object would be the on color... 
	// but if we delayPick:true then each letter in the LabelLetters gets the series applied
	STYLE = {
		lineAlign:CENTER, 
		color:series("#00FFFC", "#FC00FF"), 
		delayPick:true
	}
	new LabelLetters(text)
		.center()
		.animate({
			props:{color:"#fffc00", rotation:{min:-20,max:20}},
			rewind:true,
			rewindWait:1,			
			loop:true,
			loopWait:1,
			loopPick:true, // will pick from rotation each loop
			sequence:.1,
			time:.1			
		});
	
	STYLE = {};
   

    // stage.update(); // this is needed to show any changes (unless animating)
  
    // DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=LabelLetters
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(); 
	createGreet();

}); // end of ready