From b08c78257bd61ef38e654efbbc38934b9cd9d979 Mon Sep 17 00:00:00 2001 From: osbm Date: Thu, 31 Oct 2024 14:20:19 +0300 Subject: [PATCH 1/4] save current progress --- public/scripts/hello-world.js | 8 ++++++++ public/scripts/input-output.js | 32 +++++++++++++++++++++++++++++ src/components/P5Sketch.astro | 32 +++++++++++++++++++++++++++++ src/content/blog/blog-with-p5js.mdx | 20 ++++++++++++++++++ 4 files changed, 92 insertions(+) create mode 100644 public/scripts/hello-world.js create mode 100644 public/scripts/input-output.js create mode 100644 src/components/P5Sketch.astro create mode 100644 src/content/blog/blog-with-p5js.mdx diff --git a/public/scripts/hello-world.js b/public/scripts/hello-world.js new file mode 100644 index 0000000..77a5100 --- /dev/null +++ b/public/scripts/hello-world.js @@ -0,0 +1,8 @@ +function setup() { + let mycanvas = createCanvas(400, 400); + mycanvas.parent('hello-world'); +} +function draw() { + fill(255); + ellipse(mouseX, mouseY, 80, 80); +} \ No newline at end of file diff --git a/public/scripts/input-output.js b/public/scripts/input-output.js new file mode 100644 index 0000000..044fc81 --- /dev/null +++ b/public/scripts/input-output.js @@ -0,0 +1,32 @@ +function setup() { + let canvas = createCanvas(710, 400, WEBGL); + canvas.parent('input-output'); + angleMode(DEGREES); + strokeWeight(5); + noFill(); + stroke(32, 8, 64); +} + +function draw() { + background(250, 180, 200); + + // Call every frame to adjust camera based on mouse/touch + orbitControl(); + + // Rotate rings in a half circle to create a sphere of cubes + for (let zAngle = 0; zAngle < 180; zAngle += 30) { + // Rotate cubes in a full circle to create a ring of cubes + for (let xAngle = 0; xAngle < 360; xAngle += 30) { + push(); + + // Rotate from center of sphere + rotateZ(zAngle); + rotateX(xAngle); + + // Then translate down 400 units + translate(0, 400, 0); + box(); + pop(); + } + } +} \ No newline at end of file diff --git a/src/components/P5Sketch.astro b/src/components/P5Sketch.astro new file mode 100644 index 0000000..46a1ff2 --- /dev/null +++ b/src/components/P5Sketch.astro @@ -0,0 +1,32 @@ +--- +const { sketch_path, sketch_name, figure_id, sketch_description } = Astro.props; +// https://github.com/osbm/osbm.dev/blob/main/ + sketch_path(first 3 characters removed) +const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path.slice(3); + +--- + + + + +
+ +
+

Figure {figure_id}: {sketch_description} Sketch source + +

+ \ No newline at end of file diff --git a/src/content/blog/blog-with-p5js.mdx b/src/content/blog/blog-with-p5js.mdx new file mode 100644 index 0000000..d5f3fc7 --- /dev/null +++ b/src/content/blog/blog-with-p5js.mdx @@ -0,0 +1,20 @@ +--- +title: 'Second post' +description: 'First post of this website that tests many things' +pubDate: '2024-10-26' + + +--- +import P5Sketch from '../../components/P5Sketch.astro'; + + +Before Canvas + + + +After canvas + + + + +why these things happen \ No newline at end of file -- 2.51.0 From f7a6110708a42664f44d51e635b46bec64970a1e Mon Sep 17 00:00:00 2001 From: osbm Date: Thu, 31 Oct 2024 17:24:14 +0300 Subject: [PATCH 2/4] save current progress --- public/scripts/input-output.js | 32 ------------- public/scripts/multi-sketch.js | 55 +++++++++++++++++++++++ src/components/P5Sketch.astro | 12 ++--- src/content/blog/blog-with-multi-p5js.mdx | 23 ++++++++++ src/content/blog/blog-with-p5js.mdx | 13 ++---- src/content/config.ts | 2 + src/layouts/BlogPost.astro | 9 +++- 7 files changed, 95 insertions(+), 51 deletions(-) delete mode 100644 public/scripts/input-output.js create mode 100644 public/scripts/multi-sketch.js create mode 100644 src/content/blog/blog-with-multi-p5js.mdx diff --git a/public/scripts/input-output.js b/public/scripts/input-output.js deleted file mode 100644 index 044fc81..0000000 --- a/public/scripts/input-output.js +++ /dev/null @@ -1,32 +0,0 @@ -function setup() { - let canvas = createCanvas(710, 400, WEBGL); - canvas.parent('input-output'); - angleMode(DEGREES); - strokeWeight(5); - noFill(); - stroke(32, 8, 64); -} - -function draw() { - background(250, 180, 200); - - // Call every frame to adjust camera based on mouse/touch - orbitControl(); - - // Rotate rings in a half circle to create a sphere of cubes - for (let zAngle = 0; zAngle < 180; zAngle += 30) { - // Rotate cubes in a full circle to create a ring of cubes - for (let xAngle = 0; xAngle < 360; xAngle += 30) { - push(); - - // Rotate from center of sphere - rotateZ(zAngle); - rotateX(xAngle); - - // Then translate down 400 units - translate(0, 400, 0); - box(); - pop(); - } - } -} \ No newline at end of file diff --git a/public/scripts/multi-sketch.js b/public/scripts/multi-sketch.js new file mode 100644 index 0000000..6a92b2f --- /dev/null +++ b/public/scripts/multi-sketch.js @@ -0,0 +1,55 @@ +let canvas1 = function ( p ) { + p.setup = function() { + p.createCanvas(710, 400, p.WEBGL); + p.angleMode(p.DEGREES); + p.strokeWeight(5); + p.noFill(); + p.stroke(32, 8, 64); + } + + p.draw = function() { + p.background(250, 180, 200); + + // Call every frame to adjust camera based on mouse/touch + p.orbitControl(); + + // Rotate rings in a half circle to create a sphere of cubes + for (let zAngle = 0; zAngle < 180; zAngle += 30) { + // Rotate cubes in a full circle to create a ring of cubes + for (let xAngle = 0; xAngle < 360; xAngle += 30) { + p.push(); + + // Rotate from center of sphere + p.rotateZ(zAngle); + p.rotateX(xAngle); + + // Then translate down 400 units + p.translate(0, 400, 0); + p.box(); + p.pop(); + } + } + } +}; + +let canvas2 = function ( p ) { + + + p.setup = function() { + p.createCanvas(710, 400); + p.background(250, 180, 200); + } + + p.draw = function() { + // draw a circle at the mouse position + p.fill(255, 0, 0); + p.stroke(0); + p.strokeWeight(0); + p.ellipse(p.mouseX, p.mouseY, 80, 80); + + } +} + + +var mycanvas1 = new p5(canvas1, 'canvas1'); +var myp5 = new p5(canvas2, 'canvas2'); diff --git a/src/components/P5Sketch.astro b/src/components/P5Sketch.astro index 46a1ff2..77bc46b 100644 --- a/src/components/P5Sketch.astro +++ b/src/components/P5Sketch.astro @@ -1,15 +1,9 @@ --- -const { sketch_path, sketch_name, figure_id, sketch_description } = Astro.props; -// https://github.com/osbm/osbm.dev/blob/main/ + sketch_path(first 3 characters removed) -const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path.slice(3); - +const { sketch_path, canvas_id, figure_id, sketch_description } = Astro.props; +const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path; --- - - - -
- +

Figure {figure_id}: {sketch_description} Sketch source diff --git a/src/content/blog/blog-with-multi-p5js.mdx b/src/content/blog/blog-with-multi-p5js.mdx new file mode 100644 index 0000000..164d049 --- /dev/null +++ b/src/content/blog/blog-with-multi-p5js.mdx @@ -0,0 +1,23 @@ +--- +title: 'Third post' +description: 'First post of this website that tests many things' +pubDate: '2024-10-29' +includes_p5js: True +p5_script_path: '../../scripts/multi-sketch.js' +--- + +import P5Sketch from '../../components/P5Sketch.astro'; + +Before first Canvas + + + +After first canvas + + +Before second Canvas + + + +After second canvas +``` diff --git a/src/content/blog/blog-with-p5js.mdx b/src/content/blog/blog-with-p5js.mdx index d5f3fc7..292df6a 100644 --- a/src/content/blog/blog-with-p5js.mdx +++ b/src/content/blog/blog-with-p5js.mdx @@ -2,19 +2,14 @@ title: 'Second post' description: 'First post of this website that tests many things' pubDate: '2024-10-26' - - +includes_p5js: True +p5_script_path: '../../scripts/hello-world.js' --- -import P5Sketch from '../../components/P5Sketch.astro'; +import P5Sketch from '../../components/P5Sketch.astro'; Before Canvas - + After canvas - - - - -why these things happen \ No newline at end of file diff --git a/src/content/config.ts b/src/content/config.ts index 0905202..07124a4 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -11,6 +11,8 @@ const blog = defineCollection({ updatedDate: z.coerce.date().optional(), filename: z.string().optional(), heroImage: z.string().optional(), + includes_p5js: z.boolean().optional(), + p5_script_path: z.string().optional(), }), }); diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 3ba5a0a..e8044ee 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -10,7 +10,7 @@ import type { CollectionEntry } from "astro:content"; type Props = CollectionEntry<"blog">["data"]; -const { title, description, pubDate, updatedDate, filename, heroImage } = Astro.props; +const { title, description, pubDate, updatedDate, filename, heroImage, includes_p5js, p5_script_path } = Astro.props; const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/content/blog/" + filename; @@ -21,6 +21,13 @@ const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/cont {title} + + { + includes_p5js && ( + + + ) + }

-- 2.51.0 From 32cb78a67eba4c05e1c5a7c2edc6637cec36b816 Mon Sep 17 00:00:00 2001 From: osbm Date: Thu, 31 Oct 2024 19:05:31 +0300 Subject: [PATCH 3/4] change markdown code theme --- astro.config.mjs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 8ce36f0..33d0068 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,6 +1,4 @@ import { defineConfig } from 'astro/config'; - -// import rehypeKatex from 'rehype-katex'; import rehypeMathjax from 'rehype-mathjax'; import remarkMath from 'remark-math'; import mdx from '@astrojs/mdx'; @@ -25,4 +23,9 @@ export default defineConfig({ ), sitemap(), ], + markdown: { + shikiConfig:{ + theme:'catppuccin-macchiato', + }, + } }); -- 2.51.0 From 24ede9e0da4fc2335d9292682ef148ce9cf3ff2a Mon Sep 17 00:00:00 2001 From: osbm Date: Thu, 31 Oct 2024 19:47:36 +0300 Subject: [PATCH 4/4] finalize the blogpost --- public/scripts/hello-world.js | 1 + public/scripts/multi-sketch.js | 55 ----------- src/content/blog/blog-with-p5js.mdx | 15 --- src/content/blog/p5js-component-for-astro.mdx | 92 +++++++++++++++++++ src/styles/global.css | 25 +++++ 5 files changed, 118 insertions(+), 70 deletions(-) delete mode 100644 public/scripts/multi-sketch.js delete mode 100644 src/content/blog/blog-with-p5js.mdx create mode 100644 src/content/blog/p5js-component-for-astro.mdx diff --git a/public/scripts/hello-world.js b/public/scripts/hello-world.js index 77a5100..bd9ecd6 100644 --- a/public/scripts/hello-world.js +++ b/public/scripts/hello-world.js @@ -1,6 +1,7 @@ function setup() { let mycanvas = createCanvas(400, 400); mycanvas.parent('hello-world'); + background(0); } function draw() { fill(255); diff --git a/public/scripts/multi-sketch.js b/public/scripts/multi-sketch.js deleted file mode 100644 index 6a92b2f..0000000 --- a/public/scripts/multi-sketch.js +++ /dev/null @@ -1,55 +0,0 @@ -let canvas1 = function ( p ) { - p.setup = function() { - p.createCanvas(710, 400, p.WEBGL); - p.angleMode(p.DEGREES); - p.strokeWeight(5); - p.noFill(); - p.stroke(32, 8, 64); - } - - p.draw = function() { - p.background(250, 180, 200); - - // Call every frame to adjust camera based on mouse/touch - p.orbitControl(); - - // Rotate rings in a half circle to create a sphere of cubes - for (let zAngle = 0; zAngle < 180; zAngle += 30) { - // Rotate cubes in a full circle to create a ring of cubes - for (let xAngle = 0; xAngle < 360; xAngle += 30) { - p.push(); - - // Rotate from center of sphere - p.rotateZ(zAngle); - p.rotateX(xAngle); - - // Then translate down 400 units - p.translate(0, 400, 0); - p.box(); - p.pop(); - } - } - } -}; - -let canvas2 = function ( p ) { - - - p.setup = function() { - p.createCanvas(710, 400); - p.background(250, 180, 200); - } - - p.draw = function() { - // draw a circle at the mouse position - p.fill(255, 0, 0); - p.stroke(0); - p.strokeWeight(0); - p.ellipse(p.mouseX, p.mouseY, 80, 80); - - } -} - - -var mycanvas1 = new p5(canvas1, 'canvas1'); -var myp5 = new p5(canvas2, 'canvas2'); diff --git a/src/content/blog/blog-with-p5js.mdx b/src/content/blog/blog-with-p5js.mdx deleted file mode 100644 index 292df6a..0000000 --- a/src/content/blog/blog-with-p5js.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: 'Second post' -description: 'First post of this website that tests many things' -pubDate: '2024-10-26' -includes_p5js: True -p5_script_path: '../../scripts/hello-world.js' ---- - -import P5Sketch from '../../components/P5Sketch.astro'; - -Before Canvas - - - -After canvas diff --git a/src/content/blog/p5js-component-for-astro.mdx b/src/content/blog/p5js-component-for-astro.mdx new file mode 100644 index 0000000..f3245b0 --- /dev/null +++ b/src/content/blog/p5js-component-for-astro.mdx @@ -0,0 +1,92 @@ +--- +title: 'A new P5.js component for Astro' +description: 'Demonstrating the new P5.js component for Astro' +pubDate: '2024-10-31' +includes_p5js: True +p5_script_path: '../../scripts/hello-world.js' +--- + +import P5Sketch from '../../components/P5Sketch.astro'; + +In 2021, I had a great interest in procedural art and generative coding. I loved watching [The Coding Train](https://www.youtube.com/@TheCodingTrain). So I learned all about [Processing language](https://processing.org/)[^1] and [P5.js](https://p5js.org/). This was super fun and ignited my love for programming again. + +[^1]: Nowadays it looks like it has been abandoned in favor of P5.js + +I have been drafting a blogpost that i plan to write beautiful plots and even make some of them interactive. So I thought P5.js scripts would be awesome for this considering the fact that i can write components in astro. + +Here is the an example blogpost: + + +```astro +--- +title: 'title' +description: 'description' +pubDate: '2024-10-31' +includes_p5js: True +p5_script_path: '../../scripts/hello-world.js' +--- + +import P5Sketch from '../../components/P5Sketch.astro'; + +Text before the canvas. + + + +Text after the canvas. +``` + +Here you can see the simple P5.js script that creates the canvas: + +```js +function setup() { + let mycanvas = createCanvas(400, 400); + mycanvas.parent('hello-world'); + background(0); +} +function draw() { + fill(255); + ellipse(mouseX, mouseY, 80, 80); +} +``` + +And inside the astro component there is a div html tag with the id of *hello-world* so that the P5.js knows where to put the canvas. + +There was an issue I encountered when trying to show more than one sketch and it was only generating one of them. And i found out that to generate more than one sketch in one page i needed to merge all scripts into one file like this. + +```js +let canvas1 = function ( p ) { + p.setup = function() { + ... + } + p.draw = function() { + ... + } +}; + +let canvas2 = function ( p ) { + p.setup = function() { + ... + } + p.draw = function() { + ... + } +} + +var mycanvas1 = new p5(canvas1, 'canvas1'); +var myp5 = new p5(canvas2, 'canvas2'); +``` + +Now that I resolve my last issue i can show you the last + +Here is how it looks: + + + + +--- + +I have also been thinking to add a component for [THREE.js](https://threejs.org/). I made a [Sphere Eversion Animation](https://osmanbayram.com/sphere-eversion-animation/) once. And i loved it a lot. But i thought that this would be a little overkill. + +See you in the next one ❤️❤️❤️ + + diff --git a/src/styles/global.css b/src/styles/global.css index fa8e88e..d7340d8 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -49,4 +49,29 @@ a { a:hover { color: rgb(0, 200, 200); +} + +pre { + background-color: rgb(30, 35, 50); + padding: 1rem; + border-radius: 5px; + overflow-x: auto; + margin: 1rem 0; +} + +code { + counter-reset: step; + counter-increment: step 0; + /* add a little space inside */ + /* margin: 1rem 0; */ +} + +code .line::before { + content: counter(step); + counter-increment: step; + width: 1rem; + margin-right: 1.5rem; + display: inline-block; + text-align: right; + color: rgba(115,138,148,.4); } \ No newline at end of file -- 2.51.0