BPMN in Processing - OpenProcessing

mySketch
xxxxxxxxxx
 
​
​
// BPMN Diagram of Excel OfficeScript Workflow
​
// Define colors for different elements
const backgroundColor = color(255);
const borderColor = color(0);
const activityColor = color(220);
const diamondColor = color(128, 0, 128);
// Define font size for labels
const fontSize = 16;
// Define padding for elements
const padding = 10;
​
​
​
​
// Define start event
const startEvent = {
  x: 50,
  y: 50,
  size: 30,
};
​
// Define activity elements
const activities = [
  {
    name: "Load Worksheets",
    x: 150,
    y: 50,
    width: 150,
    height: 40,
  },
  {
    name: "Get ARIS Data",
    x: 350,
    y: 50,
    width: 150,
    height: 40,
  },
  {
    name: "Clean Up ARIS Data",
    x: 150,
    y: 150,
    width: 150,
    height: 40,
  },
  {
    name: "Convert and Calculate Values",
    x: 350,
    y: 150,
    width: 150,
    height: 40,
  },
  {
    name: "Append Boolean Values",
    x: 150,
    y: 250,
    width: 150,
    height: 40,
  },
  {
    name: "Show Updated Cleaned Array",
    x: 350,
    y: 250,
    width: 150,
    height: 40,
  },
  {
    name: "Add Document Details",
    x: 150,
    y: 350,
    width: 150,
    height: 40,
  },
  {
    name: "Show Final Array",
    x: 350,
    y: 350,
    width: 150,
    height: 40,
  },
];
​
// Define decision gateway
const decisionGateway = {
  x: 250,
  y: 100,
  size: 30,
};
​
// Define sequence flows
const sequenceFlows = [
  {
    start: startEvent,
    end: activities[0],
  },
  {
    start: activities[0],
    end: activities[1],
  },
  {
    start: activities[1],
    end: decisionGateway,
  },
  {
    start: decisionGateway,
    end: activities[2],
  },
  {
    start: decisionGateway,
    end: activities[3],
  },
  {
    start: activities[2],
    end: activities[3],
  },
  {
    start: activities[3],
    end: activities[4],
  },
  {
    start: activities[4],
    end: activities[5],
  },
  {
    start: activities[5],
    end: activities[6],
  },
  {
    start: activities[6],
    end: activities[7],
  },
];
​
// Define end event
const endEvent = {
  x: 550,
  y: 50,
  size: 30,
};
​
// Setup function
function setup() {
  createCanvas(600, 400);
  //background(backgroundColor);
}
​
​
function draw() {
  
  // Define start event
const startEvent = {
  x: 50,
  y: 50,
  size: 30,
};
  // Draw start event
  drawCircle(startEvent.x, startEvent.y, startEvent.size);
​
  // Draw decision gateway
  drawDiamond(decisionGateway.x, decisionGateway.y, decisionGateway.size, diamondColor);
​
  // Draw end event
  drawCircle(endEvent.x, endEvent.y, endEvent.size);
​
  // Draw activity elements
  for (let i = 0; i < activities.length; i++) {
    const activity = activities[i];
    drawRect(activity.x, activity.y, activity.width, activity.height, activityColor);
    fill(black);
    text(activities[i].name, activity.x + padding, activity.y + fontSize / 2 + padding);
  }
​
  // Draw sequence flows
  for (let i = 0; i < sequenceFlows.length; i++) {
    const flow = sequenceFlows[i];
    drawArrow(flow.start.x, flow.start.y, flow.end.x, flow.end.y);
  }
}
​
​
// DrawRect function
function drawRect(x, y, width, height, fillColor) {
  fill(fillColor);
  stroke(borderColor);
  strokeWeight(1);
  rect(x, y, width, height);
  fill(black);
  text(activities[i].name, activity.x + padding, activity.y + fontSize / 2 + padding);
}
​
​
// DrawArrow function
function drawArrow(startX, startY, endX, endY) {
  stroke(borderColor);
  strokeWeight(2);
  line(startX, startY, endX, endY);
  fill(borderColor);
  triangle(endX - 10, endY + 5, endX + 5, endY - 5, endX, endY);
}
​
​
​
​
​
​
​
// DrawDiamond function
function drawDiamond(x, y, size, fillColor) {
  fill(fillColor);
  stroke(borderColor);
  strokeWeight(1);
  beginShape();
  vertex(x - size / 2, y);
  vertex(x, y + size / 2);
  vertex(x + size / 2, y);
  vertex(x, y - size / 2);
  endShape(CLOSE);
  fill(black);
  text("D", x, y + fontSize / 2);
}
​
​
function drawCircle(x, y, size, fillColor) {
  fill(fillColor);
  stroke(borderColor);
  strokeWeight(1);
  ellipse(x, y, size, size);
  fill(black);
  text(activities[i].name, x + padding, y + fontSize / 2 + padding);
}
​
​
// DrawArrow function
function drawArrow(startX, startY, endX, endY) {
  stroke(borderColor);
  strokeWeight(2);
  line(startX, startY, endX, endY);
  fill(borderColor);
  triangle(endX - 10, endY + 5, endX + 5, endY - 5, endX, endY);
}
​