p5live-cheatsheet-codedrift.md

Cheatsheet for p5live

The p5live interface is only slightly different from the p5js editor. p5live is MUCH better suited for live visuals. This is a quick look up sheet of things for when you are jamming or in a live coding performance/gig.

• Cheatsheet for p5live
  • Super basics
  • Add Images
    • POINTCLOUD-ISH with images
    • Bounce an Image around the screen
  • Add a google font
    • Sequence of flashing text
    • Going crazy on the screen
  • Add mic input
  • Cute grids from basic shapes!
    • grid 1
    • grid 2
    • grid 3
  • Use sin()
  • Using random "nicely"
  • Add Webcam
    • Rollie Pollie Webcam

Super basics

ctrl+Enter to run the code

ctrl+shift+Enter to reset the screen

ctrl+E to hide the code (toggle this mode to show your full artwork to the world!)

ctrl+T to TIDY YOUR CODE

Add Images

For p5live you need to add images to a hosting service. THere are many available but the quickest one I found was imgbb. Go to https://imgbb.com and upload the image, you can then copy paste the image link it will look like this https://i.ibb.co/pvQ2SR8/IMG-3593-Background-Removed.png

let im

function preload() {
	im = loadImage("https://i.ibb.co/pvQ2SR8/IMG-3593-Background-Removed.png")
}

function setup() {
	createCanvas(windowWidth, windowHeight)
}

function draw() {
	image(im,width/2,height/2,im.width/8,im.height/8)
}

POINTCLOUD-ISH with images

let img;
function preload() {
  img = loadImage(
    "https://huggingface.co/computational-mama-research/corporateshwari/resolve/main/image-0.png"
  );
}
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  img.resize(50, 50);
  imageMode(CENTER);
  rectMode(CENTER);
  angleMode(RADIANS);
}

function draw() {
  background(25);
  orbitControl();
  translate(-img.width, -height / 2 + 30, 0);
  scale(8);
  // image(img,-100,-50)

  img.loadPixels();
  // Loop over every pixel in the image
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      // Read the pixel's color
      let originalColor = img.get(x, y);

      let avgCol =
        (red(originalColor) + green(originalColor) + blue(originalColor)) / 3;

      avgDepX = map(avgCol, 0, 255, -0.1, 0.1) * 70;
      avgDepY = map(avgCol, 0, 255, -0.1, 0.1);
      // movement = 10*sin(avgDep)
      push();
      rotateY(frameCount / 150);
      rotateX(frameCount / 150);

      translate(0, 0, avgDepX + sin(avgDepX + frameCount / 5));
      noStroke();
      fill(originalColor);
      rect(x, y, 1);
      pop();
    }
  }
  img.updatePixels();
  // image(img,0,0	)
}

Bounce an Image around the screen

let im5
let x = 0
let speed = 3
let rad = 60; // Width of the shape
let xpos, ypos; // Starting position of shape

let xspeed = 2.8; // Speed of the shape
let yspeed = 2.2; // Speed of the shape

let xdirection = 1; // Left or Right
let ydirection = 1; // Top to Bottom

function preload() {
	im5 = loadImage("https://i.ibb.co/Lz007XF/IMG-2679-Large.png")
}

function setup() {
	createCanvas(windowWidth, windowHeight)
	imageMode(CENTER)
	xpos = width / 2;
	ypos = height / 2;
}

function draw() {
	background(255, 9)	
	if(x > height || x < 0) {
		speed = speed * -1;
	}
	
	// Update the position of the shape
  xpos = xpos + xspeed * xdirection;
  ypos = ypos + yspeed * ydirection;

  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1
  if (xpos > width - rad || xpos < rad) {
    xdirection *= -1;
  }
  if (ypos > height - rad || ypos < rad) {
    ydirection *= -1;
  }

	image(im5,xpos,ypos)
	x = x + speed
}

Add a google font

let font = googleFont("Jacquard 12");

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont(font);
  textSize(80);
  textAlign(CENTER, CENTER);
  fill(255);
}

function draw() {
  background(0, 10);
  text("your text in the doubt quotes", width / 2, 300);
}

function googleFont(fontName) {
  let link = document.createElement("link");
  link.href =
    "https://fonts.googleapis.com/css?family=" +
    encodeURI(fontName) +
    "&display=swap";
  link.rel = "stylesheet";
  document.head.appendChild(link);
  return fontName;
}

Sequence of flashing text

/*	_typo_google-fonts // cc teddavis.org 2021	*/

let font = googleFont("Jacquard 12");
let sentences = [
  "your text in the doubt quotes",
  "looks fancy when you move",
  "makes you want to groove(?)",
];

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont(font);
  textSize(80);
  textAlign(CENTER, CENTER);
  fill(255);
}

function draw() {
  background(0, 10);
  text(sentences[abs((frameCount / 150) % sentences.length)], width / 2, 300);
}

function googleFont(fontName) {
  let link = document.createElement("link");
  link.href =
    "https://fonts.googleapis.com/css?family=" +
    encodeURI(fontName) +
    "&display=swap";
  link.rel = "stylesheet";
  document.head.appendChild(link);
  return fontName;
}

Going crazy on the screen

/*	_typo_google-fonts // cc teddavis.org 2021	*/

let font = googleFont("Codystar");
let txt = "P5LIVE";

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont(font);
  textAlign(CENTER, CENTER);
  fill(255);
}

function draw() {
  background(0, 10);
  textSize(random(1, 100));
  text(txt, random(width), random(height));
}

function keyPressed() {
  txt = key; // overwrite on keypress
}

function googleFont(fontName) {
  let link = document.createElement("link");
  link.href =
    "https://fonts.googleapis.com/css?family=" +
    encodeURI(fontName) +
    "&display=swap";
  link.rel = "stylesheet";
  document.head.appendChild(link);
  return fontName;
}

Add mic input

let m = 0;
let im;
let im2;
let mic;
function preload() {
  im = loadImage("https://i.ibb.co/pvQ2SR8/IMG-3593-Background-Removed.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(4);
  textAlign(CENTER, CENTER);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  let x = random(width);
  let y = random(height);
  image(im, x, y, im.width / 8, im.height / 8);
  let micLevel = map(mic.getLevel(), 0.1, 1, 30, 390);
  textSize(40 + micLevel);
  fill(255);
  text("दिल्ली के आर्टिस्ट", x, y, 300);
}

Cute grids from basic shapes!

grid 1

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  angleMode(DEGREES);
  // colorMode(HSL)
}

function draw() {
  background(197, 121, 109);
  // noStroke()
  stroke(255);
  let k = 1 / 3;
  let d = 30 * sin(frameCount / 100);
  for (j = 0; j < height; j += 30) {
    for (i = 0; i < width; i += 30) {
      push();
      r = frameCount / 100 + sin(j) * 100;
      translate(i, j);
      rotate(sin(i) * 40 + frameCount);
      // line(0,0,d,d)
      // line(0,d,d,0)
      c = 0;
      noStroke();
      fill(60, 80, c, 150);
      rect(0, 15, 15, 30);
      // circle(0,20,20)
      pop();
    }
  }
}

grid 2

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  // angleMode(DEGREES)
}

function draw() {
  background(0);
  // noStroke()
  stroke(255);
  let k = 1 / 3;
  let d = 40 + 30 * sin(frameCount / 100);
  let res = 100;
  for (j = 0; j < height; j += res) {
    for (i = 0; i < width; i += res) {
      push();
      r = frameCount / 100 + sin(j) * 100;
      translate(i, j);
      rotate(sin(i + j) + frameCount / 100);
      // line(0,0,d,d)
      // line(0,d,d,0)

      noFill();
      rect(0, 0, 20);
      circle(0, 0, res / 10);
      circle(0, 0, res / 2.5);
      rect(0, 0, res);
      circle(0, 0, res / 5);
      line(0, res / 5, res / 5, 0);
      pop();
    }
  }
}

grid 3

let mic;
function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  angleMode(DEGREES);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(0);
  // noStroke()
  // stroke(255)
  strokeWeight(2);
  let k = 1 / 3;
  let d = 40 + 30 * sin(frameCount / 100);
  for (j = 0; j < height; j += 90) {
    for (i = 0; i < width; i += 90) {
      push();
      r = sin(i + j / 3 + frameCount * 5) * 200;
      translate(i, j);
      rotate(45);
      // rotate(sin(i+j)+frameCount/5)
      // line(0,0,d,d)
      // line(0,d,d,0)

      noFill();
      stroke(r, 100, 200);
      rect(0, 0, 50);
      rect(0, 0, 40);
      circle(65, 0, 45);
      circle(65, 0, 55);
      circle(65, 0, 65);
      circle(65, 0, 75);

      // line(0,10,10,0)
      pop();
    }
  }
}

Use sin()

let m = 0;
let im;
let im2;

function preload() {
  im = loadImage("https://i.ibb.co/pvQ2SR8/IMG-3593-Background-Removed.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  rectMode(CENTER);
  imageMode(CENTER);
  // textAlign(CENTER,CENTER)
  textStyle(ITALIC);
  textFont(font);
  textSize(60);
}

function draw() {
  background(255, 200, 100, 10);
  noStroke();
  fill("pink");
  for (j = 0; j < 10; j++) {
    for (i = 0; i < 10; i++) {
      let r = 200;
      let inr = sin(m) * r;
      let x = inr * cos(i * 36 + m);
      let y = inr * sin(i * 36 + m);
      push();
      translate(width / 2, height / 2);
      rotate(i);
      image(im, x, y, 130, 130);
      scale(-1, 1);
      image(im, x * 1.4, y * 1.4, 130, 130);
      scale(-1, 1);
      image(im, x * 1.8, y * 1.8, 130, 130);
      if (i % 2 == 0) {
        //translate(x,y)
        rotate(36 * i + m);
        fill(i * 30);
        //text("दिल्ली के आर्टिस्ट",100,100)
      }
      pop();
      fill(0);
      // text("rest rest", 200,200)
    }
  }

  m += 0.3;
  // filter(BLUR,3)
}

let n = 120;
let al = 3;
function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
}

function draw() {
  background(255);
  stroke(0, 30 / al);
  strokeWeight(n / al);
  noFill();
  let y = -n;
  for (let j = 0; j <= height; j += 80) {
    beginShape();
    for (let i = 0; i <= width; i += n) {
      let r = map(sin(i + j + frameCount), -1, 1, 0, 70);
      push();
      vertex(i + r, y / 2 + j);
      if (y == -n) {
        y = n;
      } else {
        y = -n;
      }
      pop();
      endShape();
    }
  }
}

Using random "nicely"

function setup() {
	createCanvas(windowWidth, windowHeight)
	frameRate(4)
	
}

function draw() {
	background(0,10)
	noStroke()
	let x = random(width)
	let y = random(height)
	fill(random(255),random(255),random(255))
	circle(x,y,random(50,100))
}

Add Webcam

let webcam;

function setup() {
  createCanvas(windowWidth, windowHeight);
  webcam = createCapture(VIDEO);
  rectMode(CENTER);
  webcam.hide();
}

function draw() {
  image(webcam, 0, 0);
}

Rollie Pollie Webcam

let webcam;

function setup() {
  createCanvas(windowWidth, windowHeight);
  webcam = createCapture(VIDEO);
  rectMode(CENTER);
  webcam.hide();
}

function draw() {
  for (i = 0; i < width; i += width / 20) {
    push();
    translate(i, 100);
    rotate(frameCount / 50 + 100 * sin(i));
    image(webcam, 0, 0);
    pop();
  }
}

Multiple sines

---

function setup() {
createCanvas(windowWidth, windowHeight)
imageMode(CENTER)
angleMode(DEGREES)
}

function draw() {

background(0)
f = frameCount/4



translate(width/2, height/2)

num = 7 //how many figures

for (let a = 0; a < num; a++){
	let angle = 1*f + 360*a/num
	let d = 300
	
	let s = sin(1*angle)
	let c = cos(1*angle)

	let px = d * s  //multiply s's and c's multiple times to get interesting patterns. for eg. px = d * s * s * s
	let py = d * c  //here too. eg. py = d * c * s
	
	circle(px,py, 20)
}

}

Cycle through words in a sentence

// Hindi string that will be split into individual words
let jiskoAlone = "जिसको अकेले में आ आ कर";

// Another string (currently unused in the code)
let str = "hello is it me?";

// Array to store the split words of `jiskoAlone`
let jArr;

function setup() {
  // Set up the canvas size
  createCanvas(400, 400);

  // Split the Hindi string `jiskoAlone` into an array of words
  let sp = split(jiskoAlone, " ");
  jArr = sp; // Assign the split array to `jArr`
  console.log(sp); // Log the array of words to the console

  // Set the frame rate to 3 frames per second
  frameRate(3);
}

function draw() {
  // Set a light gray background
  background(220);

  // Calculate the current index using the frame count, cycling through `jArr`
  let i = frameCount % jArr.length;
  console.log(i); // Log the current index to the console

  // Display the current word from `jArr` at the center of the canvas
  textAlign(CENTER, CENTER); // Center-align the text for better placement
  textSize(24); // Increase text size for visibility
  text(jArr[i], width / 2, height / 2);
}