31:Tcf5,p5(sketch => { let system; let t = 0; // let start = 0; let rythm = 0; const circles_chain_1 = createDataChain(); // functions to move the dots function drawCircle(x, y, color) { sketch.noStroke(); sketch.fill(color); sketch.ellipse(x, y, radius, radius, radius); } sketch.setup = function() { sketch.createCanvas(width, height); }; sketch.draw = function() { sketch.background('white'); sketch.stroke(grey); sketch.line(0, height / 2 + 10, step_logistics - 2, height / 2 + 10); sketch.textAlign(sketch.LEFT); sketch.noStroke(); sketch.fill(grey); sketch.textSize(16); sketch.text('Production', step_production + 5, height / 2 + 35); sketch.stroke(blue); sketch.line(step_logistics + 2, height / 2 + 10, step_shelves - radius * 2, height / 2 + 10); sketch.noStroke(); sketch.fill(blue); sketch.textSize(16); sketch.text('Logistics', step_logistics + 5, height / 2 + 35); sketch.stroke(orange); sketch.line(step_shelves - radius * 2 + 4, height / 2 + 10, step_shelves + radius * 2, height / 2 + 10); sketch.line(step_shelves, height / 2 - 40, step_shelves, height / 2 - 10); sketch.noStroke(); sketch.fill(orange); sketch.textSize(16); sketch.textAlign(sketch.CENTER); sketch.text('Supermarket', step_shelves, height / 2 - 55); for (var i = 0; i < circles_chain_1.length; i++) { const thisDot = circles_chain_1[i]; if (thisDot.id <= rythm) { drawCircle(thisDot.x_1, thisDot.y, thisDot.color, thisDot.opacity); // 0 - step_production --> PRODUCTION if (thisDot.x_1 <= step_production) { thisDot.x_1 = thisDot.x_1 + speed_chain; thisDot.color = '#656565'; // step_production - step_logistics --> PRODUCTION } else if (thisDot.x_1 > step_production && thisDot.x_1 <= step_logistics) { thisDot.x_1 = thisDot.x_1 + speed_chain; thisDot.color = grey; // step_logistics - step_shelves --> LOGISTICS } else if (thisDot.x_1 > step_production && thisDot.x_1 <= step_shelves) { thisDot.x_1 = thisDot.x_1 + speed_chain; thisDot.color = blue; if (thisDot.x_1 > step_shelves) { thisDot.internal_timing = thisDot.internal_timing + time_speed * 10; } // SHELVES } else if (thisDot.x_1 > step_shelves && thisDot.x_1 < width) { thisDot.color = orange; // consumer SHELVES if (thisDot.internal_timing > 9) { thisDot.x_1 = thisDot.x_1 + speed_shelves_1; thisDot.opacity = thisDot.opacity - time_speed; thisDot.color = `rgba(32, 32, 32, ${thisDot.opacity})`; } thisDot.internal_timing = thisDot.internal_timing + time_speed * 10; } else if (thisDot.x_1 === width) { thisDot.x_1 = 0; thisDot.opacity = 1; thisDot.color = grey; thisDot.id = thisDot.id + circles_chain_1.length; thisDot.internal_timing = 0 } } } rythm = rythm + time_speed; }; })32:Td7e,p5(sketch => { let system; let t = 0; // let start = 0; let rythm = 0; const circles_chain_1 = createDataChain(); // functions to move the dots function drawCircle(x, y, color) { sketch.noStroke(); sketch.fill(color); sketch.ellipse(x, y, radius, radius, radius); } sketch.setup = function() { sketch.createCanvas(width, height); }; sketch.draw = function() { sketch.background('white'); sketch.stroke(grey); sketch.line(0, height / 2 + 10, step_logistics - 2, height / 2 + 10); sketch.textAlign(sketch.LEFT); sketch.noStroke(); sketch.fill(grey); sketch.textSize(16); sketch.text('Production', step_production + 5, height / 2 + 35); sketch.stroke(blue); sketch.line(step_logistics + 2, height / 2 + 10, step_shelves - radius * 2, height / 2 + 10); sketch.noStroke(); sketch.fill(blue); sketch.textSize(16); sketch.text('Logistics', step_logistics + 5, height / 2 + 35); sketch.stroke(orange); sketch.line(step_shelves - radius * 2 + 4, height / 2 + 10, step_shelves + radius * 2, height / 2 + 10); sketch.line(step_shelves, height / 2 - 40, step_shelves, height / 2 - 10); sketch.noStroke(); sketch.fill(orange); sketch.textSize(16); sketch.textAlign(sketch.CENTER); sketch.text('Supermarket', step_shelves, height / 2 - 55); for (var i = 0; i < circles_chain_1.length; i++) { const thisDot = circles_chain_1[i]; if (thisDot.id <= rythm) { drawCircle(thisDot.x_1, thisDot.y, thisDot.color, thisDot.opacity); // 0 - step_production --> PRODUCTION if (thisDot.x_1 <= step_production) { thisDot.x_1 = thisDot.x_1 + speed_chain; thisDot.color = '#656565'; // step_production - step_logistics --> PRODUCTION } else if (thisDot.x_1 > step_production && thisDot.x_1 <= step_logistics) { thisDot.x_1 = thisDot.x_1 + speed_chain; thisDot.color = grey; // step_logistics - step_shelves --> LOGISTICS } else if (thisDot.x_1 > step_production && thisDot.x_1 <= step_shelves - radius * 2) { thisDot.x_1 = thisDot.x_1 + speed_chain; thisDot.color = blue; // there is no stopping in the shelves // if (thisDot.x_1 > step_shelves) { // thisDot.internal_timing = thisDot.internal_timing + time_speed * speed_shelves_2; // } // SHELVES } else if (thisDot.x_1 > step_shelves - radius * 2 && thisDot.x_1 < width) { thisDot.color = orange; // consumer SHELVES if (thisDot.internal_timing > 2 / speed_shelves_2) { thisDot.x_1 = thisDot.x_1 + speed_shelves_1 * speed_shelves_2; thisDot.opacity = thisDot.opacity - time_speed * speed_shelves_2; thisDot.color = `rgba(32, 32, 32, ${thisDot.opacity})`; } thisDot.internal_timing = thisDot.internal_timing + time_speed * 10; } else if (thisDot.x_1 >= width ) { thisDot.x_1 = 0; thisDot.opacity = 1; thisDot.color = grey; thisDot.id = thisDot.id + circles_chain_1.length; thisDot.internal_timing = 0 } } } rythm = rythm + time_speed; }; })33:[] 2f:{"title":"Food supply chain","cells":[{"id":0,"value":"md`# Food supply chain`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`Animations done for https://medium.com/datadriveninvestor/store-shelves-arent-empty-because-there-is-no-food-10fbb4551e42`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## What happens when you increase the demand for products in a supermarket?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`In normal situations, the food supply chain works perfectly. Consumers usually don't notice the lack of products because the rhythm of production and logistics has already considered the demand.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`However, when people buy in bulk (for example, toilet papers) the supply chain is not prepared for the change in the demand. They're not ready for changing the rhythm of production and, therefore, consumers notice the lack of products. And, therefore, it's not a problem of supply, it's a problem of demand.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`## Variables for coding the loop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"md`### Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"orange = 'rgb(249, 87, 0)';","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"blue = 'rgb(0, 164, 255)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"grey = 'rgb(101, 101, 101)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`### Position of chain steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"step_production = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"step_logistics = Math.round(width / 6);","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"step_shelves = Math.round(2.5 * width /4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"step_consumer = Math.round(3 * width / 4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`### Speeds`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"time_speed = 0.01;","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"speed_shelves_2 = object.speed","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"speed_shelves_1 = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"speed_logistics = 0.5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"speed_chain = 1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`### Function to create data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"function createDataChain() {\n const values = [];\n for (let i = 0; i < n_chain; i++) {\n values.push({\n id: i,\n y: height / 2,\n x_1: 0,\n internal_timing: 0,\n color: '#222',\n internal_timing: 0,\n opacity: 1\n })\n }\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"n_chain = 20;","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"radius = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = 200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`## JavaScript Libaries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}