JS1k 2018 - 3017 - Details - A volatile JavaScript golfing competition

Author:

Davit Markarian (UDXS)

Twitter:

GitHub:

UDXS

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

udxs.me

Compo:

canvas

Demo link:

https://js1k.com/2018-coins/demo/3017

Shortlink:

https://js1k.com/3017

Blog post:

please update here!

Bytes:

1006

Chars:

1006

Submission

_='a.sY.display="n`e";b.nerHTML+="Z< rows=15 cols=5id=x>Size @ @tVl^F @ @beige0L! @ 0blue 0white 100Red# 39%gold# 37%</>ZZ</><img id=i border=1>";r=K){cs=[];clVr^(0,0,w,x.valueO").forEac|Kd){l=dO "$SY=SY=c	~;switc|0]){cSize_ww=~;=2]Alpha_globalAlpha=QBcXus|^F_$^S^C_clVrLLVr!ien)RadRadial!ien,56])	2].addBStq(Q,c	~cXq(F`tf`t=TFTSm=tx=ty="TF"==m?$&):&LeW_leW=~LemoveToJ]leTo(34](#ArcSarcJ3],4,5"#"==0]?$():(PqCXq()}}i.srctoDataURL()};r(x.`put=r;;brVk;ctJ34]B l.shift(Number(l.jo(" ")strokec	s[cs.length-^F 10153020],!Xus|crVte\\n=canvas.Rec_begPat|ext0 ])/180*Math.PIc.idthase "ColStqinl[)heighttarV);!Grad#ArcF$fill%167 360&T(,tx,ty@512BColorJ(12Kfuncti`(O.split("Q~)/100VeaXs.pYtyleZ<br>^t_.`onqop|h(~1]":';for(Y in $='~|q`_^ZYXVQOKJB@&%$#!	')with(_.split($[Y]))_=join(pop());eval(_)

Description

A Stack-based Canvas Composition Engine #PopSICLe to share creations PopSICLe(Stack-based Image Composition Language) Every statement is separated by newline Every argument is separated by spaces The demo was supposed to be a Windows 95 dialog box but parts were removed to save space ------------------- The Spec/Docs ------------------- PopSICL:Stack Image Composition Language By UDXS(Davit Markarian) @ udxs.me for js1k Making Comments: Rem This is a comment Composition settings: Size w h Alpha a Alpha sets the total transparency of the image. It uses a percentage from 0-100 Pushing colors/gradients to the coloring stack: Color color_css LinGrad x0 y0 x1 y1 RadGrad x0 y0 r0 x1 y1 r1 Adding color stops to gradients(uses the color from the top of the stack and last available gradient): ColStop 0 ColStop 100 From 0-100 ColorStops pop the colors off the stack Draw rectangle: RectF x y w h RectS x y w h RectC x y w h Set the font: Font 30px Arial Rendering text: TextF x y text TextS x y text Line Drawing: LineWidth w Line x0 y0 x1 y1 Arcs/Circles: ArcF x y r s_deg e_deg ArcS x y r s_deg e_deg Popping: PopC Calls that draw only peek the stack. All canvas functions that take a number from 0-1 are converted to take 0-100 All canvas functions that use radians now use degrees

Base64 encoded

Xz0nYS5zWS5kaXNwbGF5PSJuYGUiO2IuGm5lckhUTUwrPSJaPB4gcm93cz0xNSBjb2xzPTUUaWQ9eD5TaXplIEAgQAN0VmwPXkYgFBRAIEADYmVpZ2ULMA9MGiEgFBRAIDADYmx1ZQ8ZIDADd2hpdGUPGSAxMDALA1JlZA8jIDM5JQNnb2xkDyMgMzclDzwvHj5aWjwvHj48aW1nIGlkPWkgYm9yZGVyPTE+IjtyPUspe2NzPVtdOxZjbFZyXigwLDAsFncXLBYdH3gudmFsdWVPDyIpLmZvckVhY3xLZCl7bD1kTyAiHxYkU1k9B1NZPWMJfjtzd2l0Y3wbMF0pe2MYU2l6ZV93FxB3Fz0bfjsWHRAdPRsyXQFBbHBoYV9nbG9iYWxBbHBoYT1RAUJ/BGNYdXN8BhxeRl8kEQIcXlN/BxECHF5DX2NsVnIRAhxMGg5MGlZyIWllbgIpHFJhZA5SYWRpYWwhaWVuAiwbNQw2XSkcGQgJMl0uYWRkQlN0cShRLGMJfh9jWHEoHEZgdH8EFmZgdD0GAVQTRggYVBNTf209BHR4PQR0eT0EIlQTRiI9PW0/FiQmKToHJhxMGmVXF19sGmVXFz0FfhxMGmUSbW92ZVRvSl0fFmwaZVRvKBszDDRdHwcoHCMIGEFyY1MSYXJjSgwzXSwFNBUsBTUVHyIjIj09GzBdPxYkKCk6BygcUHFDCFhxKCl9fR9pLnNyYxB0b0RhdGFVUkwoKX07cigfeC5gGnB1dD1yOwE7YnJWaztjGAJ0SgwzDDRdAw9CIARsLnNoaWZ0KB8FTnVtYmVyKBsGbC5qbxooIiAiKQcWc3Ryb2tlCH9jCXNbY3MubGVuZ3RoLQsPXkYgMTAUMTUUMzAUMjAMXSwbDiEIWHVzfBZjclZ0ZQ9cXG4QPRZjYW52YXMuEVJlYxJfYmVnGlBhdHwfFhNleHQUMCAVXSkvMTgwKk1hdGguUEkWYy4XaWR0aBhhc2UgIhlDb2xTdHEaaW4bbFscKQEdaGVpZ2h0HnQTYXJWHyk7IUdyYWQjQXJjRiRmaWxsJRQxNhQ3IBQzNjAmVBMoBix0eCx0eUA1MTJCQ29sb3JKKBsxDDJLZnVuY3RpYChPLnNwbGl0KCJRBX4pLzEwMFZlYVhzLnBZdHlsZVo8YnI+XhF0XwguYG9ucW9wfGgofjFdfyI6Jztmb3IoWSBpbiAkPSd/fnxxYF9eWllYVlFPS0pCQCYlJCMhHx4dHBsaGRgXFhUUExIREA8ODAsJCAcGBQQDAgEnKXdpdGgoXy5zcGxpdCgkW1ldKSlfPWpvaW4ocG9wKCkpO2V2YWwoXykNCg==

Original source

a.style.display = "none";
	b.innerHTML+="<br><textarea rows=15 cols=50 id=x>Size 512 512\n" +
	"Color teal\n" +
	"RectF 0 0 512 512\n" +
	"Color beige\n" +
	"RectF 100 150 300 200\n" +
	"LinGrad 0 0 512 0\n" +
	"Color blue\n" +
	"ColStop 0\n" +
	"Color white\n" +
	"ColStop 100\n" +
	"RectF 100 150 300 20\n" +
	"Color Red\n" +
	"ArcF 390 160 7 0 360\n" +
	"Color gold\n" +
	"ArcF 370 160 7 0 360\n" +
	"</textarea><br><br></textarea><img id=i border=1>";
	r=()=>{
		cs=[];
		c.clearRect(0,0,c.width,c.height);
		x.value.split("\n").forEach(e=>{
			l=e.split(" ");
			c.fillStyle=c.strokeStyle=cs[cs.length-1];
			switch(l[0]){
				case "Size":
				c.width=c.canvas.width=l[1];
				c.height=c.canvas.height=l[2];
				break;
				case "Alpha":
				c.globalAlpha=Number(l[1])/100;
				break;
				case "Color":
				l.shift();
				cs.push(l.join(" "));
				break;
				case "RectF":
				c.fillRect(l[1],l[2],l[3],l[4]);
				break;
				case "RectS":
				c.strokeRect(l[1],l[2],l[3],l[4]);
				break;
				case "RectC":
				c.clearRect(l[1],l[2],l[3],l[4]);
				break;
				case "LinGrad":
				cs.push(c.createLinearGradient(l[1],l[2],l[3],l[4]));
				break;
				case "RadGrad":
				cs.push(c.createRadialGradient(l[1],l[2],l[3],l[4],l[5],l[6]));
				break;
				case "ColStop":
				cs[cs.length-2].addColorStop(Number(l[1])/100,cs[cs.length-1]);
				cs.pop();
				break;
				case "Font":
				l.shift();
				c.font=l.join(" ");
				break;
				case "TextF":
				case "TextS":
				m=l.shift();
				tx=l.shift();
				ty=l.shift();
				if(m=="TextF")
				c.fillText(l.join(" "),tx,ty);
				else
				c.strokeText(l.join(" "),tx,ty);
				break;
				case "LineWidth":
				c.lineWidth=Number(l[1]);
				break;
				case "Line":
				c.beginPath();
				c.moveTo(l[1],l[2]);
				c.lineTo(l[3],l[4]);
				c.stroke();
				break;
				case "ArcF":
				case "ArcS":
				c.beginPath();
				c.arc(l[1],l[2],l[3],Number(l[4])/180*Math.PI,Number(l[5])/180*Math.PI);
				if(l[0]=="ArcF")
				c.fill();
				else
				c.stroke();
				break;
				case "PopC":
				cs.pop();
				break;
			}
		});
		i.src=c.canvas.toDataURL();
	}
	r();
	x.oninput=r;

JS1k: The JavaScript code golfing competition

2018 - The Volatile Coin Mine

PopSICLe Language