Comments (4)
Glad to hear that you're trying charming.js!
All the code can go in the same html file, say you project is structured as follows:
- node_modules
- index.html
- package.json
<html>
<div id="app"></div>
<script src="./node_modules/@charming-art/charming/dist/cm.umd.min.js"></script>
<script>
const app = cm.app();
app.append(cm.circle, {
x: 100,
y: 100,
r: 50,
fill: "red",
});
document.getElementById("app").appendChild(app.render().node());
</script>
</html>
You can also put you code in a separate charming.js sketch, say to create sketch.js in the same directory:
- node_modules
- sketch.js // add
- index.html
- package.json
// sketch.js
const app = cm.app();
app.append(cm.circle, {
x: 100,
y: 100,
r: 50,
fill: "red",
});
document.getElementById("app").appendChild(app.render().node());
<html>
<div id="app"></div>
<script src="./node_modules/@charming-art/charming/dist/cm.umd.min.js"></script>
<script src="./sketch.js"></script>
</html>
If you want to use p5.js to play around with charming.js, you should install p5 npm install p5
and download a sound file:
- node_modules
- doorbell.mp3 // add
- sketch.js
- index.html
- package.json
<html>
<div id="app"></div>
<script src="./node_modules/@charming-art/charming/dist/cm.umd.min.js"></script>
<script src="./node_modules/p5/lib/p5.min.js"></script>
<script src="./node_modules/p5/lib/addons/p5.sound.min.js"></script>
<script src="./sketch.js"></script>
</html>
// sketch.js
let sound;
function preload() {
soundFormats("mp3", "ogg");
sound = loadSound("./doorbell.mp3");
}
function setup() {
const app = cm.app();
app.append(cm.circle, {
x: 100,
y: 100,
r: 50,
fill: "red",
});
app.on("mouseClick", () => {
const mouseX = app.prop("mouseX");
const mouseY = app.prop("mouseY");
if (cm.vecDist(cm.vec(mouseX, mouseY), cm.vec(100, 100)) < 50) {
sound.play();
}
});
document.getElementById("app").appendChild(app.render().node());
}
Make sure you start a local server, and you can try it online here.
from charming.
I think there should be a @charmim-art/charming-sound
for charming's ecosystem in the future. The same example will be like:
const sound = await cm.sound("./doorbell.mp3", { formats: ["mp3", "ogg"] });
const app = cm.app();
app.append(cm.circle, {
x: 100,
y: 100,
r: 50,
fill: "red",
});
app.on("mouseClick", () => {
const mouseX = app.prop("mouseX");
const mouseY = app.prop("mouseY");
if (cm.vecDist(cm.vec(mouseX, mouseY), cm.vec(100, 100)) < 50) {
sound.play();
}
});
document.getElementById("app").appendChild(app.render().node());
from charming.
Thanks - this helped me figure out a bit better how this fits together. I was able to get the circle, doorbell, etc. from the examples you posted above. :)
Still a few questions though: first, I can't get a sketch to load with the import command at the beginning of a script:
<script> import * as cm from "@charming-art/charming"; [. . .] </script>The sketch only seems to load when I remove that line and call the library in the metadata, i.e.:
<script src="./node_modules/@charming-art/charming/dist/cm.umd.min.js"></script> <script>Also I couldn't get anything to load using the jsdeliver ESM url, even though the url itself is good:
<script type="module"> import * as cm from "https://cdn.jsdelivr.net/npm/@charming-art/charming/+esm";</script>So as of now, I can only get it to work by calling the local library in a metadata script.
Hope this makes sense!
from charming.
I can't get a sketch to load with the import command at the beginning of a script:
<script> import * as cm from "@charming-art/charming"; [. . .] </script>
In this case, you declare a module type:
<script type="module" > import * as cm from "@charming-art/charming"; </script>
Also I couldn't get anything to load using the jsdeliver ESM url, even though the url itself is good:
<script type="module"> import * as cm from "https://cdn.jsdelivr.net/npm/@charming-art/charming/+esm";</script>
If you declare a module type, you should start a local server to host the project, say use Python3:
python3 -m http.server
or use Vite:
npm i vite -D
npx vite dev
from charming.
Related Issues (20)
- `app.render` and `app.start` returns app instead of canvas element
- Change `app.textBBox(options)` to `app.textBBox(text, options)`
- Add example `Circles`
- Add `line.close` HOT 1
- Fix nested flow bugs in bar chart HOT 1
- Add webgl rect
- Add `cm.figletText(string)`to transform normal text to figlet text HOT 1
- Change textAnchor to `start` and `end`
- Add benchmark
- Fix data-driven attributes fixed to constant values for composite shape
- Classify modules by renderer
- WebGL scatterplot
- Replace cm.noise with p5.noise HOT 1
- Roadmap
- Ball falling
- Add docs for cm.derive
- Fix fontWeight
- Add event.mouseDrag
- Add conditional export `@charming-art/charming/canvas`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from charming.