28:null 29:["$","title",null,{"children":"Experiments in animated SVG | C. Cossé | Observable"}] 2e:T5ce,cycler= (classlist,dt,mode)=>{ var me={}; me.mode=mode; me.stage=0;//change to midx=maneuver_idx me.classlist=classlist; me.dt=dt; me.step=()=>{ if(me.mode==0){//0,01,012,0123,01234 ... build-up of layers //console.log("mode 0",me.stage) for(var idx=0;idxme.classlist.length-1 && me.mode<2) me.stage=0; if(me.stage>me.classlist.length) me.stage=0; d3.timeout(me.step,dt) } return me; }2f:T1290,maneuverlib={ let me={} me.get=(category)=>{ var imgdir var images if(false){} else if(category=="mvR"){imgdir='walkR';images=['walkR0.png','walkR1.png','walkR2.png','walkR1.png','walkR0.png','walkR7.png','walkR6.png','walkR7.png',];} else if(category=="mvL"){imgdir='walkL';images=['walkL0.png','walkL1.png','walkL2.png','walkL1.png','walkL0.png','walkL7.png','walkL6.png','walkL7.png',];} else if(category=="mvD"){imgdir='elevator';images=['platform8.png','platform7.png','platform6.png','platform5.png','platform4.png','platform3.png','platform2.png','platform1.png','platform0.png',];} else if(category=="mvU"){imgdir='elevator';images=['platform0.png','platform1.png','platform2.png','platform3.png','platform4.png','platform5.png','platform6.png','platform7.png','platform8.png',];} else if(category=="mvF"){imgdir='walkF';images=['w0.png','w1.png','w2.png','w3.png','w4.png','w5.png','w6.png','w7.png',];} else if(category=="mvB"){imgdir='walkB';images=['w0.png','w1.png','w2.png','w3.png','w4.png','w5.png','w6.png','w7.png',];} else if(category=="stat"){imgdir='stat';images=['stat0.png','stat1.png','stat2.png','stat0.png','stat1.png','stat2.png',]} else if(category=="bounce"){imgdir='bounce';images=['bounce0.svg','bounce1.svg','bounce2.svg','bounce3.svg','bounce4.svg',]} else console.log("wtf",category); return {'imgdir':imgdir,'images':images}; } me.mkManeuver=(dest,player,category,imgdir,images)=>{ var maneuver={ 't_last':d3.now(), 'dest':dest, 'player':player, 'category':category, 'imgdir':imgdir, 'images':images, 'count':0, 'repeatcount':0, 'actor_image':null, 'actor_holder':null, }; maneuver.actor_image='#actor_image'+player.id; maneuver.actor_holder='#actor_holder'+player.id; return maneuver; } me.getSVG=()=>{ var colors={ 'red':["#FF3000","#FF3000","#FFE5D5"], 'red2':["#AA0000","#FF2A2A","#FFD5D5",], 'blue':["#0030FF","#2A7FFF","#E5E5FF"], 'blue2':["#000080","#0000FF","#D5D5FF",], 'darkgreen':["#225500","#22AA00","#FFFFFF"], 'green':["#2CA02C","#2AFF2A","#D5FFD5"], 'purple':["#440055","#D42AFF","#F6D5FF",], 'yellow':["#806600","#FFCC00","#FFF6D5",], 'orange':["#AA4400","#FF7F2A","#FFE6D5",], 'orange2':["#AA4400","#FF7F2A","#FFFFFF",], 'pink':["#AA0088","#FF2AD4","#FFDFFF",], // '':["#","#","#",], } //We have 2 options for struct, list of curves/layers, or N-length lists of attrs, where ea idx=1 layer. //Going with list of layers for readability. That means only 1x sequence color per layer is needed. var inner_color=colors['blue']; var inner_stroke=[30,20,10]; var inner_fill=['none','none','none',]; var inner_fspecs=[ {'name':'inner0','color':inner_color[0],'sigma':30}, {'name':'inner1','color':inner_color[1],'sigma':20}, {'name':'inner2','color':inner_color[2],'sigma':10}, ]; var inner_scale_x=-0.17; var inner_scale_y=0.17; var common_dx=140; var common_dy=20; var outer_color=colors['purple']; var outer_stroke=[40,20,10]; var outer_fill=['none','none','none',]; var outer_fspecs=[ {'name':'outer0','color':outer_color[0],'sigma':30}, {'name':'outer1','color':outer_color[1],'sigma':20}, {'name':'outer2','color':outer_color[2],'sigma':10}, ]; var outer_scale_x=-0.17; var outer_scale_y=0.17; var common_dx=140; var common_dy=20; var common_svg_width=148; var common_svg_height=181; var common_svg_fill="#FF00FF0A"; var struct={ 'star':[ { 'id':'Star', 'use_commons':false, 'width':common_svg_width, 'height':common_svg_height, 'fill':common_svg_fill, }, { 'class':'outer', 'd':"M -85.714279,496.64792 A 184.28572,181.42857 0 0 1 -270,678.07649 184.28572,181.42857 0 0 1 -454.28572,496.64792 184.28572,181.42857 0 0 1 -270,315.21935 184.28572,181.42857 0 0 1 -85.714279,496.64792 Z", 'color':outer_color, 'fill':outer_fill, 'stroke-width':outer_stroke, 'fspecs':outer_fspecs, 'scale_x':-1*outer_scale_x,//construct transform w/ hard-coded -x from these editable pcs 'scale_y':1*outer_scale_y,//construct transform w/ hard-coded -x from these editable pcs. 'dx':95,'dy':-45, }, { 'class':'inner', 'd':"m -143.35714,584.29075 -105.13477,-15.81905 -72.63387,77.63946 -17.44362,-104.87747 -96.28462,-45.087 94.35403,-48.99879 13.1267,-105.50476 75.75762,74.59455 104.39736,-20.11852 -47.53324,95.10076 z", 'color':inner_color, 'fill':inner_fill, 'stroke-width':inner_stroke, 'fspecs':inner_fspecs, 'scale_x':-1*inner_scale_x,//construct transform w/ hard-coded -x from these editable pcs 'scale_y':1*inner_scale_y,//construct transform w/ hard-coded -x from these editable pcs. 'dx':95,'dy':-45, }, ], }//struct return struct['star']; }//END:me.getSVG return me }30:T2139, /* Author: Charlie Cosse Website: http://ccosse.github.io Contact: ccosse@gmail.com Date: May 23, 2018 License: All Rights Reserved */ animator={ let me={} //from nesvg.js me.structs={'keys':[],}; me.struct_idx=null; me.last_struct=null; //for layer visiblilty toggles: me.pviz=[];//path_viz me.viz=[];//layers_viz me.swatch_pts=null; me.widget_prefixes=[]; me.current_pidx=null; me.current_lidx=null; me.current_color=null; //END:from nesvg.js me.queues={'keys':[],} me.sep=(r1,r2)=>{ return Math.sqrt((r2[2]-r1[2])*(r2[2]-r1[2]) + (r2[1]-r1[1])*(r2[1]-r1[1]) + (r2[0]-r1[0])*(r2[0]-r1[0])); } me.queue_maneuver=(player,pts)=>{ var images; var imgdir; var category; for(var xidx=1;xidx pts[xidx][0]){category="mvL"} else if(pts[xidx-1][0] < pts[xidx][0]){category="mvR"} else if(pts[xidx-1][1] > pts[xidx][1]){category="mvU"} else if(pts[xidx-1][1] < pts[xidx][1]){category="mvD"} else if(pts[xidx-1][2] > pts[xidx][2]){category="mvB"} else if(pts[xidx-1][2] < pts[xidx][2]){category="mvF"} else{ console.log('failed to find category',pts[xidx-1],pts[xidx]) category="stat" } var dirfiles=maneuverlib.get(category); var maneuver=maneuverlib.mkManeuver(pts[xidx],player,category,dirfiles.imgdir,dirfiles.images); if(me.queues.keys.indexOf(player.id)>-1){ me.queues[player.id].push(maneuver); //console.log("added+",maneuver.category) } else{ me.queues.keys.push(player.id); me.queues[player.id]=[]; me.queues[player.id].push(maneuver); //console.log("added",maneuver.category) }//else }//xidx //temp single load svg here -- this also enables to blink: if(player.mode=='bounce'){ var panelID="#netux_rig_p"+player.id; var struct=maneuverlib.getSVG(); console.log('initial load of svg calling mkD3',panelID,struct) //Commented following line var preserve=true; //nesvg.mkD3(struct,panelID,preserve); var nesvg_filters=[] for(var pidx=1;pidx{ //flip 4-sided coin = mv x,y,z,none var new_coord=parseInt(BCR().width/2*(1-2*Math.random())); var dice=Math.random(); if(dice>0.75){ //new_coord=parseInt(BCR().width/2-Math.random()*(window.innerWidth)); return [new_coord,p0[1],p0[2]]; } else if(dice>0.5)return [p0[0],new_coord,p0[2]]; else if(dice>.25)return [p0[0],p0[1],new_coord]; else{return null;} } me.step=()=>{ for(var kidx=0;kidx=m.images.length){ if(m.dest==null){ //positionless maneuver if(m.count>=m.images.length){ if(m.player.mode=='exercise'){ me.queue_maneuver(m.player,[m.player.xyz,me.mkdest(m.player.xyz)]) } me.queues[key].shift(); } } m.count=0; m.repeatcount+=1; }//m.count>=m.images.length }//kidx } me.mkbounce=(p0)=>{ var new_x=parseInt(400*(1-2*Math.random())); var new_y=parseInt(400*(1-2*Math.random())); var new_z=parseInt(400*(1-2*Math.random())); return [new_x,new_y,new_z];//actually need wall point, but 3D move for now is part of it } return me }31:T65b,glow=function(url){ var me={}; me.url=url; me.stdDeviation=2; me.rgb="#000"; me.colorMatrix = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"; me.init=(_arg0)=>{ var defs; try{ if(_arg0['defs'] === undefined)throw "No defs exception"; defs=_arg0['defs']; console.log(JSON.stringify(defs)); } catch(e){ console.log(e); defs = _arg0.append("defs"); } var filter = defs.append("filter") .attr("id", me.url) .attr("x", "-20%") .attr("y", "-20%") .attr("width", "140%") .attr("height", "140%") .call(function(_arg1) { _arg1.append("feColorMatrix") .attr("type", "matrix") .attr("values", me.colorMatrix); _arg1.append("feGaussianBlur") // .attr("in", "SourceGraphics") .attr("stdDeviation", me.stdDeviation) .attr("result", "coloredBlur"); }); filter.append("feMerge") .call(function(_arg2) { _arg2.append("feMergeNode") .attr("in", "coloredBlur"); _arg2.append("feMergeNode") .attr("in", "SourceGraphic"); }); return me } me.rgb = (value) => { if (!arguments.length) return me.color; me.rgb = value; me.color = d3.rgb(value); var matrix = "0 0 0 red 0 0 0 0 0 green 0 0 0 0 blue 0 0 0 1 0"; me.colorMatrix = matrix .replace("red", me.color.r) .replace("green", me.color.g) .replace("blue", me.color.b); return me; }; me.stdDeviation = (value) => { if (!arguments.length) return me.stdDeviation; me.stdDeviation = value; return me; }; return me; }32:T57d,stylesheet=html` `33:[] 2c:{"id":"e8299202ebb8398e","slug":"animator","title":"Experiments in animated SVG","thumbnail":"872fa660017960f9f5781f03ef18714c7552f8530c81498500b4bc439e9cdc54","access_level":"public","create_time":"$D2018-05-22T23:47:37.998Z","update_time":"$D2020-04-19T05:08:22.538Z","view_time":null,"first_public_time":"$D2018-05-23T13:18:52.172Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"b01bcd961d83c6be","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":"starter_2024"},"version":712,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a154d4c0dffd950","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":null}],"members":[{"type":"individual","id":"5a154d4c0dffd950","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Experiments in animated SVG","cells":[{"id":0,"value":"md`# Experiments in animated SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"stage={\n const s=d3.create(\"div\")\n .attr(\"id\",\"stage\")\n .style(\"width\",\"95%\")\n .style(\"height\",BCR().width+\"px\")\n .style(\"background-color\",\"#100\")\n return s.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"html`

Start

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md`# Description\nExperimental animation for new, neon-themed education activity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`# References & Inspirations\n1. [Neon People BBC Commercial](https://youtu.be/QMlCmrMBsiw)\n2. [Riviera Casino, Las Vegas NV](https://wikitravel.org/upload/shared/6/61/LasVegas_Riviera_Neon.JPG)\n3. [Sonny The Cuckoo Bird](https://youtu.be/zXQHydJnp_A)\n4. [Orleans Casino, Las Vegas NV](https://youtu.be/0RFUB7owQtw)\n5. [TuxMathScrabble WebApp](http://ccosse.github.io/TuxMathScrabble-2015/)\n6. [TuxMathScrabble Python](https://github.com/ccosse/tuxmathscrabble)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"BCR=()=>{\n return document.body.getBoundingClientRect()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"mkrig=(idx)=>{\n const r=d3.create(\"div\")\n .attr(\"id\",\"rig\"+idx)\n .attr(\"class\",\"rig\")\n .style(\"width\",parseInt(150*BCR().width/1000)+\"px\")\n .style(\"height\",parseInt(183*BCR().width/1000)+\"px\")\n .style(\"position\",\"absolute\")\n .style(\"left\",BCR().width/2-150/2+\"px\")\n .style(\"top\",BCR().width/2-183/2+\"px\")\n .style(\"background-color\",\"#0000\")\n .html('

')\n return r.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"synchronize_phase_oscillators={\n //document.getElementById(\"stage\").appendChild(mkrig())\n d3.select(\"#startB\").on(\"click\",function(){\n if(timer.running){\n timer.stop()\n }\n else{\n timer.start()\n }\n })\n return \"complete\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"c2=cycler(['inner','outer'],4000,0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"cycler_timeout={\n window.setTimeout(c2.step,1000)\n return \"ok\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"mkplayer=function(id,avadir,avatar,xyz0){\n let me={}\n me.id=id\n me.avadir=avadir\n me.avatar=avatar\n me.xyz=xyz0\n me.mode=\"exercise\"\n return me\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"players={\n let plyrs=[]\n for(var pidx=0;pidx<5;pidx++){//5 Penguins\n let id=pidx\n let avadir=\"https://raw.githubusercontent.com/ccosse/avatars/master/\"\n let avatar=\"guino\"//Fat baby penguin named Guino, this is not Tux\n let xyz=[0,0,0]\n plyrs.push(mkplayer(id,avadir,avatar,xyz))\n \n }\n //console.log(\"players=\",plyrs)\n \n for(var pidx=0;pidx{\n const cvals=['0','4','6','A','C','F']\n let ridx=parseInt(Math.random()*cvals.length)\n let gidx=parseInt(Math.random()*cvals.length)\n let bidx=parseInt(Math.random()*cvals.length)\n let rval=\"#\"+cvals[ridx]+cvals[gidx]+cvals[bidx]\n //console.log(rval)\n return rval\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"timer={\n let me={}\n me.running=false\n me.interval_id=({value:null})\n me.start=function(){\n \n me.interval_id.value=window.setInterval(animator.step,100)\n me.running=true\n d3.select(\"#startB\")\n .html(\"Stop\")\n .style(\"background-color\",\"#700\");\n }\n me.stop=()=>{\n window.clearInterval(me.interval_id.value)\n me.interval_id.value=null;\n me.running=false\n d3.select(\"#startB\")\n .html(\"Start\")\n .style(\"background-color\",\"#070\");\n }\n return me\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"auto_start={\n timer.start()\n return \"done\" \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"