#ScaleEffect

[spirearchitecture-blog]

The Influence of Architectural Scale on Human Perception

How the Size and Proportions of Spaces Impact Our Experience and Well-being

Architectural scale—referring to the size and proportions of spaces in relation to human dimensions—plays a crucial role in shaping our perception and comfort within a building. Whether it's a grand entrance hall or a cozy nook, the scale of a space can significantly influence how we interact with and feel within our environment. Understanding the psychological and emotional effects of scale helps architects create spaces that are not only visually pleasing but also enhance the overall experience of those who inhabit them.

In this blog post, we'll explore the impact of architectural scale on human perception and comfort, and provide insights on how architects can effectively manipulate scale to create inviting and functional spaces.

The Psychology of Scale in Architecture

Architectural scale affects more than just the visual impact of a space—it has profound implications for our psychological and emotional well-being. How we perceive and interact with different scales can influence our sense of comfort, openness, and personal connection to a space.

Impact on Perception and Comfort:

Sense of Proportion: Properly scaled spaces can create a harmonious balance, making environments feel inviting and proportionate to our human dimensions.

Emotional Response: The scale of a space can evoke various emotions, from the grandeur of a high-ceilinged hall to the coziness of an intimate room.

Functional Efficiency: Correctly scaled spaces contribute to effective functionality, ensuring that areas are comfortable and serve their intended purposes.

Spatial Flow: The scale of architectural elements affects how smoothly people move through and experience different areas of a building.

Key Elements of Architectural Scale

Effective manipulation of scale involves careful consideration of several key elements. Here are some essential factors architects should address when designing spaces:

1. Proportional Harmony

Human Scale: Ensure that architectural elements and room dimensions are proportionate to the average human body to create a comfortable and relatable experience.

Room Dimensions: Balance room sizes with ceiling heights and overall space to achieve a sense of proportion that feels natural and inviting.

Architectural Details: Incorporate details like moldings, fixtures, and furniture that complement the scale of the room and enhance its overall harmony.

2. Ceiling Heights

Open vs. Intimate: High ceilings can create a sense of grandeur and openness, while lower ceilings can make spaces feel cozier and more intimate.

Adjustable Heights: Consider varying ceiling heights within different areas of a home to create dynamic and functional spaces.

Acoustic Considerations: Manage acoustics by selecting appropriate ceiling heights and materials to ensure comfort and sound quality.

3. Spatial Volume

Room Size: Design rooms with adequate volume to prevent them from feeling cramped or overwhelming, considering both length and width in relation to ceiling height.

Spatial Perception: Use volumetric design to influence how spaces are perceived, whether aiming for a sense of openness or creating a more enclosed, secure environment.

Multi-Use Spaces: Plan for flexible room sizes that can adapt to various functions and activities.

4. Scale of Architectural Elements

Furniture and Fixtures: Select furniture and fixtures that are proportionate to the room size, ensuring they enhance rather than dominate the space.

Windows and Doors: Design windows and doors with dimensions that align with the scale of the surrounding walls and overall room proportions.

Art and Decorations: Choose artworks and decorations that complement the scale of the room, enhancing visual interest without overwhelming the space.

5. Vertical and Horizontal Relationships

Room Relationships: Plan the vertical and horizontal relationships between rooms to ensure smooth transitions and functional flow.

Visual Connections: Create visual connections between spaces to enhance the perception of scale and promote an integrated design experience.

Spatial Hierarchy: Establish a clear hierarchy of spaces, with primary areas like living rooms and entryways designed to feel more expansive and secondary areas like utility rooms scaled appropriately for their function.

6. Light and Scale

Natural Light: Use natural light to enhance the perception of space, making rooms feel larger and more open.

Artificial Lighting: Implement lighting strategies that complement the scale of the room and enhance its functionality and ambiance.

Shadow and Light Play: Consider how light and shadow interact with different scales to create dynamic visual effects.

7. User Experience

Comfort: Ensure that the scale of spaces supports comfort, providing adequate room for movement and interaction.

Accessibility: Design spaces to be accessible and user-friendly, accommodating various needs and preferences.

Personalization: Allow for personalization within spaces, enabling occupants to modify or arrange elements according to their comfort and style.

Incorporating Scale into Design: How Architects Can Enhance Perception and Comfort

Architects play a key role in manipulating scale to improve human perception and comfort. Here’s how these elements can be thoughtfully integrated into your design:

Customized Spatial Planning: Tailor room sizes and proportions to suit the client's preferences and lifestyle, ensuring comfort and functionality.

Harmonious Proportions: Design spaces with proportional harmony, ensuring that all elements work together to create a cohesive and inviting environment.

Dynamic Ceiling Heights: Utilize varied ceiling heights to create distinct zones and enhance the emotional impact of different areas.

Functional Volume: Plan for adequate room volume and flexibility, accommodating various uses and activities.

Complementary Elements: Choose furniture, fixtures, and décor that align with the scale of the room, enhancing both aesthetics and functionality.

Effective Lighting: Integrate natural and artificial lighting solutions to enhance the perception of scale and create a pleasant atmosphere.

User-Centric Design: Focus on the comfort and accessibility of spaces, ensuring that they meet the needs and preferences of the occupants.

Conclusion

Architectural scale significantly impacts how we perceive and interact with our living environments. By thoughtfully considering scale and its effects on human comfort and perception, architects can create spaces that are not only visually appealing but also functionally enriching. At Spire Architecture Inc., we specialize in designing spaces that harmonize scale and functionality, enhancing your overall living experience.

Ready to explore the impact of architectural scale on your home? Contact us today to schedule a consultation and discover how our expertise can transform your living spaces.

For more insights on luxury home design and architecture, explore our blog and follow us on social media for the latest updates and inspiration.

Spire Architecture Inc. is a boutique architectural design-build firm based in northern California.

[arthurknopper]

SwiftUI ScaleEffect Tutorial

In SwiftUI the ScaleEffect modifier can be used to shrink or enlarge the containing view . The content of the view will be altered not the frame size. In this tutorial a text view is displayed for which the scale effect can be changed using sliders and toggles to change the scale value. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIScaleEffectTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { // 1. @State private var xScaleEffect = 1.0 @State private var yScaleEffect = 1.0 @State private var isFlippedVertically = false @State private var isFlippedHorizontally = false var body: some View { VStack(spacing: 40) { Text("ScaleEffect") .font(.title) // 2. .scaleEffect(x: isFlippedVertically ? -1: 1) .scaleEffect(y: isFlippedHorizontally ? -1: 1) // 3. .scaleEffect(x: CGFloat(xScaleEffect)) .scaleEffect(y: CGFloat(yScaleEffect)) // 4. .border(Color.red, width: 2) // 5. Slider(value: $xScaleEffect, in: 0.0...5.0) Slider(value: $yScaleEffect, in: 0.0...5.0) // 6. Toggle(isOn: $isFlippedVertically) { Text("Flip Vertically") } Toggle(isOn: $isFlippedHorizontally) { Text("Flip Vertically") } Spacer() } .padding() } }

The State properties are declared which will hold the scale values and the flipped booleans in both directions.

The ScaleEffect modifier can be applied with negative values to flip the text View.

The scaleEffect contains a x and y value of type CGFloat which applies the scale. The default scale value is 1.0.

The border modifier is used to show the ScaleEffect modifier does not effect the frame size of the text view.

The sliders can be changed to change the x and y scale values

The toggles can be used to flip the text in both directions

Go to the Preview and select the Live Preview button. Change the sliders and toggles to change the scale effect on the text view.

The source code of the SwiftUIScaleeffectTutorial can be downloaded at the ioscreator repository on Github.

[babyawacs]

@handelsblatt @beckyquick @wsj @ft @business @berlin @ecb @bundestag @bundesrat @jchatterleycnn sellout of dom estic small crownjewels of former german economy like #vissmann‎ ‎ is likely noncompetitive product range simply the scale effects from asian competition is only a part of the problem :it amplifies principal lack of competitiveproducts. th efoundermayhave a superior wicked vision ‎but it boilsdown to competitiveness iftheproducts can compete and scaleeffect pr icing

@handelsblatt @beckyquick @berlin @bundesrat @bundestag @ecb @wsj @ft @business @jchatterleycnn sellout of domestic small crownjewels of former german economy like #vissmann is likely noncompetitive product range simply the scale effects from asian competition is only a part of the problem :it amplifies principal lack of competitiveproducts. thefoundermayhave a superior wicked vision ‎but it…

[myrtlecornish]

A Brief Tour of Swift UI

The best user interfaces are interactive and responsive to the user. UIKit is a capable framework that lets you build apps that users expect, but it can be tedious at time, not to mention having the flavor of an Objective-C toolkit.

SwiftUI takes advantage of Swift’s modern language features, giving us a modern framework that hits modern programming buzzwords.

It’s Declarative. Describe your UI in broad strokes using simple code.

It’s Compositional. You take existing views and connect them together and arrange them on the screen as you want.

It’s Automatic. Complex operations, like animations, can be done as a one-liner.

It’s Consistent. SwiftUI can be run on all of Apple’s platforms. It will take care to configure your UI (such as padding distance between on-screen controls, or dynamic type) so that it feels at home on whatever platform it’s running, whether it’s a Mac or the AppleTV.

Views and View Modifiers

Views are the heart of SwiftUI. According to Apple:

Views are defined declaratively as a function of their input

A View in SwiftUI is a struct that conforms to the View protocol. They are unrelated to UIViews (which are classes). A SwiftUI View is a value type, composed of the data that explains what you want to display.

Here’s a simple view:

struct Simpleiew : View { var body: some View { Text("I seem to be a verb") } }

Here SimpleView conforms to the View protocol. To appease the protocol, you need to provide a body, which is an opaque type. By using some new syntax, some View, we’re declaring that body is some kind of View, without having to specify a concrete type. Check out Swift Evolution Proposal 244 for more about opaque types.

The body is some View that describes what should be on the screen. In this case it’s a simple text label with a default configuration. Your body can be composed of multiple Views, such as a stack that arranges images horizontally.

Because body is a View, and it’s an opaque type, nobody really cares if a given View ends up being a single on-screen entity or a bunch of views composed in a stack or a list. This lets us compose complex hierarchies easily.

Chain Reaction

SwiftUI Views are value types, so we really don’t have stored properties to modify their look and feel. We need to declare our look and feel intentions to customize our views.

SwiftUI has ViewModifiers, such as .foreground to change the foreground color or .font to change a view’s font, that applies an attribute to a View. These modifiers also return the view they’re modifying, so you can chain them:

Text("SwiftUI is Great!") .foreground(.white) .padding() .background(Color.red)

This declarative syntax is very easy to read, letting you accomplish a lot with little code.

Stacks

You can build hierarchies of views. In UIKit, we use UIStackView to make vertical and horizontal stacks of UIViews. In SwiftUI, there’s an analogous HStack and VStack views that let you pile views horizontally or vertically.

This view positions one label above another.

VStack { Text("Swift UI is Great!") .foreground(.white) .padding() .background(Color.red) Text("I seem to be a verb") }

There’s also ZStack that lets you stack views on top of each other, like putting a label on top of an image.

You’re welcome to nest multiple stacks to compose complex view hierarchies. The stack views will automatically provide platform-appropriate defaults and if you don’t like the defaults, you can provide your own alignment and spacing.

Lists

SwiftUI lists look like tableviews in UIKit. In SwiftUI, the framework does the heavy lifting, freeing you from data source boilerplate.

Setting up a list with hard-coded views is really easy. Setting it up is exactly like setting up a stack:

struct ListView : View { var body: some View { List { Text("Look") Text("A") Text("TableView") } } }

The views inside the closure of a list serve as static cells.

The List also has an optional data parameter (that conforms to the Identifiable protocol) where you can provide some data to drive the creation of the cells inside the table.

Here’s a struct of a contact:

struct Contact: Identifiable { let id = UUID() let name: String }

Having a unique identifier in your identifiable data helps with list selection and cell manipulation.

And here’s a View that hardcodes a list of contacts:

struct ListView : View { let contacts = [Contact(name: "Arya"), Contact(name: "Bran"), Contact(name: "Jon"), Contact(name: "Sansa")] var body: some View { List(contacts) { contact in Text(contact.name) } } }

This is the magic bit:

List(contacts) { contact in Text(contact.name) }

This is telling the list: “for every Identifiable in this list of contacts, make a new Text view whose text contents are the contact’s name. You can add new folks to contacts, and the list will contain more rows.

State and Binding

Static hard-coded lists are great for initial prototyping of your ideas, but it’d be nice for the list to be dynamic, such as populating it with data from the internet. Or insert and delete new rows, and to rearrange things.

WWDC 2019 session 226 Data Flow Through SwiftUI tells us:

In SwiftUI data is a first class citizen

To manage state within our app, SwiftUI provides stateful binding to data and controls using property wrappers. Check out Swift Evolution Proposal 258 for more about property wrappers.

Here we’re using the the @State property wrapper to bind an isEnabled property to a toggle control:

struct EnabledTogglingView : View { @State private var isEnabled: Bool = false var body: some View { Toggle(isOn: $isEnabled) { Text("Enabled") } } }

Another quote from session 226, Data Flow Through SwiftUI:

SwiftUI manages the storage of any property you declare as a state. When the state value changes, the view invalidates its appearance and recomputes the body.

The state becomes the source of truth for a given view.

@State is great for prototyping, and for properties that are intrinsic to a view (such as this enabled state). To actually separate your data layer from your view layer, you need BindableObject.

So say we’re setting up a preference panel, or some kind of configuration panel with a sequence of toggle buttons. First, a model object for each individual setting:

class Settings: BindableObject { var didChange = PassthroughSubject<Bool, Never>() var isEnabled = false { didSet { didChange.send(self.isEnabled) } } }

Notice that Settings is a reference type (a class), which conforms to the BindableObject protocol. The PassthroughSubject doesn’t maintain any state - just passes through provided values. When a subscriber is connected and requests data, it will not receive any values until a .send() call is invoked.

struct BindableToggleView : View { @ObjectBinding var settings: Settings var body: some View { Toggle(isOn: $settings.isEnabled) { Text("Enabled") } } }

take another look at this line of code:

@ObjectBinding var settings: Settings

That’s weird. It’s not an optional then what’s it initialized to? Well, because settings is declared with the @ObjectBinding property wrapper, this tells the framework that it will be receiving data from some bindable object outside of the view. This object binding doesn’t need to be initialized.

You inject a BindableObject into the View that should use it. Here’s how our Settings gets hooked up to this BindableToggleView:

BindableToggleView(settings: Settings())

Your view does not care where the data lives or how it is populated disk, cache, network, osmosis. The view simply knows that it will be binding to some object when available.

The @ObjectBinding property wrapper creates a two-way binding. Whenever a mutation occurs the view automatically re-renders.

@ObjectBinding requires dependency injection to provide the data object. That can be inconvenient.

To make this object available anywhere within your app without dependency injection you can use the environment. New with SwiftUI you have an environment object that contains all kinds of information like screen size, orientation, locale, date format, etc. If you stick an object into the environment then that object can be accessed anywhere within your app. Think of it as a dictionary that is globally scoped within your app.

So how do you use it? The @EnvironmentObject property can help you with this.

struct BindableToggleView : View { @EnvironmentObject var settings: Settings var body: some View { Toggle(isOn: $settings.isEnabled) { Text("Enabled") } } }

In the above example, everything remains the same as seen previously, except you replace @ObjectBinding with @EnvironmentObject.

To inject an object into the environment you call the .environmentObject method.

ContentView().environmentObject(Settings())

An instance of Settings is now injected into the environment and is available to you anywhere within your app. When the object mutates then every view bound to it will receive the update and re-render its view. You no longer have to maintain a mental model of all the dependency-injections to keep your user interface in sync.

Animation

Animations in SwiftUI work like any view modifier. Basic animations can be achieved using the withAnimation method.

Here’s a View with two text labels:

struct ContentView: View { @State var scale: CGFloat = 1 var body: some View { VStack { Text("This text grows and shrinks") .scaleEffect(scale) Text("Scale it") .tapAction { self.scale = self.scale == 1.0 ? 5.0 : 1.0 } } } }

Tapping the second text label alters the size of the first text label, alternating its size between normal and five-times larger. The scaling happens instantly without any animation.

It’s a one-liner to make it animate smoothly.

Text("Scale it") .tapAction { withAnimation { self.scale = self.scale == 1.0 ? 5.0 : 1.0 } }

withAnimation can take an argument that lets you customize the animation. You can call it with a .basic animation, or you can have more fun with .spring animation that gives you control to make a beautiful spring effect.

Conclusion

SwiftUI is a delight to use. The focus is on creating an app because SwiftUI gets out of your way, taking care of a lot of annoying details. Design rich, interactive user interfaces by composing reusable views. Ensure data is coming into the system and not worry about keeping the view and model layers in sync. Finally, easily add animations to make views come alive.

A Brief Tour of Swift UI published first on https://johnellrod.weebly.com/

[babyawacs]

@potus @vp .@vp .@potus .@gop @gop .@dnc @thedemocrats the #us needs 4trillion - 6trillion to rebuild economy over thenext 5years basedo n lighttower creation lighttower scope+scaleeffects + interconnect th em as value generation. then criticalthings to structuralchange added

@potus @vp .@vp .@potus .@gop @gop .@dnc @thedemocrats the #us needs 4trillion – 6trillion to rebuild economy over thenext 5years basedo n lighttower creation lighttower scope+scaleeffects + interconnect th em as value generation. then criticalthings to structuralchange added

@potus @vp .@vp .@potus .@gop @gop .@dnc @thedemocrats the #us needs 4trillion – 6trillion to rebuild economy over thenext 5years basedon lighttower creation lighttower scope+scaleeffects + interconnect them as value generation. then criticalthings to structuralchange added I am Christian KISS BabyAWACS – Raw Independent Sophistication #THINKTANK + #INTEL #HELLHOLE…

[arthurknopper]

SwiftUI Simultaneous Gestures Tutorial

SwiftUI allows gestures to be combined using simultaneous composition. In this tutorial an image can be scaled and rotated simultaneously using the rotation- and magnification gestures. This tutorial is made for iOS 14 and created witfh Xcode 12, which the can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUISimultaneousGestureTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { // 1. @State private var degrees: Double = 0 @State var scale: CGFloat = 1.0 var body: some View { // 2. let magnificationGesture = MagnificationGesture().onChanged { (value) in self.scale = value.magnitude } // 3. let rotationGesture = RotationGesture().onChanged { (value) in self.degrees = value.degrees } // 4. let magnificationAndRotateGesture = magnificationGesture.simultaneously(with: rotationGesture) // 5. VStack { Image(systemName: "star.circle.fill") .font(.system(size: 200)) .foregroundColor(Color.red) .gesture(magnificationAndRotateGesture) .rotationEffect(Angle(degrees: degrees)) .scaleEffect(scale) .animation(.easeInOut) } } }

Two State properties are declared representing the degrees of the rotation gesture and the scale of the magnification gesture.

A magnification gesture is declared as property. The magnitude is assigned to the scale property

A rotation gesture is declared as property. The current degree of the rotation is assigned to the degrees property.

Combines the magnification and rotation gesture to create a new gesture that recognizes both gestures at the same time.

A star image is displayed with the newly created gesture attached to the view. The scale- and rotationEffect modifiers will update the view when the gestures are triggered

Go to the Preview and select Live Preview. Rotate and Scale the star image simultaneously and the image view is updated in the preview.

The source code of the SwiftUISimultaneousGestureTutorial can be downloaded at the ioscreator repository on Github.

[arthurknopper]

SwiftUI Magnification Gesture Tutorial

The Magnification gesture uses pinch-to-zoom to scale an object .In this tutorial an image is displayed which can be zoomed in and out using this gesture.. SwiftUI requires Xcode 11 and MacOS Catalina, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select the Single View App template, and then click Next. Enter SwiftUIMagnificationGestureTutorial as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the project on your Mac.

Download the image, open the Assets library and drag the image to it.

Go to the ContentView. In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { // 1. @State var scale: CGFloat = 1.0 var body: some View { // 2. Image("apple-logo") .resizable() .scaleEffect(scale) .frame(width: 100, height: 100) // 3. .gesture(MagnificationGesture() .onChanged { value in self.scale = value.magnitude } ) } }

A state propery is declared, which keeps track of the current scale factor.

An image is displayed , with the current scale factor.

A magnification gesture is created, where the current magnitude is assigned to the scale when the magnitude changes.

Go to the preview window. Click the Live preview button. Hold the option key and drag the mouse over the image to scale the image.

The source code of the SwiftUIMagnificationGestureTutorial can be downloaded at the ioscreator repository on Github.

[arthurknopper]

SwiftUI Scale Image Tutorial

In SwiftUI images can be scaled with the scaleEffect modifier. In this tutorial an image is displayed, which can be scaled up and down with a slider. SwiftUI requires Xcode 11 and MacOS Catalina, for which the Betas can be downloaded at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select the Single View App template, and then click Next. Enter SwiftUIScaleImageTutorial as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { // 1. @State var scale: CGFloat = 1.0 var body: some View { VStack { // 2. Slider(value: $scale, in: 1.0...10.0, step: 0.1) .padding(.bottom, 100) // 3. Image(systemName: "cloud.rain") .scaleEffect(scale) } } }

A State property is declared with an initial scale value of 1.0, which is the default size of the image

A Slider is displayed from range 1-10 where each step increments the scale value by 0.1

The scaleEffect modifier scales the image with the current scale value

Go to the preview pane and click the live mode button. Drag the slider to change the scale value of the image.

The source code of the SwiftUIScaleImageTutorial can be downloaded at the ioscreator repository on Github.

[irokotoff]

ROKOTOFF SELVEDGE DENIM

Scale Effect #88.1961 Made in the USA (New York)