Blogs

Visserskaai

1 - Het schilderij

In het maandblad van de koninklijke Oostendse heem- en geschiedkundige kring "De Plate" verscheen in het juninummer van 2021 – in de maandelijkse episode "Vergeten Oostendse Kunstschilders" onder het nummer CCLVI – een afbeelding van een mooi schilderijtje van de hand van Achille Van Sassenbrouck, genaamd "De Visserskaai en het vissersdok te Oostende". Deze schilder heeft een lemma (vermelding) in Wikipedia.

Op het internet vond ik de afbeelding terug:

De Visserskaai en het vissersdok te Oostende door Achille Van Sassenbrouck
De Visserskaai en het vissersdok te Oostende door Achille Van Sassenbrouck

De omgeving is ondertussen heel wat veranderd. De plaats die de schilder heeft afgebeeld is nu de Mercatorsluis. De positie van waaruit de schilder het plaatje heeft geschilderd is eigenlijk nog meer naar rechts op onderstaande foto, op een plaats die "Le Débarcadère" heet. Dit was een ontschepingsgebouw waar de douane de binnenkomende reizigers controleerde.

Mercatorsluis te Oostende
Mercatorsluis te Oostende anno 2021

Ik kan niet terugvinden in welk jaar de artiest dit schilderijtje heeft gemaakt, maat ik vermoed dat dit ergens tussen 1905 en 1914 moet zijn geweest. Ondanks het gegeven dat dit werk meer dan een eeuw oud is, vind je er elementen in terug die je op de foto ook ziet: de Sint-Petrus-en-Pauluskerk en de huizen op de hoeken van het kerkplein en de kaai. Nu is die kerk eigenlijk pas tussen 1899 en 1905 gebouwd, dus voor 1905 kon de schilder dit niet hebben geschilderd. Daarnaast merk ik dat de huizen geen oorlogsschade vertonen, wat vanaf 1914 (uitbreken van W.O. 1) zeker het geval zou zijn geweest.

2 - De opdracht

Ik wou dit schilderij hermaken in de vorm van een SVG (scalaire vector grafiek), zomaar voor mijn eigen plezier. Daarnaast wil ik deze activiteit documenteren om de methode later te kunnen hergebruiken. Dit pamflet is dus eigenlijk een "methodefiche", zoals men dat in het kwaliteitsbeheer noemt.

Ik wist wel dat dit "kopiëren" een behoorlijk werk zou zijn. Het vergt immers het minutieus opzoeken van de coördinaten van de lijnen en figuren. Uiteindelijk bleek het moeilijkste het weergeven van de kleuren.

Maar ik ben wel tevreden met het resultaat:

het schilderij in svg vorm
Het schilderij in svg vorm

3 - De uitvoering

Het opzoeken van coördinaten van een afbeelding is eigenlijk simpel. Je plakt eerste de afbeelding in je svg-document:

<image href="visserskaai.jpg" height="100%" width="100%"/>

Daarna ga je op zoek achter de coördinaat van een punt. Je kan hierbij je inspanningen wat vereenvoudigen door een raster op je werk te projecteren via een javascript:


<g id="grid"></g>
<script>
  <![CDATA[
    document.addEventListener("DOMContentLoaded", function(event) {
      const tekening = document.getElementById('grid');
      let lijnv;
      let lijnvmin;
      let lijnh;
      let lijnhmin;
      for (let i=0;i<=10;i++) {
        let k = i*100;
        lijnv = document.createElementNS("http://www.w3.org/2000/svg", "line");
        lijnv.setAttribute("x1", k);
        lijnv.setAttribute("y1", "0");
        lijnv.setAttribute("x2", k);
        lijnv.setAttribute("y2", "1000");
        lijnv.setAttribute("style", "fill:none;stroke:hotpink;stroke-width:1");
        tekening.appendChild(lijnv);
      }
      for (let j=0;j<=10;j++){
        let v = j*100;
        lijnh = document.createElementNS("http://www.w3.org/2000/svg", "line");
        lijnh.setAttribute("x1", "0");
        lijnh.setAttribute("y1", v);
        lijnh.setAttribute("x2", "1000");
        lijnh.setAttribute("y2", v);
        lijnh.setAttribute("style", "fill:none;stroke:hotpink;stroke-width:1");
        tekening.appendChild(lijnh);
      }
      for (let im=0;im<=10;im++) {
        let km = 0 + im*10;
        lijnvmin = document.createElementNS("http://www.w3.org/2000/svg", "line");
        lijnvmin.setAttribute("x1", km);
        lijnvmin.setAttribute("y1", "500");
        lijnvmin.setAttribute("x2", km);
        lijnvmin.setAttribute("y2", "600");
        lijnvmin.setAttribute("style", "fill:none;stroke:grey;stroke-width:1");
        tekening.appendChild(lijnvmin);
      }
      for (let jm=0;jm<=10;jm++){
        let vm = 500 + jm*10;
        lijnhmin = document.createElementNS("http://www.w3.org/2000/svg", "line");
        lijnhmin.setAttribute("x1", "0");
        lijnhmin.setAttribute("y1", vm);
        lijnhmin.setAttribute("x2", "100");
        lijnhmin.setAttribute("y2", vm);
        lijnhmin.setAttribute("style", "fill:none;stroke:grey;stroke-width:1");
        tekening.appendChild(lijnhmin);
      }
    });
  ]]>
</script>

Met dit raster kun je de coördinaat van het punt dat je zoekt bij benadering bepalen. Wat ik doe is een cirkeltje op de vermoedelijke coördinaat projecteren met een diameter van 0.5 en een "stroke" van 0.25. Ik verschuif dan dat cirkeltje totdat het op de juiste plaats terecht komt. Zo kan ik de juiste coördinaat vinden.

Eenmaal deze coördonaat is gevonden is dat het beginpunt van een figuur, bij voorkeur een "path":

<path d="M 84 512 c 5 23 3 27 2 40 s -1 17 1 25 s 5 30 2 48" class="weerspiegeling" />

Zoals ik reeds vermeldde is dit werkje – hoewel zeer tijdrovend – het gemakkelijkste deel van de afbeelding. Het moeilijkste vond ik de kleuren na te bootsen. Ik begon eraan met goede moed, maar ik zag al gauw dat de verschillende nuances van de kleuren moeilijk na te bootsen waren. Ik zocht dus hulp van Chrome via een "color picker"-extensie. Helaas moet ik zeggen dat, na een drietal te hebben uitgeprobeerd, ze allemaal te moeilijk waren om te gebruiken.

Na wat zoekwerk via Microsoft kwam ik terecht op het programmaatje "Free Color Picker". Na het downloaden en installeren ervan bleek dit net wat ik zocht!

De uniforme kleuren waren een fluitje van een cent. Voor de gradiënten vond ik ook een oplossing. In tegenstelling tot mijn voorgaande svg's heb ik voor de gradiënten deze keer de volgende procedure gevolgd. In het ingebouwde stijlblad

<style type="text/css">
	<![CDATA[
		...
	]]>
</style>

definieer je de 2 kleuren van je gradiënt als volgt:

.stop1{stop-color:#687D72;}
.stop2{stop-color:#5A7668;stop-opacity:1;}

Die klassen stop je dan in je gradiënt:

<linearGradient id="kaai" x1="0" x2="1" y1="0" y2="0">
	<stop class="stop1" offset="0%"/>
	<stop class="stop2" offset="100%"/>
</linearGradient>
		

En die gradiënt kun je dan weer gebruiken in een andere klasse van je stijlblad:

.kaai{stroke:black;stroke-width:0.5;fill:url(#kaai);}

Dit lijkt omslachtig, maar heeft een voordeel: door een minimum aan stop-color te definiëren kun je ze allemaal combineren in veel meer gradiënten! Heb je je vergist in één kleur, dan moet maar één stop-color worden aangepast.

Bibliografie

  1. De Plate vzw - maandblad juni 2021

<< Ga terug naar de vorige pagina

© Bentein - Debaere 2021 | Design by Maur Bentein | Powered by GetSimple | contact: m_bentein[at]hotmail[dot]com