123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              const frame = new Frame("fit", 1024, 768, white, dark);
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;

	// 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

	// to make blendMode work there needs to be something on the canvas
	const background = new Rectangle(stageW, stageH, frame.color).addTo();

	const title = new Label({
		text:"Baby, you can TUNE my car!",
		backgroundColor:yellow,
		size:40,
		padding:60,
		font:"impact"
	}).centerReg().alp(.9).ske(7).rot(-5).sha("rgba(0,0,0,.2)",5,5,10).mov(0,-50).animate({
		props:{scale:.2, alpha:0},
		from:true,
		time:500,
		ease:"backOut"
	});
	
	const button = new Button({
			label:"LOADING",
			corner:5,
			backgroundColor:blue,
			rollBackgroundColor:purple
		}).centerReg().ske(7).rot(-5).mov(0,30).animate({
			props:{scale:.2, alpha:0},
			from:true,
			time:400,
			wait:500,
			ease:"backOut"
		})
	
	const bar1 = new Rectangle(stageW, 55, yellow).addTo();
	const bar2 = new Rectangle(stageW, 55, yellow).pos(0,-1,false,true);

	// we load assets after title is shown
	// then once assets are ready we show the GO button
	var assets = ["car.jpg", "car.mp3", "car2.mp3", "roar.mp3", "roar2.mp3", "icon.png"];
	var path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/";
	frame.loadAssets(assets, path, null, null, 1500); // at least 1 second to see logo
	frame.on("complete", init);

	function init() {
		button.text = "GO!";
      stage.update();
		button.tap(e=>{
			e.target.animate({props:{scale:0}, time:300});
			title.animate({props:{scale:0}, wait:200, time:300, call:()=>{

				// the car will rotatate shake and hop up and down
				// this will be done with wiggle 
				// but we want to control how much based on volume
				// that is controled by the Dials
				// So these values go up and down in the Dial events
				let minR = .2; let maxR = 1;
				let minY = 2;  let maxY = 5;

				const car = frame.asset("car.jpg").centerReg().mov(0,70)
					.animate({props:{x:stageW+500}, time:600, from:true})
					.wiggle("rotation",0,()=>minR,()=>maxR,100,300)
					.wiggle("y",stageH/2+70,()=>minY,()=>maxY,100,200);

				const masterVolumes = [.5,.5,.9,.9];
				const masterPans = [-.5,.5,-.9,.9];
				const sounds = [
					frame.asset("car.mp3").play({volume:.5, loop:true, pan:-.5}),
					frame.asset("car2.mp3").play({volume:.5, loop:true, pan:.5}),
					frame.asset("roar.mp3").play({volume:.9, loop:true, pan:-.9}),
					frame.asset("roar2.mp3").play({volume:.9, loop:true, pan:.9})
				]
				STYLE = {
					type:{
						Dial:{
							min:0,
							max:2,
							step:.1
						},
						Slider:{
							min:-1,
							max:1,
							barLength:70,
							barWidth:14,
							inside:true,
							width:12,
							height:12,
							corner:6,
							borderWidth:0,
							shadowBlur:-1
						}
					}
				}
				const dials = new Tile(new Dial(), 4, 1, 70)
					.center()
					.pos(null,100)
					.animate({
						wait:250,
						props:{rotation:-360*10, x:-stageW/2},
						time:600,
						from:true,
						sequence:150,
						sequenceReverse:true
					});
					dials.loop((dial,i)=>{
						dial.currentValue = masterVolumes[i];
						dial.change(e=>{
							sounds[i].volume = masterVolumes[i]*e.target.currentValue;
							let totalVol = totalVolume();
							minR = totalVol*.025;
							maxR = totalVol*.05;
							minY = totalVol*.5;
							maxY = totalVol*2;							
						});
					});

				function totalVolume() {
					let v = 0;
					dials.loop(dial=>{v+=dial.currentValue;});
					return v+.05; // wiggle seems to stop if 0 max is set
				}

				const sliders = new Tile(new Slider(), 4, 1, 100)
					.center()
					.pos(null,222)
					.animate({
						wait:1000,
						props:{alpha:0},
						time:300,
						from:true,
						sequence:70
					});
					sliders.loop((slider,i)=>{
						slider.currentValue = masterPans[i];
						slider.change(e=>{sounds[i].pan = e.target.currentValue;});
					});

				// animated strips
				new Rectangle(300, stageH*2, red).ske(30).centerReg().wiggle("x",stageW*3/4,100,stageW/2,2000,5000).blendMode = "overlay";
				new Rectangle(300, stageH*2, green).ske(30).centerReg().wiggle("x",stageW/2,100,stageW/2,2000,5000).blendMode = "overlay";
				new Rectangle(300, stageH*2, blue).ske(30).centerReg().wiggle("x",stageW/4,100,stageW/2,2000,5000).blendMode = "overlay";

				bar1.top();
				bar2.top();

				// scroll poetry text along bottom 
				let text = "\
Vrooom vroom - Dr. Abstract in the Jag-a-jaga-joo Anotonio Caggiano doodly drew \
purring in purple and blue waving to you with wonders of ZIM and medallion of gold \
the symbol of Nodism through which creativity frameworks flow and zany concepts grow \
at bubbling rates that in the past were not so fast such is the zip zap whizzz \
the wise wiz you'll be when you use ZIM to create Doeos and Digidoeos for free!";

				timeout(8000, ()=>{
					const scroller = new Scroller({
						backing:new Label({
							text:text,
							color:orange,
							size:30
						}).cache().alp(.8).pos(30, 12, null, true),
						speed:0,
						gapFix:-15
					});
					timeout(3000, ()=>{
						scroller.speed = 2;
					});
				});

				// handle top bar items
				new Label({
					text:"Baby, you can tune my car!",
					font:"impact",
					color:white,
					size:25
				}).pos(22,22).alp(.85).animate({
					props:{x:-200},
					from:true,
					time:400,
					ease:"backOut"
				});

				frame.asset("icon.png").sca(.35).ske(-90).reg(0,112).pos(20,8+112*.35,true).alp(.75).hov(.9).tap(() => {
					zgo("https://zimjs.com", "_blank")
				}).animate({
					wait:1700,
					props:{skewX:1},
					time:300,
					ease:"backOut"
				});

			}}); // end animate title out

		}); // end tap

	} // end init

	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// 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=Slider
	// https://zimjs.com/docs.html?item=Dial
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=wiggle
	// 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=mov
	// https://zimjs.com/docs.html?item=top
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=hov
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=ske
	// https://zimjs.com/docs.html?item=reg
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Scroller
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zgo
	// https://zimjs.com/docs.html?item=STYLE
  

}); // end of ready
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console