LightBulb

Developer
Darryl Huffman
Size
2,561 Kb
Views
8,096
  1. LightBulb Previews
  2. LightBulb HTML Codes
  3. LightBulb CSS Codes
  4. LightBulb JS Codes

How do I make an lightbulb?

What is a lightbulb? How do you make a lightbulb? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

LightBulb Previews
IQ Test

LightBulb - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LightBulb</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

LightBulb - Script Codes CSS Codes

body { margin: 0; padding: 0; overflow:hidden; background-color: #222;
}

LightBulb - Script Codes JS Codes

// Config Variables
var cw = window.innerWidth, ch = window.innerHeight, shapex, shapey, cs = cw / 60, // Cube Size entities = {}, entitiesIndex = 0, bgcolor = "#222", entitieAmount = 90, canvas = $('<canvas/>').attr({width: cw, height: ch, id: "myCanvas"}).appendTo('body'), context = canvas.get(0).getContext("2d");
// End Config Variables
// Color Variables
var c1 = "transparent", c2 = "#ffff00", c3 = "#ffff79", c4 = "#bbbbbb";
// End Color Variables
// Entity Layout
var shapeProperty = [ [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c3,c1,c1,c1,c1,c1], [c3,c1,c1,c1,c1,c3,c1,c1,c1,c1,c3], [c1,c3,c1,c1,c1,c3,c1,c1,c1,c3,c1], [c1,c1,c3,c1,c1,c1,c1,c1,c3,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c2,c2,c2,c1,c1,c1,c1], [c1,c1,c2,c2,c3,c3,c3,c2,c2,c1,c1], [c1,c2,c3,c3,c3,c3,c3,c3,c3,c2,c1], [c2,c3,c3,c3,c3,c3,c3,c3,c3,c3,c2], [c2,c3,c3,c3,c3,c3,c3,c3,c3,c3,c2], [c2,c3,c3,c3,c3,c3,c3,c3,c3,c3,c2], [c2,c3,c3,c3,c3,c3,c3,c3,c3,c3,c2], [c1,c2,c3,c3,c3,c3,c3,c3,c3,c2,c1], [c1,c2,c3,c3,c3,c3,c3,c3,c3,c2,c1], [c1,c1,c2,c3,c3,c3,c3,c3,c2,c1,c1], [c1,c1,c1,c2,c3,c3,c3,c2,c1,c1,c1], [c1,c1,c1,c2,c3,c3,c3,c2,c1,c1,c1], [c1,c1,c1,c2,c3,c3,c3,c2,c1,c1,c1], [c1,c1,c1,c4,c4,c4,c4,c4,c1,c1,c1], [c1,c1,c1,c4,c4,c4,c4,c4,c1,c1,c1], [c1,c1,c1,c4,c4,c4,c4,c4,c1,c1,c1], [c1,c1,c1,c1,c4,c4,c4,c1,c1,c1,c1]
];
var lgth = 0;
var longest;
for(var i=0; i < shapeProperty.length; i++){ if(shapeProperty[i].length > lgth){ var lgth = shapeProperty[i].length; longest = shapeProperty[i]; }
}
console.log(lgth);
// End Entity Layout
// Create Entity Object
function spawnEntity(shapex, shapey, shapevx, shapevy, lgth){ entitiesIndex++; this.id = entitiesIndex; this.width = cs; this.height = cs; entities[entitiesIndex] = this; this.color = shapex; this.y = ch + Math.floor((Math.random() * 1500) + 1); this.vy = -50; this.shapex = shapex; this.shapey = shapey; this.shapevx = shapevx; this.shapevy = shapevy;
}
//End Creating entity Object
// Entity Dawing Pramiters
spawnEntity.prototype.draw = function(){ this.y += this.vy; this.width = cs + 1; this.height = cs + 1; this.x = ((this.shapevx * cs) + (cw / 2)) - ((lgth * cs) / 2); this.toy = this.shapevy * cs; context.fillStyle = this.color; if(this.y <= this.toy){ this.y = this.toy; this.vy = 0; } context.fillRect(this.x,this.y,this.width,this.height);// Position and size object
};
// End Entity Drawing Peramiters
// For loop to spawn objects
for(var y = 0; y < shapeProperty.length; y++) { // Loop through rows in the var shape = shapeProperty[y]; // Grab the current row for(var x = 0; x < shape.length; x++) { // Loop through columns in the row new spawnEntity(shape[x], shape[y], x, y); }
}
// End for loop to spawn objects
// Draw Entity
setInterval(function(){ context.fillStyle = bgcolor; context.fillRect(0,0,cw,ch); for(var i in entities){ entities[i].draw(); }
}, 30);
// End Drawing
LightBulb - Script Codes
LightBulb - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 3.5
Size 2,561 Kb
Views 8,096
Do you need developer help for LightBulb?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Darryl Huffman (darrylhuffman) Script Codes
Name
Spilled Galaxy
Math
Followers Solar System
Fur
Hot Arrrr Balloon.
Let it snow, let it snow, code the snow.
BLACKHOLE - A Canvas Experiment
Orbit
A Perfect Orbit
Simple SVG Charts
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!