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

[WUT] Adam

I know it's possible to draw gradients like this:

noStroke();
for (var i = 0; i <= 400; i++) {
  stroke("dodgerblue");
  line(i, 0, i, 400);
  stroke("magenta");
  line(i, 400, i+1, 0);
}

...but that's wildly inefficient. Is there a more efficient way to draw gradients? Like, with a specific built-in function, perhaps?

Binary_Coder

[WUT] Adam I've been wondering the exact same thing. Game Lab hates long for loops so the frame rate will plummet for gradients like this.

There is a workaround though with using larger shapes and smaller loops. Here's an example from KA that I got working in Game Lab:

var horizon = 290;
var sky1 = rgb(0, 0, 100);
var sky2 = rgb(150, 0, 70);

function draw() {
  background(rgb(255, 255, 255));
  for (var y = 0 ; y < horizon ; y+=4) {
    noStroke();
    fill(lerpColor(sky1, sky2, y / horizon));
    rect(0, y, 400, 4);
  }
  text("FPS: " + Math.round(World.frameRate), 0, 15); // 30 frames per second!
}

This program uses larger shapes to reduce the number of loops, and that seems to fix any lag issues.

ackvonhuelio

[WUT] Adam
you said without images but using get() is the solution here...

ackvonhuelio

[WUT] Adam
still don't understand what adam has against images

DragonFireGames

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.

Varrience

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

[WUT] Adam

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.

Varrience

[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

Varrience Sorry, I didn't read your post before replying.

Varrience

[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)
}

DragonFireGames

Varrience https://imgbb.com/ is a great one to use for hosting images. After dragging, just click "copy image address" and use that url in the loadImage function.

DragonFireGames

After an hour or so, I developed a simple thing for all your gradient needs:
https://studio.code.org/projects/gamelab/prA3iibnYXDFHL5Jl9SlA6NlkkjP0K6mcB-Uk2RuMcs/view
I will probably add this to FGUI.

Also, it does use images but whatever, images are the best way to do it.

SquirrelGuy-5

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

SquirrelGuy-5

SquirrelGuy-5 The code above yields dis result:

DragonFireGames

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