# 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:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 21, 2019, 4:11am UTC](https://discourse.processing.org/t/pls-critique-my-code/12855/1 "2019-07-21T04:11:26Z")

</div>

Hi. I’m having a lot of problems with things not working the way they should, and things not working the way other people say they should. Can you please critique my code? I’m new to coding and just hacking things together. I think some of my code is redundant and poorly written (use of let vs var?/do i need to load the files twice?/are things in the right order?/could I condense functions anywhere?/should my image and sound be listed in both setup and draw as they are?) and I’m guessing it’s causing me some inflexibility as I try to work in new code to this project:

```auto
let img;
let song;

function windowResized() 
{
  resizeCanvas(windowWidth, windowHeight);
}

function preload()
{
img = loadImage('assets/picture.png');
song = loadSound('assets/recording.m4a');
}

function setup() 
{
var cnv = createCanvas(windowWidth, windowHeight);
cnv.style('display', 'block');

imageMode(CENTER);

img = loadImage('assets/picture.png');
song = loadSound('assets/recording.m4a');

frameRate(12);
}

function mousePressed() 
  {
  getAudioContext().resume() 
  song.play();
  }
  
function mouseMoved() 
  {
  song.play();
  }
  
function touchStarted() 
  {
  getAudioContext().resume() 
  song.play();
  }
  
function touchMoved() 
  {
  song.play();
  }
  
  
function draw() 
{
  var mX=mouseX
  var mY=mouseY

image(img, mX, mY, img.width / 2,     
  img.height / 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;
}

```

* * *

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 21, 2019, 2:53pm UTC](https://discourse.processing.org/t/pls-critique-my-code/12855/3 "2019-07-21T14:53:34Z")

</div>

Oh wow, this is very different… Thanks so much this is enormously helpful!

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 21, 2019, 4:38pm UTC](https://discourse.processing.org/t/pls-critique-my-code/12855/4 "2019-07-21T16:38:46Z")

</div>

> [@GoToLoop](#):
>
> img.resize(width \>\> 1, height \>\> 1);

Any idea why the image resolution and size malfunction on window resize? I’m not able to make my image size responsive at all, nothing I’ve tried works, but in your code it works except the resolution gets destroyed when the window is made smaller and the size gets distorted when it’s made large.

---

<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, 8:06pm UTC](https://discourse.processing.org/t/pls-critique-my-code/12855/5 "2019-07-21T20:06:21Z")

</div>

> [@epignosis567](#):
>
> Any idea why the image resolution and size malfunction on window resize?

B/c I don’t have your asset files, I haven’t tested my version properly. 😬

> [@epignosis567](#):
>
> , but in your code it works except the resolution gets destroyed when the window is made smaller and the size gets distorted when it’s made large.

Maybe b/c the same p5.Image is **resize()** over & over. 🤔  
I’ve made some changes in my version. Check it out my reply above again. 😇

Now it keeps the original loaded image in global variable _ori_:  
`let ori, img, song;`  
`ori = loadImage(FOLDER + IMG_NAME);`

And it clones it via method p5.Image::**get()** inside **windowResized()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Image/get)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Stores it in global variable _img_; then invokes method p5.Image::**resize()** right afterwards:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Image/resize)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

`(img = ori.get()).resize(width >> 1, height >> 1);`