Happy With AR and Digital Transformation

The 2020 CX Report gathers trends on how business happens in the computational era by examining the tech stacks for marketing and products in the context of digital transformation.

I got a simple AR thingy working (the old skool way) over my summer vacation. Here are the parts you need:

This all happened because for no good reason I wanted to make an AR-y version of this video from the CX Report 2020.

Meanwhile I was sad to hear that Jeanne Ross retired but certainly happy for her!

Instead of trying to fix and optimize all its processes, a company should identify its most important data — as examples, Ross cited package data at UPS, customer data at USAA, and supply chain data at Lego.

post on the work of Jeanne Ross

Sign up for the CX Briefing with no more than 2020 characters, zero images, and all in plain-text.

Processing…
Success! You're on the list.

The subcomponents of the digital transformation model (and their reconstitution) is here:

function setup() {
  createCanvas(500, 500);
}

/* 
 * Unoptimized code to represent the five components 
 * of digital transformation as shared by folks at Sloan
 * and represented visually in my YouTube video:
 * https://youtu.be/v_0Wv3PuDWo
 */

const s2 = 1.41421356237;

function strmulti(str,x,y,lead) {
  let ss = split(str,"\n");
  var ypos = y + lead - (lead * ss.length)/2;
  var w;
  textSize(lead);
  
  ss.forEach(function (s) {
    w = textWidth(s);
    text(s,x-w/2,ypos);
    ypos += lead;
  });
}

function shape1(x,y,dim) {
  push();
  fill(0,255,0,128);
  translate(x,y);
  scale(1,-1);
  beginShape();
  vertex(0,0);
  vertex(dim,0);
  vertex(dim,dim);
  vertex(0,dim);
  vertex(0,0);
  endShape();
  fill(255);
  translate(dim/2,dim/2);
  scale(1,-1);
  strmulti("SHARED\nCUSTOMER\nINSIGHTS",0,0,dim/7);
  pop();
}

function shape2(x,y,dim) {
  push();
  translate(x,y);
  scale(1,-1);
  fill(255,0,0,128);
  beginShape();
  vertex(0,0);
  vertex(dim*s2,0);
  vertex(dim*s2,dim*s2);
  vertex(dim*s2/2,dim*s2+dim/s2);
  vertex(0,dim*s2);
  vertex(0,0);
  endShape();
  fill(255);
  translate(dim*s2/2,dim*s2/2);
  scale(1,-1);
  textSize(Math.round(dim/6));
  strmulti("ACCOUNTABILITY\nFRAMEWORK",0,0,dim/7);
  pop();
}

function shape3(x,y,dim) {
  push();
  translate(x,y);
  scale(1,-1);
  fill(255,128,0,128);
  beginShape();
  vertex(0,0);
  vertex(dim*2,0);
  vertex(dim,dim);
  vertex(0,0);
  endShape();
  fill(255);
  translate(dim,dim/s2/2);
  scale(1,-1);
  textSize(Math.round(dim/6));
  strmulti("EXTERNAL\nDEVELOPMENT\nPLATFORM",0,0,dim/7);
  pop();
}

function shape4(x,y,dim) {
  push();
  translate(x,y);
  scale(1,-1);
  fill(128,128,255,128);
  beginShape();
  vertex(0,0);
  vertex(dim*2,dim*2);
  vertex(0,dim*2);
  vertex(0,0);
  endShape();
  fill(255);
  translate(dim/s2*0.8,dim + dim/2);
  scale(1,-1);
  textSize(Math.round(dim/6));
  strmulti("DIGITAL\nPLATFORM",0,0,dim/7);
  pop();
}

function shape5(x,y,dim) {
  push();
  translate(x,y);
  scale(1,-1);
  fill(128,255,255,128);
  beginShape();
  vertex(0,0);
  vertex(dim*s2*2,0);
  vertex(dim*s2*2,dim*s2);
  vertex(dim*s2*2*0.75,dim*s2/2);
  vertex(dim*s2,dim*s2);
  vertex(0,0);
  endShape();
  fill(255);
  translate(dim*s2*1.2,dim/2*0.8);
  scale(1,-1);
  textSize(Math.round(dim/6));
  strmulti("OPERATIONAL BACKBONE",0,0,dim/7);
  pop();
}


function draw() {
  background(220);
  fill(255,0,0);
  var dim = 70;
  
  var tx = 10, ty = 480;
  
  // 1 Shared Customer Insights
  push();
  translate(tx,ty);
  shape1(0,0,dim);
  pop();
  
  // 2 Accountability Framework
  push();
  translate(tx,ty);
  translate(dim,-dim*2);
  rotate(PI / 4);
  shape2(0,0,dim);
  pop();
  
  // 3 External Development Platform
  push();
  translate(tx,ty);
  translate(dim*3,0);
  rotate(-PI / 2);
  shape3(0,0,dim);
  pop();
    
  // 4 Digital Platform
  push();
  translate(tx,ty);
  translate(0,-dim);
  shape4(0,0,dim);
  pop();
  
  // 5 Operational Backbone
  push();
  translate(tx,ty);
  translate(dim*3,0);
  rotate(-PI / 2 - PI / 4);
  shape5(0,0,dim);
  pop();
  
  tx = 270; ty = 480;

  // 2 Accountability Framework
  push();
  translate(tx,ty);
  translate(dim*s2*2,-dim*s2*2);
  rotate(PI);
  shape2(0,0,dim);
  pop();
  
  // 3 External Development Platform
  push();
  translate(tx,ty);
  translate(0,-dim*s2*2);
  rotate(PI / 4);
  shape3(0,0,dim);
  pop();
    
  // 4 Digital Platform
  push();
  translate(tx,ty);
  rotate(PI / 2 + PI / 4);
  translate(0,-dim);
  shape4(-2*dim,3*dim,dim);
  pop();
  
  // 5 Operational Backbone
  push();
  translate(tx,ty);
  translate(0,0);
  shape5(0,0,dim);
  pop();
  
}