In December, Galeryst launched something new, Creative Coding, an add-on for Adobe Express that allows anyone to create graphics in Adobe Express with a block-based coding tool. Adobe Express is an easy-to-use web-based design tool that can help you create anything from a flyer to an Instagram post, from a website to a video. If you have a gallery on Galeryst, you can easily access it in Adobe Express to get images of your gallery and artwork in it using the Galeryst add-on for Adobe Express.

Creative Coding runs inside of Adobe Express and provides blocks (built with Google’s Blockly toolkit) that represent many of the visual elements and operations that you can do within the graphical canvas of Adobe Express. 

In addition to blocks specific to Adobe Express and general programming concepts, we have added a category of blocks to access imagery and artwork details from galleries on Galeryst.  This would enable you to create a catalog of artwork, a series of Instagram posts highlighting your artwork in your gallery, or any sort of graphics for your artwork that you are displaying in Galeryst.   

Here is a simple example of how you might start coding a page that lists all the artwork in your gallery:

Though Creative Coding is meant for beginner programmers, it creates JavaScript code that could be used directly in building an Adobe Express add-on. With a guided learning plan (with a printable certificate created at completion) and lots of help content we wanted to make something that can be used in classroom, at home, or by anyone who wants to learn how to code with graphics.  We released it for free to enable the next generation of creative technologists with the super-power of coding and hope you give it a try or share it with someone who might want to learn programming.

try Creative Coding today

Galeryst sits at an interesting intersection of creativity and technology, allowing anyone to create a virtual 3D gallery to share their artwork and it is enabled by code, the “paintbrush” of software. As the creator of Galeryst, I have always been interested in that intersection as a creative medium. Over the past year a new creative platform has emerged that I have gotten very excited about, Adobe Express. Adobe Express is an easy to use web-based design tool that will help you create anything from a flyer, an Instagram post, a website, to a video to upload to YouTube. What excites me about it is that it is extensible in a number of ways: you can embed the editing tools in your own website and you can create powerful add-ons that run inside Adobe Express and can be used to create and manipulate graphics. I have used this platform to create Galeryst, a free add-on for Adobe Express that enables you to use the artwork in your gallery in an Adobe Express design as well as create galleries from your Adobe Express artwork. Since releasing this add-on earlier this year, it has brought many people to Galeryst.com to create galleries which is super exciting for me because I get inspired by seeing the artwork that people showcase in their galleries.

In building the add-on, I started seeing how powerful the Adobe Express platform was and had an idea – what if I could make it easy for people of all ages to learn coding by creating graphics in Adobe Express? I started experimenting and came up with a plan to use Google’s Blockly toolkit to create an Adobe Express add-on that turns the Adobe Express JavaScript Document Sandbox API into blocks that anyone can connect together to make code that runs in Adobe Express. With that plan, I got a small grant from the Adobe Fund for Design that enabled me to design, build, and release Creative Coding. If you hadn’t heard the term Creative Coding before, it is a type of computer programming that focuses on creating something expressive rather than functional. Creative Coding is free for anyone using Adobe Express (which is also free) and runs in a browser on Microsoft Windows and Apple Mac devices.

If I look back at what got me started with computers when I was a kid, it was creating graphics on the screen of a Tandy TRS-80 computer by learning and typing in BASIC code in school. I built Creative Coding and released it for free to enable the next generation of creative technologists with the super-power of coding with graphics.

Creating a code script in Creative Coding is easy – drag blocks from the library on the left to the workspace and connect them together.

This action will then create the following code which you see to the right of the workspace that can then be executed to create a rectangle on the current page in Adobe Express.

if (phase == "ui") {
  ui.setExecuteLabel("Run script");

  resolve();
  return;
}

editor.context.insertionParent.children.append((()=>{
  const node =  editor.createRectangle();

  node.width = 200;
  node.height = 100;

  return node;
})());

In addition to the standard Adobe Express elements like line, rectangle, ellipse, path, group, image, and text, you can also use variables, loops, functionals, and create UI for the user.

I have also added blocks to enable you to get images from galleries hosted on Galeryst.

Within Creative Coding there is an online help, a series of progress steps and even a certificate printed at the completion of the progress steps so it can be used as part of in-class or home-study programs. If you are an educator, please give it a try and reach out if you have any ideas, feedback, or are interested in using it in your class or school.

Try Creative Coding Today