DEV Community: Dennis Wueppelmann

Submitting my Creative Coding Workbench to the DO Hackathon

Dennis Wueppelmann — Tue, 05 Jan 2021 22:57:00 +0000

What I built

A small website/tool centered around the HTML Canvas. The workbench assists you in creating generative art with JavaScript by exposing the drawings settings to the UI.

Category Submission:

Built for Business

App Link

Play around with the live version on workbench.generativepieces.com.

Screenshots

Description

Ever wanted to create a digitial art sketch?
This workbench is aimed to support you in your creative work on the HTML Canvas.

Write a function that draws on the canvas. Create a settings object which will automatically be exposed to the UI. Use the function template and add your own settings interfaces to make your development easier. Add your coded sketch to the workbench and view a visualisation. Change the settings in the UI and see the result instantly. Tweak it to your liking and download it when you are finished.

Current Features

drawing function tied to the canvas
apply settings automatically from the UI
export drawing as png with a set resolution
export settings as JSON
load settings from JSON
In-browser code editor in the development environment
start/stop canvas animation
set animations fps

Link to Source Code

All source code is available on GitHub.

Permissive License

MIT

Background

While I was gathering inspiration for a personal portfolio most of the really experimentive websites had one thing in common. They all were 'Creative Developer', 'Creative Designer' or something along these lines. So I wanted to know what this is all about and whatched two TED talks that really inspired me to start with something called 'Generative Art'. So I built my first small sketches and wanted a little more support from a self written environment. And exactly this was my project for the Hackathon.

How I built it

A live version of the current workbench is hosted on the App Platform. The latest version is always deployed from GitHub. It was my first time working with one of Digital Ocean’s services. I really liked the smooth and easy setup of a new hosted repository on the App Platform. This will not be the last time I used this simple platform. I also played around with the 'DO Space' as a file storage solution but apparently I did not have enough time to implement it in my project. But in a future version I will definitly add a bucket and a database to the workbench.

For the coding part I learned a lot. I did write tutorials about the things worth sharing in my article series for the Hackathon. But I also used Sapper for the second time and found new things about the framework and have to say it was a huge overkill for the workbench as it is. And of course I learned to build the art sketches which are currently used in the workbench. Last thing I picked up was blogging. The Hackathon motivated me to publish my first articles and I really like it. I thought about starting to write earlier and was glad the Hackathon gave me a reason to do it. Writing will be something I plan on keep doing in 2021.

Additional Info

I plan to use the Creative Coding Workbench to share my work. It is able to generate art sketches that can be printed on clothing, mugs, pillows or wall art. My next project will be little webshop where you can use a smaller version of the workbench to generate a unique design and purchase it on your item of choice. So each customer will get a unique product delivered.

View the store on generativepieces.com.

Thank you for reading this far. I hope you enjoy my project as much as I enjoyed building it and writing about it. Stay tuned for new articles of my next projects.

Set FPS and toggle your animation with requestAnimationFrame()

Dennis Wueppelmann — Sun, 03 Jan 2021 20:21:37 +0000

Did you know you can build your own animations and toggle them with JS?

In this article I want to share a little codepen that shows how you can control an animation. The object we will animate is a small drawing on the HTML Canvas. The tool to animate something manually is the requestAnimationFrame method. This function will execute a callback function every x times per second matching your monitors refresh rate. The method returns an ID which can be used to stop the animation:

const animationId = window.requestAnimationFrame(animate);
// ...
window.cancelAnimationFrame(animationId);

One important thing to know is that you have to call the requestAnimationFrame Method inside of your callback function. But that's basically all the magic on how to build your own animation.
If you want to use a custom frame per second count for your animation there is a simple solution. You have to only call the requestAnimationFrame if enough time has passed since the last animation.

Enough theory here is the codepen where you can see it in action:

The animation draws lines on the canvas in a circle and will stop if the lines reach 3/4 of of the circle. In the settings the animation is set to a specific FPS count aswell.

Examples with 10, 30 and 60 FPS:

Please note there are multiple ways to measure the passed time for your FPS. E.g. you could use the performance api or you could use the passed timestamp of the requestAnimationFrame function. I just used a simple solution which is by far not the best.

Creative Coding Workbench

This article is part of my progress for the Digital Ocean Hackathon Project 'Creative Coding Workbench':

Used features:

~~draw sketch on HTML canvas~~
~~expose sketch settings to UI~~
~~export sketch for print~~
~~toggle sketch animation~~

Used Technologies:

Sapper
Digitial Ocean App Platform

I decided to end my project with this set of features. The next article will be my submission to the Hackathon. Stay tuned for this article as I will describe my full project and the future plans with this little tool.

Automated settings panel with the JavaScript typeof operator

Dennis Wueppelmann — Tue, 29 Dec 2020 12:24:12 +0000

To expose JavaScript variables to the UI I came up with a quick automated solution. With a combination of JavaScripts typeof operator, Svelte and the HTML Input tag I was able to auto generate a settings panel for primitive data types.

How?

Let's say we have a settings object like this:

const settings: {
  amount: number,
  lengthScale: number,
  lineWidth: number,
  randomColors: boolean
}

Which controls the settings for the following drawing:

This drawing is displayed in the parent component. To edit and display the settings object we build a child component in Svelte named 'SettingsPanel' wich receives the settings as parameter. In the component we then use Sveltes '#each' operator to iterate over the settings keys.

<script lang="ts">
  export let settings;
</script>

<div class="panel-container">
  {#each Object.keys(settings) as key}
    <div class="panel-item">
      {key}: {settings[key]}
    </div>
  {/each}
</div>

This will only result in a list of the settings so let's map an input field to the settings type. To do this we use the typeof operator:

<div class="panel-item">
  <label for={key}>{key}:</label>
  {#if typeof settings[key] === 'boolean'}
    <input type="checkbox" bind:checked={settings[key]} id={key} />
  {:else if typeof settings[key] === 'number'}
    <input type="number" bind:value={settings[key]} id={key} />
  {:else}
    <input type="text" bind:value={settings[key]} id={key} />
  {/if}
</div>

If you want the parent component to react on the changed settings you can simply emit an event on the click of a button:

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  function apply() {
    dispatch("apply");
  }

  export let settings;
</script>
<!-- ... -->
<button on:click={apply}>apply</button>

Some styles could be added to the panel to make it look a bit better. Notice how the 'input[type="number"]' selector is used to style only the specified inputs:

.panel-container {
  justify-content: space-between;
  border-radius: 10px 0 0 10px;
}
.panel-item {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
}
button {
  margin-bottom: 0.5rem;
  background-color: #fff;
  color: #333;
  border-color: #fff;
  border-style: solid;
  border-radius: 5px;
  padding: 0.5rem;
  text-transform: uppercase;
}
h3 {
  text-decoration: underline;
}
input[type="number"] {
  background: #666;
  color: #fff;
  border-color: #fff;
  border-style: solid;
  border-radius: 5px;
  padding-left: 0.5rem;
}
input[type="text"] {
  background: #666;
  color: #fff;
  border-color: #fff;
  border-style: solid;
  border-radius: 5px;
  padding-left: 0.5rem;
}

As a last step we import the SettingsPanel Component in the parent component, pass in the settings and react on an emitted event.

<script lang="ts">
  import SettingsPanel from "../components/SettingsPanel.svelte";
  const settings: {
    amount: number,
    lengthScale: number,
    lineWidth: number,
    randomColors: boolean
  };
  function apply() {
    // do something with new settings
    }
</script>
<SettingsPanel {settings} on:apply={apply} />

And there we have it. A simple automated settings panel for JS primitives with Svelte.

Creative Coding Workbench

This article is part of my progress for the Digital Ocean Hackathon Project 'Creative Coding Workbench':

Used features:

~~draw sketch on HTML canvas~~
~~expose sketch settings to UI~~
~~export sketch for print~~
toggle sketch animation
save sketch to a library
load sketch from a library
edit sketch from a library
...

Used Technologies:

Sapper
Digitial Ocean App Platform
...

Stay tuned for updates on this project as there will be posts for each part of it.

Export the HTML Canvas as print optimized file

Dennis Wueppelmann — Sat, 26 Dec 2020 11:09:01 +0000

Drawing things that result in an art sketches on the HTML Canvas is fun but how do you export them? For a quick export it's fine to right click on the canvas and save it. The file will have a set resolution wich is the same as your canvas resolution. If you want to print your canvas content in a professional way you will need a much higher resolution and usually a fixed width/height. In this article I will show you how to configure your canvas to export a high dpi image optimized for printing.

How?

First thing we need is a reference to the canvas in our JS code and the 2D context of our canvas.

const cvs = document.getElementById("drawing");
const ctx = cvs.getContext("2d");
const dpr = window.devicePixelRatio;

Printers use the measurement DPI wich stands for dots per inch. The canvas is based on pixels so there must be a conversion between these two. Let's say I want my canvas content printed on a 2 inch by 2 inch piece with a resolution of 300 dpi. In this case my real canvas width/height must be 300*2 pixel:

const dpi = 300;
let width = 2;
let height = 2;
cvs.width = width * dpi * dpr;
cvs.height = height * dpi * dpr;
ctx.scale(dpr, dpr);

As you see there is a third constant multiplied with our canvas size, the device pixel ratio. It is the device specific ratio of physical pixel per pixel calculated by your website. Read more here We also need to scale the context to this ratio to make it look crisp.
The last step for the canvas setup is to scale it with css so it fits the screen. By doing this it will keep the set resolution but will appear smaller on the screen.

canvas {
  width: 600px;
  height: 600px;
}

And that's it. If you now right click on the canvas and save it you can see the generated image has the defined size optimized for print.
Instead of a right click to download the image the canvas has a 'toDataURL' Function wich we can use to download the image with code. The generated DataURL can be added to an anchor tag to start the download:

function download() {
  const downloadUrl = cvs.toDataURL();
  const a = document.createElement("a");
  a.href = downloadUrl;
  a.setAttribute("download", "SketchDownload");
  a.click();
}

Simply link the function to a button and we can export a HTML canvas with a specific size on the click of a button.

Creative Coding Workbench

This article is part of my progress for the Digital Ocean Hackathon Project 'Creative Coding Workbench'.

Features:

~~draw sketch on HTML canvas~~
~~export sketch for print~~
expose sketch settings to UI
toggle sketch animation
save sketch to a library
load sketch from a library
edit sketch from a library
...

Technologies:

Sapper
Digitial Ocean App Platform
...

Stay tuned for updates on this project as there will be posts for each part of it.

Intro to the Creative Coding Workbench

Dennis Wueppelmann — Thu, 24 Dec 2020 12:02:22 +0000

My holidays have started and so have my two weeks time for the Digital Ocean Hackathon. Hackathons are always fun and force me to start and finish a new project in a fixed timebox. I am glad this one was announced because in the last few weeks a topic really got me interested: Generative Art and Creative Coding.

The topic

Basicly it's about creating art sketches with the use of code, creativity and a bit of randomness. One creation of mine is this random combination of triangles:

If you want to get a quick introduction to generative art the talk generative art speedrun is a great way to start. On the speakers website you can find a few tutorials and a podcast aswell. A second (extraordinary) ressource is the Coding Train.

The idea

So while I was exploring art generated by code I said to myself: 'When I go down this rabbit hole I will need a toolbox that helps me to work on art sketches'. My plan for the next weeks is to develop exactly this. In my day job I usually build innovative web based applications therefore my platform of choice to paint my sketches will be the HTML Canvas. I tried out the p5.js Framework and while it is super easy to getting started with this abstraction layer I am not really satisfied by it. For the next weeks I will center my work around the plain HTML Canvas to explore how everything works on the most basic layer.

The tech

Recently I discovered the Framework Svelte/Sapper and it it's really easy to work with. Maybe Sapper will be a little overkill for this project but I will choose it anyway. Of course the project will be hosted on the Digital Ocean App Platform. The currently planned features for my 'Creative Coding Workbench' are the following.

Planned features:

draw sketch on HTML canvas
expose sketch settings to UI
export sketch (print?)
toggle sketch animation
save sketch to a library
load sketch from a library
edit sketch from a library
...

Planned Technologies:

Sapper
Digitial Ocean App Platform
...

There is already a little Mock-Up created in Figma which shows how it should look like in the end:

I am sure while I am working on it there will be more ideas for features and new integrations.

Stay tuned for updates on this project as there will be posts for each part of it.