Comments (4)
pearmini
commented on August 26, 2024
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.
pearmini
commented on August 26, 2024
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.
mroberts1
commented on August 26, 2024
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.
pearmini
commented on August 26, 2024
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.serveror use Vite:
npm i vite -Dnpx vite devfrom 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.