Tutorial for rendering a sunset on a canvas

Paint a vibrant sunset with hot air balloons over the water and a small tulip field in the foreground. There are so many bright cheerful colors in this painting! Materials Download This Tutorial Download an offline, ad-free version of this tutorial complete with bonus traceables. This download bundle is now …

Tutorial for rendering a sunset on a canvas

The aim of this app is to demonstrate the relationship between geographic location and solar position throughout the year. You can use the map to drag the location around and interactively see how the Sun-path diagram and shadow projections change. You can also directly relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections.

This started out as an experiment to see just how responsive I could make the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL. I’m actually quite stunned as, even before any optimisation whatsoever, I found that I could build and rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7 processor, but it meant that the core technologies were not going to be the kind of bottleneck that I thought they’d be.

As it turned out, there was scope for some pretty fundamental optimisations, so now it’s even quick enough on an iPad as well as most of my old Android tablets.

SVG and WebGL

The marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be a pretty happy one. The core ideas when working in both are actually pretty similar – building up a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and SVG elements respectively). Any complex calculations in Javascript need only be done once to build up each visual component, or to rebuild if it physically changes. The actual rendering of that cached element is then done by a much faster lower-level process (OpenGL/GPU and the SVG engine respectively).

Optimsation Potential

Thus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usually requires a full redraw of all chart components, each being re-described and/or re-generated in your own Javascript code. If any components require complex calculation or involve detailed curves, you have to devise your own caching system as this all has to be redone for every redraw.

With SVG charts, you only need to re-describe and/or re-generate those components that actually change on each redraw. All other previously defined components are automatically re-rendered by the SVG engine, which is a core part of the browser itself (running as native code) so is significantly faster than working in Javascript.

Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

Rotation: Drag with the left/right button or a single finger ,
or use the arrow keys. Panning: Drag with the middle button or two/three fingers ,
or use the A and D keys. Zooming: Use the scroll wheel or pinch with two fingers ,
or use the W and S keys.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Tutorial: AKVIS ArtWork

The author of this tutorial is Margaret Pilc-Adamowska (Poland). We have already published the Margaret’s tutorial “City by Water“. Read her new story:

This time we worked on interior design. I wanted to add some nice images to my portfolio. The renderings created in Revit looked stiff and unpleasant, so I decided to replace them with hand drawings and to save time used the superb software AKVIS ArtWork.

Step 1. The original image of the kitchen was designed in Autodesk Revit Architecture:



Modelling

After rendering in Revit, and some lightness correction in Revit:



Lightness Correction



AKVIS ArtWork Window



Two Girls Were Pasted



Use Canvas



Result (click on the painting to see it in full size)



ArtWork v. 14.0 – Free 10-day Trial











Subjects





My name is Tracie Kiernan, artist and creator of Step By Step Painting, LLC. I am a self taught painter, a certified Elementary Art Teacher and have taught visual arts to all ages for over ten years. I have a profound passion for the arts and art education and I LOVE designing all of these painting tutorials!!

Amazon Affiliate

Tracie Kiernan is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

© 2023 Step By Step Painting With Tracie Kiernan, All Rights Reserved. Tutorials on this website are to be used for PERSONAL USE. Selling individual paintings is okay! If you are using these for paint party business, please see info about one-time use license or joining small business membership for licensing. For all other inquiries please see FAQ.