
Currently I am in love with the old film styles, and I am trying to capture the moments "as is". Perfect focus and perfect pictures have become boring to me, so I am currently just trying to break as many "rules of photography" as possible to see what works, what makes the images feel like a story, or how to incorporate feelings into the images.

Street photography is by nature grungy and "ugly", but that is the way I like it.

![](https://cdn.sanity.io/images/j26i5482/production/d30b15d92a61a9811be5d7962bc79ddeabc1c221-2048x1365.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/9a6cffa9cbbe14d1bdc6cae46b98ca9bb3b9392c-1365x2048.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/d1b57a78e16f888a537ea6694cca4d623b019d0a-2048x1521.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/ebd76159eb0b10e5a0ae73b2e357748b0783a018-2048x1987.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/3071fcf592adcc74e2c3caaaa5e5d8350e05f2ca-1365x2048.jpg?w=650)

Just got a new camera, sparking my interest in photography again. The weather hasn't been great lately, but I've still managed to get a couple of pictures taken.


Bergen street photography

For a long time I have liked the [Hyperpower extension](https://github.com/vercel/hyperpower) for the Hyper terminal. Although I am not using the terminal myself, I look at it as a "fun" terminal.

In this blog post, Ill try to explain my implementation of it. The code is written in TypeScript and uses React hooks. And to top it all of, it is built into a small project, a Haiku verification prototype.

## Introduction

The application consists of two main components:

1. `AnimatedTextAreaWrapper`: Manages the animated text area.
2. `Home`: Validates the Haiku and renders the `AnimatedTextAreaWrapper`.

<iframe width="100%" height="700"  src="https://75m3n8-3000.csb.app/?haiku=An+old+silent+pond%0AA+frog+jumps+into+the+pond%E2%80%94%0ASplash%21+Silence+again" allowfullscreen></iframe>

You can play around with it [here](https://codesandbox.io/p/sandbox/hyperpower-textarea-75m3n8?file=%2Fapp%2Flib%2FverifyHaiku.ts%3A1%2C1)

<CH.Code>

```tsx app/components/AnimatedTextAreaWrapper
"use client"
import React, {useEffect, useRef, useState} from "react";

interface Particle {
  x: number;
  y: number;
  alpha: number;
  color: number[];
  velocity: {
    x: number;
    y: number;
  };
}

const MAX_PARTICLES = 50;
const PARTICLE_ALPHA_FADEOUT = 0.99;
const PARTICLE_VELOCITY_RANGE = {
  x: [0, 3], // controls the x direction particle velocity range
  y: [-3.5, -1.5], // controls the y direction particle velocity range
};

interface AnimatedTextAreaProps {
  haiku: string;
  onChange: (event: any) => void;
}

export const AnimatedTextAreaWrapper = ({
  haiku,
  onChange,
}: AnimatedTextAreaProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const particles = useRef<Particle[]>([]);
  const [needsRedraw, setNeedsRedraw] = useState(false);
  const [safeToRender, setSafeToRender] = useState(false);

  useEffect(() => {
    setSafeToRender(true);
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const drawFrame = () => {
      if (particles.current.length) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.current.forEach((particle) => {
          particle.velocity.y += 0.075; // Gravity
          particle.x += particle.velocity.x;
          particle.y += particle.velocity.y;
          particle.alpha *= PARTICLE_ALPHA_FADEOUT;

          if (particle.alpha > 0.1) {
            ctx.fillStyle = `rgba(${particle.color.join(",")}, ${
              particle.alpha
            })`;
            ctx.fillRect(
              Math.round(particle.x - 1),
              Math.round(particle.y - 1),
              3,
              3,
            );
          }
        });

        particles.current = particles.current.filter(
          (particle) => particle.alpha > 0.1,
        );
      }

      if (particles.current.length > 0 || needsRedraw) {
        requestAnimationFrame(drawFrame);
      }
    };

    requestAnimationFrame(drawFrame);
  }, [needsRedraw]);

  const spawnParticles = (x: number, y: number) => {
    const numParticles = 5 + Math.round(Math.random() * 5);
    for (let i = 0; i < numParticles; i++) {
      const color = [Math.random() * 155, Math.random() * 155 + 100, 255];
      particles.current.push(createParticle(x, y, color));
    }

    if (!needsRedraw) {
      setNeedsRedraw(true);
    }
  };

  const createParticle = (x: number, y: number, color: number[]): Particle => {
    return {
      x,
      y,
      alpha: 1,
      color,
      velocity: {
        x:
          PARTICLE_VELOCITY_RANGE.x[0] +
          Math.random() *
            (PARTICLE_VELOCITY_RANGE.x[1] - PARTICLE_VELOCITY_RANGE.x[0]),
        y:
          PARTICLE_VELOCITY_RANGE.y[0] +
          Math.random() *
            (PARTICLE_VELOCITY_RANGE.y[1] - PARTICLE_VELOCITY_RANGE.y[0]),
      },
    };
  };

  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
    const textarea = e.currentTarget;
    const { left, top } = textarea.getBoundingClientRect();
    const cursorPos = textarea.selectionStart;
    const lines = textarea.value.substring(0, cursorPos).split("\n");

    const lineNum = lines.length;
    const colNum = lines[lines.length - 1].length;

    // You may need to adjust these based on your specific styling
    const charWidth = 9.65; // Approximate width of a character in pixels
    const lineHeight = 20; // Approximate line height in pixels

    const x = left + colNum * charWidth;
    const y = top + (lineNum - 1) * lineHeight;

    spawnParticles(x, y);
  };

    return (
      <div
        className={
          "rounded-[calc(1.5rem-1px)] p-px bg-gradient-to-tr from-blue-400 to-cyan-500"
        }
      >
        <div
          className={
            "rounded-[calc(1.5rem-1px)] p-10 bg-gradient-to-tr from-blue-900 to-cyan-900"
          }
        >
          <textarea
            onInput={handleInput}
            id={"haikuWindow"}
            value={haiku}
            onChange={onChange}
            rows={5}
            cols={50}
            className={
              "font-mono h-32 leading-5 w-full z-index-10 border-none outline-none resize-none bg-transparent text-white"
            }
          />
          {safeToRender && (
          <canvas
            ref={canvasRef}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              pointerEvents: "none",
            }}
            width={window.innerWidth}
            height={window.innerHeight}
          />)}
        </div>
      </div>
    )
};

```

```jsx haikuValidator.ts
const handleChange = (event: any) => {
  const { value } = event.target;
  setHaiku(value);
};
```

</CH.Code>



I tried emulating the hyperpower extension for the hyper terminal.

More particles in canvas

# Eit utanfrå perspektiv på Stryn, frå en stryning.

Stryn, der eg føler meg heime, der eg høyrer til. Bygda som alle over 30 har høyrt om. 

>"Den fagre bygda mellom fjella" 

blir den omtalt om når eg snakkar med andre på min alder og oppover. Eg er 28 år og har mykje godt å seie om bygda mi og folka som bur der, men eg har lyst til å sette litt lys på kva som held på å skje no.

Ein kan nok takke koronaen litt for det at mange folk under 30 ikkje lenger veit kvar Stryn er lenger, det er nok ikkje den yngre generasjonen som har vert fokuset til oss Stryningar, heller ikkje turismen frå eige land. Der var eit par år som kom og gjekk, kanskje eit par år som ingen vil hugse eller kanskje ikkje tenkjer på. Det var det året då mange i Stryn fortvilte over alle dei norske turistane som gjekk turar og telta langs, og i alle vegane våre.

Dei turistane var nok med på å redde mange av våre flotte turistatraksjonar og bedrifter i heile kommunen. Eg trur også det var mange som var glade for å sjå at så mange tok turen til oss i den vesle bygda og kommunen vår. Det var i alle fall det eg tenkte.

Stryn sentrum fekk eit lite problem i denne perioden. Folk kom til kommunen vår frå alle krikar og krokar, og som Asbjørnsen og Moe, gjekk dei rundt og leita etter nye eventyr, spurte seg fram til ting verdt å høyre og sjå. Det første steget var ofte det vanskelegaste i Stryn, kvar i alle dager finn ein turistinformasjonen, dette er eit spørsmål eg vart stilt fleire gangar den tida eg var heime sommaren, både frå bekjente og ukjende.

Du lurer kanskje på kvar turistane blir peika hen? Jo, ut av Stryn sentrum, til Lodalen, Olden, Oldedalen, Rakje, Hoven og så vidare. Vi har jo sjølvsagt litt i sentrum også, men det er ikkje det som er fokus for den vesle bygda vår. Vi er stolte av kommunen vår, vi er stolte av fjella våre, men der er liten grunn for ein turist å stoppe igjen i sjølve Stryn sentrum, i alle fall i følge turistinformasjonen (men vi kan ikkje legge skulda på dei som jobbar der, det er eit kommunalt ansvar å velge kva som er i fokus).

Når eg møter nye folk som er litt yngre enn meg og fortel kvar eg er ifrå, er det få som veit kvar Stryn ligg i landet lenger. Så eg har blitt vandt med å seie at det er rett ved Loen, der alle instagram bileta er frå. Då veit dei med ein gong kvar det er, svaret eg ofte får då er at dei har køyrt gjennom rundkøyringa vår.

Stryn, ikkje lenger kjend for naturen, plassen å vere, der iddrettsstjernene er frå, der Moods starta, der Skogstad og Riccovero har henta inspirasjon frå, navlen i Sogn og Fjordane, rosina i pølsa om ein vil. I alle fall ikkje blandt den yngre generasjonen.

Dette er ikkje skreve for å få folk til å slutte å anbefale Loen, Lodalen, Olden og Oldedalen, det er jo Stryn kommune. Men dei har gjort ein betre jobb enn oss Stryningar frå sentrum for å plassere seg på kartet, og behalde den. Dei fortjena all ære og turisme dei får.

Dette er skreve for å sette fokus på at Stryn må heve seg nokre nivå, der må vere ein grunn for turistar å stogge igjen i sentrum, noko som drar folk inn og interesserar, og ikkje berre i festivaltidene, men også utanfor.

## Stryn, eller New York?

New York, kjent som ein "concrete jungle", eller på godt norsk "betong skog". Definert av mykje asfalt, betong, grått og trist med lite natur. Stryn sentrum er på veg i denne retninga. Har du nokon gong sett eit luftfoto av Stryn sentrum? Det er grått og asfaltert.

![](https://cdn.sanity.io/images/j26i5482/production/fa02d434be2147daa542e68dd2f41305bd234606-2436x1272.png?w=650)
(https://www.norgeibilder.no/)

Stryn sentrum viser ikkje at vi ligg i vakker natur eller at vi tar vare på naturen vår. Naturen og fjella har sjølvsagt endå magi, og er verdt å skryte av. Men det er kanskje ikkje nok for å få folk til å bli i sentrum, du får tross alt same opplevinga i heile kommunen. Det er fleire av oss som har ønskjer å reise heim, heim til ei bygd med moglegheiter, ikkje berre for karriere, men også for familie. Stryn har utvikla seg for å legge til rette for den stigande snittalderen, skal ein trekke folk tilbake til Stryn så er ein nøydde å gjere det attraktivt å kome heim, også for dei som er neste generasjon.

I sentrum kunne ein ha satt opp boligblokker, kontorbygg, parkar, attraksjonar, badeland (var det vel snakk om ei stund), sentrumsnære turløyper som er eigna eldre, det er eigentleg kun fantasien som setter grensene. Sentrum i Stryn er relativt lite i areal, men det er fullt mogleg å bygge i høgda. Det at industrien også har fått eit så stort stykke av arealet i eit relativt lite sentrum er ikkje nødvendigvis ein god ting. Industrien burde ha vore flytta opp ut av sentrum. Dette hadde åpna dørene for å utvikle sentrum og den lokale handelen.

Vi er heldige i Stryn som kan leve av både handel, industri og turisme. Men industrien har ikkje nødvendigvis eit behov for å ligge i midten av sentrum. Bedriftene i sentrum har gjort ein god jobb når det kjem til å passe på at bygda er innbydande når du kjem køyrande. På begge sider står lastebilane parkert fint og strukturert, men det er fortsatt mykje potensiale for forbetring, det kunne for eksempel ha vore, park eller aktivitetsområde.

Det er sjølvsagt ikkje "berre" å flytte industrien ut, det måtte ha skjedd gradvis og i takt med at ein skapar ny aktivitet. Ein kan ikkje berre sette opp ei boligblokk som står tom i håp om at ein får mykje tilflytning, men å snakke om dette og legge planar ein kan sjå fram til og jobbe mot, er ein god start for å gjere Stryn til ein attraktiv plass å flytte heim til. Eg meinar ein kan sjå til Sandnes for inspirasjon, Sandnes er sjølvsagt ein plass med meir folk og meir midlar og fin natur (vi slår dei fortsatt på natur), men kjenner eg oss Stryningar rett så får vi til det om vi vil.

![](https://cdn.sanity.io/images/j26i5482/production/b3d357ef1d22223dc666d8ce0574c71aeedfc5de-1450x782.png?w=650)
![](https://cdn.sanity.io/images/j26i5482/production/df70cd35b3e747da922d0bfff85dbcdee90193af-1444x1012.png?w=650)
![](https://cdn.sanity.io/images/j26i5482/production/f6a5335cc6fe1b6a66e21f21431ce17458ab202e-1448x766.png?w=650)
https://www.isandnes.no/aktuelt?lid=535458895&category=Byutvikling&sort=-1&sortorder=-1#xpm804702999

Legg merke til korleis det som er planlagt tar med seg naturen, alt blir ikkje berre asfaltert over, men ein lagar kunst av framgang. Her i Stryn er vi så vekkskjemde med natur at vi ikkje ser verdien i han, men i staden asfalterar naturen vekk.

Eit sitat frå ein kamerat av meg for rundt seks år sidan:
> Eg skal i alle fall ikkje flytte heim til Sandnes, det er ikkje for meg, og ser ikkje framtida mi der.

Eit sitat frå same person no:
> Eg ser framtida mi i Sandnes no og har lyst til å flytte tilbake, dei har klart så mykje på kort tid og eg har lyst til å vere med på utviklinga.

Det er sjølvsagt berre ei oppleving frå mi side, der er sikkert andre som seier det motsatte, men det er denne kommentaren som har fått meg til å skrive dette litt kritiske innlegget.

Stryn kommune sine planar for stryn og omegn er som regel ganske grå. Eg er blandt anna ikkje særleg imponert over planane for kaia i Olden, og er bekymra for at vi kanskje får same stilen i Stryn sentrum.

![](https://cdn.sanity.io/images/j26i5482/production/918aab04a918d1c7dc6c1b4231191ab74cd9b07a-1977x1051.png?w=650)

Kaia i olden er enda eit eksempel på at naturen blir asfaltert vekk. Vi er nøydde å skjerpe oss. Vi treng ikkje konkurrere med Førde for gråaste sentrum/kommune. Få fram fargar, bruk annaleis materiale. Vi fekk ny vidaregåande for mange år sidan, denne er no blitt grå, slik som planen var. Det er på tide med fargar og natur.

Handelsstanden skal ha, ære for at vi har turistar gåande i gatene i Stryn om sommaren, dei held liv i gatene våre. Det same gjer dei rånerane våre, når det er kveldstid og folk er på puben, vertshuset eller gastroen, så får turistane med seg eit yrande liv utanfor, noko som får dei til å snakke med sine, om den Volvoen som køyrde forbi med duska i ruta, augevippe på lyktene eller treski på taket. Det går rykte om rånerane i Stryn heilt til Bergen og Oslo. Eg har bekjente som har lyst til å vere med til Stryn kun for å kunne observere denne kulturen og miljøet.

Så kjem vi til idretten vår, idretten vår gjer det bra, men der er heilt klart mangel på åpne tilbod utanfor det organiserte. Dette er dei åpne og gratis tilboda eg kjem på som vi har i Stryn sentrum i dag:
ein skatepark, 3(!) fotballbaner med tilhøyrande anlegg, to gode volleyballbaner (forhåpentligvis ikkje asfaltert når eg flyttar heim), leikeplass ved Tonning skule, og eit stengt klatretårn utanfor kulturhuset.
Om ein er villige til å gå ut av sentrum eller bruke pengar så har vi turløyper der du kan velge sjølv om du vil ha tilskuera frå hyttene eller ikkje, splitter ny fleirbrukshall, symjehall og treningssenter.

Eg får inntrykk av at folk i og frå Stryn er stolte av å både bu her og å vere Stryning. Folk i heile landet har fortsatt respekt for oss Nordfjordingane og Stryningar, la oss jobbe for å behalde det gode ryktet og samholdet som bygda, og bygdene rundt oss, har jobba oss opp.

Det eg ynskjer meg som ein som ynskjer å flytte heim er planar, teikningar og offentleg informasjon om kva som skjer. Eg høyrt om at der er nye planar og ynskje om innspel til kva som skal vere fokus framover og kva vi som kjem tilbake vil ha som tilbud. Det første på lista mi er i alle fall enkelt tilgjengeleg informasjon, slik som Sandnes har lagt opp til, skap blest om planane våre, markedsfør bygda og Sentrum.

### Til slutt vil eg legge til mine ynskjer for sentrum.

Sjå for deg eit eldresenter med utsikt mot ein åpen park eller aktivitetsområde, der borna har lyst til å vere, der du kan sitte å sjå på barnebarna leike og mimre om gamledager. I denne parken er der fleire tilbud som frisbeegolf, leikestativ og piknikbord for familiar. Kanskje eit par offentlege grillar, der innbyggjera i sentrum kan samlast og kose seg. Ein sykkelsti som går rundt i parken med trafikklys som faktisk fungerar, slik at born kan øve på å vere trygge i trafikken. Kanskje ei utandørs padelbane for litt eldre ungommar og eit lite utandørs treningssenter eller tuftepark. Eit par nedfelte trampoliner og ei balanseline slik at born lærer seg det grunnleggande med å beherske kropp.
Ein nettcafe i sentrum, der dei som likar å sitte framføre PCen kan samlast å game på dag/kveldstid med innspel frå bedriftene på kveldstid som kan vere med på å vekke ei teknologisk interesse hos dei som er der.

Dette kan vere hårete mål, mål som ikkje kan realiserast på ein del år enda, men vi må starte å planlegge mot eit betre sentrum, eit fint sentrum, med naturen og ikkje i mot. Eg ynskjer å flytte heim, men eg ynskjer å vete kva som ventar meg og framtida mi om eg flyttar tilbake, det å flytte tilbake til ein parkeringsplass eller asfaltjungel fristar ikkje så veldig.

>Vær vennleg å lag blest om bygda mi, markedsfør den, leg planane ut offentleg, inspirer meg.
>\- Mathias Bøe

Eg stiller meg kritisk til Stryn sentrum og planane som er lagt i dag. I dette innlegget prøvar eg å komme med konstruktiv kritikk til Stryn og mine ønsker for et beitre sentrum.

Mine meiningar om Stryn sentrum

This is how I made a particle system for images. It's up for debate wether or not this is a practical or efficient way to do this, but it ran decently on my M1 macbook.

This article will go through some of the code, and outline some difficulties of implementing it in react/next.

Having fun with particles in HTML canvas and JavaScript

Tromsø

Bird

Loen

Danbo

Oldedalen

I’m Mathias, a developer and funnyman based in Bergen. I have a passion for frontend (UI/UX) development and seek to create interesting experiences for everyone.

Developer, photographer, and amateur designer.

Bergen street photography

More particles in canvas

Mine meiningar om Stryn sentrum

Having fun with particles in HTML canvas and JavaScript

Work

Stay up to date