add poem

2025-06-26 10:01:18 +02:00 · 2020-11-18 11:15:44 +01:00 · 2020-11-18 11:15:44 +01:00 · 6007edb7d1
commit 6007edb7d1
parent b0e226bf73
7 changed files with 93421 additions and 0 deletions
--- a/poem/compute_distance_field.ipynb
+++ b/poem/compute_distance_field.ipynb
--- a/poem/distfield.png
+++ b/poem/distfield.png
--- a/poem/image.png
+++ b/poem/image.png
--- a/poem/index.html
+++ b/poem/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html><html lang="en"><head>
+    <script src="p5.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <script src="sketch.js"></script>
+  </head>
+  <body>
+    <div id="sketch-holder">
+      <!-- Our sketch will go here! -->
+    </div>
+</body></html>
--- a/poem/p5.js
+++ b/poem/p5.js
--- a/poem/sketch.js
+++ b/poem/sketch.js
@ -0,0 +1,103 @@
+
+let w = 200;
+let stepsize = 1;
+let Nwalkers = 300;
+let fr = 30;
+let beta = 0.1; //beta = 0 chooses infinite temperature, beta = inf forces the walkers to go only towards the gradient
+let betaslider;
+
+let radio;
+
+let cw = 500;
+let canvas, src, pg;
+
+let walkerpos = []
+
+let transparent;
+
+
+function proposal(pos) {}
+
+let img;
+let distfield;
+function preload() {
+  img = loadImage('image.png');
+  distfield = loadImage('distfield.png');
+}
+
+let dist, showdist, showtarget, showpaths, showwalkers;
+let step;
+let newpos;
+
+function setup() {
+  console.log('canvas has size: ', cw, cw);
+  canvas = createCanvas(cw, cw);
+  canvas.parent('sketch-holder');
+  //pixelDensity(1);
+  //let d = pixelDensity();
+  frameRate(fr);
+    
+  betaslider = createSlider(0, 1, 0.5, 0.0001);
+  //betaslider.position(10, 10);
+  betaslider.style('width', '80px');
+  
+  showdist = createCheckbox('Show distance function', false);
+  showtarget = createCheckbox('Show target image', false);
+  showpaths = createCheckbox('Show paths', true);
+  showwalkers = createCheckbox('Show walkers', true);
+    
+  overlay = createGraphics(windowWidth, windowHeight);
+  overlay.pixelDensity(1);
+  overlay.background(color(0,0,0,0));
+    
+  dist = function(pos) {
+      return distfield.get(pos.x, pos.y)[0];
+  }
+  
+  colorMode(HSL);
+
+  walkers = [];
+  for(let i = 0; i < Nwalkers; i += 1) {
+    append(walkerpos, createVector(random(width), random(height)));
+  }
+    
+  step = createVector(0,0);
+}
+
+let b;
+function draw() {    
+  background(255);
+  if(showdist.checked()) image(distfield, 0, 0); //the min distance to the nearest non white pixel in the target image
+  if(showtarget.checked()) image(img, 0, 0); //the target image
+  if(showpaths.checked()) {
+    //tint(255, 5e6 / frameCount / Nwalkers);
+    image(overlay, 0, 0);
+  }
+
+  //text(dist(createVector(mouseX, mouseY)), width/2, height/2);
+  //text(overlay.get(mouseX, mouseY), width/2, height/2);
+
+  beta = betaslider.value();
+  beta = beta / (1 - beta);
+    
+  overlay.loadPixels();  
+  for(let i = 0; i < Nwalkers; i += 1) {
+    //let debug = Math.sqrt((mouseX - walkerpos[i].x)**2 + (mouseY - walkerpos[i].y)**2) < 10;
+    step.x = 2*stepsize*(random() - 0.5);
+    step.y = 2*stepsize*(random() - 0.5);
+    newpos = p5.Vector.add(walkerpos[i], step);
+    let df = dist(newpos) - dist(walkerpos[i]);
+    if(df > 0 | exp(beta * df) > random(1.0)) {
+        walkerpos[i].add(step);
+    }
+    if(showwalkers.checked()) circle(walkerpos[i].x, walkerpos[i].y, 3);  
+    
+    // loop over
+    index = 4 * (int(walkerpos[i].y) * overlay.width + int(walkerpos[i].x));
+    b = overlay.pixels[index+3] + 5
+    overlay.pixels[index+3] = b;
+  }
+  overlay.updatePixels();
+
+
+}
--- a/poem/style.css
+++ b/poem/style.css
@ -0,0 +1,13 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#sketch-holder {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    width: 500px;
+}