Thursday, May 2, 2019

programmatically making icons in p5

Last year for Porchfest, I made a little P5 to generate icons I could use in Google Maps.
https://editor.p5js.org/kirkjerk/sketches
Here is this years version of the code, that makes icons A-Z and P0-P9:
//maybe run at https://editor.p5js.org/ 

const targets = [];

function setup() {
  createCanvas(27, 43);
  
  //A...Z
  for(let i = 0; i < 26; i++){
    targets.push(String.fromCharCode(65 + i)); 
  }
  //P0 ... P9
  for(let i = 0; i <= 9; i++){
     targets.push('P' + i); 
  }  

  rectMode(CENTER);
frameRate(4);
}
let c = 0;
function draw() {
  clear();
if(c < targets.length) {
  icon(targets[c]);
  }
  c++;
}

function icon(t){

  stroke(255);
  strokeWeight(2);
  fill(128,128,255);
  
  
  beginShape();
  vertex(2,2);
  vertex(width-2,2);
  vertex(width-2,25);
  vertex(width/2,height-2);
  vertex(2,25);
  endShape(CLOSE);
  
  textAlign(CENTER);
  fill(255);
  noStroke();
  textSize(16);
  text(t,width/2,20); 
  let filename = "icon_"+t+".png";
  print(filename);
  saveCanvas(filename,"png");
}

No comments:

Post a Comment