Drawing w/ JavaScript


#1

If I were on any other JavaScript editor, the following code would work. However, for whatever reason, certain drawing commands do not work on Codecademy. I'm just curious as to the reason and if there might be a chance that drawing will be implemented in the future on this site.

var Cambria = ("Cambria", 15)
var x = 10;
var y = 25;
noStroke();
textFont(Cambria, 15);
fill(0, 0, 255);
text("Print Page", x, y);

var drawPopUp = function () {
    //Pop Up Box
    fill(0, 0, 0);
    rect(37.5, 100, 325, 175);
    
    //Exit Button
    var Button = function(config) {
        this.x = config.x || 0;
        this.y = config.y || 0;
        this.width = config.width || 25;
        this.height = config.height || 25;
        this.label = config.label || "Click";
    };
    Button.prototype.draw = function() {
        fill(125, 125, 125);
        rect(this.x, this.y, this.width, this.height, 5);
        fill(255, 255, 255);
        var Arial = createFont("Arial",12);
        textFont(Arial, 12);
        textSize(30);
        textAlign(CENTER, CENTER);
        text(this.label, this.x+13, this.y+this.height/2.5);
    };
    Button.prototype.isMouseInside = function() {
        return mouseX > this.x &&
               mouseX < (this.x + this.width) &&
               mouseY > this.y &&
               mouseY < (this.y + this.height);
};
    var btn1 = new Button({
        x: 337.5,
        y: 100,
        label: "x"
    });
    btn1.draw();
    mouseClicked = function() {
        if (btn1.isMouseInside()) {
            Program.restart();
        }   
    };
};
var printPage = function () {
    mouseClicked = function () {
        if (mouseX <= 90) {
            if (mouseY <= 30) {
                drawPopUp();
                fill(255, 255, 255);
                textFont(Cambria, 16);
                text("This feature has not yet been implemented.", 200, 175);
            } else if (mouseY === 30) {
                drawPopUp();
                fill(255, 255, 255);
                textFont(Cambria, 16);
                text("This feature has not yet been implemented.", 200, 175);
            } else if (mouseY >= 30) {}
            else {
                drawPopUp();
                fill(255, 255, 255);
                textFont(Cambria, 30);
                text("Error!", 200, 175);
            }
        } else if (mouseX > 90) {
            if (mouseY >= 30) {}
            else if (mouseY <= 30) {}
            else if (mouseY === 30) {}
            else {
                drawPopUp();
                fill(255, 255, 255);
                textFont(Cambria, 30);
                text("Error!", 200, 175);
            }
        } else {
            drawPopUp();
            fill(255, 255, 255);
            textFont(Cambria, 30);
            text("Error!", 200, 175);
        }
    };
};

printPage();

Here is a working example


#3

i can't run the code on khan? if i put it in a bin, and i get an error


#4

That is weird... I wonder where Khan is getting their drawing commands from then?


#6

i don't know, i am afraid you need to debug that code


#7

I figured it out... Khan Academy uses ProcessingJS. Something that is not supported on Codecademy.


#8

you might be able to include it.


#9

How would I do that? I'm unfamiliar with importing JavaScript libraries.


#10

simply find the js file somewhere online, like here and use it as value for src attribute


#11

So like this?

<script src="https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>

I mean, I tried that and It didn't work. I would check the syntax for src, but I'm lazy, I don't know what I'm doing wrong...


#12

Yes.


#14

Here is a link to my codebit, maybe you can tell me what I'm doing wrong.


#15

I can't view it right now as I'm on vacation and only have my phone with me- sorry!

The script tag looks fine, though I can't test anything from here ¯\_(ツ)_/¯


#16

:smirk: Fair enough... so much for being lazy. :disappointed_relieved:


#17

Things you need to do
1. Include your "script.js" file, after the processing library
2. Open console(ctrl+shift+i) and read what it says.


#18

Like this?

<script src="https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js" src="script.js"></script>

Or like this?

<script src="https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<script src="script.js"></script>

#19

Have a look at their "get started" page


#20

Who is they? the ProcessingJS developers or... ?


#21

Second one is correct. Don't expect "script.js" file to work without including it :slight_smile:


#22

It's still not working. I don't know what I'm doing wrong. Here is the link to the codebit again.


#23

Open console (ctrl+shift+i) and read what exactly gone wrong. After you find out, go ahead and ask specific question :slight_smile: