Pls critique my code!

p5.js Libraries
2

Not at all! Callback preload() is the single best place to load assets. :star_struck:

BtW, you’ve got some missing indentation on your posted code. :woozy_face:

We can use Beautifier.io in order to clean up our JS code. :wink:

Here’s my own take on your sketch (Warning: Not fully tested!): :sunglasses:

index.html:

<!DOCTYPE html>

<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://Unpkg.com/p5/lib/addons/p5.dom.min.js></script>
<script defer src=https://Unpkg.com/p5/lib/addons/p5.sound.min.js></script>

<script defer src=sketch.js></script>

sketch.js:

// https://Discourse.Processing.org/t/pls-critique-my-code/12855/2
// @Epignosis567 & @GoToLoop (2019-Jul-21)

'use strict';

const IMG_NAME = 'picture.png', SONG_NAME = 'recording.m4a',
      FOLDER = 'assets/', SUSPEND_STATE = 'suspended', FPS = 12;

var touchStarted = mousePressed, touchMoved = mouseMoved;

let ori, img, song;

function preload() {
  ori = loadImage(FOLDER + IMG_NAME);
  song = loadSound(FOLDER + SONG_NAME);
}

function setup() {
  windowResized();
  _renderer.style('display', 'block');
  frameRate(FPS).imageMode(CENTER);
}

function draw() {
  clear().image(img, mouseX, mouseY);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight, true);
  (img = ori.get()).resize(width >> 1, height >> 1);
}

function mousePressed() {
  const audCtx = getAudioContext();
  audCtx.state === SUSPEND_STATE && audCtx.resume();
  return mouseMoved();
}

function mouseMoved() {
  song.isPlaying() || song.play();
  return false;
}
1 Like