Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

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

    // 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
		
		// we will rotate and scale the whole cone so add it to a Container 
		// set the registration point of the container to the bottom tip of the cone
		// we will make this be the center of the stage and then up 60 pixels from the bottom		
		// addTo() will add the container so its registration point is at 0,0 - not what we want 
		// so just center the container on the stage
		const iceCreamCone = new Container(stageW, stageH).reg(stageW/2, stageH-60).center();
	
		// this is a series - every time it gets called it gives the next item in the series 
		// we will have to adjust this series on reset later - so it gets a let not a const
		let colors = series(green,pink,blue,orange,red,purple,brown);
			
		// here is the start scoop - mmm pastromi!
		const scoop = new Circle(130, green).center(iceCreamCone).mov(0,-110).sha(null, 0,6,14);
		scoop.radialGradient([colors(),white],[.9,1], 0,0,130, 80,-80,0);
		
		// add an optional Emitter for some fun!  
		// This takes a minute to do and is worth the effort
		const emitter = new Emitter({
			startPaused:true,
			random:{scale:{min:1, max:3}}
		}).center(iceCreamCone); // add to iceCreamCone so scales with container
			
		// make a function to add scoops 
		// these are paritial Circles - using percent.  
		// could be custom organic ZIM Blob() shapes - but Circles are fine for now
		const startY = -310;
		let count = 0;
		const scoopHeight = 178;
		function addScoop() {
			let s = new Circle({radius:130, percent:74}).center(iceCreamCone).mov(0,startY-scoopHeight*count).sha(null, 0,6,14);
			s.radialGradient([colors(),white],[.9,1], 0,0,130, 80,-80,0);
			count++;
			// scaling with "-.1" relative amount is possible 
			// but that changes as scales get smaller
			// so just set a target height of roughly the height of the stage less a margin (30 + 30) 
			// and then figure the scale needed based on how many scoops there are
			// the height is roughly three scoops high to start
			newScale = (stageH-120)/(scoopHeight*(3+count)); 
			// spurt the emitter at the location of the scoop 
			// and set the particles container to the top 
			// otherwise new scoop is on top 
			// also, note that the emitter emits but the particles are independent of the emitter 
			// this allows the emitter to move and leave particles behind 
			// but it does mean that there are two parts to the emitter - so emitter.mov() does not move existing particles, etc.
			emitter.spurt(10).loc(s)
			emitter.particles.top();
			iceCreamCone.animate({
				props:{scale:newScale},
				time:700,
				ease:"backOut"
			});
		}		

		// creat the cone and add some pizzazz!
		const cone = new Triangle({color:brown})
			.center()
			.rot(180)
			.sca(2,4)
			.center(iceCreamCone)
			.pos(null,60,false,true) // match tip to reg of container
			.sha(null, 5,5,20)
			.tap(()=>{
				// when we tap, add the scoops
				// and handle the buttons
				addScoop();
				message.removeFrom();
				reset.addTo();
			});
		cone.linearGradient([brown, yellow ,brown], [.2, .4, .8], 0, 0, 100, 0)
		
		const p = pizzazz.makePattern({
			type:"plaid", 
			colors:makeSeries([brown, "rgba(0,0,0,.1)"]), 
			size:6, 
			rows:60, 
			cols:60
		}).rot(45).center(iceCreamCone).mov(0,100).setMask(cone);
	
		// property, start amount, min amount, max amount, min time, max time
		// wiggle goes back and forth on either side of start amount
		iceCreamCone.wiggle("rotation", 0, 1, 2, 2000, 3000);
	
		const message = new Tile({
			obj:series(
					new Label({text:"TAP", size:60, valign:"center", color:grey}), 
					pizzazz.makeIcon("arrow", grey).sca(2)
				), 
			cols:2,
			spacingH:10,
			valign:"center"
		})
			.rot(-10)
			.sca(1.4)
			.loc(90, 480)
			.animate({
				props:{x:-400}, // animate from offstage
				from:true,
				ease:"backOut",
				wait:300,
				time:600
			});
			
	
		const reset = new Button({
			backgroundColor:blue, 
			rollBackgroundColor:pink, 
			label:"RESET", 
			corner:0
		})	
			.sca(.5)
			.loc(687, 678)
			.removeFrom() // will add later once more scoops
			.tap(()=>{
				cone.mouseEnabled = false; // do not let adding happen as resetting
				reset.removeFrom();
				// reset the color series as green will be left 
				// so we want to start at pink 
				// we could just leave it but then might have a green scoop next to first green scoop
				colors = series(pink,blue,orange,red,purple,brown,green);
				interval(400, ()=>{
					// the emitter.particles will be the top object 
					// so to get the object under that will be the numChildren-2 (index starts at 0)
					iceCreamCone.getChildAt(iceCreamCone.numChildren-2).removeFrom();
					count--;
					newScale = (stageH-120)/(scoopHeight*(3+count)); // roughly
					if (count == 0) {
						newScale = 1; // the original scale (a little different than calculated scale)
						cone.mouseEnabled = true; // turn back on cone for pressing
					}
					iceCreamCone.animate({
						props:{scale:newScale},
						time:400,
						ease:"backOut"
					});
				}, count); // run it as many times as scoops have been added
			});
	
    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=Container
		// https://zimjs.com/docs.html?item=Circle
		// https://zimjs.com/docs.html?item=Triangle
		// https://zimjs.com/docs.html?item=Label
		// https://zimjs.com/docs.html?item=Button
		// https://zimjs.com/docs.html?item=Tile
		// https://zimjs.com/docs.html?item=tap
		// https://zimjs.com/docs.html?item=animate
		// https://zimjs.com/docs.html?item=wiggle
		// 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=top
		// https://zimjs.com/docs.html?item=rot
		// 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=removeFrom
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=setMask
		// https://zimjs.com/docs.html?item=Emitter
		// https://zimjs.com/docs.html?item=interval
		// https://zimjs.com/docs.html?item=series
		// https://zimjs.com/docs.html?item=zog
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(); 
		createGreet();

}); // end of ready
              
            
!
999px

Console