47 skills found · Page 2 of 2
LucasHartman / MayaScript HouseGenerator‘Generative House Algorithm’ was constructed for one simple reason, being one click away from creating a range of uniquely designed model houses. At the beginning of 2020, the start of the covid-19 pandemic, I started learning programming. My background is in developing 3D motion graphics, but my work goes into different directions. I feel inspired by trying out new things, but often feel constrained by the software I use. I never found the right software that could satisfy my every need. A few years back, I visited a motion graphics event in Prague. Here I saw a presentation by Simon Homedal from Man vs. Machine and he introduced me to procedural programming for digital art. And so my journey into learning to code started. Being stuck at home because of covid-19, I was presented with a change to really jump in and start developing a few coding projects. I started out with a simple board game in Java, where I was introduced to ‘object oriented programming’ and UI development and many other general concepts. At the end of this project I came to the conclusion that simple programming is not enough, I needed to combine with something I already have experience of. So I started using Python inside Maya, focusing on asset development of simple programs I could execute whenever I’m working on a 3D project. At the time I was wondering if I could deconstruct houses to an algorithm. The inspiration for this project came from wandering around the residential areas where I lived. Zandberg has very diverse styles of architecture; Terrace houses with high ceilings, classical villas with roofs made of straw and modern villas built after WWII. I was captivated by the diversity in design. Breakdown A simple UI inside Maya, where the uses can specify the value for generating a number of houses. Simple things like level and roof height, number of doors, max number of levels, etc. Lastly a button that would take in the value and run the algorithm. The back-end consists of a number of Python modules, textures and .obj files. One Python file called the “Main”, is where the files are assembled and executed. Process Developing a generative algorithm is a process of trial and error. At the start of the project I treated the project like any other modeling project, only every design decision was programmed in with a number of possible solutions. Over time this would become very complex and unstructured. It became impossible to go back and modify what I already wrote down. Another problem was that the algorithm was creating the model for running the code. This meant that selecting, adding and subtracting mesh to the model cost a lot of processing power, to the point my computer would freeze up. I needed to rethink my process and develop a framework which is easy to modify and light on the processor. My new plan of attack was to do as little as possible in Maya. All design instructions needed to be solved before anything can be created in Maya. Going into this direction was a hard choice. First off, it’s not a guarantee for success. The moment I would go too deep, things can get messy very easily. Besides I consider myself more of a visual thinker. Working outside of Maya meant every hurdle would be some sort of math problem. I already knew I had no choice, and understood this is the type of problem solving a programmer has to deal with. So I started out doing a little bit of RnD. My first test was to create a number of lists. Generally every list would hold some type of value. Like positional data, labels, dimensions, objects etc. and the rest would be a range of functions iterating, generating, gathering, and sorting data into these lists. These seemed flexible enough, if I needed to add new details to the model, I would make a new list and apply this into the framework. This type of framework was not very structured as I hoped. Luckily I discarded this ideal before it really began. I was already attracted by the idea of using a matrix instead of lists at the top of lists. The matrix would provide data in three dimensions, like a volume or a box made out of separate units. I would add an extra dimension to each unit, which is a list of six values. Each value would represent each side of a unit. The general ideal of a matrix is like a fluid simulation, which is made out of a matrix of voxels, or like Minecraft where each unit can be some type of block. This would create a data structure that is easy to modify. The next step would be to feed the matrix with values. A value can represent walls, doors, windows, levels, rooftops, position and direction. It starts with an empty matrix, and secondly fill it with values of 1 (later on inside Maya, value 1 would generate a wall, the location within the matrix would be translated to 3D space). If you’d stop here and translate the matrix to mesh in Maya, you would get a cluster of boxes stacked next or on top of each other. Adding more data to the matrix meant it needed to structure itself, so it would generate a cohesive design. If not the final result would be a house with holes in the wall or floating rooms. Therefore a number of functions are needed for searching for patterns, and modifying the data. A standard function would iterate over each unit in the matrix and check the neighboring values. If some sort of condition is met, the proper value will be modified. Going back to our cluster of boxes example. If a has a neighbouring box in front and to the left, but nothing on top, this would be a condition where a corner roof would be generated. And so different functions would solve design problems. In the end you would be left with a matrix of values that would serve as a blueprint for generating in house inside Maya. Finally the model needs to be made in Maya. A number of parts like a wall, door or window are generated or imported in Maya. When iterating over the finished matrix, a certain value in a certain place in the matrix will decide which objects (example wall or roof) needs to be instanced and placed in the right position and direction. When the matrix is fully realised in Maya the model gets a final cleanup, by merging the model, deleting unused parts and empty groups. What is left is the house model. If a range of houses needs to be generated, the process is simply looped over a number of times. Final word This project took way longer than I had anticipated and is far from finished. I learned a lot and at the same time it feels like I have only just begun. I hope to pick up this project again in the near future. I would love to add more elements to the house, like roof-windows or balconies and create procedural shaders. And possibly try out machine learning or some type of genetic algorithm. If you have any questions or are intrigued please contact me at ljh.hartman@gmail.com. Cheers!
sebastiandedeyne / LightbulbProject natural shadows under elements based on the position of a light source
Mihonarium / Hass Spatial Lights CardBetter picture-elements card. Spatially arrange and control multiple Home Assistant light entities from a single, highly visual Lovelace card. The Spatial Lights Card lets you drag your lights into meaningful locations, multi-select groups, and fine-tune colors, brightness, and temperature without leaving the dashboard.
all-my-frontend-mini-projects / Fylo Landing Page Two Column Layout Frontend ProjectIntroducing the Fylo Landing Page project, a landing page for the Fylo website in a light theme. Users can view the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. Explore the sleek and intuitive design of the Fylo Landing Page project today!
jaydjoshi / ResponsiveResponsive Web Design Testing Tool is a web based emulator which displays the behavior and layout of a website in different devices i.e. mobile, tablet and laptops in the browser. Devices Information can be customized, as in the device name ,width , height, pixel density can be specified in the tool. This tool is light weight client side web application, which can be integrated to any website. This tool is built to do one thing very well i.e. to show you how visual elements of your site respond to different screen sizes and enables user to view website UI in various devices on a single page. This tool helps website makers quickly get an indication of how their responsive site will look on the most popular devices.
Suchitraheggade / Hacker5. Hacker and traffic lights Zolo is stuck in a traffic due to dysfunctional traffic light. Zolo is a professional hacker and he can get into the system and change the state of the light. His planet has different types of traffic lights such that there are N bulbs on the traffic board and only when all of them are green(G) the cars can pass. there are 2 other states also which the bulb can show; i.e. Red(R) & Yellow(Y). Note that the lights are designed such that they follow a state change cyclic pattern as follows: R------>Y------>G------->R Once Zolo gets into the system he can select any position i and update all elements between i to min(N, i + K - 1) by increasing their state by 1.This whole process takes 1 sec and he can repeat this process any no. of times until he gets all lights = G . Find the minimum time to do the process as Zolo is getting late for work.
Aycom366 / TodoDrag# Frontend Mentor - Todo app solution This is a solution to the [Todo app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents - [Overview](#overview) - [The challenge](#the-challenge) - [Screenshot](#screenshot) - [Links](#links) - [My process](#my-process) - [Built with](#built-with) - [What I learned](#what-i-learned) - [Continued development](#continued-development) - [Useful resources](#useful-resources) - [Author](#author) - [Acknowledgments](#acknowledgments) **Note: Delete this note and update the table of contents based on what sections you keep.** ## Overview ### The challenge Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - Add new todos to the list - Mark todos as complete - Delete todos from the list - Filter by all/active/complete todos - Clear all completed todos - Toggle light and dark mode - **Bonus**: Drag and drop to reorder items on the list ### Screenshot  Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. **Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** ### Links - Solution URL: [Add solution URL here](https://your-solution-url.com) - Live Site URL: [Add live site URL here](https://your-live-site-url.com) ## My process ### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox - CSS Grid - Mobile-first workflow - [React](https://reactjs.org/) - JS library - [Next.js](https://nextjs.org/) - React framework - [Styled Components](https://styled-components.com/) - For styles **Note: These are just examples. Delete this note and replace the list above with your own choices** ### What I learned Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. To see how you can add code snippets, see below: ```html <h1>Some HTML code I'm proud of</h1> ``` ```css .proud-of-this-css { color: papayawhip; } ``` ```js const proudOfThisFunc = () => { console.log('🎉') } ``` If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. **Note: Delete this note and the content within this section and replace with your own learnings.** ### Continued development Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. **Note: Delete this note and the content within this section and replace with your own plans for continued development.** ### Useful resources - [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. - [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. **Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** ## Author - Website - [Add your name here](https://www.your-site.com) - Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) - Twitter - [@yourusername](https://www.twitter.com/yourusername) **Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** ## Acknowledgments This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. **Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
yomotsu / MatchHeightNo dependencies, Light weight, Makes elements equal height.
Zenoyui / 3D Registration Login3D Registration & Login Form A modern registration and login form utilizing HTML, CSS, and Three.js for a dynamic 3D background. Features include responsive design, dark/light theme toggle, and smooth transitions between forms. This project enhances user experience with interactive elements and basic input validation.
hep-mh / AcropolisA library that enables the calculation of photodisintegration constraints for a variety of BSM scenarios
numixproject / Numix Gtk Theme LightA modern flat theme with light elements.
admin-shell-io / IdA collection of IDTA-managed Asset Administration Shell Identifiers and registration process. This repository acts as a quick and light-weight solution to maintain the elements of the https://admin-shell.io/ namespace. Note that there is no website serving the namespace URL at the moment.
katendeglory / Soft Ui LibraryA Collection of UI Elements implementing a neumorphic design pattern with light/dark mode toggle.
jason4293 / Css DrillsCSS Drills The purpose of this lab is to practice your CSS fundamentals. We'll be learning how to use and understand the position property, and how order of specificity works in CSS. Let's go! Setup Create a new project folder and connect it to a github repository. Copy the text from this README.md file into it. Create an index.html file and a styles.css file. Use the ! emmet shortcut to stub out the page. In the <head>, link the the CSS file to the HTML page. Build the HTML Structure In the body element, create a div with an id of "container" Add 4 div elements with a class name of "boxes" and a unique id (box1, box2, boxN) inside the container div. Each added div will be a child of the container div and a sibling to each other. Create an <h2>, <p>, and <a> element inside of each of the 4 div's. Add the following content to the elements: h2: Add a story title in each header p: Add a story description within each paragraph a: Add a link that says "Read More" Now, Lets style! Text and Body Styling Assign a global font family Here is a list of some Web Safe Fonts: https://www.w3schools.com/cssref/css_websafe_fonts.asp You could also play around with Google Fonts: https://fonts.google.com/ Hint: use the body selector. Change the background color for the body element to a light grey color. Use a multiple selector rule set to center the text for all h2, p, and a elements. Use an element selector to remove the default underline styles for anchor tags and change the font color: When you refresh your browser you'll notice that the link is not centered like the h2 and p elements. This is because text-align will center the element based on the width assigned to it. If you apply a border to the link tag, you'll see that the link is centered inside the anchor element. The best way to center the link, relative to its parent element, is to enclose it inside of a div element. Wrap the anchor element inside of a div and give the div a class name of "readme-wrapper" Replace the a in the multiple selector rule with .readme-wrapper Now refresh and you'll see the link is centered as we expected it Add a CSS :hover selector so that when the link is moused over the cursor changes to a pointer, the font is bold, and text color changes. Wrap a single word in each paragraph element inside of a span element and assign it a new font color and font weight. Box Styling Use a class selector to target the .boxes class: add margin add padding add a solid border with a custom color add a border radius to round the edges of the border add a width of 30em Use an id selector to add a unique background color to each div. Your lab at this point should resemble something like this, with the colors and margin/padding sizes being different for you, of course! Boxes before being re-positioned Position, how does it work?! Change the display to inline-block in your boxes class selector. Notice how the .boxes divs will now sit next to each other because of this rule. inline-block will make block level elements flow next to each other based on their size, instead of taking up the entire block! Change the display to block in your boxes class selector. Notice how it goes back to the previous flow without any display change? That's because by default div elements follow block rules by default! Cool. We're gonna leave it on block for now to do the next steps .. Change the position of the second box div to be relative to its parent. Changing that didn't seem to do anything to the flow of the page, right? Now position the second box div to be to the right of the first. Hint: try using bottom and left properties on the second box div with various values. We're "nudging" this div from where it should be in the flow of elements It won't be perfect, but it should resemble something like this, and take notice that the element flow acts as if that div is still in its original spot! We've moved this element relative to where it's supposed to be, without breaking the original flow of html elements Now change the second box div to position absolute Madness!! Notice how it moved somewhere strange, and now the other box divs act as if the second one isn't in the flow anymore Adjust your position using any of the top, bottom, left, right properties to get it back to being next to the first div. It should look something like this, and notice that the other divs flow as if the "absolute" div isn't included anymore! Remove the position styling (including all the top/bottom/left/right) from the second box div. This should make it return to what it looked like before being re-positioned. Add a new new div element in your HTML above the h2 elements in each box. These will not wrap anything, but rather be stand alone, i.e. <div></div>. These divs will be representing "images" for each box Give all four of these divs a custom class name they all share. Select that class in your CSS, and add the following properties: add a height and width property with a value of 50px add a border radius property of 50px add a custom background color You should have something close to this with those divs added and styled, with your own color, of course! Use your new knowledge of positioning to get that circle next to the h2 element! Shoot for a goal looking similar to this screenshot. It probably won't be perfect and it might scale strangely if you change your browser size, but that's okay! Raw CSS is tricky. We'll learn better ways to handle these issues later. :) Styling Specificity The following HTML code will be below the .container div, but still within your </body>. So under all the box business you've been coding so far. Below the boxes, insert 3 h1 tags into the html document, give each text for your favorite TV shows. Apply styling so that all h1’s have a font color of your choice. Add 2 more h1’s with 2 other TV shows. What immediately happens to their font color when you refresh the html doc? Give all the original 3 h1’s the class name "original" Give the additional 2 h1’s the class name "additional" Apply styling by class name, have the first 3 h1’s get a new font color (don’t delete or comment out the original styling). Once you apply a new font color by class, refresh the page and see what it does. Do the same thing for the additional 2 h1’s, give them a different font color by class name. Take note at what which font color rule is in effect. Class is more specific than element in CSS selectors! So it'll override the element selector styling and use the class selector styling. Rank each TV show you have (so all 5 h1’s), a rank of show1 would be the best. Have the rank be the id of each h1. At this point every h1 should have a class AND an id attribute. Apply styling using the id of each h1, give each a different color. Refresh the document and see how this type of styling changes what was already applied. Take note that your class selectors are now overridden by the id selectors! They are more specific and will use those styles instead of the class or element selectors on these h1's. Below the h1's, create 3 unordered lists, each with 5 items, have the first list be 5 friend's names, have the next be 5 places you want to travel, and have the last list be your favorite restaurants. Apply styling to all the unordered lists using an element selector changing their font color. Add the class "star" to the second and third unordered list. Apply styling to the class "star" changing the font color. Add the id "wars" to the third unordered list. Apply styling to the id "wars" changing the font color. Take note again on the order of specificity between element, class, and id selectors. element selector styling < class selector < id selector. Wrap each list in a div, give the div a border that is 2 pixels thick, have it be solid and the color be black. It'll look like a multi color fiasco, but the purpose here was to learn how specificity works! But isn't styling fun? We know it can be tricky and tedious, but the more you practice, the better you'll get at it. After a while, you won't even think about it anymore :)
hfalucas / Vue AutosizerA light replacement for built-in <textarea> and <input> elements allowing them to automatically grow to fit the content.
txdm / Eazy LightEazy Light is a light Sublime Text color scheme for web developers that blends elements from Chrome Developer Tools, XCode, classic BBEdit, and Eifell coloring. Optimized for HTML, CSS, and JavaScript.
law-chain-hot / Mk Guide:hammer_and_wrench: A light JavaScript library to guide the user to focus the important part, including {position: fixed} element's children elements
IslemMedjahdi / Do Me Todo AppDoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode
YashNK / React Glass UiA customizable React component library for creating elegant glassmorphism interfaces. It provides flexible, interactive UI elements, such as cards, buttons, and inputs, with effects including blur, saturation, distortion, light glow, and hover.
scclie / In Search Of LightThe "In Search of Light" is a platformer with elements of action and adventure in a medieval-magical world. The main character is a knight who must go through many traps and trials in caves to find artifacts and defeat an evil sorcerer in order to get out of the caves.
