# Pls critique my code!

**URL:** <https://discourse.processing.org/t/pls-critique-my-code/12855>\
**Category:** Libraries\
**Created:** [July 21, 2019, 4:11am UTC](https://discourse.processing.org/t/pls-critique-my-code/12855 "2019-07-21T04:11:26Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 21, 2019, 10:52am UTC](https://discourse.processing.org/t/pls-critique-my-code/12855/2 "2019-07-21T10:52:03Z")

</div>

> [@epignosis567](#):
>
> /Do I need to load the files twice?/

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

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

We can use [Beautifier.io](http://Beautifier.io) in order to clean up our JS code. 😉

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

* * *

## index.html:

```auto
<!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:

```auto
// 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;
}

```

* * *

---

_[View the full topic](https://discourse.processing.org/t/pls-critique-my-code/12855)._