const assets = ["robot.jpg", {font:"Reuben", src:"Reuben.otf"}];
const path = "https://assets.codepen.io/2104200/";
const frame = new Frame("fit", 1000, 1000, lighter, dark, assets, path);
frame.on("ready", ()=>{
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
// often need below - so consider it part of the template
const stage = frame.stage;
const stageW = frame.width;
const stageH = frame.height;
// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://codepen.io/topic/zim/ for ZIM on CodePen
// CODE HERE
// Here we let people decorate a bot with patterns!
// the bot can be saved so we add what we want to save to a Container
const save = new Container(450, 900).loc(50,20);
new Label("PATTERNBOT", 30, "Reuben").pos(0,30,CENTER,BOTTOM,save);
// we will put the bot parts in a container too so we can easily process dropping patterns on it
const bot = new Container(350,750).loc(50,50,save).noMouse();
// ~~~~~~~~~~~~~ MAKE BOT
// // used to build - see explore video https://youtu.be/9WoT-FF1oCE
// asset("robot.jpg").scaleTo(bot,100,102).pos(0,-3,CENTER,TOP,bot);
// STYLE = {alpha:.5, color:darker}
STYLE = {color:darker};
const neck = new Circle(30).pos(0,108,CENTER,TOP,bot);
const chest = new Circle(90).center(bot).mov(0,-100);
const head = new Rectangle({width:80, height:66, corner:[0,0,20,20]}).pos(0,52,CENTER,TOP,bot);
const helmet = new Circle({radius:80, percent:40}).pos(0,0,CENTER,TOP,bot);
const sholders = new Rectangle({width:184, height:65, corner:[50,50,0,0]}).pos(0,157,CENTER,TOP,bot);
const arm1 = new Rectangle({width:53, height:234, corner:[50,0,30,0]}).pos(26,250-10,LEFT,TOP,bot);
const arm2 = new Rectangle({width:53, height:234, corner:[0,50,0,30]}).pos(26,250-10,RIGHT,TOP,bot);
const hand1 = new Rectangle({width:40, height:70, corner:[0,40,10,30]}).pos(26,490-10,LEFT,TOP,bot);
const hand2 = new Rectangle({width:40, height:70, corner:[40,0,30,10]}).pos(26,490-10,RIGHT,TOP,bot);
const leg1 = new Rectangle({width:60, height:200, corner:[0,0,0,40]}).pos(107,490,LEFT,TOP,bot);
const leg2 = new Rectangle({width:60, height:200, corner:[0,0,40,0]}).pos(107,490,RIGHT,TOP,bot);
const foot1 = new Rectangle({width:117, height:52, corner:[45,0,0,0]}).pos(50,696,LEFT,TOP,bot);
const foot2 = new Rectangle({width:117, height:52, corner:[0,45,0,0]}).pos(50,696,RIGHT,TOP,bot);
const mid = new Rectangle({width:167, height:150, corner:[60,60,10,10]}).pos(0,341,CENTER,TOP,bot);
STYLE = {};
// // used to build
// new Grid(bot, null, false)
// new Guide(bot, true, false);
// new Guide(bot, false, false);
// trick to make a single backing border
STYLE = {borderColor:darker, borderWidth:10};
const border = bot.clone()
.loc(bot, null, save, 0) // at bottom
.cache(-20,-20,bot.width+40,bot.height+40)
.noMouse();
STYLE = {}
// ~~~~~~~~~~~~~ EYES
// make eyes move to frame.mouseX and frame.mouseY
// just easier to put the eyes on the stage rather than convert coordinates
// so when we save we will add the eyes to the save container
// and then when saved put them back on the stage
// there are other ways to move eyes to mouse
// but the ProportionDamp makes it sort of mindless to do
// basically, we set up a min and max range for the mouse
// and apply that to a min and max movement for the eye
// we do each eye and x and y
// in a Ticker we use the convert() method to apply the proportion
// with the current mouse position as the input
const leftEye = makeMove(245, 154);
const rightEye = makeMove(305, 154);
function makeMove(x, y) {
let eye = new Circle(18, dark, lighter, 3).loc(x, y);
eye.start = {x:x, y:y}; // for later to save bot
eye.H = new ProportionDamp(eye.x-100,eye.x+100,eye.x-10, eye.x+15, .05);
eye.V = new ProportionDamp(eye.y-100,eye.y+300,eye.y-5, eye.y+10, .05);
eye.H.immediate(x); // otherwise will damp from 0, 0
eye.V.immediate(y);
stage.on("stagemousemove", ()=>{ // wait for mouse or press move
Ticker.add(()=>{
eye.x = eye.H.convert(frame.mouseX);
eye.y = eye.V.convert(frame.mouseY);
});
}, null, true); // true to just do event once
return eye;
}
// ~~~~~~~~~~~~~ PATTERN PANEL
// we will Tile the swatches
// we use ZIM VEE value (Pick) for dynamic parameters
// in this case each time the tile object will be made from the makeSwatch() function
// here we set up that function
// the first 8 swatches are patterns
// the next four are custom colors
// all these can be dragged to the bot to add a pattern or color
// At the bottom (not part of the Tile) is the select color swatches
// this will remake the Tile with the new colors
// There is also a rotate button awkwardly placed off to the right
// that will rotate 90 degrees each time and remake the Tile
let color1 = purple;
let color2 = green;
let rotation = 0;
const size = 70;
let count = -1;
const types = ["pixels", "noise", "stripes", "slants", "hatch", "plaid", "dots", "bling", "plain1", "plain2", "linear", "radial"];
function makeSwatch() { // called by Tile() for each swatch
count++;
let rect;
if (count < 8) {
rect = new Rectangle(size, size, darker).centerReg({add:false});
let colors = (count >= 2 && count <= 5) ? series(color1, color2) : [color1, color2];
pizzazz.makePattern(types[count], colors, 10, 20, 20).center(rect).setMask(rect);
rect.count = count;
rect.colors = colors;
return rect.rot(rotation);
}
rect = new Rectangle(size, size, getColor(null, count, size, size)).centerReg({add:false})
rect.count = count;
return rect;
}
// this function is used for the swatches and for applying the swatches to the bot
function getColor(part, count, w, h) {
let color;
if (count == 8) color = color1;
if (count == 9) color = color2;
let a, b, c, d, e, f, g, i;
let circ = (part && part.type=="Circle");
if (rotation==0||rotation==180) {
a = rotation==0?color1:color2;
b = rotation==0?color2:color1;
c = 0;
// linear is fine if not a circle
// but if a circle then 0,0 is in the middle
// so need half the height above (d) and below (f)
// c and d get overwritten later if radial color
d = circ?-h/2:0;
e = 0;
f = circ?h/2:h;
g = color1;
i = color2; // note h is already used
} else {
a = rotation==90?color2:color1;
b = rotation==90?color1:color2;
c = circ?-w/2:0;
d = 0;
e = circ?w/2:w;
f = 0;
g = color2;
i = color1;
}
if (count == 10) {
color = new GradientColor([a, b], [0,1], c,d, e,f);
}
if (count == 11) {
let s = Math.max(w, h);
c = circ?0:w/2;
d = circ?0:h/2;
color = new RadialColor([g, i], [0,1], c,d,0, c,d, s/2);
}
return color;
}
// When color or rotation changes, we remake the Tile
let tile;
function makeTile() {
count = -1; // reset the count used by the makeSwatch function
if (tile) tile.dispose(); // get rid of the old one if there is one
STYLE={clone:false};
tile = new Tile(makeSwatch, 2, 6, 20, 20)
.pos(150, -37, RIGHT, CENTER)
.drag();
tile.loop((swatch,i)=>{ // store for putting swatch back in place
swatch.startX = swatch.x;
swatch.startY = swatch.y;
});
tile.on("pressup", e=>{
let pattern = e.target;
bot.loop(part=>{
if (part.hitTestReg(pattern)) {
clearPart(part);
if (pattern.count < 8) {
// scaleTo() in FILL (or FULL) mode for rotated objects, needs to be put in a non-rotated container
// sometimes the patterns are rotated so add them to a container
let holder = new Container();
pizzazz.makePattern(types[pattern.count], pattern.colors, 10, 20, 20).rot(rotation).addTo(holder);
holder.scaleTo(part,100,100,FILL).center(part).setMask(part);
} else {
part.color = getColor(part, pattern.count, part.width, part.height);
}
return true; // like a break of a for loop
}
}, true); // reverse - so highest to lowest
pattern.loc(pattern.startX, pattern.startY).alp(0).animate({alpha:1}); // put the swatch back
})
STYLE = {};
}
makeTile();
// backing for panel
new Rectangle({
color:lighter.darken(.03),
width:tile.width+100,
height:tile.height+230,
borderColor:moon,
borderWidth:3,
corner:20
}).loc(tile.x-50, tile.y-65, stage, 0);
// used above when a new swatch is applied to part to clear the old one
// also used by reset button
function clearPart(part) {
part.color = darker;
if (part.numChildren == 3) {
part.removeChildAt(0); // removes mask under shape
// makes shape go to child 0
part.removeChildAt(1); // removes masked object
}
}
// the pop-up ColorPicker
const cp = new ColorPicker({alphaPicker:false}).change(()=>{
if (colorNum == 1) swatch1.color = color1 = cp.selectedColor;
else swatch2.color = color2 = cp.selectedColor;
makeTile();
cp.hide();
});
cp.on("close", ()=>{cp.hide();});
// the interactive color swatches (at bottom) to change colors
let colorNum = 1;
const swatches = new Page(tile.width, 80, light, darker); // container with easy gradient
const swatch1 = new Circle(30,color1).center(swatches).mov(-40);
const swatch2 = new Circle(30,color2).center(swatches).mov(40);
swatches.loc(tile).mov(0,tile.height+20).tap(e=>{
// or could have put events on circles
if (frame.mouseX-(swatches.x+swatches.width/2)<0) {
colorNum = 1;
cp.selectedColor = color1;
} else {
colorNum = 2;
cp.selectedColor = color2;
}
cp.show();
});
// rotate button
new Button({
label:"",
icon:pizzazz.makeIcon("rotate", tin),
width:70,
height:70,
corner:0,
backgroundColor:lighter,
rollBackgroundColor:white,
borderColor:tin,
shadowColor:-1,
}).loc(872, 294).tap(()=>{
rotation += 90;
rotation %= 360;
makeTile();
});
new Label({
text:"drag to bot",
align:CENTER
})
.sca(.7)
.alp(.7)
.centerReg()
.loc(tile.x+tile.width/2, tile.y-30);
new Label({
text:"change colors",
align:CENTER
})
.sca(.7)
.alp(.7)
.centerReg()
.loc(swatches.x+swatches.width/2, swatches.y+swatches.height+30);
// ~~~~~~~~~~~~~ BUTTONS
// ZIM icon to be added when bot is saved
const icon = frame.makeIcon(silver,white).sca(.5);
icon.getChildAt(0).sha(silver,2,2,6)
STYLE = {
width:220,
label:series("SAVE", "RESET"),
backgroundColor:series(blue, orange),
rollBackgroundColor:green,
corner:0,
shadowColor:-1,
centerReg:true,
scale:.6,
x:save.x+save.width/2,
y:save.y+save.height+20,
move:series(80,-80)
}
new Button().tap(()=>{
// add extra things to save
icon.pos(20,20,RIGHT,BOTTOM,save);
leftEye.loc(leftEye.start).addTo(save);
rightEye.loc(rightEye.start).addTo(save);
// save
loader.save(save, "patternbot");
// remove extra things from save
leftEye.addTo(stage);
rightEye.addTo(stage);
icon.removeFrom();
});
// add a confirm state to RESET
// this works with mousedown - not click or tap
const clearBut = new Button({
wait:"CONFIRM",
waitBackgroundColor:red,
rollWaitBackgroundColor:red
});
clearBut.on("mousedown", ()=>{
if (clearBut.waiting) {
bot.loop(part=>{clearPart(part);});
clearBut.clearWait();
}
});
STYLE = {};
// the loader for saving (nothing to load)
const loader = new Loader();
// DOCS FOR ITEMS USED
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Circle
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=Button
// https://zimjs.com/docs.html?item=Page
// https://zimjs.com/docs.html?item=ColorPicker
// https://zimjs.com/docs.html?item=Loader
// https://zimjs.com/docs.html?item=tap
// https://zimjs.com/docs.html?item=change
// https://zimjs.com/docs.html?item=drag
// https://zimjs.com/docs.html?item=noMouse
// https://zimjs.com/docs.html?item=hitTestReg
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=sha
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=loc
// https://zimjs.com/docs.html?item=mov
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=rot
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=scaleTo
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=removeFrom
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=setMask
// https://zimjs.com/docs.html?item=Guide
// https://zimjs.com/docs.html?item=Grid
// https://zimjs.com/docs.html?item=Tile
// https://zimjs.com/docs.html?item=GradientColor
// https://zimjs.com/docs.html?item=RadialColor
// https://zimjs.com/docs.html?item=series
// https://zimjs.com/docs.html?item=ProportionDamp
// https://zimjs.com/docs.html?item=darken
// https://zimjs.com/docs.html?item=zog
// https://zimjs.com/docs.html?item=STYLE
// https://zimjs.com/docs.html?item=Ticker
// FOOTER
// call remote script to make ZIM icon - you will not need this
createIcon();
}); // end of ready
!
