Graphics question

tim50

Hi, I'm new to this. I'm trying to bend my mind around vector and raster (bitmap) graphics. Which one does P5.js use? Is there a good beginner book on the subject? Which graphic type would be best for an evolving game where I start with quality graphics space invaders hoping to evolve to a flying ship and evolve further and further along to who knows where, but to start I need aliens, ship, bunkers, missiles... also of course I need to move them all around... Is there a good book, one perhaps that includes P5, that you could recommend? I hope that was clear. thanks so much..

jeremydouglass

A default p5.js sketch draws in 2D with the P2D renderer:

In p5.js, there are two render modes: P2D (default renderer) and WEBGL. Both render modes utilize the html canvas element, however by enabling the WEBGL "context" on the canvas, we can now draw in both 2D and 3D. -- https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5

The P2D renderer is OpenGL-based:

The P2D renderer is an alternative 2D renderer that is substantially faster than the default renderer for most tasks, but it sacrifices some visual quality for speed. Both P2D and P3D utilize a software specification called OpenGL that is supported on many GPUs (the Graphics Processing Unit on a computer’s graphics card) to accelerate drawing. The visual quality of the OpenGL renderers, P2D and P3D, can be adjusted with the smooth() and hint() functions. -- https://processing.org/tutorials/rendering/

OpenGL is a rasterizer. More generally, Processing uses a raster paradigm -- you can define things using various vector paradigms (e.g. drawing with line()) but objects for image assets such as p5.Image (or PImage in Processing) also store arrays of pixels data.

• https://p5js.org/reference/#/p5.Image

In Processing (not p5.js) there is built-in support for import of SVG files, and the alternative vector approach is to store all vertex and shape information in PShape objects. p5.js supports a subset of these shape commands like curve() and vertex(). Still, keep in mind that anything that is actually drawn to the sketch screen -- including a PShape -- is always rasterized, and then accessible as an array of pixel data with get() or pixels[].

kfrajer

How confident do you feel when moving objects around your canvas? How much experience do you have working with classes and OOP? Are you familiar with the objects and transformation tutorials offered in the processing site? (I think they are also available in the P5.js site)

Working in p5.js, I recommend the shiffman's videos as they are really good introduction for programming concepts and he also explains good challenges by video. He has a book that might be a bit off topic related to your question but good to consider as a side and for deeper understanding of coding practices: http://natureofcode.com/ and here is a link to his examples https://github.com/shiffman/The-Nature-of-Code-Examples

Kf