• QuestionGame Lab

  • Is it possible to efficiently draw gradients without using sprites or images?

Well at a glance, I tried using drawingContext.createLinearGradient, but it turns out that for some reason code.org won't render the gradient when I run:

function draw() {
  var gradient = drawingContext.createLinearGradient(20-360, 20-360, 360+360, 360+360);
  gradient.addColorStop(0, "blue");
  gradient.addColorStop(1, "red");
  drawingContext.fillStyle = gradient;
  drawingContext.fillRect(20, 20, 360, 360);
}

Perhaps my first attempt will be of some use to you.

    DragonFireGames in addition I'd recommend caching the surface with some vector graphics especially if it's going to be a static gradient CDO very much prefers image rendering over any draw calls and being able to customize it on the fly makes it very easy to change it if neccessary

      ackvonhuelio Since projects on CDO are always at risk of being deleted, I like to save local backups that I can easily paste into a blank project. But since it's a hassle to re-add every single sprite and I can't figure out adding images through URLs for the life of me, I prefer to use shapes and text.

          [WUT] Adam but vector graphics are different..... since you use draw calls to create it and the program treats it like an image which is way more effective i can show an example if you don't believe me

              [WUT] Adam Additionally if you plan on using images from other sites simply use loadImage for the setup

              var img;
// this loads all assest asynchronously before the draw call starts it's pretty useful since CDO doesn't have to much control over this
// also there's a way to load in animations externally too, though that's a bit more work
function preload() {
 img = loadImage("path to image")
}
function setup() {

}
function draw() {
 image(img, x, y)
}
                  5 months later

                  I made some code for a gradient drawer a while back.
                  No images or sprites!

                  //code
for(var i = 0; i < 400; i++) {
stroke(rgb(127,i/1.568627450980392*1.5,(i/1.568627450980392*1.5)/2));
line(0,i,400,i);
}

                  Note: the large decimal number is the ratio 255:400 and is used for effective gradients

                    That’s still slower than storing the gradient to a buffer and drawing it when needed. Images are needed to reduce lag.

                    Awards

                    • â’¸ 0.1 from Varrience
                      Comment: this is true, I'm with dragon on that

                    Chat