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

              
                // This is a ZIM comparison to the well coded VUE pen: 
// https://codepen.io/d-antonelli/pen/GRpQrOY
// Cheers to the original creator!
// The ZIM Code is 40% the VUE code and probably more direct 

// Here is a comparison to another VUE rocket pen at 1/3 the size of VUE:
// https://codepen.io/zimjs/pen/oNjqxKz

// This type of size reduction is very common with ZIM 
// See the end of the ZIM intro video 
// https://www.youtube.com/watch?v=EB66-QgUz98

// We would much rather code rockets more dynamically - such as:
// https://codepen.io/zimjs/pen/EzpOPP


const assets = ["rocket.svg", {font:"press", src:"PressStart2P-Regular.ttf"}];
const path = "https://assets.codepen.io/2104200/";
const frame = new Frame("fit", 1024, 768, light, light, assets, path);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	
	// 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
	
	// *** NOTE: ZIM Cat defaults to time in seconds
	// All previous versions, examples, videos, etc. have time in milliseconds
	// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
	// There will be a warning in the conslole if your animation is not moving ;-)

	// CODE HERE

	// make the backing rectangles left and right
	const margin = 30;
    const w = (stageW-margin*3)/2;
    const h = stageH-margin*2;
    const left = new Rectangle(w,h,black,grey,5,10).pos(margin, margin);
    const right = new Rectangle(w,h,grey,black,5,10).pos(margin, margin, RIGHT);
	
	// We will be putting interface inside the right Rectangle 
	// Rectangles have their mouseChildren turned off on purpose 
	// There are other ways to deal with this like using a proper Container
	// or putting controls above the Rectangle, but this is one way:
	right.mouseChildren = true; 
    
	// bring in the Rocket SVG
	// We do not usually use SVG but can make it a Bitmap as we do here
	// or turn them into Blob and Squiggle objects with SVGContainer
	// or pass paths directly into Blob and Squiggle 
	// but with Blob and Squiggle and https://zimjs.com/nio/paths.html 
	// we usually just use Blob and Squiggle or other ZIM Shapes.
    let rocket = null;
    svgToBitmap(asset("rocket.svg"), bitmap=>{
        rocket = bitmap;
		// we normally would centerReg() to scale and rotate from center 
		// but here we want to scale from the bottom of the rocket
        rocket
            .reg(rocket.width/2,rocket.height)
            .sca(1.5)
            .pos(0,10,CENTER,BOTTOM,left);  
        stage.update();
    });
    
	// make the stars
    const stars = new Container(w, h*1.2).addTo(left);
	loop(50, ()=>{ 
		new Circle([1,2,3],[light,white]).loc(rand(w), rand(h*1.2), stars);
	});	
	var scroller = new Scroller({
		backing:stars.cache(),
		speed:0,
		horizontal:false
	});
	// usually, our backing in the whole stage 
	// but here we are in the left rectangle.
	// The scroller makes two backings so maske them. 
	// noMouse() means it will ignore rollovers on the stars
	// which is good for performance.
    scroller.backing1.setMask(left).noMouse();
    scroller.backing2.setMask(left).noMouse();
    
	// make the text backing
    const ww = w*.8;
    const hh = h*.3;
	const color = new RadialColor([light,grey], [0,1], ww/2,hh/2,0, ww/2,hh/2,ww/2);
    const back = new Rectangle(ww, hh, color, black, 5, 10).pos(0,margin,CENTER,TOP,right);
    
	// make the text - this will be updated below
    const label = new Label({
        text:"Color:0\nScale:1.5\nRotate:0",   
        size:24,     
        font:"press",
        lineHeight:40
    }).center(back).mov(-20)
	
	// make the Toggle
    new Toggle({
        backgroundColor:yellow,
        toggleBackgroundColor:green,
        corner:20,
        indicatorColor:dark,
        margin:20,
        label:"on"
    })
        .sca(.75)
        .pos(30,-30,CENTER,CENTER,right)
        .tap(e=>{
            scroller.speed = e.target.toggled?-2:0;
        });
    
	// Make the Sliders 
	// We have three of them so use STYLE to style them
    STYLE = {
        vertical:true,
        barWidth:10,
        button:"pill",
        useTicks:true,
        barColor:fog,
        barLength:270,
        backgroundColor:series(pink,green,blue),
        currentValue:series(0,1.5,0)
    }
    
	// store Sliders in an array that we will pass to a Tile
    var sliders = [
        new Slider(-255,255).change(e=>{
            var v = e.target.currentValue;
			// ZIM does not have a hue wheel
			// so apply a CreateJS ColorFilter to shift RGB.
			// We must apply this with cache
			// and we scale twice as big when caching.
			// We can control color better on ZIM Shapes.
			// It is a little awkward coloring a Bitmap			
            rocket.filters = [new createjs.ColorFilter(1,1,1,1, v<0?v:0,0,v>0?v:0,0)];
            rocket.cache(null,null,null,null,2); 
            doText();
        }),
        new Slider(1,2).change(e=>{
            rocket.sca(e.target.currentValue);
            doText();
        }),
        new Slider(-180,180).change(e=>{
			// rotate around the center - see the comment when making Rocket
            rocket.rot(e.target.currentValue, rocket.x, rocket.y-rocket.height/2);
            doText();
        })
    ];
    
	// Tile the Sliders
    new Tile(sliders, 3, 1, 60, 0, true)
        .pos(0,margin,CENTER,BOTTOM,right);
    
	// Adjust the text
	// ZIM has wire() which can wire components to object properties 
	// but we made the Label handle all three at once 
	// so just make a function to apply the currentValue of each Slider
    function doText() {
        label.text = 
`Color:${Math.round(sliders[0].currentValue)}
Scale:${decimals(sliders[1].currentValue, 1, 1)}
Rotate:${Math.round(sliders[2].currentValue)}`;
    }

	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=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Toggle
	// https://zimjs.com/docs.html?item=Slider
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=loop
	// 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=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=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=Scroller
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=RadialColor
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=svgToBitmap
	// https://zimjs.com/docs.html?item=STYLE

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon().sca(.4).mov(-10,-5); 

}); // end of ready
              
            
!
999px

Console