https://thechange.wiki/index.php?action=history&feed=atom&title=Code%3Amake-flow-diagram1.html 2026-04-26T14:14:54Z Revision history for this page on the wiki MediaWiki 1.41.0 https://thechange.wiki/index.php?title=Code:make-flow-diagram1.html&diff=283&oldid=prev 2022-08-27T04:35:02Z

<p>Created page with &quot;This javascript/HTML canvas generates the &quot;flow diagram&quot; of <a href="/File:food-funnel.png" title="File:food-funnel.png">File:food-funnel.png</a>. If you want to generate a different flow diagram, you can save your own version of this and modify the draw() function to your liking. &lt;syntaxhighlight lang=&quot;html&quot;&gt; &lt;html&gt;&lt;head&gt; &lt;script&gt; // This draw() is the main function: Change it according to how you want your diagram: function draw() { primary = 5454; // crops harvested leftStart(); go(5000); branch(491...&quot;</p> <p><b>New page</b></p><div>This javascript/HTML canvas generates the &quot;flow diagram&quot; of [[:File:food-funnel.png]].<br /> <br /> If you want to generate a different flow diagram, you can save your own version of this and modify the draw() function to your liking.<br /> <br /> &lt;syntaxhighlight lang=&quot;html&quot;&gt;<br /> &lt;html&gt;&lt;head&gt;<br /> &lt;script&gt;<br /> // This draw() is the main function: Change it according to how you want your diagram:<br /> function draw() {<br /> primary = 5454; // crops harvested<br /> <br /> leftStart();<br /> go(5000);<br /> branch(491); // biofuel<br /> go(9000);<br /> branch(493); // food loss<br /> end();<br /> <br /> rightStart();<br /> go(5000);<br /> transform(1964,518); // livestock<br /> go(5000);<br /> branch(591); // food waste<br /> go(14000);<br /> merge(252); // for comparison: what would be needed to end global hunger<br /> end();<br /> }<br /> <br /> // The rest of these functions are just the &quot;internals&quot; to make it all work:<br /> function ctx_moveTo(x,y) { ctx.moveTo(Math.round(x), Math.round(y)); }<br /> function ctx_lineTo(x,y) { ctx.lineTo(Math.round(x), Math.round(y)); }<br /> function leftStart() { sign = -1; start(); }<br /> function rightStart() { sign = 1; start(); }<br /> function start() {<br /> scale = first/primary;<br /> cursor_x = (width + sign*first)/2;<br /> cursor_y = rim;<br /> ctx.beginPath();<br /> ctx.lineWidth = &quot;2&quot;;<br /> ctx.strokeStyle = &quot;#000000&quot;;<br /> ctx_moveTo(cursor_x + sign*rim, 0);<br /> ctx_lineTo(cursor_x, rim);<br /> ctx.stroke();<br /> }<br /> function go(distance) {<br /> ctx.beginPath();<br /> ctx_moveTo(cursor_x, cursor_y);<br /> cursor_y += distance*scale;<br /> ctx_lineTo(cursor_x, cursor_y);<br /> ctx.stroke();<br /> }<br /> function branch(thickness) {<br /> ctx.beginPath();<br /> ctx_moveTo(cursor_x, cursor_y);<br /> ctx_lineTo(cursor_x + sign*reach, cursor_y + reach);<br /> ctx_lineTo(sign&lt;0 ? 0:width, cursor_y + reach);<br /> ctx_moveTo(sign&lt;0 ? 0:width, cursor_y + reach + thickness*scale);<br /> ctx_lineTo(cursor_x + sign*reach - sign*thickness*scale*(SQRT2-1),<br /> cursor_y + reach + thickness*scale);<br /> cursor_x -= thickness*scale*sign;<br /> cursor_y += thickness*scale*(SQRT2-1);<br /> ctx_lineTo(cursor_x, cursor_y);<br /> ctx.stroke();<br /> }<br /> function merge(thickness) {<br /> ctx.beginPath();<br /> ctx_moveTo(cursor_x, cursor_y);<br /> ctx_lineTo(cursor_x + sign*reach, cursor_y - reach);<br /> ctx_lineTo(sign&lt;0 ? 0:width, cursor_y - reach);<br /> ctx_moveTo(sign&lt;0 ? 0:width, cursor_y - reach + thickness*scale);<br /> ctx_lineTo(cursor_x + sign*reach + sign*thickness*scale*(SQRT2-1),<br /> cursor_y - reach + thickness*scale);<br /> cursor_x += thickness*scale*sign;<br /> cursor_y += thickness*scale*(SQRT2-1);<br /> ctx_lineTo(cursor_x, cursor_y);<br /> ctx.stroke();<br /> }<br /> function transform(before, after) {<br /> before *= scale; after *= scale;<br /> var dif = before-after; var adif = Math.abs(dif);<br /> ctx.beginPath();<br /> ctx_moveTo(cursor_x - sign*before, cursor_y);<br /> ctx_lineTo(cursor_x - sign*before, cursor_y + adif*3);<br /> ctx_moveTo(cursor_x - sign*dif, cursor_y + adif*3);<br /> ctx_lineTo(cursor_x - sign*dif, cursor_y + adif*2);<br /> ctx_lineTo(cursor_x, cursor_y + adif);<br /> ctx_lineTo(cursor_x, cursor_y);<br /> ctx.stroke();<br /> cursor_x -= sign*(before-after);<br /> cursor_y += adif*3;<br /> }<br /> function end() {<br /> ctx.beginPath();<br /> ctx_moveTo(cursor_x, cursor_y);<br /> cursor_y = height;<br /> ctx_lineTo(cursor_x, cursor_y);<br /> ctx.stroke();<br /> }<br /> function init() {<br /> ctx = document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;);<br /> ctx.canvas.height = document.body.clientHeight * 2; // temporary height to get the scrollbar so clientWidth is accurate below<br /> width = ctx.canvas.width = document.body.clientWidth; // fit canvas to width<br /> height= ctx.canvas.height = ctx.canvas.width * 4; // 1:4 aspect ratio<br /> rim = 8; // pixels at the at the top of the diagram (&quot;the rim of the funnel&quot;)<br /> first = width * 0.4; // the width of the first part of the diagram (&quot;the primary&quot;)<br /> reach = width * 0.1; // how far the branches/merges reach<br /> SQRT2 = Math.sqrt(2); // constant<br /> ctx.fillStyle = &quot;#FFFFFF&quot;;<br /> ctx.fillRect(0, 0, width, height);<br /> draw();<br /> }<br /> &lt;/script&gt;<br /> &lt;/head&gt;&lt;body onload=&quot;init()&quot; onresize=&quot;init()&quot; style=&quot;margin:0;padding:0;text-align:center&quot;&gt;<br /> &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;<br /> &lt;/body&gt;&lt;/html&gt;<br /> &lt;/syntaxhighlight&gt;</div>

Elie