How to use drawPixel method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Graphics.js

Source:Graphics.js Github

copy

Full Screen

...45 var ddF_x = 1;46 var ddF_y = -2 * r;47 var x = 0;48 var y = r;49 this.drawPixel(x0, y0 + r, color);50 this.drawPixel(x0, y0 - r, color);51 this.drawPixel(x0 + r, y0, color);52 this.drawPixel(x0 - r, y0, color);53 while (x < y) {54 if (f >= 0) {55 y--;56 ddF_y += 2;57 f += ddF_y;58 }59 x++;60 ddF_x += 2;61 f += ddF_x;62 this.drawPixel(x0 + x, y0 + y, color);63 this.drawPixel(x0 - x, y0 + y, color);64 this.drawPixel(x0 + x, y0 - y, color);65 this.drawPixel(x0 - x, y0 - y, color);66 this.drawPixel(x0 + y, y0 + x, color);67 this.drawPixel(x0 - y, y0 + x, color);68 this.drawPixel(x0 + y, y0 - x, color);69 this.drawPixel(x0 - y, y0 - x, color);70 }71 },72 drawChar: function(x, y, c, color, bg, size) {73 if ((x >= this._width) || // Clip right74 (y >= this._height) || // Clip bottom75 ((x + 6 * size - 1) < 0) || // Clip left76 ((y + 8 * size - 1) < 0)) // Clip top77 return;78 if (!this._cp437 && (c >= 176)) {79 c++;80 }81 for (var i = 0; i < 6; i++) {82 var line;83 if (i == 5) {84 line = 0x0;85 } else {86 line = FONT[c * 5 + i];87 }88 for (var j = 0; j < 8; j++) {89 if (line & 0x1) {90 if (size == 1) {91 this.drawPixel(x + i, y + j, color);92 } else {93 this.fillRect(x + (i * size), y + (j * size), size, size, color);94 }95 } else if (bg != color) {96 if (size == 1) {97 this.drawPixel(x + i, y + j, bg);98 } else {99 this.fillRect(x + i * size, y + j * size, size, size, bg);100 }101 }102 line >>= 1;103 }104 }105 },106 setCursor: function(x, y) {107 this.cursor_x = x;108 this.cursor_y = y;109 },110 setTextSize: function(s) {111 this.textsize = (s > 0) ? s : 1;112 },113 setTextColor: function(c, b) {114 this.textcolor = c;115 if (b === undefined) {116 this.textbgcolor = c;117 } else {118 this.textbgcolor = b;119 }120 },121 write: function(c) {122 if (typeof c === "string") {123 if (c.length === 1) {124 c = c.charCodeAt(0);125 } else {126 trace("Call print or println instead of write with strings!\n")127 return;128 }129 }130 if (c === 10) { //\n131 this.cursor_y += this.textsize * 8;132 this.cursor_x = 0;133 } else if (c === 13) { //\r134 //skip135 } else {136 this.drawChar(this.cursor_x, this.cursor_y, c, this.textcolor, this.textbgcolor, this.textsize);137 this.cursor_x += this.textsize * 6;138 if (this.wrap && (this.cursor_x > (this._width - this.textsize * 6))) {139 this.cursor_y += this.textsize * 8;140 this.cursor_x = 0;141 }142 }143 return 1;144 },145 println: function(text) {146 if (text !== undefined) {147 text = text.toString()148 for (var i = 0; i < text.length; i++) {149 this.write(text.charCodeAt(i));150 }151 }152 this.write('\n');153 },154 print: function(text) {155 for (var i = 0; i < text.length; i++) {156 this.write(text.charCodeAt(i));157 }158 },159 //should have thought of drawpixel earlier for conversion... just go through bit by bit160 //if this errors, make sure the dimensions are a multiple of 8161 drawBitmap: function(x, y, bitmap, w, h, color, bgcolor) {162 var byteWidth = (w + 7) >> 3; //equivalent to Math.ceil163 for (var j = 0; j < h; j++) {164 for (var i = 0; i < w; i++) {165 if (bitmap[j * byteWidth + (i >> 3)] & (128 >> (i & 7))) {166 this.drawPixel(x + i, y + j, color);167 } else if (bgcolor !== undefined) {168 this.drawPixel(x + i, y + j, bgcolor);169 }170 }171 }172 },173 //Draw XBitMap Files (*.xbm), exported from GIMP,174 //Usage: Export from GIMP to *.xbm, rename *.xbm to *.c and open in editor.175 //C Array can be directly used with this function176 //the byte order is just the reverse of drawBitmap; i.e, first bit of each byte corresponds to the rightmost pixel of the chunk it represents and the rightmost bit is the left most pixel177 drawXBitmap: function(x, y, bitmap, w, h, color) {178 var byteWidth = Math.floor((w + 7) / 8);179 for (var j = 0; j < h; j++) {180 for (var i = 0; i < w; i++) {181 if (bitmap[j * byteWidth + (i >> 3)] & (1 << (i & 7))) {182 this.drawPixel(x + i, y + j, color);183 }184 }185 }186 },187 drawLine: function(x0, y0, x1, y1, color) {188 var steep = Math.abs(y1 - y0) > Math.abs(x1 - x0);189 if (steep) {190 //swap x0 and y0 191 //thanks http://stackoverflow.com/questions/16201656/how-to-swap-two-variables-in-javascript192 x0 = [y0, y0 = x0][0]193 x1 = [y1, y1 = x1][0]194 }195 if (x0 > x1) {196 x0 = [x1, x1 = x0][0]197 y0 = [y1, y1 = y0][0]198 }199 var dx = x1 - x0;200 var dy = Math.abs(y1 - y0);201 var err = dx / 2;202 var ystep;203 if (y0 < y1) {204 ystep = 1;205 } else {206 ystep = -1;207 }208 for (; x0 <= x1; x0++) {209 if (steep) {210 this.drawPixel(y0, x0, color);211 } else {212 this.drawPixel(x0, y0, color);213 }214 err -= dy;215 if (err < 0) {216 y0 += ystep;217 err += dx;218 }219 }220 },221 drawFastHLine: function(x, y, w, color) {222 //implement native one223 this.drawLine(x, y, x + w - 1, y, color);224 },225 drawFastVLine: function(x, y, h, color) {226 this.drawLine(x, y, x, y + h - 1, color);227 },228 drawRect: function(x, y, w, h, color) {229 this.drawFastHLine(x, y, w, color);230 this.drawFastHLine(x, y + h - 1, w, color);231 this.drawFastVLine(x, y, h, color);232 this.drawFastVLine(x + w - 1, y, h, color);233 },234 fillRect: function(x, y, w, h, color) {235 for (var i = x; i < x + w; i++) {236 this.drawFastVLine(i, y, h, color);237 }238 },239 fillCircle: function(x0, y0, r, color) {240 this.drawFastVLine(x0, y0 - r, 2 * r + 1, color);241 this.fillCircleHelper(x0, y0, r, 3, 0, color);242 },243 fillCircleHelper: function(x0, y0, r, cornername, delta, color) {244 var f = 1 - r;245 var ddF_x = 1;246 var ddF_y = -2 * r;247 var x = 0;248 var y = r;249 while (x < y) {250 if (f >= 0) {251 y--;252 ddF_y += 2;253 f += ddF_y;254 }255 x++;256 ddF_x += 2;257 f += ddF_x;258 if (cornername & 0x1) {259 this.drawFastVLine(x0 + x, y0 - y, 2 * y + 1 + delta, color);260 this.drawFastVLine(x0 + y, y0 - x, 2 * x + 1 + delta, color);261 }262 if (cornername & 0x2) {263 this.drawFastVLine(x0 - x, y0 - y, 2 * y + 1 + delta, color);264 this.drawFastVLine(x0 - y, y0 - x, 2 * x + 1 + delta, color);265 }266 }267 },268 drawRoundRect: function(x, y, w, h, r, color) {269 // smarter version270 this.drawFastHLine(x + r, y, w - 2 * r, color); // Top271 this.drawFastHLine(x + r, y + h - 1, w - 2 * r, color); // Bottom272 this.drawFastVLine(x, y + r, h - 2 * r, color); // Left273 this.drawFastVLine(x + w - 1, y + r, h - 2 * r, color); // Right274 // draw four corners275 this.drawCircleHelper(x + r, y + r, r, 1, color);276 this.drawCircleHelper(x + w - r - 1, y + r, r, 2, color);277 this.drawCircleHelper(x + w - r - 1, y + h - r - 1, r, 4, color);278 this.drawCircleHelper(x + r, y + h - r - 1, r, 8, color);279 },280 drawCircleHelper: function(x0, y0, r, cornername, color) {281 var f = 1 - r;282 var ddF_x = 1;283 var ddF_y = -2 * r;284 var x = 0;285 var y = r;286 while (x < y) {287 if (f >= 0) {288 y--;289 ddF_y += 2;290 f += ddF_y;291 }292 x++;293 ddF_x += 2;294 f += ddF_x;295 if (cornername & 0x4) {296 this.drawPixel(x0 + x, y0 + y, color);297 this.drawPixel(x0 + y, y0 + x, color);298 }299 if (cornername & 0x2) {300 this.drawPixel(x0 + x, y0 - y, color);301 this.drawPixel(x0 + y, y0 - x, color);302 }303 if (cornername & 0x8) {304 this.drawPixel(x0 - y, y0 + x, color);305 this.drawPixel(x0 - x, y0 + y, color);306 }307 if (cornername & 0x1) {308 this.drawPixel(x0 - y, y0 - x, color);309 this.drawPixel(x0 - x, y0 - y, color);310 }311 }312 },313 fillRoundRect: function(x, y, w, h, r, color) {314 this.fillRect(x + r, y, w - 2 * r, h, color);315 // draw four corners316 this.fillCircleHelper(x + w - r - 1, y + r, r, 1, h - 2 * r - 1, color);317 this.fillCircleHelper(x + r, y + r, r, 2, h - 2 * r - 1, color);318 },319 drawTriangle: function(x0, y0, x1, y1, x2, y2, color) {320 this.drawLine(x0, y0, x1, y1, color);321 this.drawLine(x1, y1, x2, y2, color);322 this.drawLine(x2, y2, x0, y0, color);323 },...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...58 if(grid[(y + 1)][x] == 0) {59 grid[y][x] = 0;60 grid[(y + 1)][x] = 1;61 clearPixel(x, y)62 drawPixel(x, (y + 1), sandColor);63 continue;64 }65 if(grid[(y + 1)][(x + 1)] == 0 && grid[(y + 1)][(x - 1)] == 0) {66 var random = Math.floor(Math.random() * (10 - 0 + 1)) + 1;67 if(random > 5) {68 grid[y][x] = 0;69 grid[(y + 1)][(x - 1)] = 1;70 71 clearPixel(x, y);72 drawPixel((x - 1), (y + 1), sandColor);73 } else {74 grid[y][x] = 0;75 grid[(y + 1)][(x + 1)] = 1;76 clearPixel(x, y);77 drawPixel((x + 1), (y + 1), sandColor);78 }79 continue;80 }81 if(grid[(y + 1)][(x + 1)] == 0) {82 grid[y][x] = 0;83 grid[(y + 1)][(x + 1)] = 1;84 clearPixel(x, y);85 drawPixel((x + 1), (y + 1), sandColor);86 continue;87 }88 if(grid[(y + 1)][(x - 1)] == 0) {89 grid[y][x] = 0;90 grid[(y + 1)][(x - 1)] = 1;91 clearPixel(x, y);92 drawPixel((x - 1), (y + 1), sandColor);93 continue;94 }95 //Sand in Water96 if(grid[(y + 1)][(x + 1)] == 2 && grid[(y + 1)][(x - 1)] == 2) {97 var random = Math.floor(Math.random() * (10 - 0 + 1)) + 1;98 if(random > 5) {99 grid[y][x] = 2;100 grid[(y + 1)][(x + 1)] = 1;101 clearPixel(x, y);102 drawPixel(x, y, waterColor);103 drawPixel((x + 1), (y + 1), sandColor);104 } else {105 grid[y][x] = 2;106 grid[(y + 1)][(x - 1)] = 1;107 108 clearPixel(x, y)109 drawPixel(x, y, waterColor);110 drawPixel((x - 1), (y + 1), sandColor);111 }112 continue;113 }114 if(grid[(y + 1)][x] == 2) {115 grid[y][x] = 2;116 grid[(y + 1)][x] = 1;117 drawPixel(x, y, waterColor);118 drawPixel(x, (y + 1), sandColor);119 continue;120 }121 if(grid[(y + 1)][(x + 1)] == 2) {122 grid[y][x] = 2;123 grid[(y + 1)][(x + 1)] = 1;124 drawPixel(x, y, waterColor);125 drawPixel((x + 1), (y + 1), sandColor);126 continue;127 }128 if(grid[(y + 1)][(x - 1)] == 2) {129 grid[y][x] = 2;130 grid[(y + 1)][(x - 1)] = 1;131 drawPixel(x, y, waterColor);132 drawPixel((x - 1), (y + 1), sandColor);133 continue;134 }135 }136 //WATER137 if(grid[y][x] == 2) {138 var waterColor = colors.get(2)[colorIndex];139 if(grid[(y + 1)][x] == 0) {140 grid[y][x] = 0;141 grid[(y + 1)][x] = 2;142 clearPixel(x, y)143 drawPixel(x, (y + 1), waterColor);144 continue;145 }146 if(grid[(y + 1)][(x + 1)] == 0 && grid[(y + 1)][(x - 1)] == 0) {147 var random = Math.floor(Math.random() * (10 - 0 + 1)) + 1;148 if(random > 5) {149 grid[y][x] = 0;150 grid[(y + 1)][(x - 1)] = 2;151 152 clearPixel(x, y);153 drawPixel((x - 1), (y + 1), waterColor);154 } else {155 grid[y][x] = 0;156 grid[(y + 1)][(x + 1)] = 2;157 clearPixel(x, y);158 drawPixel((x + 1), (y + 1), waterColor);159 }160 continue;161 }162 if(grid[(y + 1)][(x + 1)] == 0) {163 grid[y][x] = 0;164 grid[(y + 1)][(x + 1)] = 2;165 clearPixel(x, y);166 drawPixel((x + 1), (y + 1), waterColor);167 continue;168 }169 if(grid[(y + 1)][(x - 1)] == 0) {170 grid[y][x] = 0;171 grid[(y + 1)][(x - 1)] = 2;172 clearPixel(x, y);173 drawPixel((x - 1), (y + 1), waterColor);174 continue;175 }176 if(grid[y][(x + 1)] == 0) {177 grid[y][x] = 0;178 grid[y][(x + 1)] = 2;179 clearPixel(x, y);180 drawPixel((x + 1), y, waterColor);181 continue;182 }183 if(grid[y][(x - 1)] == 0) {184 grid[y][x] = 0;185 grid[y][(x - 1)] = 2;186 clearPixel(x, y);187 drawPixel((x - 1), y, waterColor);188 continue;189 }190 }191 //Fire192 if(grid[y][x] == 4) {193 var random = Math.floor(Math.random() * (10 - 0 + 1)) + 1;194 drawPixel(x, y, "#e56a12")195 if(grid[(y + 1)][x] == 3) {196 if(random > 8) {197 drawPixel(x, y + 1, "#e56a12");198 grid[(y + 1)][x] = 4;199 continue;200 } 201 }202 if(grid[y][(x - 1)] == 3) {203 if(random > 8) {204 drawPixel(x - 1, y, "#e56a12");205 grid[y][(x - 1)] = 4;206 continue;207 } 208 }209 if(grid[y][(x + 1)] == 3) {210 if(random > 8) {211 drawPixel(x + 1, y, "#e56a12");212 grid[y][(x + 1)] = 4;213 continue;214 } 215 }216 //Move Pixel Randomly217 218 var moveX = Math.floor(Math.random() * (2 - 1 + 1)) + 1;219 var moveY = Math.floor(Math.random() * (4 - 1 + 1)) + 1;220 if(random < 2) {221 grid[y][x] = 0;222 clearPixel(x, y);223 }224 }225 }226 }227 //Framerate228 var thisFrameTime = (thisLoop=new Date) - lastLoop;229 frameTime+= (thisFrameTime - frameTime) / filterStrength;230 lastLoop = thisLoop;231 //drawArray();232 document.getElementById("pixelCount").innerHTML = pixelCount;233} 234//Color Changer235/*setInterval(() => {236 for(var y = grid.length - 2; y > 1; y--) {237 for(var x = 0; x < grid[y].length; x++) {238 if(grid[y][x] == 2) {239 var colorIndex = Math.floor(Math.random() * (4 - 1 + 1)) + 1;240 var waterColor = colors.get(2)[colorIndex];241 drawPixel(x, y, waterColor)242 }243 }244 }245}, 200);246*/247function drawArray() {248 context.clearRect(0, 0, canvas.width, canvas.height);249 for(var y = 0; y < grid.length; y++) {250 grid[y].forEach(x => {251 drawPixel(x, y);252 });253 }254}255function drawPixel(x, y, color) {256 context.fillStyle = color || "#e0988d";257 context.fillRect(x*pixelSize, y*pixelSize, pixelSize, pixelSize);258}259function clearPixel(x, y) {260 context.clearRect(x*pixelSize, y*pixelSize, pixelSize, pixelSize);261}262function createPixel(x, y) {263 var id = currentMaterial;264 if(id == 0) {265 clearPixel(x, y);266 grid[y][x] = 0;267 return;268 }269 if(grid[y][x] != 0) return;270 grid[y][x] = id;271 if(id == 3) {272 drawPixel(x, y, "#331a14");273 }274 pixelCount++;275}276//Paint277//Running update278setInterval(updatePixels, refreshRate);279var fpsOut = document.getElementById('fps');280setInterval(function(){281 fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";282},1000);283//Utils284function shuffle(a) {285 for (let i = a.length - 1; i > 0; i--) {286 const j = Math.floor(Math.random() * (i + 1));...

Full Screen

Full Screen

canva.js

Source:canva.js Github

copy

Full Screen

...10 let tail = [];11 12 //console.log("canvas element: ", canvasElement);13 14 function drawPixel(x, y, color) {15 let context = canvasElement.getContext('2d');16 var roundedX = Math.round(x);17 var roundedY = Math.round(y);18 19 context.beginPath();20 context.fillStyle = color || '#000';21 context.fillRect(roundedX, roundedY, brushSize, brushSize);22 context.fill();23 }24 function handleMouseMove(ev){25 if(mouseDown)26 {27 drawPixel(ev.pageX, ev.pageY, 'black')28 }29 30 }31 function drawLine(point1, point2)32 {33 let x0 = point1.x;34 let y0 = point1.y;35 let x1 = point2.x;36 let y1 = point2.y;37 var dx = Math.abs(x1 - x0);38 var dy = Math.abs(y1 - y0);39 var sx = (x0 < x1) ? 1 : -1;40 var sy = (y0 < y1) ? 1 : -1;41 var err = dx - dy;42 while(true) {43 drawPixel(x0, y0, 'black'); // Do what you need to for this44 if ((x0 === x1) && (y0 === y1)) break;45 var e2 = 2*err;46 if (e2 > -dy) { err -= dy; x0 += sx; }47 if (e2 < dx) { err += dx; y0 += sy; }48 }49 }50 function displayCircle(xc, yc, x, y)51 {52 drawPixel(xc+x, yc+y, 'black');53 drawPixel(xc-x, yc+y, 'black');54 drawPixel(xc+x, yc-y, 'black');55 drawPixel(xc-x, yc-y, 'black');56 drawPixel(xc+y, yc+x, 'black');57 drawPixel(xc-y, yc+x, 'black');58 drawPixel(xc+y, yc-x, 'black');59 drawPixel(xc-y, yc-x, 'black');60 }61 function drawCircle(radius, center)62 {63 if(((center.x + radius) > canvasWidth) || ((center.x - radius) < 0) || ((center.y + radius) > canvasHeight) || ((center.y - radius) < 0))64 {65 alert('Esse circulo não cabe no quadro!')66 return;67 }68 let x = 0;69 let y = radius;70 let xc = center.x;71 let yc = center.y;72 let decision = 3 - 2 * radius;73 displayCircle(xc, yc, x, y);74 while(y >= x)75 {76 x++77 if(decision > 0)78 {79 y--;80 decision = decision + 4 * (x-y) + 1081 }82 else {83 decision = decision + 4 * x + 6;84 }85 displayCircle(xc, yc, x, y);86 }87 }88 useEffect(() => {89 // if(mouseDown)90 // {91 // drawPixel((Math.floor(Math.random() * 100)), (Math.floor(Math.random() * 100)), 'black')92 // }93 // if(scaled == false)94 // {95 // canvasElement.width = window.innerWidth;96 // canvasElement.height = window.innerHeight;97 // setScaled(true)98 // }99 // let context = canvasElement.getContext('2d');100 // context.canvas.width = screenW;101 // context.canvas.height = screenH;102 //setScaled(false);103 104 }, []);105 return (106 <canvas107 style={{border: "2px solid gray"}}108 id="canvas-main"109 //onClick={() => {drawPixel((Math.floor(Math.random() * 100)), (Math.floor(Math.random() * 100)), 'black')}}110 onMouseDown={(ev) => {111 setMouseDown(true);112 config.addPoint(ev.pageX, ev.pageY);113 if(config.getBrushMode() == 1)114 {115 116 } 117 118 119 }}120 onMouseUp={(ev) => {121 setMouseDown(false); 122 if(config.getBrushMode() == 1)123 {124 config.addPoint(ev.pageX, ev.pageY);125 126 drawLine(config.getLastPoint(), config.getSecondLastPoint())127 }128 if(config.getBrushMode() == 2)129 {130 config.addPoint(ev.pageX, ev.pageY);131 const radius = Math.ceil(config.getRadiusLastClick());132 drawCircle(radius, config.getSecondLastPoint());133 }134 135 }}136 onMouseMove={(ev) => {137 if(mouseDown && config.getBrushMode() == 0) drawPixel(ev.pageX, ev.pageY, 'black');138 // if(mouseDown && config.getBrushMode() == 1) {tail.push(ev.pageX);}139 // if(!mouseDown && config.getBrushMode() == 1) {140 // console.log("tail: ",tail);141 142 // } 143 }}144 width={canvasWidth}145 height={canvasHeight}146 //onMouseDownCapture={() => {drawPixel((Math.floor(Math.random() * 100)), (Math.floor(Math.random() * 100)), 'black')}}147 >148 </canvas>149 )...

Full Screen

Full Screen

clock-blob.js

Source:clock-blob.js Github

copy

Full Screen

...16function flip() {17 g.setColor(1,1,1);18 g.drawImage({width:buf.getWidth(),height:buf.getHeight(),buffer:buf.buffer},55,26);19}20function drawPixel(ox,oy,x,y,r,p) {21 let x1 = ox+x*(r*2);22 let y1 = oy+y*(r*2);23 let xmid = x1+r;24 let ymid = y1+r;25 let x2 = xmid+r;26 let y2 = ymid+r;27 if (p > 0) {28 if (p > 1) {29 buf.setColor(0,0,0);30 buf.fillPoly([x1,y1,x2,y1,x2,y2,x1,y2]);31 }32 buf.setColor(1,1,1);33 } else {34 buf.setColor(0,0,0);35 }36 if (p < 2) {37 buf.fillPoly([x1,y1,x2,y1,x2,y2,x1,y2]);38 } else if (p === 2) {39 buf.fillPoly([xmid,y1,x2,y1,x2,y2,x1,y2,x1,ymid]);40 } else if (p === 3) {41 buf.fillPoly([x1,y1,xmid,y1,x2,ymid,x2,y2,x1,y2]);42 } else if (p === 4) {43 buf.fillPoly([x1,y1,x2,y1,x2,ymid,xmid,y2,x1,y2]);44 } else if (p === 5) {45 buf.fillPoly([x1,y1,x2,y1,x2,y2,xmid,y2,x1,ymid]);46 }47}48function redraw() {49 let time = new Date();50 let hours = time.getHours();51 let mins = time.getMinutes();52 let secs = time.getSeconds();53 let newDigits = [Math.floor(hours/10),hours%10,Math.floor(mins/10),mins%10,Math.floor(secs/10),secs%10];54 for (var p = 0;p<25;p++) {55 var px = p%5;56 var py = Math.floor(p/5);57 if (digits[0] === -1 || NUMBERS[newDigits[0]][p] !== NUMBERS[digits[0]][p] ) {58 drawPixel(0,20,px,py,6,NUMBERS[newDigits[0]][p]);59 }60 if (digits[1] === -1 || NUMBERS[newDigits[1]][p] !== NUMBERS[digits[1]][p] ) {61 drawPixel(78,20,px,py,6,NUMBERS[newDigits[1]][p]);62 }63 if (digits[2] === -1 || NUMBERS[newDigits[2]][p] !== NUMBERS[digits[2]][p] ) {64 drawPixel(0,92,px,py,6,NUMBERS[newDigits[2]][p]);65 }66 if (digits[3] === -1 || NUMBERS[newDigits[3]][p] !== NUMBERS[digits[3]][p] ) {67 drawPixel(78,92,px,py,6,NUMBERS[newDigits[3]][p]);68 }69 if (digits[4] === -1 || NUMBERS[newDigits[4]][p] !== NUMBERS[digits[4]][p] ) {70 drawPixel(69,164,px,py,3,NUMBERS[newDigits[4]][p]);71 }72 if (digits[5] === -1 || NUMBERS[newDigits[5]][p] !== NUMBERS[digits[5]][p] ) {73 drawPixel(108,164,px,py,3,NUMBERS[newDigits[5]][p]);74 }75 }76 digits = newDigits;77 flip();78}79function clearTimers() {80 if(intervalRef) {81 clearInterval(intervalRef);82 intervalRef = undefined;83 }84}85function startTimers() {86 g.clear();87 Bangle.drawWidgets();...

Full Screen

Full Screen

app.js

Source:app.js Github

copy

Full Screen

1import {createProgram, setupWebGL, pointsToBuffer} from 'GLHelper';2import {vec2} from 'gl-matrix';3import vertexShader from './shader.vert';4import fragmentShader from './shader.frag';5class DrawPixel {6 constructor() {7 this._points = [];8 this._drawType = '';9 this._initGl();10 }11 /**12 *13 * @param {Array} points 需要绘制的做标数组14 */15 writePixel(points) {16 // 清空坐标17 this._points = [];18 if(!Array.isArray(points)) return;19 points.forEach((item) => {20 if(Array.isArray(item) && item.length === 2) {21 this._points.push(vec2(item[0], item[1]));22 }23 });24 }25 /**26 *27 * @param {String} type 绘制类型28 */29 readPixel(type = 'LINE_STRIP') {30 this._drawType = type;31 this._render();32 }33 /**34 *35 * @param {Array} center 圆心坐标36 * @param {Number} radius 半径37 * @param {Number} segment 分段数 (正整数)38 */39 drawCircle(center = [0, 0], radius = 0.2, segment = 10) {40 // 清空坐标41 this._points = [];42 // 获取各个分段位置的坐标43 for(let i = 0; i < segment; i++) {44 const x = center[0] + radius * Math.cos(Math.PI * 2 / segment * i);45 const y = center[1] + radius * Math.sin(Math.PI * 2 / segment * i);46 this._points.push(vec2(x, y));47 }48 this.readPixel('LINE_LOOP');49 }50 /**51 * 内部私有方法，初始化webGl52 */53 _initGl() {54 const canvas = document.getElementById('gl-canvas');55 const gl = setupWebGL(canvas);56 if(!gl) {57 console.error("WebGL isn't available");58 }59 gl.viewport(0, 0, canvas.width, canvas.height);60 gl.clearColor(1.0, 1.0, 1.0, 1.0);61 // Load shaders and initialize attribute buffers62 const program = createProgram(gl, vertexShader, fragmentShader);63 gl.useProgram(program);64 this._gl = gl;65 this._program = program;66 }67 /**68 * 内部方法，执行绘制69 */70 _render() {71 const gl = this._gl;72 const bufferId = gl.createBuffer();73 gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);74 gl.bufferData(gl.ARRAY_BUFFER, pointsToBuffer(this._points), gl.STATIC_DRAW);75 const vPosition = gl.getAttribLocation(this._program, 'vPosition');76 gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);77 gl.enableVertexAttribArray(vPosition);78 // 每次渲染不清除之前的79 // gl.clear(gl.COLOR_BUFFER_BIT);80 gl.drawArrays(gl[this._drawType], 0, this._points.length);81 }82}83const drawPixel = new DrawPixel();84drawPixel.writePixel([[-0.3, 0.8], [-0.7, 0.8], [-0.7, 0.3], [-0.3, 0.3], [-0.3, 0.5], [-0.5, 0.5]]);85drawPixel.readPixel('LINE_STRIP');86drawPixel.writePixel([[-0.1, 0.8], [-0.1, 0.3], [0.3, 0.3]]);87drawPixel.readPixel('LINE_STRIP');88drawPixel.drawCircle([0.0, -0.4], 0.5, 40);89drawPixel.drawCircle([0.0, -0.4], 0.4, 10);90drawPixel.drawCircle([0.0, -0.4], 0.3, 5);...

Full Screen

Full Screen

alg.js

Source:alg.js Github

copy

Full Screen

...33 var m = (y1 - y0) / (x1 - x0);34 var y = 0;35 for (var x = x0; x <= x1; x++) {36 y = y0 + m * (x - x0);37 drawPixel(x, Math.round(y));38 }39}40function bresenham() {41 var dx, dy, incrE, incrNE, d, x, y;42 dx = x1 - x0;43 dy = y1 - y0;44 d = dy * 2 - dx;45 incrE = dy * 2;46 incrNE = (dy - dx) * 2;47 x = x0;48 y = y0;49 const m = dx > 0 ? dy / dx : 0;50 drawPixelBresenham(m, x, y);51 while (x < x1) {52 x++;53 if (d <= 0)54 d += incrE;55 else {56 d += incrNE;57 y = y + 1;58 }59 drawPixelBresenham(m, x, y);60 }61}62function desenharCirculo() {63 var x = 10;64 var y = +radius.value;65 var d = 1 - y;66 drawCirclePixel(x, y);67 while (y >= x) {68 if (d < 0) {69 d += (2 * x + 3);70 } else {71 d += 2 * (x - y) + 5;72 y--;73 }74 x++;75 drawCirclePixel(x, y);76 }77}78function drawCirclePixel(x, y) {79 drawPixel(x, y);80 drawPixel(y, x);81 drawPixel(y, -x);82 drawPixel(x, -y);83 drawPixel(-x, -y);84 drawPixel(-y, -x);85 drawPixel(-y, x);86 drawPixel(-x, y);87}88function drawPixelBresenham(m, x, y) {89 if (ehEsquadraoUm(m))90 drawPixel(x, y);91 else if (ehEsquadraoDois(m))92 drawPixel(y, x);93 else if (ehEsquadraoTres(m))94 drawPixel(-y, x);95 else if (ehEsquadraoQuatro(m))96 drawPixel(-x, y);97 else if (ehEsquadraoCinco(m))98 drawPixel(-x, -y);99 else if (ehEsquadraoSeis(m))100 drawPixel(-y, -x);101 else if (ehEsquadraoSete(m))102 drawPixel(y, -x);103 else if (ehEsquadraoOito(m))104 drawPixel(x, -y);105 else106 drawPixel(x, y);107}108function ehEsquadraoUm(m) { return m > 0 && m < 1 }109function ehEsquadraoDois(m) { return m > 1 }110function ehEsquadraoTres(m) { return m < -1 }111function ehEsquadraoQuatro(m) { return m > -1 && m < 0 }112function ehEsquadraoCinco(m) { return m > 0 && m < 1 }113function ehEsquadraoSeis(m) { return m > 1 }114function ehEsquadraoSete(m) { return m < -1 }115function ehEsquadraoOito(m) { return m > -1 && m < 0 }116function drawPixel(x, y) {117 const ctx = myCanvas.getContext('2d');118 ctx.fillRect(x, y, 1, 1);...

Full Screen

Full Screen

circle.js

Source:circle.js Github

copy

Full Screen

...17}18async function drawCircle (x_center, y_center, r) {19 var x = r;20 var y = 0;21 await drawPixel(x_center, y_center);22 if(r>0){23 await drawPixel(x + x_center, -y + y_center);24 await drawPixel(y + x_center, x + y_center);25 await drawPixel(-y + x_center, x + y_center);26 }27 var p = 1 -r;28 while(x>y){29 y++;30 if(p <= 0){31 p += 2 * y + 1;32 }else{33 x--;34 p += 2 * (y - x) + 1;35 }36 if(x<y)break;37 await drawPixel(x + x_center, y + y_center);38 await drawPixel(-x + x_center, y + y_center);39 await drawPixel(x + x_center, -y + y_center);40 await drawPixel(-x + x_center, -y + y_center);41 if(x!=y){42 await drawPixel(y + x_center, x + y_center);43 await drawPixel(-y + x_center, x + y_center);44 await drawPixel(y + x_center, -x + y_center);45 await drawPixel(-y + x_center, -x + y_center);46 }47 }48}49draw.addEventListener('click',async function(){50 var x = parseInt(document.getElementById('x').value);51 var y = parseInt(document.getElementById('y').value);52 var r = parseInt(document.getElementById('radius').value);53 await drawCircle(x,y,r);54 console.log("draw clicked");55});56function clear(){57 ctx.clearRect(0, 0, canvasWidth, canvasHeight);58 ctx.beginPath();59 line(-canvasWidth,0,canvasWidth,0)...

Full Screen

Full Screen

map-radiotelescopes.js

Source:map-radiotelescopes.js Github

copy

Full Screen

1/* map-radiotelescopes.js2 */3var data;4function drawPixel(x, y)5{6 var temp = document.createElement("div");7 temp.style.position = "absolute";8 temp.style.backgroundColor = "white";9 temp.style.left = x+"px";10 temp.style.top = y+"px";11 temp.style.width = "1px";12 temp.style.height = "1px";13 data.appendChild(temp);14}15function drawCircle(xpos, ypos, radius)16{17 data = document.createElement("div");18 drawPixel(xpos, ypos);19 var d = 3 - (2 * radius);20 var x = 0;21 var y = radius;22 while (x <= y)23 {24 drawPixel(xpos+x, ypos+y);25 drawPixel(xpos+x, ypos-y);26 drawPixel(xpos-x, ypos+y);27 drawPixel(xpos-x, ypos-y);28 29 drawPixel(xpos+y, ypos+x);30 drawPixel(xpos+y, ypos-x);31 drawPixel(xpos-y, ypos+x);32 drawPixel(xpos-y, ypos-x);33 if (d < 0)34 d += (4 * x) + 6;35 else36 {37 d += 4 * (x - y) + 10;38 y--;39 }40 x++;41 }42 document.getElementById("data").appendChild(data);...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'screenshot.png' });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'screenshot.png' });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: 'screenshot.png' });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: 'screenshot.png' });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: 'screenshot.png' });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();45 const page = await context.newPage();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.drawPixel(10, 10, { color: { r: 255, g: 0, b: 0, a: 1 } });7 await browser.close();8})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch({headless: false});4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.drawPixel(100, 100);7 await browser.close();8})();9const {chromium} = require('playwright');10(async () => {11 const browser = await chromium.launch({headless: false});12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.drawPixel(100, 100);15 await browser.close();16})();17const {chromium} = require('playwright');18(async () => {19 const browser = await chromium.launch({headless: false});20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.drawPixel(100, 100);23 await browser.close();24})();25const {chromium} = require('playwright');26(async () => {27 const browser = await chromium.launch({headless: false});28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.drawPixel(100, 100);31 await browser.close();32})();33const {chromium} = require('playwright');34(async () => {35 const browser = await chromium.launch({headless: false});36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.drawPixel(100, 100);39 await browser.close();40})();41const {chromium} = require('playwright');42(async () => {43 const browser = await chromium.launch({headless: false});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.drawPixel({ x: 10, y: 10, color: { r: 255, g: 0, b: 0, a: 1 } });7 await page.screenshot({ path: 'screenshot.png' });8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.evaluate(() => {7 const canvas = document.createElement('canvas');8 canvas.width = 100;9 canvas.height = 100;10 canvas.style.position = 'absolute';11 canvas.style.top = '0';12 canvas.style.left = '0';13 document.body.appendChild(canvas);14 const ctx = canvas.getContext('2d');15 ctx.fillStyle = 'red';16 ctx.fillRect(0, 0, 100, 100);17 const imageData = ctx.getImageData(0, 0, 100, 100);18 const pixels = new Uint32Array(imageData.data.buffer);19 for (let i = 0; i < pixels.length; i++) {20 if (pixels[i] !== 4294901760) {21 console.log('Pixel at index ' + i + ' is not red');22 }23 }24 });25 await browser.close();26})();27const {chromium} = require('playwright');28(async () => {29 const browser = await chromium.launch();30 const context = await browser.newContext();31 const page = await context.newPage();32 await page.evaluate(() => {33 const canvas = document.createElement('canvas');34 canvas.width = 100;35 canvas.height = 100;36 canvas.style.position = 'absolute';37 canvas.style.top = '0';38 canvas.style.left = '0';39 document.body.appendChild(canvas);40 const ctx = canvas.getContext('2d');41 ctx.fillStyle = 'red';42 ctx.fillRect(0, 0, 100, 100);43 const imageData = ctx.getImageData(0, 0, 100, 100);44 const pixels = new Uint32Array(imageData.data.buffer);45 for (let i = 0; i < pixels.length; i++) {46 if (pixels[i] !== 4294901760) {47 console.log('Pixel at index ' + i + ' is not red');48 }49 }50 });51 await browser.close();52})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.drawPixel(100, 100, 'red');6 await page.drawPixel(100, 101, 'green');7 await page.drawPixel(100, 102, 'blue');8 await page.drawPixel(100, 103, 'yellow');9 await page.drawPixel(100, 104, 'purple');10 await page.drawPixel(100, 105, 'cyan');11 await browser.close();12})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { drawPixel } = require('playwright-core/lib/server/screencast/recorder');2drawPixel(100, 100, [255, 0, 0]);3const { drawRect } = require('playwright-core/lib/server/screencast/recorder');4drawRect(100, 100, 200, 200, [255, 0, 0]);5const { drawCircle } = require('playwright-core/lib/server/screencast/recorder');6drawCircle(100, 100, 50, [255, 0, 0]);7const { drawText } = require('playwright-core/lib/server/screencast/recorder');8drawText(100, 100, 'Hello World', [255, 0, 0]);

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful