Trying to draw an image based on an array Watch

LucyTheWeird
Badges: 0
Rep:
?
#1
Report Thread starter 5 years ago
#1
In computing we were revising bitmap images, and I thought it would be interesting to give it a go myself (albeit in a much simplified way).
I'm using javascript on Khanacademy (the program is here http://www.khanacademy.org/cs/image/5601668439736320)
What I want the program to do is to check each element of the array for its value, fill in a section of the canvas with the appropriate colour (I'm using 1s for black and 0s for white) and move on the the next element and do the same.
I'm not very familiar with javascript, so if I have made any glaring mistakes, be kind...
I think the problem lies mainly in the positioning of each block of colour. I'll try and figure it out, but any input would be cool.
Code:
var picture = [1, 0, 0, 1];
var len = picture.length;
var w = 400/picture.length;  // width of block
var h = 400;                       // height of block - canvas is 400 high
var i;
var findPos = function(){
    var posX = 400 - (400/i);
    var posY = 0;
    fill(0, 0, 0);
    rect(posX, posY, w, h);
};
var otherPos = function(){
    var posX = 400 - (400/i);
    var posY = 0;
    fill(255, 255, 255);
    rect(posX, posY, w, h);
};
var draw = function() {
    for(i = 0; i <= (picture.length); i++){
        if(picture[i] > 0){
            findPos();
        }
    }
};
draw();
0
reply
AdampskiB
Badges: 2
Rep:
?
#2
Report 5 years ago
#2
Are you trying to print a patchwork display of these black and white blocks? In a canvas size of 400px by 400px?
Ensure you reset the X co-ordinate back to 0 once the loop has completed printing one row of blocks. If what I've suggested is the wrong idea, then to me it's a little unclear to what is actually happening with your code, as opposed to what you want it to do.
0
reply
LucyTheWeird
Badges: 0
Rep:
?
#3
Report Thread starter 5 years ago
#3
(Original post by AdampskiB)
Are you trying to print a patchwork display of these black and white blocks? In a canvas size of 400px by 400px?
Ensure you reset the X co-ordinate back to 0 once the loop has completed printing one row of blocks. If what I've suggested is the wrong idea, then to me it's a little unclear to what is actually happening with your code, as opposed to what you want it to do.
I got it working now, but thanks anyway.
This is what it was meant to do, just in case you wanted to know (it's pretty basic ):

http://www.khanacademy.org/cs/workin...tor/2611806865

Edit: yeah, it you were on the right tracks - but just printing lines the full length of the canvas, I'll get onto patchwork later.
0
reply
X

Quick Reply

Attached files
Write a reply...
Reply
new posts
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise

University open days

  • Arts University Bournemouth
    Art and Design Foundation Diploma Further education
    Sat, 25 May '19
  • SOAS University of London
    Postgraduate Open Day Postgraduate
    Wed, 29 May '19
  • University of Exeter
    Undergraduate Open Day - Penryn Campus Undergraduate
    Thu, 30 May '19

How did your AQA GCSE Physics Paper 1 go?

Loved the paper - Feeling positive (307)
30.89%
The paper was reasonable (404)
40.64%
Not feeling great about that exam... (159)
16%
It was TERRIBLE (124)
12.47%

Watched Threads

View All