我正在代码笔上翻出路易斯·霍布雷格斯（louis hoebregts）的精彩流畅的图像，并试图为我自己的艺术修改它。
更新：根据评论员的建议，我查看了chrome开发控制台，它抱怨：

Fetch API cannot load file:///C:/Users/Sam/Downloads/flowing-imagehow-to/flowing-imagehow-to/dist/rowling-dark-bg.jpg. URL scheme "file" is not supported.

我尝试从图像文件名中删除破折号，但没有效果。
如果我使用一个抱怨的网址

Access to fetch at 'https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但是我想要一个相对的文件路径，我想在本地加载一个图像。如果有人帮我指出我需要做什么，我将不胜感激。
javascript:

let img;
const detail = 6;
let particles = [];
let grid = [];
let particleImage;
let ctx;
function preload() {
  img = loadImage('**https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg**');
}

class Particle {
  constructor (x, y) {
    this.x = x || random(width);
    this.y = y || random(height);
    this.prevX = this.x;
    this.speed = 0;
    this.v = random(0, 0.7);
  }

  update (speed) {
    if (grid.length) {
      this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
    }
    this.x += (1 - this.speed) * 3 + this.v;

    if (this.x > width) {
      this.x = 0;
    }
  }

  draw () {
    image(particleImage, this.x, this.y);
  }
}

/* ====== STEP 1 ====== */
function step1 () {
  clear();
  noLoop();
  image(img, 0, 0, width, height);
  noFill();
  stroke(120);
  strokeWeight(1);
  strokeCap(SQUARE);
  ctx.globalAlpha = 1;
  for (let y = 0; y < height; y+=detail) {
    for (let x = 0; x < width; x+=detail) {
      rect(x + 0.5, y + 0.5, detail, detail);
    }
  }
}
...
function setup () {
  const canvas = createCanvas(100,100);
  ctx = canvas.drawingContext;

  pixelDensity(1);

  particleImage = createGraphics(8, 8);
  particleImage.fill(255);
  particleImage.noStroke();
  particleImage.circle(4, 4, 4);

  windowResized();
  document.querySelector('#step').addEventListener('input', () => {
    if (window['goToStep' + step.value]) {
      window['goToStep' + step.value]();
    }
    draw();
  });
}

function windowResized () {
  const imgRatio = img.width/img.height;
  if (windowWidth/windowHeight > imgRatio) {
    resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight));
  } else {
    resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio));
  }
  noiseSeed(random(100));
  if (window['goToStep' + step.value]) {
    window['goToStep' + step.value]();
  }
  draw();
}

const texts = document.querySelectorAll('section p');
function draw () {
  window['step' + step.value]();

  texts.forEach(text => text.style.display = 'none');
  texts[step.value - 1].style.display = 'block';
}

我试着下载我的fork并在我的计算机上运行它，假设codepen可能不喜欢外部托管的图像文件，但它不起作用。
我认为问题出在上面的javascript中。可能在设置功能中？是不是有什么东西对物体所承载的图像的尺寸很挑剔？我该如何解决这个问题？
我真的很抱歉，我的javascript是知识，目前是牛头，我只是黑客，javascript是一个假期，从应用程序开发对我来说。
html:

<input type="range" min="1" max="6" step="1" id="step" value="1">
<section>
  <p>Draw an image and divide it into a grid</p>
  <p>Get the brightness of every cell</p>
  <p>Draw particles moving from left to right</p>
  <p>Update each particle's speed based on the brightness of its position</p>
  <p>Fade each particle based on its speed</p>
  <p>Do not clear your scene on each frame, to let the particles fade out</p>
</section>

css

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  height: 100vh;
  background: black;
}
canvas {
  margin: auto;
  touch-action: none;
}

@mixin track {
  box-sizing: border-box;
  height: 6px;
    background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

@mixin thumb {
  box-sizing: border-box;
    width: 30px;
  height: 30px;
    border-radius: 50%;
    background: #fff;
  border: 2px solid black;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}

input {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 80%;
  height: 34px;
  max-width: 400px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  &:active {
    cursor: grabbing;
  }
  &::-webkit-slider-runnable-track {@include track }
    &::-moz-range-track { @include track }
    &::-ms-track { @include track }

  &::-webkit-slider-thumb {margin-top: -12px;@include thumb}
    &::-moz-range-thumb { @include thumb }
  &::-ms-thumb {margin-top:0px;@include thumb}
}

section {
  box-sizing: border-box;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 0;
  top: 20px;
  width: 100%;
  text-align: center;
  padding: 10px 10%;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
  background: rgba(0, 0, 0, 0.7);
  p {
    margin: 0;
  }
  @media (max-width: 500px) {
    font-size: 24px;
  }
}