› ›

Trying loading media in thimbleproject

kfrajerkfrajer
edited April 2018 in p5.js Programming Questions

Trying to follow this post: https://forum.processing.org/two/discussion/18109/how-can-i-clone-an-image-object (also https://thimbleprojects.org/gotoloop/97931/sketch.js )

I tried to use sketchpad.cc but I gave up as it doesn't allow me to load mp3 files to their assets folder.

The idea is to load a sound file but I am having issues accessing the files from the assets source as demo by @GoToLoop in previous posts. I am not sure what I am doing wrong or what I am missing. I am trying images and no success. What I am missing?

This is what I have:

"use strict";

const SUBFOLDER = 'assets/';
let original;

function preload(){
  original = loadImage('http://"+"ashemag.com/wp-content/uploads/2016/03/Classy-Sunglasses-for-summer-03-300x300.jpg');}

  //NOTICE I also tried to loaded from hte resource folder
  //original = loadImage(SUBFOLDER + 'original.jpg');
}

function setup() {

  createCanvas(original.width, original.height);

}

function draw() {
  background(original); 
}

My html file is like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Made with Thimble</title>
  <link rel="stylesheet" href="style.css">

    <script async src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>

  <!--<script language="javascript" type="text/javascript" src="https://"+"cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.js"></script>
<script async language="javascript" type="text/javascript"  src="https://"+"cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.js"></script>-->

  <script defer src="sketch.js"> </script>
</head>
<body>

  <h1>Welcome to Thimble</h1>
  <div id="supercanvas"></div>
  <p>Make something <strong>amazing</strong> with the web!</p>
</body>

So when I try running the js + html, I get a "Loading..." but nothing happens. Is this CORS related despite I am running in thimbleproject?

CORS relate comment: https://forum.processing.org/two/discussion/comment/95739/#Comment_95739

Kf

Additional but not relevant: https://forum.processing.org/two/discussion/21532/dom-interfering-with-sketch-container/p1

Tagged:

Best Answers

Answers

Sign In or Register to comment.