{"id":51,"date":"2025-04-05T10:25:54","date_gmt":"2025-04-05T10:25:54","guid":{"rendered":"https:\/\/hghf.dk\/?page_id=51"},"modified":"2025-04-05T19:41:05","modified_gmt":"2025-04-05T19:41:05","slug":"p5js","status":"publish","type":"page","link":"https:\/\/hghf.dk\/?page_id=51","title":{"rendered":"p5js"},"content":{"rendered":"\n<div class=\"wp-block-gutenbergp5-p5js gutenbergp5-align-center\"><iframe srcdoc=\"\n        <!DOCTYPE html&gt;\n        <html&gt;\n            <body style=&quot;padding: 0; margin: 0;&quot;&gt;<\/body&gt;\n            <script src=&quot;https:\/\/hghf.dk\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                let n = 10;\nlet size = 300;\nfunction setup() {\n  createCanvas(600, 600);\n  background(0);\n}\n\nfunction draw() {\n  background(0);\n    for(i = n; i &gt; 2; i--){\n      push();\n      translate(width\/2, height\/2);\n      rotate(frameCount \/ 200.0);\n      drawPolygon(size, i);\n      size = size*0.7;\n      pop();\n    }\n  size = 300;\n\n\n}\n\nfunction drawPolygon(radius, npoints) {\n    let angle = TWO_PI \/ npoints;\n    beginShape();\n    noStroke();\n    fill(radius+70, radius*1.5, radius\/2);\n    for (let a = 0; a < TWO_PI; a += angle) {\n      let sx = cos(a) * radius;\n      let sy = sin(a) * radius;\n      vertex(sx, sy);\n    }\n    endShape(CLOSE);\n}\n            <\/script&gt;\n        <\/html&gt;\" sandbox=\"allow-scripts allow-same-origin\" scrolling=\"no\" style=\"overflow:hidden;\" width=\"\" height=\"\" class=\"\" title=\"p5.js canvas\"><\/iframe><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-gutenbergp5-p5js gutenbergp5-align-center\"><iframe srcdoc=\"\n        <!DOCTYPE html&gt;\n        <html&gt;\n            <body style=&quot;padding: 0; margin: 0;&quot;&gt;<\/body&gt;\n            <script src=&quot;https:\/\/hghf.dk\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                let particles = [];\nlet fireworks = [];\nlet batmanPoints = [];\nlet v = 8;\nlet p, gravity, force, vx, vy;\nlet exploded = false;\nfunction setup() {\n  createCanvas(600, 600);\n  gravity = createVector(0, 0.09);\n  background(0);\n  batmanPoints = [createVector(0, -12), createVector(13, 7), createVector(4, -6), createVector(12, 5), createVector(5, -5), createVector(11, 4), createVector(6, -5), createVector(9, 3), createVector(7, -6), createVector(6, 3), createVector(8, -8), createVector(3, 4), createVector(9, -6), createVector(3, 12), createVector(10, -5), createVector(1, 9), createVector(11, -5), createVector(-1, 9), createVector(12, -6), createVector(-3, 12), createVector(13, -8), createVector(-3, 4), createVector(13, -9), createVector(-6, 3), createVector(12, -11), createVector(-9, 3), createVector(11, -12), createVector(-11, 4), createVector(14, -11), createVector(-12, 5), createVector(17, -9), createVector(-13, 7), createVector(19, -7), createVector(-13, 8), createVector(20, -5), createVector(-12, 10), createVector(21, -2), createVector(-11, 11), createVector(21, 1), createVector(-14, 10), createVector(20, 4), createVector(-17, 8), createVector(19, 6), createVector(-19, 6), createVector(17, 8), createVector(-20, 4), createVector(14, 10), createVector(-21, 1), createVector(11, 11), createVector(-21, -2), createVector(12, 10), createVector(-20, -5), createVector(13, 8), createVector(-19, -7), createVector(-17, -9), createVector(-14, -11), createVector(-11, -12), createVector(-12, -11), createVector(-13, -9), createVector(-13, -8), createVector(-12, -6), createVector(-11, -5), createVector(-10, -5), createVector(-9, -6), createVector(-8, -8), createVector(-7, -6), createVector(-6, -5), createVector(-5, -5), createVector(-4, -6), createVector(-1, -8), createVector(1, -8), createVector(-3, 8), createVector(3, 8)];\n}\n\nfunction draw() {\n  background(0,25);\n  if(random(0, 100)<5){\n     p = new Particle(random(50, width-50), height, false, random(255), random(255), random(255));\n     particles.push(p);\n     }\n  for(i = 0; i<particles.length; i++){\n    particles[i].applyForce();\n    particles[i].update();\n    particles[i].show();\n    if(particles[i].vel.y&gt;=0){\n      for (let u = 0; u < batmanPoints.length; u++) {\n        vx = 0.08*batmanPoints[u].x;\n        vy = 0.08*batmanPoints[u].y;\n        p = new Particle(particles[i].pos.x, particles[i].pos.y, true, particles[i].r, particles[i].g, particles[i].b, vx, vy);                         \n        fireworks.push(p);\n        }\n      particles.splice(i, 1);\n    }\n  }\n    for(i = 0; i<fireworks.length; i++){\n      fireworks[i].applyForce();\n      fireworks[i].update();\n      fireworks[i].show();\n        if(fireworks[i].pos.y&gt;=height){\n          fireworks.splice(i, 1);\n        }\n    }\n  \n}\n\nclass Particle{\n  constructor(x, y, exploded, r, g, b, vx, vy){\n    this.x = x;\n    this.y = y;\n    this.pos = createVector(this.x, this.y);\n    this.r = r;\n    this.g = g;\n    this.b = b;\n    this.exploded = exploded;\n    this.lifespan = 255;\n    this.acc = createVector(0, 0);\n    this.vel = createVector(0,random(-v, -v\/2));\n    if(this.exploded){\n      this.vel = createVector(vx, vy);\n    }\n  }\n  applyForce(){\n    this.acc.add(gravity);\n  }\n  update(){\n    this.vel.add(this.acc);\n    this.pos.add(this.vel);\n    this.acc.mult(0);\n  }\n  show(){\n    if(this.exploded){\n      \n      this.lifespan = this.lifespan - 2;\n    }\n    stroke(this.r, this.g, this.b, this.lifespan);\n    strokeWeight(4);\n    point(this.pos.x, this.pos.y);\n  }\n}\n            <\/script&gt;\n        <\/html&gt;\" sandbox=\"allow-scripts allow-same-origin\" scrolling=\"no\" style=\"overflow:hidden;\" width=\"\" height=\"\" class=\"\" title=\"p5.js canvas\"><\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><em>p5.js<\/em> er et JavaScript-bibliotek, der g\u00f8r det nemt at arbejde kreativt med kode \u2013 is\u00e6r til grafik, animation og interaktivitet. Det er ideelt for begyndere og bruges ofte i undervisning, kunst og design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"514\" height=\"310\" src=\"https:\/\/hghf.dk\/wp-content\/uploads\/2025\/04\/image.png\" alt=\"\" class=\"wp-image-60\" srcset=\"https:\/\/hghf.dk\/wp-content\/uploads\/2025\/04\/image.png 514w, https:\/\/hghf.dk\/wp-content\/uploads\/2025\/04\/image-300x181.png 300w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure>\n\n\n\n<p>p5.js bygger p\u00e5 ideen om at g\u00f8re programmering tilg\u00e6ngeligt for alle og stammer fra det \u00e6ldre Processing-projekt. Det fungerer direkte i en webbrowser og kr\u00e6ver kun kendskab til HTML og JavaScript p\u00e5 et grundl\u00e6ggende niveau.<\/p>\n\n\n\n<p>En typisk p5.js-sketch best\u00e5r af to centrale funktioner:<\/p>\n\n\n\n<p><code>setup()<\/code> k\u00f8rer \u00e9n gang i starten og bruges til at s\u00e6tte scenen. <\/p>\n\n\n\n<p><code>draw()<\/code> k\u00f8rer igen og igen og skaber animation eller opdateret grafik.<\/p>\n<\/div>\n\n\n\n<iframe src=\"https:\/\/editor.p5js.org\/Htc_dk\/sketches\/SIoWgVVwk\" width=\"600px\" height=\"600px\"><\/iframe>\n\n\n\n<script src=\"\/\/toolness.github.io\/p5.js-widget\/p5-widget.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.10.0\/p5.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.10.0\/addons\/p5.sound.min.js\"><\/script>\n<script type=\"text\/p5\" data-autoplay data-preview-width=\"300\">\nlet x,y;\nfunction setup() {\n  createCanvas(300, 200);\n  background(255, 0, 200);\n  x = width\/2;\n  y = height\/2;\n}\nfunction draw() {\n  ellipse(x, y, 20,20);\n  x += random(-2,2);\n  y += random(-2,2);\n}\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>p5.js er et JavaScript-bibliotek, der g\u00f8r det nemt at arbejde kreativt med kode \u2013 is\u00e6r til grafik, animation og interaktivitet. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hghf.dk\/index.php?rest_route=\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hghf.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hghf.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hghf.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hghf.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=51"}],"version-history":[{"count":50,"href":"https:\/\/hghf.dk\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/hghf.dk\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/hghf.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}