[WUT] AdamLvl 13I 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_CoderLvl 2[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.
ackvonhuelioLvl 41[WUT] Adam
you said without images but using get() is the solution here...
DragonFireGamesLvl 11Well 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.
VarrienceLvl 25DragonFireGames 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
ackvonhuelioLvl 41[WUT] Adam
still don't understand what adam has against images
[WUT] AdamLvl 13ackvonhuelio 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.
VarrienceLvl 25[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] AdamLvl 13Varrience Sorry, I didn't read your post before replying.
VarrienceLvl 25[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)
}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.
DragonFireGamesLvl 11After 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.
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 The code above yields dis result:
DragonFireGamesLvl 11That’s still slower than storing the gradient to a buffer and drawing it when needed. Images are needed to reduce lag.
Varrience