Trivision Billboard Online

jqnewland,Sat Jul 01 2023•Computer Graphics p5.js

This is a recording of a p5.js sketch. The triangular panels of the billboard were created using a 3 sided cylinder and their texture was made from using p5Graphics. The p5Graphics fill the panels with 3 colors, transforming the billboard into a kaleidoscopic canvas. This is an ongoing project, updates will be made to this post. Below are some of the scripts used to make this possible:

Main p5.js script

Setup

var panelTexture;
var userPanelNum = 7;
var panelWidth = imgWidth/userPanelNum;
var panelHeight = imgHeight;
var wrapWidth = panelWidth * 3;

function setup() {
    const canvas = createCanvas(1000, 1000, WEBGL);
    canvas.parent('sketch-container');
    pixelDensity(3.0);
    
    panelTexture = createGraphics(wrapWidth,panelHeight,WEBGL);
    panelTexture.background(0);

    fillPanelGraphics(panelTexture);
    background(0);
    
    angleMode(DEGREES);
    rectMode(CENTER);
}

function fillPanelGraphics(panel){
    panel.fill(255,0,0);
    panel.rect(-wrapWidth/2,-panelHeight/2,panelWidth,panelHeight);
    panel.fill(0,255,0);
    panel.rect(-wrapWidth/2+panelWidth,-panelHeight/2,panelWidth,panelHeight);
    panel.fill(0,0,255);
    panel.rect(-wrapWidth/2+(2*panelWidth),-panelHeight/2,panelWidth,panelHeight);
}

Draw Functions

function drawBillboardAssets() {
  fill(85);
  translate(0, 100, 0);
  box(500,7,30);
  resetMatrix();
  translate(0, -100, 0);
  box(500,7,30);
  resetMatrix();
  translate(-200, 150, -10);
  cylinder(15, 100, 8, 1);
  resetMatrix();
  translate(200, 150, -10);
  cylinder(15, 100, 8, 1);
  resetMatrix();
}

function addBillboardLights(){
  directionalLight(200, 200, 200, -0.5, 0.25, -1);
  var offx = imgWidth/userPanelNum;
  spotLight(230, 255, 255, 75+(-imgWidth/2)+(offx*0)+panelWidth/2, -95, 400, 0,0,-1, 1);
  spotLight(230, 255, 255, 75+(-imgWidth/2)+(offx*1)+panelWidth/2, -95, 400, 0,0,-1, 1, 30);
  spotLight(230, 255, 255, 75+(-imgWidth/2)+(offx*2)+panelWidth/2, -95, 400, 0,0,-1, 1, 30);
  spotLight(230, 255, 255, 75+(-imgWidth/2)+(offx*3)+panelWidth/2, -95, 400, 0,0,-1, 1, 30);
  spotLight(230, 255, 255, 75+(-imgWidth/2)+(offx*4)+panelWidth/2, -95, 400, 0,0,-1, 1, 30);
}

function draw() {
  background(0);
  addBillboardLights();
  var trivisionBillboard = new TrivisionPanels(0.0,0.0,panelWidth, userPanelNum);
  trivisionBillboard.renderPanels();
  drawBillboardAssets();
}

Trivision Panels Class

class TrivisionPanels {
  constructor(z, z_2, size, panelNum) {
    this.z = z;
    this.z_2 = z_2;
    this.size = size; 
    this.panelNum = panelNum;
  }


  render3SideCylinder(x,y){
    push();
    translate(x,y);
    rotateY(millis()/20);
    texture(panelTexture);
    
    cylinder(this.size/2, this.size*2.5, 4, 1);
    pop();
  }
    
  renderPanels(){
    var curX = 0;
    for(var i = 0; i < this.panelNum; i++){
      curX = map(i,0,this.panelNum-1, -(imgWidth/2)+(imgWidth/8), (imgWidth/2)-(imgWidth/8));
      this.render3SideCylinder(curX,0);
    }
  }
}