<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[cogapp - Medium]]></title>
        <description><![CDATA[Agency for digital projects, building a better online world #museums #galleries #archives #libraries #publishing - Medium]]></description>
        <link>https://medium.com/cogapp?source=rss----4ec171c80477---4</link>
        <image>
            <url>https://cdn-images-1.medium.com/proxy/1*TGH72Nnw24QL3iV9IOm4VA.png</url>
            <title>cogapp - Medium</title>
            <link>https://medium.com/cogapp?source=rss----4ec171c80477---4</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Wed, 11 Nov 2026 02:16:00 GMT</lastBuildDate>
        <atom:link href="https://medium.com/feed/cogapp" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com/" rel="hub"/>
        <item>
            <title><![CDATA[Audio Visualiser]]></title>
            <link>https://medium.com/cogapp/audio-visualiser-37c573b9742b?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/37c573b9742b</guid>
            <category><![CDATA[coghack]]></category>
            <category><![CDATA[p5js]]></category>
            <dc:creator><![CDATA[Emily Oliver]]></dc:creator>
            <pubDate>Thu, 22 Jan 2026 17:21:03 GMT</pubDate>
            <atom:updated>2026-10-26T14:44:42.561Z</atom:updated>
            <content:encoded><![CDATA[<p>Last June we had another of our famous Coghack™️ hack days here at Cogapp. The theme this time around was “Freeform” which meant we could do whatever we wanted!</p><p>Tristan had the idea<strong> </strong>to create an application which would generate some kind of a visualisation to accompany a piece of audio like poetry or music, and this visualisation should be influenced in some way by the audio itself, with an optional bonus that we could display the lyrics/words to the song/poem, synced up to the music to create a karaoke-style experience as well.</p><p>The inspiration from this came from some conversations with staff from the <a href="https://library.harvard.edu/libraries/poetryroom">Woodbury Poetry Room</a> at Harvard Library about what sort of thing users would like to see while listening to recordings of poetry. Coupled with dim memories of the wealth of <a href="https://www.youtube.com/watch?v=9TbLJI7ja4s">Winamp visualisations</a> that used to play while people listened to music around the turn of the millenium, and how it was high time that we revisited the idea of sound-reactive animations.</p><p>We decided that the main app would be built with React, as we could quickly build the app interface with this, and then to try out p5js as the engine for the visualisation.</p><p><a href="https://p5js.org/about/">p5js</a> is an open-source JS library for creating art with code, which aims to make doing so accessible and friendly! It seemed like a good fit for this project as we wanted to create interesting visualisations within a short space of time. <em>[P.S. from Emily: If you’re interested in learning about p5js, I really recommend the YouTube channel </em><a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw"><em>The Coding Train</em></a><em> where Daniel Shiffman uploads super fun tutorials on making things with p5js. I particularly love their </em><a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA"><em>Nature of Code</em></a><em> series, which discusses creating code inspired by natural processes (think flocking, fractals, physics simulations, etc.)].</em></p><p>p5js also includes an extension called <a href="https://github.com/processing/p5.sound.js">Sound</a> which adds a bunch of extra functionality on to p5js to allow it to interact with sound files, and particularly of interest to us was the <a href="https://p5js.org/reference/p5.sound/p5.FFT/">FFT object</a>, which analyses the audio and opens up ways of returning data about it via methods like “<a href="https://p5js.org/reference/p5.FFT/getEnergy/">getEnergy</a>” or “<a href="https://p5js.org/reference/p5.FFT/getCentroid/">getCentroid</a>”. This meant we could do both the audio analysis and the visualisation with one library.</p><p>With the base React app in place and p5js up-and-running, we were free to experiment with different sound-analysation methods and visualisation ideas we had and we ended up with a few choices. You can test out the app yourself here: <a href="https://cogapplabs.github.io/audio-visualiser">https://cogapplabs.github.io/audio-visualiser</a>, while we describe the ideas behind the modes:</p><figure><img alt="Spiky white bars, fading in and out over a black background, indicating intensities of various (unnamed) aspects of the audio" src="https://cdn-images-1.medium.com/max/1024/1*Bj230hVN7X0crcDpD6QDOg.png" /><figcaption>Level Meter mode</figcaption></figure><p><strong>Level Meter mode: </strong>This was the first visualisation we added, which was copied from <a href="https://editor.p5js.org/js6450/sketches/oWAOKGOMS">this example on the p5.js website</a>, to get a feel for how an FFT visualisation could work and set up the basis to build other visualisations from.</p><figure><img alt="An entirely black screen" src="https://cdn-images-1.medium.com/max/639/1*b0vlKbEXs2pQCJXhggnVYQ.png" /><figcaption>Zen mode</figcaption></figure><p><strong>Zen mode: </strong>Tristan was keen on a visualisation mode which would just be a solid black screen, which we think is a nice way to focus on the audio and additionally, a nice antidote to the constant barrage of information we receive daily via our screens (if going outside is not your thing perhaps…). This was the first <em>custom </em>mode we were able to complete. Recommended if you feel a little overwhelmed.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cLTmepHkbgwxZOR7VW0oFQ.png" /><figcaption>Circle mode</figcaption></figure><p><strong>Circle mode: </strong>Emily<strong> </strong>had recently watched a film by Jordan Belson called Samadhi from 1967, which features a trippy animation of a circle in the centre of the screen which morphs and changes colour to a somewhat unsettling soundtrack, and was subsequently inspired to create something similar as a visualisation mode. This uses the energy of the audio to inform colour changes, plus some morphing of the shape itself. Honestly, it got to a point where there were so many layers of effects that she may no longer fully understand it herself… <em>NB: May slow your computer down!</em></p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Flivid.com%2Fembed%2FwDhWshmzchHJ&amp;display_name=Livid&amp;url=https%3A%2F%2Flivid.com%2Fwatch%2FwDhWshmzchHJ&amp;image=https%3A%2F%2Fapi.livid.com%2Fv1%2Fthumbnails%2Fthumbnails%252Fe95a43d6-bd7b-4bef-972f-0e5d12fca6fc%252F15f13398-d92a-4cb2-93f6-4edf531b8e5a.jpg&amp;type=text%2Fhtml&amp;schema=livid" width="687" height="450" frameborder="0" scrolling="no"><a href="https://medium.com/media/d467714b4a3ddd26276fe3486b35da04/href">https://medium.com/media/d467714b4a3ddd26276fe3486b35da04/href</a></iframe><p><strong>Serene mode:</strong> Serene mode was Tristan’s next step up from Zen mode, in which the screen is filled with one colour which updates based on the audio’s energy-plus-centroid (or something along those lines…) This creates a simple but effective (and serene!) rainbow visualisation. Goes particularly well with the poetry. (Try the “Gaps” audio file on the app).</p><figure><img alt="Fine particles radiate out from a central point, concentrated mostly at the edges, coloured in a gradient from blue to red" src="https://cdn-images-1.medium.com/max/1024/1*SRKk2IBE60SVS0slwWyerA.png" /><figcaption>Cursor Special mode</figcaption></figure><p><strong>Cursor special:</strong> In the “hack” spirit, we were trying out <a href="https://cursor.com/">Cursor</a> to see if it could help us build some of the app quicker than we would otherwise have been able to, given that we only had one day to complete our project. If you don’t know, Cursor is an IDE with an AI chat built in, which allows it to look at files within your project and give you code suggestions based on the code you already have, which <em>can</em> be very useful. At one point, however, it noticed that the already-complete “Zen mode” didn’t actually do anything (which was the point) and although we’d asked it to do something entirely unrelated, it decided to sneak in an update to Zen mode and created its own visualisation for it (super useful, thanks Cursor! /s). The visualisation Cursor created features a circle which “explodes” along with the audio. We think it’s based on an analysis of the frequencies in the clip. We obviously had to then fix Zen mode again, but we decided to make this its own mode as it had gone to all the trouble of creating it in the first place…</p><p>In all cases the visualiser works in full screen mode as we wanted it to be as immersive as possible, and we also added the ability to have a timed caption file, as well as a full text listing, so that people are able to read along with the poems as they listen to them.</p><p>You can try out the different interfaces using the <a href="https://cogapplabs.github.io/audio-visualiser/">online demo</a> of our hack. Or feel free to check out the <a href="https://github.com/CogappLabs/audio-visualiser">source code on Github</a>.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=37c573b9742b" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/audio-visualiser-37c573b9742b">Audio Visualiser</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Founder Alex Morrison moves into a New Role as Cogapp celebrates its 40th anniversary]]></title>
            <link>https://medium.com/cogapp/founder-alex-morrison-moves-into-a-new-role-as-cogapp-celebrates-its-40th-anniversary-797b8afa21b3?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/797b8afa21b3</guid>
            <dc:creator><![CDATA[Alex Morrison]]></dc:creator>
            <pubDate>Tue, 09 Dec 2025 11:14:09 GMT</pubDate>
            <atom:updated>2025-12-09T11:14:03.609Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GU5E1JrQBmA4fl6vtK_tSg.jpeg" /><figcaption>Colleagues since 1987: Alex Morrison and Ben Rubinstein at Cogapp’s recent 40th Anniversary Party — photo by Vicki Hughes</figcaption></figure><p>Alex Morrison, who founded Cogapp in 1985, is moving to a new role effective from the start of 2026.</p><p>He will remain as Cogapp’s Chair, but no longer work full-time in the company. He will continue to act as an ambassador for the company and as a supporter and adviser to the board of directors led by CEO, Andy Cummins.</p><p>Reflecting on this change, Alex Morrison said:</p><blockquote>“It has been the privilege of my life to get Cogapp this far. I am so proud of the company we have built, the work we’ve done and the way it has been dealt with. It feels wonderful to have reached our fortieth anniversary with such good prospects for the future and such confidence handing things over to Andy, Louise, Tristan and Ben.</blockquote><blockquote>Cogapp has a talented team with great leadership doing excellent projects for socially valuable clients. What more can we ask for?</blockquote><blockquote>From my point-of-view, stepping back from front-line duties while Cogapp steams ahead is not about retirement. It frees me up to focus on our digital publishing spin-off, Magpie. If this goes according to plan, 2026 will be a momentous year.”</blockquote><p>Andy Cummins, Cogapp’s CEO said:</p><blockquote>“In Cogapp, Alex’s kindness, insight and energy have created something truly special. For forty years his leadership has guided the delivery of world-class digital projects all over the globe. He has fostered the careers of hundreds of people and supported the local digital economy, and digital in the cultural sector, in more ways than anyone can ever imagine. All of this has been done with integrity and heart, it really is an incredible achievement.</blockquote><blockquote>I count myself lucky to have him as a friend and, alongside the rest of the Cogapp board, look forward to his continued support as we progress into our fifth decade.”</blockquote><p>Pioneering digital agency, Cogapp (cogapp.com) recently celebrated its fortieth anniversary. Since its foundation in 1985, Cogapp has established itself as the leading agency working on applications of digital technology for arts and cultural organisations. Notable clients, past and present, include the National Gallery, the Metropolitan Museum of Art, the Getty, MoMA, London 2012, Microsoft, Apple, the Design Museum, the BBC and many others. Cogapp is based in Brighton with an offshoot in New York.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=797b8afa21b3" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/founder-alex-morrison-moves-into-a-new-role-as-cogapp-celebrates-its-40th-anniversary-797b8afa21b3">Founder Alex Morrison moves into a New Role as Cogapp celebrates its 40th anniversary</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Cogapp celebrates 40 Years]]></title>
            <link>https://medium.com/cogapp/cogapp-celebrates-40-years-26d89132e0e2?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/26d89132e0e2</guid>
            <category><![CDATA[cogapp]]></category>
            <dc:creator><![CDATA[Alex Morrison]]></dc:creator>
            <pubDate>Tue, 02 Dec 2025 10:39:48 GMT</pubDate>
            <atom:updated>2025-12-02T12:09:49.674Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="A stylised picture of a cake with candles and the number 40" src="https://cdn-images-1.medium.com/max/868/1*sYuOvaSed5WEms1lKSMI3g.jpeg" /></figure><p>When Cogapp (aka Cognitive Applications Limited) was registered on 2nd December 1985, we didn’t have much of a plan beyond our desire to explore the exciting possibilities of new kinds of software with interesting people doing worthwhile work.</p><p>Time rolls on! A few days ago we celebrated 40 years pursuing this quest at a party in Brighton, our home city.</p><p>Here is the speech I gave on that occasion.</p><blockquote>“I’m going to make a short speech and then I’m going to propose a toast.</blockquote><blockquote>Normally at Cogapp we eat cake on a Thursday afternoon, but every forty years we add an extra helping on a Friday evening.</blockquote><blockquote>Firstly, thank you all for coming out tonight to help us celebrate.</blockquote><blockquote>This is a very special occasion.</blockquote><blockquote>All of you here have contributed in one way or another to Cogapp, the organisation, its history and its future prospects, that we’re celebrating tonight.</blockquote><blockquote>I am so proud of what we’ve accomplished together.</blockquote><blockquote>As the saying goes, self-praise is no recommendation but no-one can deny that we have an amazing back catalogue. You can see screenshots from a selection on the slideshow projection.</blockquote><blockquote>Our time reporting system tells me that we have done more than 1,500 projects — and I know for a fact that there have been more than that because the time reporting system (beloved by all who use it) only got going in the 1990s.</blockquote><blockquote>It’s hard to pick from so many, but it’s worth calling out some of the highlights:</blockquote><blockquote>- our original work for the National Gallery, their Micro Gallery project which provided the basis of our success with other museums and in digital publishing with Microsoft and others;</blockquote><blockquote>- the dozens of projects we did for Microsoft in the 1990s (and with Apple before them);</blockquote><blockquote>- the Kidney Patient Guide (an online guide for people affected by kidney disease which we built in the late 90s and have supported ever since) — Tom Bowen who was our partner for that original project is here with us tonight;</blockquote><blockquote>- our work for the National Portrait Gallery — started in the 1998 and still going strong 27 years later;</blockquote><blockquote>- our redevelopment of the website for the Metropolitan Museum of Art in New York which can still reasonably claim to be the largest project of its kind in the cultural sector;</blockquote><blockquote>- our UX and front-end work for the London 2012 Olympics — Alex Balfour, who ran the digital work for 2012 wrote to us after the games saying ‘To everyone at Cogapp — the only creative agency that could last the course. Brilliant work.’</blockquote><blockquote>These case studies and a host of others, exemplify the spirit of the business: innovative, brave, thoughtful, persevering and creative. <br> <br>How has this portfolio been possible?</blockquote><blockquote>I played my part.</blockquote><blockquote>I started the company in 1985 with Gilly Furse (who sends her regards from Co. Wexford). And for 37 years, until 2022, when I handed over to Andy Cummins, I was Managing Director.</blockquote><blockquote>Andy: you are doing an amazing job. I feel very blessed to have been able to hand over our baby to such a rare talent. You can be very proud of your work. I wish you great joy nurturing Cogapp into the future.</blockquote><blockquote>Everyone here has played their part in Cogapp’s success.</blockquote><blockquote>You all know what you’ve done and how you have supported our mighty enterprise. On behalf of the company and its community, I thank you all, collectively and personally.</blockquote><blockquote>In addition to the obvious groups: colleagues; associates (Malcolm Garrett notably included) and advisors (thank you, particularly, Roger Browning), I would specially like to acknowledge Cogapp’s husbands, wives, partners, children and extended families.</blockquote><blockquote>None of this would have been possible without your loving support. I salute you and thank you (and apologise for all the Cogapp-related disruptions you have had to endure).</blockquote><blockquote>Before I finish, I’d like to mention two people:</blockquote><blockquote>Firstly, my wife, Manya — Manya has been my unacknowledged coach, mentor and the back-room HR department during my time as MD. You took on a huge burden with our children, Tom and Annie, to enable what I was doing at Cogapp. Thank you so much for that and for everything you’ve done and everything you do. The rest of you owe Manya more than you will ever know!</blockquote><blockquote>And, secondly, Ben Rubinstein.</blockquote><blockquote>If I was the front-man for most of Cogapp’s history, Ben has been the back-room supremo, the engine, the rock and a huge creative force.</blockquote><blockquote>To quote just one anecdote from a long list…</blockquote><blockquote>We were flying to Seattle to talk to Microsoft about publishing a CD-ROM for the National Gallery. A pretty decent project in its own right, but not as it turned out the end of the story.</blockquote><blockquote>On the plane and then overnight in our hotel, Ben, unprompted, took their Musical Instruments CD-ROM for Windows and built them a working equivalent for Macintosh. When we met them the following morning we had the best reveal ever.</blockquote><blockquote>The Microsoft team were completely flabbergasted and we went on to be their most successful technical partner for digital publishing.</blockquote><blockquote>Ben — thank you so much. You are a total star. It’s been a blast.</blockquote><blockquote>So finally…</blockquote><blockquote>I’d like to propose a toast:</blockquote><blockquote>To doing great work for lovely clients… to making the online world a bit better with every project… better for the people who use our work and better for our clients… to fostering a supportive working environment where everyone can learn, grow and do their best work… to playing a useful part in our community and helping with the changes needed to ensure a sustainable future.</blockquote><blockquote>Here’s to all that and to the next decade and beyond.</blockquote><blockquote>Here’s to Cogapp!”</blockquote><figure><img alt="" src="https://cdn-images-1.medium.com/max/198/1*I5aPMMK7V516TSelR764TA.jpeg" /></figure><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=26d89132e0e2" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/cogapp-celebrates-40-years-26d89132e0e2">Cogapp celebrates 40 Years</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Flight Simulator]]></title>
            <link>https://medium.com/cogapp/flight-simulator-237f651563a2?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/237f651563a2</guid>
            <category><![CDATA[coghack]]></category>
            <dc:creator><![CDATA[cogapp]]></dc:creator>
            <pubDate>Thu, 06 Nov 2025 12:10:45 GMT</pubDate>
            <atom:updated>2026-10-26T14:48:31.853Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vuWYDkll9XxqFxvNKQMZVQ.png" /></figure><p>Thinking about our hack day collaboration with ArtUK, the most enticing aspects of the available data for me were the breadth of objects that would not be well known to the public and their geographic spread across Britain.</p><p>The most obvious way to surface this information is through a map interface and, in fact, the ArtUK site already contains the <a href="https://artuk.org/discover/artworks">Artwork Shuffle</a> map feature delivering randomised artworks to fulfil this need.</p><p>My plan was to see if I could take a similar geographical discovery approach but in a more physical manner by dropping the artworks into a flight simulator. I was aware of Microsoft flight simulator as a package that was frequently customised and offered real world map data, but it looked as if its development environment was a little more involved and there was no free tier available to experiment with. So instead I opted for Google Earth Pro, the desktop version of Google Earth. This has a flight sim mode, although it is much more focused on its mapping functionality.</p><p>Through the user interface I was able to import an image using the photo overlay component and adjust its size and position so that it appeared to be hanging in mid air. A quick test in flight sim mode showed proof of concept and I was able to export these items as a .kml file to use as a template.</p><p>We had a sample export of a subset of ArtUK objects and locations in an Elasticsearch index that I was able to query to produce an auto-generated version of the KML, limiting to a maximum of ten randomly chosen items per institution. The objects were positioned in the Google Earth world to stack them vertically above their holding institution.</p><p>I wanted the randomised selection to be dynamic, rather than a one off export. Google Earth supports a NetworkLink element in the .kml that can be set to load further KML from a URL and refresh at a given interval. I set this up to get a new version of the feed every 20 seconds that would update all objects with a new randomised selection. Ultimately I’d prefer to just update a single item per institution at a time for a smoother in-app experience.</p><p>With the data loaded into Google Earth, the flight sim mode was quite pleasing, even if I proved not to be the most competent pilot, and the standard Google Earth view itself worked nicely too for a calmer experience. Organising the KML into folders per institution allowed quick navigation to a new location from the places menu.</p><p>There was an issue with the available sample data where we could not identify which objects had images, but luckily my colleague Luke had been working on a project that was populating imagery from the source institutions so I was able to switch to his index.</p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Flivid.com%2Fembed%2Fmckvi6-sjgIj&amp;display_name=Livid&amp;url=https%3A%2F%2Flivid.com%2Fwatch%2Fmckvi6-sjgIj&amp;image=https%3A%2F%2Fapi.livid.com%2Fv1%2Fthumbnails%2Fthumbnails%252F6a235bd4-576f-4cf4-949d-3e95831e98ea%252F56f4bf51-221d-4f42-af52-cfc51a621c6b.jpg&amp;type=text%2Fhtml&amp;schema=livid" width="800" height="450" frameborder="0" scrolling="no"><a href="https://medium.com/media/2134f57e159bb034febdff0be0e0c141/href">https://medium.com/media/2134f57e159bb034febdff0be0e0c141/href</a></iframe><p>The photo overlay approach had a major visibility drawback for flight sim use. Overlays are inherently one sided 2D objects which makes them difficult to spot when viewed from more extreme angles and impossible to see from the reverse. I could have partially solved the issue by duplicating each overlay, and rotating them 180 degrees to make them two sided. This would have cluttered the places menus, but more importantly wouldn’t fix the further issue that the opacity of overlays is automatically faded with distance so that they quickly become invisible.</p><p>To get around these issues I decided to add objects into the scene with the artworks mapped to each side of a cube. I also randomised the rotation and position of these cubes within a small area around the institution to create a more interesting 3D environment to fly through. As you can see in the video you can now spot objects over London from Oxford and fly (or pan) over to investigate.</p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Flivid.com%2Fembed%2F64i5A_a4FTRW&amp;display_name=Livid&amp;url=https%3A%2F%2Flivid.com%2Fwatch%2F64i5A_a4FTRW&amp;image=https%3A%2F%2Fapi.livid.com%2Fv1%2Fthumbnails%2Fthumbnails%252Fa1e748bb-7417-4933-93ba-584eaa885a80%252F6eda64d8-078c-4ccf-905c-8f7767953281.jpg&amp;type=text%2Fhtml&amp;schema=livid" width="800" height="450" frameborder="0" scrolling="no"><a href="https://medium.com/media/a8df64d8d99d56b6d59d3d35d7f4532b/href">https://medium.com/media/a8df64d8d99d56b6d59d3d35d7f4532b/href</a></iframe><p>The downside to this approach proved to be scalability. The initial load took some time and auto-refreshing lead to slowdown in the app. I believe this must be a solvable problem though, as the 3D buildings layer provided by Google contains millions of individually textured objects.</p><p>I would have liked to add some interactivity where an artwork refresh was triggered by flying into the object, or even shooting the object down with a paintball gun. This may well be possible with a dedicated flight sim package but with Google Earth there is no event mechanism that can be read to return any information about the current viewpoint.</p><p>True to Coghack tradition, this was a frivolous project, but it’s always interesting to play with different ways of interacting with data. In this case I found that the aerial perspective gave a curiously human viewpoint on the locations and distribution. I’d be interested to see how it felt with a fuller dataset so that you could explore more institutions within a city or region.</p><p>If you would like to give it a go yourself there are static exports of the photo overlay and textured cube approaches in the .kml and .kmz files linked below. You will need <a href="https://www.google.com/intl/en_uk/earth/about/versions/#earth-pro">Google Earth Pro</a> which is free for Windows/Mac/Linux. Flight Simulator mode is found under the tools menu.</p><p><a href="https://raw.githubusercontent.com/CogappLabs/google-earth-flight-sim/refs/heads/main/ArtUK%20Flight%20sim.kml">ArtUK Flight sim.kml</a><br><a href="https://raw.githubusercontent.com/CogappLabs/google-earth-flight-sim/refs/heads/main/ArtUK%20Flight%20sim%20cubes.kmz">ArtUK Flight sim cubes.kmz</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=237f651563a2" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/flight-simulator-237f651563a2">Flight Simulator</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[What makes an image viewer accessible]]></title>
            <link>https://medium.com/cogapp/what-makes-an-image-viewer-accessible-cc625ce6295d?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/cc625ce6295d</guid>
            <category><![CDATA[musetech]]></category>
            <category><![CDATA[imageviewer]]></category>
            <category><![CDATA[accessibility]]></category>
            <category><![CDATA[a11y]]></category>
            <category><![CDATA[accessibility-testing]]></category>
            <dc:creator><![CDATA[Scout Burghardt]]></dc:creator>
            <pubDate>Mon, 14 Oct 2024 14:20:30 GMT</pubDate>
            <atom:updated>2026-11-03T09:37:02.658Z</atom:updated>
            <content:encoded><![CDATA[<h4>Key features for inclusive and user-friendly image viewers</h4><figure><img alt="screenshot of an image viewer displaying a photo of 19th century brass spectacles with brown wooden case. image viewer controls arranged along the left side top to bottom contain zoom buttons, a reset button, and options, download, and lock button. in the bottom left corner there are 4 arrow buttons to move around the image." src="https://cdn-images-1.medium.com/max/869/1*BxUMS2mFWlX13J3oaToukg.png" /><figcaption>Image viewer on the <a href="https://www.nts.org.uk/collections/object/object-155565?page=1">Robert Burns Collection</a> site at the National Trust of Scotland.</figcaption></figure><p>At Cogapp, we create websites for museums and archives. Our clients often have large collections of images or documents to display, making image viewers an essential part of the experience. We aim to make our products as accessible as possible, applying WCAG AA standards (<a href="https://www.w3.org/TR/WCAG22">Web Content Accessibility Guidelines</a>), and whenever possible, pushing towards the highest level, AAA.</p><p>I have done numerous accessibility reviews on image viewers for our clients and recently embarked on a small mission to see how other museums solve the challenges of making image viewers WCAG compliant. I had hoped for inspiration to overcome some of the thornier issues we have come across, but unfortunately, I did not find many well accessibility-designed image viewers.</p><p>Image viewers don’t have specialist accessibility rules, and applying WCAG to them is sufficient. But they do pose some very particular challenges. What makes an image viewer accessible partly depends on the type of image. Most of the time, we deal with paintings, drawings, photographs, illustrations, architectural plans, and on occasion even 3D scans. These will need to be described to users who cannot see them. In some projects, we handle images of documents and books, which need transcripts to become accessible.</p><p>When we built viewers for the Arabian Gulf Digital Archives and Qatar Digital Library, we integrated optical text recognition to handle documents. We achieved high accuracy, particularly with typewritten documents, but even handwritten older texts were reasonably well transcribed. Including these transcripts in the viewer improves accessibility not only for visually impaired users but provides benefits for everyone. It helps users decipher handwritten documents and it enables searching for specific phrases. These search terms are highlighted both in the transcript and as an overlay on the document itself.</p><figure><img alt="screenshot of an old typed document from the 1950s where the term letter has been digitally highlighted in the first paragraph" src="https://cdn-images-1.medium.com/max/561/1*neEygO3pQLwKi5hpksQlHw.png" /><figcaption>Example showing search term highlighting on top of OCR-treated (optical character recognition) documents on the <a href="https://www.agda.ae/en/catalogue/tna/fo/371/120637/n/3">Arabian Gulf Digital Archives</a> website.</figcaption></figure><p>We have written elsewhere about how we built this interface (read more in this <a href="https://www.cogapp.com/work/arabian-gulf-digital-archive">post</a>), but in this article, I will focus primarily on making artworks (rather than text documents) accessible through image viewers.</p><h3><strong>Presenting an image accessibly</strong></h3><p>I have identified these key areas to make an image accessible in a viewer:</p><ul><li>Alternative text</li><li>Keyboard navigation</li><li>Pointer gestures</li><li>Screen reader compatibility</li><li>Buttons and accessible labels</li></ul><h4><strong>Alternative text</strong></h4><p>Alternative text (short alt text) is one of the best known accessibility features for the web. It is a way to provide descriptions for images in a website’s code. Screenreader users will get this description read out to them when they encounter an image. Unfortunately, in a recent review of a dozen image viewers on museum websites, I found that many lacked this basic feature or even its cousin: an image description elsewhere on the page.</p><p>There is no one correct way to describe an image; it always depends on the context. For an image viewer, I would advocate for a long description over the more commonly known alt text, which is meant to be short and to the point- just like a user would take an image on a webpage in at a glance in its context. But an image viewer is the place where sighted users take a closer look, where they can zoom in and examine all the details. Here, a longer description is much more appropriate.</p><p>The Cooper Hewitt museum has written a very detailed <a href="https://www.cooperhewitt.org/cooper-hewitt-guidelines-for-image-description/">guide for image descriptions</a>.</p><h4>Keyboard navigation and focus visibility</h4><p>Every element on a webpage must be accessible via the keyboard. It is crucial that keyboard users always know which element they are interacting with. The focused element should contrast with the image behind it, ideally using a dual frame or inverted colours to ensure maximum visibility with all backgrounds. Keep in mind that if you have focusable elements on top of images, that the images may change, and thus focus colours may lose the required contrast. In image viewers, these elements are often buttons for zooming and moving around the image as well as menu buttons.</p><p>One danger that’s frequently overlooked is that modals or menus (like a cookie banner or an options menu) open on top of the webpage and focus moves behind these elements and thus disappears. A handy solution is to ensure that focus gets trapped inside such elements until the user closes them.</p><p>Users should be able to navigate and interact with all the elements, including menus, sub-menus, and image controls without using a pointer device (most commonly a mouse).</p><p>Here’s an example from the Peck Collection of how it is supposed to work when using keyboard navigation: all items are accessible and operable, and the item that currently has focus is always highlighted.</p><figure><img alt="screen recording of an image viewer that is being navigated by keyboard: opening an options sub-menu and activating a number of sliders and tick boxes for brightness, contrast and more." src="https://cdn-images-1.medium.com/max/600/1*PSxHOAM5q-ZgenODQa-I2A.gif" /><figcaption>How a user navigates and operates this image viewer on the <a href="https://peck.ackland.org/artworks/figures-dancing-around-a-fire">Peck Collection</a> website.</figcaption></figure><p>Users must be able to move the image around, and it must be obvious to them how to achieve this. A good practice is to assign shortcut keys like “0” to reset an image to its original position, ‘’+” and “-” to zoom, and arrow keys for panning.</p><p>Sliders should be operable with the arrow keys, and input fields must not be missed in the tab order. It is also very annoying if focus shifts away from an element when the user activates it- for example, entering a number in an input field and then pressing return should not reset the focus order and move the user to the top of the page.</p><figure><img alt="screenshot of the same image viewer as at the top of the page displaying a photo of 19th century brass spectacles with wooden case. here, the image adjustments menu is open displaying sliders for brightness (increased to 170 out of 200), contrast (increased to 135), saturation (increased to 200), and rotation (set to 270 out of 360) and check boxes for grayscale (unticked) and invert (ticked). Due to the changed values, the image now appears to be blue and white on black background." src="https://cdn-images-1.medium.com/max/851/1*cPuAIcjhprnhroGdWqrwTQ.png" /><figcaption>Image viewer on the <a href="https://www.nts.org.uk/collections/object/object-155565?page=1">Robert Burns Collection</a> site at the National Trust of Scotland, showing the ‘Image Adjustments’ menu opened. Focus is on the rotation slider, highlighted by the blue focus frame around it.</figcaption></figure><p>Some of the more serious issues I have encountered in my testing include menus that cannot be opened or navigated by keyboard, as well as thumbnails that can’t be activated, making it difficult or impossible to navigate viewers with multiple images.</p><p>One easily overlooked issue is scrollable boxes. Many of our websites handle IIIF images, an image format that offers much more than just the visual aspect of an image. IIIF files store a lot of information and can include much text, which we may display in a box that becomes scrollable when the text exceeds a certain number of words or when it is zoomed. Whenever an element has scrollbars (or the potential for scrollbars to appear), it is important to add this element to the tab order. This is the only way for keyboard users to activate the scrolling and access the full text inside.</p><h4><strong>Pointer gestures</strong></h4><p>There are users who have no keyboard to interact with a page and can only use their pointer device. They may not be able to perform complex tasks/movements with their device. This could be a mouse, but it also applies to finger gestures on a touchscreen or more specialised inputs like eye tracking or head pointers.</p><p><strong>Avoid complex movements</strong></p><p>One way to understand the requirements for this user group is to ensure that the image viewer can be operated on a touchscreen with one finger and “reduced gestures”. So, if a viewer utilises path-based gestures (like drawing a shape) or multiple points of contact gestures (like a pinch gesture for zooming in and out), it must provide alternative ways of activating the same controls.</p><p>You can either avoid such gestures or simply provide alternative ways of achieving the same functionality. Buttons are a good tool for this: provide a number of buttons to zoom, pan, or rotate the image in addition to the two-finger gestures usually required to achieve such things.</p><p><strong>Avoid path-based gestures</strong></p><p>Avoid path-based gestures, where not just the endpoints matter, but how the pointer moves between these points. These can pose challenges for users with less precise control, such as those using eye tracking. While image viewers don’t frequently use path-based gestures, I would recommend watching out for sliders. While not technically path-based, they can be tricky to operate depending on how they have been implemented and how accurately a user has to activate them. It’s good practice to offer plus/minus buttons to adjust a value or allow users to enter a number directly.</p><h4><strong>Screenreaders and labels</strong></h4><p>Screen reader users vary widely and can include people who are blind, have low vision, or have reading disorders such as dyslexia. Therefore, we need to ensure that image viewers are as accessible as any other page of our site.</p><p>Look out for button labels: image viewer buttons often don’t contain text that announces their purpose to assistive technologies (like screen readers); they are more likely to use icons or images, like a magnifying glass for zooming. Therefore, they need to have accessible labels- text that explains what they do and is read out by a screen reader.</p><p>When a visible label is present (for example, the word “download” on a download button), the accessible label should either match what is visible or at least begin with the same text. For instance, a “Next” button should have an accessible label like “Next image” rather than “Move to the next image.” This consistency helps those who use voice-activation to access elements reliably.</p><p>Also, make sure language tags are present, especially in viewers with content that shifts between languages. This is particularly important for IIIF (International Image Interoperability Framework)-based image viewers, which often come with metadata in multiple languages.</p><h4><strong>Size of clickable elements</strong></h4><p>WCAG requirements set a minimum size of 24px for clickable elements for their AA level, but we tend to treat this as an absolute minimum and aim for the enhanced AAA recommendation of 44px minimum wherever feasible. Ensure buttons and interactive elements are large enough to be easily clicked without users accidentally triggering adjacent buttons.</p><p>By paying attention to these details, we can ensure that our image viewers are accessible to all users, regardless of their abilities or the devices they use. Accessibility isn’t just about meeting standards- it’s about ensuring equal access to content for everyone.</p><p><a href="https://www.cogapp.com/team/scout-burghardt">Scout</a> is QA Lead at <a href="https://www.cogapp.com/">Cogapp</a>, a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about <a href="https://www.cogapp.com/work">our work</a>.</p><p>We’re on <a href="https://twitter.com/cogapp">Twitter</a> or you can <a href="https://www.cogapp.com/contact-us">contact us</a> via our website.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=cc625ce6295d" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/what-makes-an-image-viewer-accessible-cc625ce6295d">What makes an image viewer accessible</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Don’t disable your users]]></title>
            <link>https://medium.com/cogapp/dont-disable-your-users-2d4376653648?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/2d4376653648</guid>
            <category><![CDATA[disability]]></category>
            <category><![CDATA[disability-rights]]></category>
            <category><![CDATA[musetech]]></category>
            <category><![CDATA[a11y]]></category>
            <category><![CDATA[web-accessibility]]></category>
            <dc:creator><![CDATA[Scout Burghardt]]></dc:creator>
            <pubDate>Fri, 06 Sep 2024 16:42:40 GMT</pubDate>
            <atom:updated>2024-09-06T16:42:40.313Z</atom:updated>
            <content:encoded><![CDATA[<h4>Navigating the web with different abilities</h4><figure><img alt="oval spiral staircase photographed from above" src="https://cdn-images-1.medium.com/max/800/1*4AjScifsZ0GhVgISH8AQzA.jpeg" /><figcaption><strong>All Technology is Assistive</strong>. Stairs help us go up or down. It is worth checking out <a href="https://medium.com/backchannel/all-technology-is-assistive-ac9f7183c8cd">Sara Hendren’s article</a> of the same title. Image: <a href="https://www.flickr.com/photos/193316968@N06/53499340587/in/photolist-2pvy74V-2p5Rjhb-2pG1XBV-2nnXW3C-2mCsfib-2mJy31n-2nuucoV-2pG318g-2mhJGsA-2nKhiTt-2pdfXPy-2pDFVEP-2nUB62F-2oSyYmV-2mR58Fh-2ndYCKs-2jDvcGs-2p1t6aq-2pwJn6Y-2okb66F-2mgW8JU-2pFWtNT-2pG4eYY-2nuu6F3-2pFWtKw-2p4vkUD-2oaDgyx-2miRFMh-2nurAN3-2m6Q23B-2pzvdpX-2nusW7b-2nuu6zr-2numn1j-xRZBqL-2nurDFz-2nusTzv-2pG4eVS-2mLLcgs-2ocQ42Z-2oANMtg-2m3AgM9-2nurDBb-2nurAyq-2nuu7bm-2m1sb8n-2nuu6Du-2nurArw-2pFYNN6-2nuu6MW">Spiral staircase in Gilman Hall</a> as photgraphed by Chris Rycroft, <a href="https://creativecommons.org/licenses/by/2.0/">Attribution (CC BY 2.0)</a></figcaption></figure><p>As the Paralympics showcase the incredible skills of athletes with diverse abilities, it’s a timely reminder to reflect on the accessibility of our digital world. Imagine a Paralympic gold medalist, celebrated for their outstanding physical skills, struggling to navigate something as essential as the internet: ordering a pizza, booking a flight, or simply finding information. Unfortunately, this is a reality for many.</p><p>A recent study revealed an average of 57 accessibility errors per page among the top one million homepages (see <a href="https://webaim.org/projects/million/">The WebAIM Million</a>). It begs the question: Is it really that difficult to create an accessible website?</p><p>According to the Web Content Accessibility Guidelines (<a href="https://www.w3.org/TR/WCAG22/">WCAG</a>), websites need to be perceivable, operable, understandable, and robust. In simpler terms: all users should be able to read, understand, navigate, and interact with the site using their senses and assistive technologies.</p><h3>Navigating the Web: Considering Different Abilities</h3><p>When designing websites, it’s crucial to consider the diverse ways in which people navigate the web. As web developers, it is our responsibility not to impede their journey. Below, I outline some suggestions for improving accessibility. These thoughts are intended as a starting point for thinking about different abilities, rather than a comprehensive checklist.</p><p><strong>Visual impairments</strong> affect how users see images and text. Users may be blind, have low vision, or deal with colour blindness or other visual challenges. Some might need to zoom in on pages or adjust contrast settings, while others might use older monitors that don’t display content as intended.</p><p>Web developers can enhance site accessibility for users with visual impairments by:</p><ul><li>Using semantic HTML to enable screen readers to easily access different areas of the page (correct headings <em>&lt;h&gt;</em>, defined <em>&lt;header&gt;</em> and <em>&lt;footer&gt;</em>, a correctly formatted navigation<em> &lt;nav&gt;</em> etc.)</li><li>Providing descriptive alt text for images so screenreaders can announce them correctly.</li><li>Ensuring sufficient contrast between text and background, aiming for a ratio of 4.5 to 1.</li><li>Using relative units (em and rem) to define text sizes, allowing users to resize text as needed.</li><li>Clearly labelling elements to indicate their purpose where it is not obvious from the visible name (think of search or menu buttons that use icons rather than words for their name).</li><li>Providing a focus highlight on interactive elements to assist keyboard users.</li></ul><figure><img alt="man wearing reading glasses sitting at a table reading a book" src="https://cdn-images-1.medium.com/max/1024/1*sU-SJOzQwaBEgsCXAwJSDw.jpeg" /><figcaption><strong>All Technology is Assistive</strong>. Glasses help many of us see better. Image: <a href="https://artgallery.yale.edu/collections/objects/46021">Reading Man</a> by Eugène Béjot, <a href="https://creativecommons.org/publicdomain/zero/1.0/">no Copyright</a></figcaption></figure><p><strong>Motor impairments</strong> can make using a mouse or keyboard challenging. Some users struggle with precise movements, while others rely on technology like eye trackers or voice activation to navigate.</p><p>To accommodate users with motor impairments, web developers should:</p><ul><li>Ensure all functionality is accessible via both, keyboard and mouse.</li><li>Use semantic HTML for elements like buttons to ensure keyboard accessibility (a <em>&lt;button&gt; </em>element, for example, has built-in keyboard access, while a generic <em>&lt;div&gt; </em>does not).</li><li>Design large, easily clickable buttons.</li><li>Avoid placing small items too closely together.</li><li>Provide alternatives for complex mouse actions.</li></ul><p><strong>Cognitive impairments</strong> encompass a wide range of challenges, including difficulties with attention span, memory, and language processing. Users with ADHD, autism, brain injuries, learning difficulties, or those on certain medications may find some websites overwhelming or hard to navigate.</p><p>To make websites more accessible for users with cognitive impairments, developers can:</p><ul><li>Use clear, simple language and design.</li><li>Maintain a consistent and predictable layout.</li><li>Avoid automatically playing videos or animations.</li><li>Avoid unnecessary timers on forms.</li><li>Use well-known, easy-to-recognize pictograms and icons.</li><li>Use sans-serif fonts to aid users with dyslexia.</li><li>Avoid long text blocks or overly-long lines.</li></ul><p>Flashing content can trigger seizures for users with <strong>seizure disorders</strong>. To prevent this, developers can:</p><ul><li>Avoid using flashing images or animations.</li><li>Provide options to disable animations.</li></ul><p>Users with <strong>hearing impairments</strong> may have difficulty accessing audio content. To accommodate them, developers can:</p><ul><li>Provide captions and/or audio descriptions for multimedia content.</li><li>Offer transcripts for audio content.</li></ul><p><strong>Technological Access:</strong> Access to technology varies widely. Not everyone has the latest devices or fast internet, and many users rely on mobile devices with limited connectivity. This can be due to structural inequalities, such as the digital divide between urban and rural areas or between developed and low-income countries.</p><p>To improve accessibility across the technological divide, developers can:</p><ul><li>Ensure compatibility with older devices and various operating systems.</li><li>Optimise images and web fonts and reduce their number.</li><li>Optimise server performance and enable caching.</li><li>Use responsive design for mobile devices.</li><li>Stick to standard HTML and CSS features that are widely supported.</li></ul><p>These practices also contribute to a lower carbon footprint for your site and make maintenance easier. Triple win!</p><h3>What We Do At Cogapp</h3><p>Making a website fully accessible after it’s been created, is difficult and time-consuming. Instead, accessibility should be considered from the beginning — starting with design choices (e.g., choosing contrasting color schemes), information architecture (simple and consistent layout, logical navigation), and content creation (using semantic HTML).</p><p>At Cogapp, we train our developers in web accessibility. We have recently started using automated accessibility testing during the development phase of our sites to catch and deal with issues before they embed themselves in the project. Once a site is finished, I conduct a full accessibility audit. Any bugs identified are sent back to the developers for fixing. In the end, we create a Voluntary Product Accessibility Template (VPAT) that lists remaining issues, helping users with specific access needs understand which parts of the site may pose challenges. After launch, we continue working with our clients to improve accessibility over time.</p><p>While this detailed process may not be feasible for everyone, especially non-profits or very small businesses, significant improvements can be made with less effort.</p><h3>Easy Wins</h3><p>Fortunately, accessibility features are built into HTML and browsers. Using semantic markup guarantees that elements behave correctly on a variety of devices and for users of all abilities. A <em>&lt;button&gt;</em> element not only looks and behaves like a button but is also inherently focusable, can be activated using the keyboard, and is correctly recognized by screen readers. Everybody wins, including developers who save time and effort by incorporating these features.</p><p>A considerable amount of damage occurs when developers intentionally or unintentionally disrupt these features, such as removing focus highlights or tabindex on elements. Perhaps we should adopt a doctor’s mantra “do no harm” when creating websites.</p><p>There are many more easy wins for accessibility, such as using relative units, providing alt text, enabling automatic captions, and choosing contrasting color schemes. However, it requires insight into the various ways people use the internet to know when not to interfere with intended HTML features. Why not watch a video to learn how a blind user navigates a website? Or try simulating how <a href="https://www.funkify.org/">certain impairments impact on using the web</a>? Consider following a <a href="https://www.digitala11y.com/accessibility-blogs/">blog about web accessibility</a> to deepen your understanding?</p><p>Improving accessibility begins with small steps — <a href="https://meryl.net/accessibility-progress-over-perfection/">progress over perfection</a>, as the accessibility educator Maryl Evans calls it. Of course, the ultimate goal is to make all websites fully accessible to everyone. But don’t let the complexity of the task overwhelm you. And don’t use it as an excuse not to start now.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RI70nZAIoUqdebrCZ5-O3Q.png" /><figcaption>The OCPC XO laptop was developed as a low cost computer for children in developing countries. Here it was photoshopped on top of a long set of stairs which can be assistive (helping people getting to a higher level) but also disabling (wheelchair users would find it impossible to get up their using their chairs). Images used for this collage: laptop photo by <a href="https://www.flickr.com/photos/saschapohflepp/">Sascha Pohflepp</a>, <a href="https://www.flickr.com/photos/karenandbrademerson/14695271790/in/photolist-ooz7k1-9YiSb4-5VAcJN-4J5nDJ-dE8aaD-jNAZ5-8ShNtB-7uRNtj-3pHXS1-9uGmB-5aoaxK-a533r-4vpjwR-AzQzt-94StCN-4SV8mY-4v66Ln-53rnf7-53n9mK-6WjWws-5VAco9-5VAcwL-5oyxw4-53n8Se-5MFZyw-62WoQ6-2m17HFY-53roxN-4af5Xm-2kdvnYp-2kUUC3Z-2n3gE2N-2gEKyow-2njDFoi-jgRMY-KW3MV9-ngDqyg-dor1hA-rUCUg1-28ANBAy-8rZaRK-2kUMbwa-25rzy6w-QwBis-RFwrdu-2iwk8t-2j5K5Zj-6aoQeP-2okYBED-prt5Ud">staircase</a> by <a href="https://www.flickr.com/photos/karenandbrademerson/">Karen and Brad Emerson</a></figcaption></figure><p><a href="https://www.cogapp.com/team/scout-burghardt">Scout</a> is QA Lead at <a href="https://www.cogapp.com/">Cogapp</a>, a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about <a href="https://www.cogapp.com/work">our work</a>.</p><p>We’re on <a href="https://twitter.com/cogapp">Twitter</a> or you can <a href="https://www.cogapp.com/contact-us">contact us</a> via our website.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=2d4376653648" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/dont-disable-your-users-2d4376653648">Don’t disable your users</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Chiiild’s play]]></title>
            <link>https://medium.com/cogapp/chiiilds-play-0ac62723e204?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/0ac62723e204</guid>
            <category><![CDATA[hackathons]]></category>
            <category><![CDATA[iiif]]></category>
            <category><![CDATA[musetech]]></category>
            <category><![CDATA[coghack]]></category>
            <dc:creator><![CDATA[Grant Cieciura]]></dc:creator>
            <pubDate>Thu, 27 Jun 2024 10:29:20 GMT</pubDate>
            <atom:updated>2026-10-26T14:50:11.449Z</atom:updated>
            <content:encoded><![CDATA[<h4>A storytelling platform for doodles</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7KOooVC5gag6iJpGA-uaeg.jpeg" /></figure><blockquote>This is goes like this, like this, like this, like this, like this, like this. That’s a rainbow. That’s at nursery with everybody.</blockquote><p><em>— a toddler describing a detail from her doodle in a IIIF image viewer</em></p><h4>A quick IIIF intro</h4><p>At Cogapp, we utilise <a href="https://iiif.io/">IIIF</a> in our digital projects for the world’s leading art museums. IIIF provides collection-hosting institutions with a universal standard for presenting images online and at scale. Examples of IIIF in use can be viewed in this <a href="https://peck.ackland.org/artworks/studies-of-women-and-children">Rembrandt</a> drawing and through our free, open- source online storytelling platform called <a href="https://www.cogapp.com/r-d/storiiies">Storiiies</a>.</p><p>In the Peck Collection, IIIF supports the late art collector Sheldon Peck’s vision to <em>extend the boundaries of seeing</em> by encouraging a closer look at artist drawings. The technology enables users to zoom into the details of pencil strokes and develop a discerning eye.</p><p>In Storiiies, we give museum professionals the platform to curate a detailed story, taking users on a journey around an artwork.</p><h3>IIIF hackday idea</h3><p>Our technical lead Tristan sent the team an internal brief asking us to come up with ideas on how IIIF could be used in novel ways.</p><p>As a parent of a 3 year old toddler, I am constantly gifted with scribbles and doodles. I collect them in a box under the bed or stick them on my wall behind my desk. Occasionally, I scan them and make birthday cards for my family. I like them for their purely expressive quality alone. There’s something so free about toddler art, unhindered by self-doubt or criticism.</p><p><em>What if we used Storiiies to curate a journey around the proto-artform of a toddlers doodle?</em> I thought.</p><p>Beyond the formal qualities of the untethered crayon strokes, I wanted to know if there was a story she was trying to tell. Often, if I do notice more discernible shapes in her art, I will project my own story onto the image.</p><p>A doodle is just a doodle,<em> right?</em></p><p>For the internal IIIF hack day at Cogapp, I wanted my toddler to lead the way and describe her doodle. I sat down with her and recorded her response to my pointy-prompts.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nR9Fs_b7Kx2eBaB_Wu5x4Q.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vIQntz2TEO1QKodorIl2pg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6zTOKH8X2tz6aNV-EbBhrw.jpeg" /></figure><p>I didn’t anticipate how much fun and surprising this process would be. One of the things that amazed me was her gestural hand movements.</p><p>In addition to her sometimes indecipherable verbal descriptions (and unexpected burp 😂), she made circular, pinching, and scratching motions to explain how she made the marks in her picture. I incorporated these “actions” in the text description because I felt they were intrinsic to her description. A future iteration might present these actions as icons or animated icons.</p><p>You can watch the full video below and enjoy Comic Sans in full UI-enhancing swing … you can thank my colleague Luke for that design delight.</p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Flivid.com%2Fembed%2FFTxk8cXTn40C&amp;display_name=Livid&amp;url=https%3A%2F%2Flivid.com%2Fwatch%2FFTxk8cXTn40C&amp;image=https%3A%2F%2Fapi.livid.com%2Fv1%2Fthumbnails%2Fthumbnails%252F0ed8e7f5-f57b-47c6-964c-5a03cbc0e8a0%252F490de48b-7b33-4129-9b07-c13a74c6ac37.jpg&amp;type=text%2Fhtml&amp;schema=livid" width="800" height="383" frameborder="0" scrolling="no"><a href="https://medium.com/media/53b02306b6081a780a1b40bb99961021/href">https://medium.com/media/53b02306b6081a780a1b40bb99961021/href</a></iframe><p>Design and concept by <a href="https://www.cogapp.com/team/grant-cieciura">Grant</a>, Head of Design at <a href="https://www.cogapp.com/">Cogapp</a>.<br>Doodle by Grant’s toddler.<br>Development by <a href="https://www.cogapp.com/team/luke-watson-davies">Luke</a>, Senior Producer at <a href="https://www.cogapp.com/">Cogapp</a>.</p><p><a href="https://www.cogapp.com/">Cogapp</a> are a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about <a href="https://www.cogapp.com/work">our work</a>.</p><p>If you’re interested in joining us for a hack day, there’s more information <a href="https://www.cogapp.com/r-d/hack-days">on our website</a>.</p><p>We’re on <a href="https://twitter.com/cogapp">Twitter</a> or you can <a href="https://www.cogapp.com/contact-us">contact us</a> via our website.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=0ac62723e204" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/chiiilds-play-0ac62723e204">Chiiild’s play</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[IIIFind]]></title>
            <link>https://medium.com/cogapp/iiifind-35ef93d79ea9?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/35ef93d79ea9</guid>
            <category><![CDATA[musetech]]></category>
            <category><![CDATA[iiif]]></category>
            <category><![CDATA[coghack]]></category>
            <dc:creator><![CDATA[Hannah Baker]]></dc:creator>
            <pubDate>Mon, 03 Jun 2024 16:49:22 GMT</pubDate>
            <atom:updated>2024-06-03T16:49:22.847Z</atom:updated>
            <content:encoded><![CDATA[<h4>A fun IIIF game</h4><p>For Cogapp’s most recent hack day, the brief was to make something fun with IIIF, or if that was too much of a challenge something mildly entertaining.</p><p>I wracked my brains for the funnest experiences I’d ever had and soon decided to make a IIIF version of a family favourite card game where you have to find the common object on two cards as quickly as possible (I know how to have a good time)!</p><p>Once I had the idea it was straight to work planning. I decided to use artworks as the images so that people could enjoy and discover new artworks whilst playing, plus Cogapp has many art galleries in our client network so I knew I’d have a wealth of resources to choose from.</p><p>I decided to use artworks from the <a href="https://www.artic.edu/">Art Institute of Chicago’s</a> collection. Having working with their collection before I knew they had a great selection of public domain artworks and I was already familiar with their API so it was a win-win.</p><p>I started off by looking through the AIC’s collection to come up with a list of predefined objects for people to hunt for and I settled on the following:</p><figure><img alt="A list of objects (Monkey, Dog, Boat, Umbrella, Fruit, Clock, Snake and Elephant)" src="https://cdn-images-1.medium.com/max/1024/1*54FaMdJJODEZtDHAPuWI2A.png" /><figcaption>A list of objects (Monkey, Dog, Boat, Umbrella, Fruit, Clock, Snake and Elephant)</figcaption></figure><p>Now that I had my list of objects I set about finding 7 – 9 artworks for each of them. It was sometimes challenging to source artworks that had enough detail in them to make it even a little bit challenging to find the object. For instance, one of the artworks for ‘Elephant’ didn’t contain much other than an elephant, making it quite obvious what the answer would be for that round:</p><figure><img alt="A woman sat on an elephant" src="https://cdn-images-1.medium.com/max/858/1*rY5M7Dqi-gClpxdKBqHSzw.png" /><figcaption>‘Courtesan on White Elephant’ by Suzuki Harunobu</figcaption></figure><p>This issue was exacerbated by needing to use public domain artworks as it restricted my options, plus I only had a limited time to search through the collection for suitable images. While chatting to my colleague Luke about this problem, he suggested also using some AI generated images containing the objects so that there could be more variety without having to spend hours trawling through existing artworks. Using this approach, we could also generate images that could be used in multiple object categories by making sure there was only ever one object crossover in each of the images. In other words, we could create the following images:</p><p>Image 1: Monkey, Dog, Boat</p><p>Image 2: Dog, Umbrella, Fruit</p><p>Image 3: Boat, Clock, Snake</p><p>Image 4: Umbrella, Snake, Elephant</p><p>Image 5: Fruit, Clock, Elephant</p><p>Image 6: Monkey, Clock, Elephant</p><p>Image 7: Monkey, Fruit, Snake</p><p>Image 8: Dog, Snake, Elephant</p><p>However, as some of the AIC artworks I’d selected also had more than one of the objects in then, I still needed to make sure each artwork would only be paired with another artwork if there was only one matching object, as I only wanted there to be one correct answer. For instance, the following two artworks both contain a Monkey and Fruit, so I’d have to put in a check to make sure these two images were never displayed together.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Nh9kUCdQ4A9cB42c-fPVYg.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/828/1*2oonA6ZswSB9xe8xWnaHTg.png" /><figcaption><strong>Left:</strong> ‘Still Life with Monkey, Fruits, and Flowers’ by Jean Baptiste Oudry <strong>Right: ‘</strong>Monkey playing with crabs’ by Isoda Koryusai</figcaption></figure><p>Once I had my artworks (both AI and human-made) I was ready to start building the game. I built a UI (user interface) with two OpenSeadragon viewers so that the user could zoom in and move around the image to see it in more detail and hunt for the relevant objects. To generate the viewers I first hardcoded an array containing the relevant image IDs for each of the objects and randomly selected an object and two image IDs from that array:</p><pre>const dibbleObjects = {<br>    &quot;Monkey&quot;: [&quot;27992&quot;, &quot;94126&quot;, &quot;26777&quot;, &quot;21181&quot;, &quot;8715&quot;, &quot;14799&quot;, &quot;19471&quot;, &quot;28341&quot;, &quot;52497&quot;, &quot;1715937356533card001monkeydogboat&quot;, &quot;1715937458290card006monkeyclockelephant&quot;, &quot;1715937472118card007monkeyfruitsnake&quot;, &quot;1715937356533card001monkeydogboat&quot;],<br>    &quot;Dog&quot;: [&quot;27992&quot;, &quot;158&quot;, &quot;49068&quot;, &quot;40724&quot;, &quot;561&quot;, &quot;28136&quot;, &quot;61715&quot;, &quot;1715937356533card001monkeydogboat&quot;, &quot;1715937389260card002dogumbrellafruit&quot;, &quot;1715937484999card008dogsnakeelephant&quot;, &quot;1715937356533card001monkeydogboat&quot;],<br>    &quot;Boat&quot;: [&quot;27992&quot;, &quot;14598&quot;, &quot;28102&quot;, &quot;59927&quot;, &quot;94996&quot;, &quot;86421&quot;, &quot;1715937356533card001monkeydogboat&quot;, &quot;1715937413583card003boatclocksnake&quot;, &quot;1715937356533card001monkeydogboat&quot;],<br>    &quot;Umbrella&quot;: [&quot;27992&quot;, &quot;47928&quot;, &quot;213791&quot;, &quot;19693&quot;, &quot;22017&quot;, &quot;86421&quot;, &quot;19773&quot;, &quot;20878&quot;, &quot;1715937427455card004umbrellasnakeelephant&quot;, &quot;1715937389260card002dogumbrellafruit&quot;],<br>    &quot;Fruit&quot;: [&quot;94126&quot;, &quot;21181&quot;, &quot;81558&quot;, &quot;44892&quot;, &quot;100351&quot;, &quot;84709&quot;, &quot;182381&quot;, &quot;1715937389260card002dogumbrellafruit&quot;, &quot;1715937443012card005fruitclockelephant&quot;, &quot;1715937472118card007monkeyfruitsnake&quot;, &quot;1715937356533card001monkeydogboat&quot;],<br>    &quot;Clock&quot;: [&quot;11988&quot;, &quot;94996&quot;, &quot;158312&quot;, &quot;156538&quot;, &quot;236383&quot;, &quot;85496&quot;, &quot;76631&quot;, &quot;20005&quot;, &quot;217185&quot;, &quot;1715937413583card003boatclocksnake&quot;, &quot;1715937443012card005fruitclockelephant&quot;, &quot;1715937458290card006monkeyclockelephant&quot;],<br>    &quot;Snake&quot;: [&quot;23985&quot;, &quot;4819&quot;, &quot;78161&quot;, &quot;60587&quot;, &quot;136981&quot;, &quot;11229&quot;, &quot;51466&quot;, &quot;1715937413583card003boatclocksnake&quot;, &quot;1715937427455card004umbrellasnakeelephant&quot;, &quot;1715937472118card007monkeyfruitsnake&quot;, &quot;1715937484999card008dogsnakeelephant&quot;],<br>    &quot;Elephant&quot;: [&quot;2102&quot;, &quot;6810&quot;, &quot;113249&quot;, &quot;21083&quot;, &quot;32485&quot;, &quot;32478&quot;, &quot;1715937427455card004umbrellasnakeelephant&quot;, &quot;1715937443012card005fruitclockelephant&quot;, &quot;1715937458290card006monkeyclockelephant&quot;, &quot;1715937484999card008dogsnakeelephant&quot;]<br>};</pre><p>Once I had my two image IDs I could then construct the IIIF image URL. This was done differently depending on whether the artwork was one of AIC’s or one of the newly created AI generated images. The AI generated image IDs all contained letters, so I used this as a check to determine how to construct the IIIF URL. This wasn’t the most robust or future proof approach but I was pressed for time so I went with it:</p><pre>// Fetch the IIIF manifest<br>fetch(manifestUrl)<br>.then(response =&gt; response.json())<br>.then(manifest =&gt; {<br>    let imageUrl;<br>    let tileWidth;<br>    let tileHeight;<br><br>    // Extract the image URL and tile information from the manifest<br>    if (cogappImage) {<br>        imageUrl = manifest[&quot;@id&quot;] + &#39;/full/full/0/default.jpg&#39;;<br>        tileWidth = manifest[&quot;tiles&quot;][0][&quot;width&quot;];<br>        tileHeight = manifest[&quot;tiles&quot;][0][&quot;height&quot;];<br>    } else {<br>        imageUrl = manifest[&quot;sequences&quot;][0][&quot;canvases&quot;][0][&quot;images&quot;][0][&quot;resource&quot;][&quot;@id&quot;];<br>        tileWidth = manifest[&quot;sequences&quot;][0][&quot;canvases&quot;][0][&quot;images&quot;][0][&quot;resource&quot;][&quot;width&quot;];<br>        tileHeight = manifest[&quot;sequences&quot;][0][&quot;canvases&quot;][0][&quot;images&quot;][0][&quot;resource&quot;][&quot;height&quot;];<br>    }<br>    <br>    // Construct the OpenSeadragon tileSources object<br>    var tileSources = [{<br>        type: &#39;image&#39;,<br>        url: imageUrl,<br>        buildPyramid: false,<br>        tileSize: tileWidth,<br>        tileOverlap: 0,<br>        width: tileWidth,<br>        height: tileHeight<br>    }];<br><br>    // Check if viewer already exists<br>    if (!viewerRef.current) {<br>        // Create the OpenSeadragon viewer with the IIIF manifest as the tile source<br>        let viewer = OpenSeadragon({<br>            id: idPrefix,<br>            prefixUrl: &#39;/openseadragon/images/&#39;,<br>            crossOriginPolicy: &#39;Anonymous&#39;,<br>            tileSources: tileSources<br>        });<br><br>        viewerRef.current = viewer;<br>    } else {<br>        // Update the tileSources of the existing viewer<br>        viewerRef.current.open(tileSources);<br>    }<br>});<br>}, [artworkId, idPrefix]);</pre><p>I then triggered this with a ‘Start’ button and created buttons for each of the objects, which when clicked would check whether the button value corresponded to the correct answer.</p><p>I also added in a score tracking component so players could see how many correct and incorrect answers they gave and I added a one minute count down timer as I wanted to introduce a speed element to the game to make it more fun when playing solo.</p><figure><img alt="A score tracking component showing the number of correct and incorrect answers for Player 1 and Player 2 and the count down timer (with 24 seconds left)" src="https://cdn-images-1.medium.com/max/1024/1*hmasTxfBcTzDNMAdbZs68g.png" /><figcaption>The score tracking component showing the number of Correct and Incorrect answers for each player and the countdown timer</figcaption></figure><p>As the original card game is a two player game the final goal I had was to make my game two player as well. I wasn’t sure how to approach this given the time constraints and my colleague Luke came to the rescue again. He suggested using a keyboard with a number pad and assign the main numbers to Player 1 and the number pad to Player 2. That way two people could play against each other so long as they were in the same room and had an appropriate physical keyboard plugged in. It wasn’t perfect as it meant that people wouldn’t be able to play together virtual and they would need specific equipment, but it was the best option I had given the time constraints.</p><figure><img alt="A keyboard with a number pad. The main numbers are highlighted in pink with a note that these are the numbers for Player 1 and the number pad is highlighted in blue with a note that these are the numbers for Player 2." src="https://cdn-images-1.medium.com/max/1024/1*t0x93Mb1cbsPJA3izlukPQ.png" /><figcaption>A keyboard with a number pad. Player 1 can use the main numbers (highlighted in pink) and Player 2 can use the number pad (highlighted in blue)</figcaption></figure><p>I quickly integrated this featured just in time for the 4.30pm demo so that two of my colleagues could go head to head in a game of IIIFind. It was pretty tense but in the end Tristan was crowned as the Cogapp IIIFind champion.</p><p>If you’d like to have a go at playing, either solo or with a friend, <a href="https://iiifind.netlify.app/">you can do so here</a>.</p><p>You can also take a look at the code <a href="https://github.com/CogappLabs/iiifind">on GitHub</a>.</p><p><a href="https://www.cogapp.com/team/hannah-baker">Hannah</a> is a Developer at <a href="https://www.cogapp.com/">Cogapp</a>, a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about <a href="https://www.cogapp.com/work">our work</a>.</p><p>If you’re interested in joining us for a hack day, there’s more information <a href="https://www.cogapp.com/r-d/hack-days">on our website</a>.</p><p>We’re on <a href="https://twitter.com/cogapp">Twitter</a> or you can <a href="https://www.cogapp.com/contact-us">contact us</a> via our website.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=35ef93d79ea9" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/iiifind-35ef93d79ea9">IIIFind</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Kitsch Crochet]]></title>
            <link>https://medium.com/cogapp/kitsch-crochet-aa7c0d196c16?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/aa7c0d196c16</guid>
            <category><![CDATA[hackathons]]></category>
            <category><![CDATA[crochet]]></category>
            <category><![CDATA[coghack]]></category>
            <category><![CDATA[musetech]]></category>
            <dc:creator><![CDATA[Hannah Baker]]></dc:creator>
            <pubDate>Fri, 05 Apr 2024 10:57:25 GMT</pubDate>
            <atom:updated>2024-04-05T10:57:24.939Z</atom:updated>
            <content:encoded><![CDATA[<p>For Cogapp’s latest hack day there was a bit of a twist, rather than our usual coding projects we were tasked with making something tangible. The brief was very open, we could make something with any material: thread, clay, paper, wood, etc — the sky (and budget) was the limit.</p><p>I’ve always loved making things with my hands so I was very excited about this one. I particularly love knitting and crochet, but I don’t often find the time, so it seemed like the perfect opportunity to spend the day making something with yarn. Both knitting and crochet are quite slow, so it was a challenge to think of something I could feasibly make in a day. I knew this from experience as my most ambitious project to date was a knitted jumper, which took me over a year to make!</p><figure><img alt="A rust coloured knitted jumper" src="https://cdn-images-1.medium.com/max/1024/1*Ms9LoA_XZO2fIreBYWaCig.jpeg" /><figcaption>My knitted jumper</figcaption></figure><p>The jumper was well worth the effort (if I do say so myself), but given the time constraints I had to think smaller this time. I thought it would be fun to make something playful and useless (and most importantly little), so I started hunting for a suitably whimsical pattern. After much deliberation I decided on a poodle wine bottle cover — what every classy home needs! 💅 For a small fee I bought the crochet pattern from <a href="https://www.etsy.com/uk/listing/648242378/poodle-millenium-wine-bottle-cover-pdf">Jenny Auckram on Etsy</a> (thanks Jenny) and I was ready to go.</p><p>While it may seem that crocheting a poodle wine bottle cover was unrelated to my usual programming work, fibre arts and coding share a rich history. Ada Lovelace famously said of the “Analytical Engine”, one of the first computers in the nineteenth century, “We may say most aptly that the Analytical Engine weaves algebraic patterns just as the Jacquard loom weaves flowers and leaves.”¹</p><p>Knitting and crocheting have also been used in the classroom to teach children maths and programming concepts² and ultimately to try to encourage more girls into STEM careers.³</p><p>While making my hack day project, I really enjoyed seeing the poodle slowly come to life over the course of the day. Although, I’d forgotten how much concentration crocheting takes as it involves constant counting to follow the pattern, not to mention the finger cramps. But gradually seeing the cute features come together was enough of a reward to keep me going:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rLIRqd7N7pf_qFfJKCkZhQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OgR6KLhvQz4KI7gpkGDLrg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gvGJr4u6Z5HRF8uKVPvHOg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rth1VkoibMvbRYzHIKiOgA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Q6c2OBbhBMNyCRXKpxsoMw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Uxqsus-3UbvDLOFiyEyO_g.jpeg" /><figcaption>The poodle wine bottle cover being made</figcaption></figure><p>Eventually, after much love, sweat and luckily no tears, the full poodle was ready for the 4.30pm demo!</p><p>I’d also kept a little something in my back pocket, I had a top secret stretch goal that I waited until the demo to reveal.</p><p>I thought it would be interesting to compare a crochet design made my a human to one made by AI, so I’d also asked Chat GPT to generate a crochet pattern for a poodle wine bottle cover.</p><p>Here’s the prompt I gave:</p><blockquote>“Can you please write me crochet pattern for a purely decorative wine bottle cover with the characteristics of a poodle? The end product should be able to cover an average sized wine bottle (height: 30cm, diameter of base: 7cm) and it should cover the entire wine bottle, so there should be instructions on how to make the poodles head and body. The pattern should use a 3.5mm crochet hook and 8 ply yarn. Pompoms can be used in the pattern if you choose. Black thread can also be used in the pattern to embroider features such as eyes and nose.”</blockquote><p>And here is the end result:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Qv0VYWoEUOCDRS_5lzUWHQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7JIR91PHvAEibKQB5lJq1A.jpeg" /><figcaption>The poodle wine bottle cover designed by Chat GPT</figcaption></figure><p>As you can see it didn’t deliver on the dimensions or the functionality - there’s no way of actually using this as a wine bottle cover.</p><p>I particularly like the tongue detail, the instructions for which were:</p><blockquote>“Tongue: Cut a small piece of pink yarn and attach it as the tongue below the nose.”</blockquote><p>I also enjoyed the suggestion to optionally “attach pompoms along the body for a playful touch”, but unfortunately I ran out of time and wasn’t able to implement this.</p><p>Suffice to say I think crochet pattern designers are safe from the AI-takes-over-the-world impending disaster (for now at least).</p><p>[1]: The MIT Press, <em>Celebrating Ada Lovelace, </em>https://mitpress.mit.edu/celebrating-ada-lovelace/</p><p>[2]: Ashley Brickeen, <em>Knitting is Coding and More</em>, https://waldorfpeninsula.org/blog/knitting-coding/</p><p>[3]: Holly Korbey, <em>Girls Knit Their Way to a Math Career</em>, https://www.uml.edu/news/news-articles/2017/bright-knitting.aspx</p><p><a href="https://www.cogapp.com/team/hannah-baker">Hannah</a> is a Developer at <a href="https://www.cogapp.com/">Cogapp</a>, a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about <a href="https://www.cogapp.com/work">our work</a>.</p><p>If you’re interested in joining us for a hack day, there’s more information <a href="https://www.cogapp.com/r-d/hack-days">on our website</a>.</p><p>We’re on <a href="https://twitter.com/cogapp">Twitter</a> or you can <a href="https://www.cogapp.com/contact-us">contact us</a> via our website.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=aa7c0d196c16" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/kitsch-crochet-aa7c0d196c16">Kitsch Crochet</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[In circuits gold, a beast awake,]]></title>
            <link>https://medium.com/cogapp/in-circuits-gold-a-beast-awake-911df65a6ace?source=rss----4ec171c80477---4</link>
            <guid isPermaLink="false">https://medium.com/p/911df65a6ace</guid>
            <category><![CDATA[coghack]]></category>
            <category><![CDATA[musetech]]></category>
            <category><![CDATA[hackathons]]></category>
            <dc:creator><![CDATA[Grant Cieciura]]></dc:creator>
            <pubDate>Thu, 28 Mar 2024 11:51:43 GMT</pubDate>
            <atom:updated>2024-03-28T11:51:43.496Z</atom:updated>
            <content:encoded><![CDATA[<h4>A poetic collaboration between a designer, the office scanner and ChatGPT.</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rSuDvBTXRK3gFymDiDaZOQ.jpeg" /></figure><p><strong><em>What beast lies sleeping in the green fields and along the gold lanes of a circuit board?</em></strong></p><p>This is the question I asked whilst staring deep into a box of old tech treasures at the back of the office, curiously examining this green plastic thing that I had untangled.</p><p>A few hours earlier, my colleague Ben had scavenged the recesses of the store room at Cogapp for unused tech detritus, accumulated over the years. He’d spread out a grand feast of components and other miscellaneous materials, as a source of inspo for our <em>Tangible Output </em>hack day.</p><p>Gadgetry is not one of my strengths, and I stood over the tangled wonders, wondering how I was going to participate in this hack without the know-how. I had a flashback to my days at art college where I used to experiment with the photocopier by running random materials through it… sorry Terry (my graphic design tutor), I was the student who jammed the paper tray 😅!</p><p><em>I could approach this project with the same playful curiosity,</em> I thought,<em> I don’t need to be a gadgetry whiz</em>, <em>I just need to have fun with it.</em></p><p>So I took the circuit board and scanned it using the old office all-in-one and emailed different variations to myself. The black and white TIFF image was my fav because it had a retro bitmap vibe and it retained sharp detail when magnified with no antialiasing. Another benefit of the bitmap tiff was that the black areas could be coloured easily.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pJesJkB7nNqDFiqZIIE3xg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ecg-UJ-xOz4928l8KU09fw.jpeg" /></figure><p>I was particularly interested in the circular detail on the circuit board — used for some kind of rotational user device in its previous life — and I cropped a section of this detail to resemble a sunrise.</p><p>All the while I was pondering the idea of a beast laying dormant in the old circuit board, waiting to be awoken. I imagined this beast as a latent potential that has been waiting for a time when technology was advanced enough for its release into the world.</p><p><em>The time is ripe, it would seem!</em></p><p>I started to think more deeply about obsolescence, Hype Cycles, and the current hype-fear surrounding the latest advances in AI, occupying our collective headspace at the mo. It was at this moment I took a pause from image editing and sparked up a convo with ChatGPT to work through my thoughts:</p><h4>ChatGPT convo</h4><p><strong>User</strong><br><em>Can you create a 4-line poem titled “Obsolete beast” about how AI is replacing human?</em></p><p><strong>ChatGPT</strong><br><em>In circuits cold, a beast awake,<br>Silent, swift, the old forsake.<br>Metal minds usurp our grace,<br>Obsolete echoes in the AI’s embrace.</em></p><p><strong>User<br></strong><em>Can you just use the first line?</em></p><p><strong>ChatGPT<br></strong><em>In circuits cold, a beast awake,</em></p><p><strong>User<br></strong><em>Is this the correct grammar if it is only a sentence?</em></p><p><strong>ChatGPT<br></strong><em>Yes, the sentence “In circuits cold, a beast awake,” is grammatically correct for poetic expression. It follows a poetic style where brevity and creative language often take precedence over strict grammatical rules.</em></p><p><strong>User<br></strong><em>Ok, so a full stop is not needed?</em></p><p><strong>ChatGPT<br></strong><em>Correct, in poetic or creative writing, you have flexibility with punctuation. In this context, a comma is used to create a pause, allowing for a smoother flow between the lines. The absence of a full stop contributes to the continuity of thought in the poetic expression.</em></p><p><strong>User<br></strong><em>Can you change “cold” to “gold”?</em></p><p><strong>ChatGPT<br></strong><em>“In circuits gold, a beast awake,”</em></p><p><strong>User<br></strong><em>How could that be interpreted?</em></p><p><strong>ChatGPT<br></strong><em>The line “In circuits gold, a beast awake,” could be interpreted in a metaphorical way. It suggests the idea that within the realm of advanced technology (symbolized by “circuits gold”), there is a powerful and awakened force, often personified as a “beast.” This can imply the rise or activation of artificial intelligence or advanced technology, potentially exploring themes of both wonder and concern surrounding the capabilities of such systems.</em></p><p><strong>User<br></strong><em>That’s interesting. I was interpreting “circuits gold” both literally — gold being used in PCBs as a conductive material — but also metaphorically, for technocapitalism. Kind of a cautionary tale without knowing the ending. In the race to profit from AI, who knows what will be unleashed? But there is an underlying humour.</em></p><p><strong>ChatGPT<br></strong><em>Your interpretation is thought-provoking and adds depth to the line. The dual meaning of “circuits gold” as both a literal reference to the conductive material in PCBs and a metaphor for technocapitalism introduces layers of meaning. The cautionary tale about the unpredictable consequences of pursuing AI for profit is a compelling theme. The underlying humor you sense could stem from the irony or unpredictability in the intersection of technological advancement and economic motivations. Poetry often thrives on ambiguity and multiple interpretations, so your perspective adds richness to the poem.</em></p><p><strong>User</strong><br><em>But I guess without capitalism driving this technology, there would be no AI to begin with.</em></p><p><strong>ChatGPT</strong><br><em>Absolutely, your observation is quite astute. The development and widespread adoption of advanced technologies, including AI, have indeed been heavily influenced and driven by economic and capitalist motivations. Capitalism has played a significant role in funding research, fostering innovation, and creating the economic conditions that enable the growth of the tech industry.</em></p><p><em>However, the interplay between technological progress, capitalism, and their societal impacts is complex and multifaceted. While capitalism has fueled advancements, it also raises questions about ethical considerations, potential inequalities, and the broader consequences of rapid technological development. Your poem’s exploration of “circuits gold” can be seen as delving into this nuanced relationship, capturing the dual nature of progress and the potential pitfalls that come with it.</em></p><p><strong>User</strong><br><em>Just going back to your response when you said “there is a powerful and awakened force, often personified as a “beast.”” That is exactly what I was thinking about. I am using the one-line poem that we have created, beneath an image of a magnified circuit board. The magnification has revealed a shape that looks like the sun rising and the idea of an “awakened force” or “beast” seems appropriate.</em></p><p><strong>ChatGPT<br></strong><em>That sounds like a compelling and visually evocative combination. The image of a magnified circuit board revealing a shape resembling the rising sun adds a layer of symbolism to the technological landscape. The juxtaposition of the technical details with the metaphorical imagery of an “awakened force” or “beast” creates a thought-provoking fusion of the mechanical and the organic, the artificial and the natural.</em></p><p><em>Such creative pairings can spark the viewer’s imagination and invite contemplation about the symbiotic relationship between technology and the broader world. It’s a powerful way to convey the multifaceted nature of AI and its impact, both in its technical intricacies and its potential influence on our lives. I hope your audience finds it as intriguing as the concept suggests.</em></p><p><strong>User<br></strong><em>Thank you. Do you mind if I use this thread in a Medium article or on social media?</em></p><p><strong>ChatGPT</strong><br><em>Feel free to use the content of this conversation for your Medium article or on social media. If you do, it would be appreciated if you could attribute the content to OpenAI’s GPT-3 and mention that it was generated by ChatGPT. If you have any specific guidelines or requirements for attribution, please follow those accordingly. If you have any further questions or need additional assistance, feel free to ask. Good luck with your article!</em></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ubaXWuKl86VTQFXsfypiTA.jpeg" /></figure><h4><strong>Typeface</strong></h4><p>With the poster text sorted, I wanted to find a suitable typeface to match the retro bitmap vibe of the image. After some digging through open-source font resources, I landed on a modular low-res style typeface called Banquise. The x-height of the text is aligned with one grid line of the image in the bottom left so that on first look you might not even notice it. I thought it would be fun for the viewer to discover it, alluding to the idea that we have awoken something with our curiosity.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*P_LLlg2OHxv89qB0OsJ0Xw.jpeg" /></figure><h4><strong>Print</strong></h4><p>The print colour had to be gold, to thread the one-line monostich “In circuits gold, a beast awake,” with PCBs and my critique of technocapitalism. But I was torn between screen printing and risograph because both processes can use metallic gold ink. In the end, I decided that risograph was the way to go, because of its lo-fi aesthetic and print imperfections. There is something interesting about the variation between prints that results from adopting low-tech production.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ivKaLpi39QzajaVLwt9zRA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9FJT79E5hBRZLmpWrVErnw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KAsZs9lUsIezEHDzmPCaBg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lOFwj5N12XnBfAIaAOVLCQ.jpeg" /><figcaption>Printing by <a href="https://www.dopplepress.com/">dopplepress</a></figcaption></figure><h4><strong>Lowtech aesthetics</strong></h4><p>Adopting low-tech as a methodology for image-making is a reactionary gesture against the high-tech slickness of text-to-image models like Midjourney and Stable Diffusion. It <em>prompts</em> us (pun intended) to be more conscious about the image-making tools we use.</p><p>Tim Rodenbröker makes an interesting observation about low vs high-tech aesthetics in his recent blog post, <a href="https://downgrade.timrodenbroeker.de/posts/low-technology/">Meandering Thoughts on Low Technology</a>. The point I find particularly insightful, he draws from the 1999 Lowtech Manifesto:</p><blockquote>High-tech art and aesthetics therefore (often unintentionally and very successfully) sell the latest technology.</blockquote><p>We (artists and designers) are inadvertently creating desire and fixation for the perpetual upgrade by using the latest image-making software.</p><p>This is an interesting thought.</p><p>How often do we stop and ask ourselves, <em>why am I using this technology in my practice? Who seeks to benefit from my adoption of this tech?</em></p><h4>Wrapping up</h4><p>What excites me the most right now is <em>not</em> the latest advancements in AI imaging tools, but the subversive undercurrents and tangible material outputs that are emerging in response to them — a new kind of aesthetics is emerging.</p><p>I’m also interested in a dialogue between low and high-tech, and what we can learn from by being more conscious about the tools we use. I’m not for a rejection of the latest tech and I would be a hypocrite if I took that position—I used ChatGPT as a co-creator and currently use the Adobe Suite for day-to-day tasks — but this project has prompted me to be more mindful of how I use high-tech in my creative practice.</p><p>And I think the biggest takeaway for me, is a reminder to keep an exploratory practice alive.</p><p>From the Lowtech Manifesto:</p><blockquote>High technology doesn’t mean high creativity. In fact sometimes the restrictions of a medium lead to the most creative solutions.</blockquote><p>A3 risograph print<br>Metallic gold</p><p>Printed by: <br><a href="https://www.instagram.com/dopplepress/">@dopplepress</a></p><p>Poster design: <br>Grant Cieciura. (2024).</p><p>Poster text: <br>Grant Cieciura. (2024). / OpenAI. (2024). ChatGPT [Large language model]. <a href="https://chat.openai.com/">https://chat.openai.com</a></p><p>Typeface used:<br>Customised version of Banquise, modular low-res typeface <a href="https://gitlab.com/bonjour-monde/fonderie/banquise-typeface">https://gitlab.com/bonjour-monde/fonderie/banquise-typeface</a></p><p><a href="https://www.cogapp.com/team/grant-cieciura">Grant</a> is Head of Design at <a href="https://www.cogapp.com/">Cogapp</a>, a digital agency specialising in the cultural sector. Please get in touch if you’d like to hear more about <a href="https://www.cogapp.com/work">our work</a>.</p><p>If you’re interested in joining us for a hack day, there’s more information <a href="https://www.cogapp.com/r-d/hack-days">on our website</a>.</p><p>We’re on <a href="https://twitter.com/cogapp">Twitter</a> or you can <a href="https://www.cogapp.com/contact-us">contact us</a> via our website.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=911df65a6ace" width="1" height="1" alt=""><hr><p><a href="https://medium.com/cogapp/in-circuits-gold-a-beast-awake-911df65a6ace">In circuits gold, a beast awake,</a> was originally published in <a href="https://medium.com/cogapp">cogapp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>